Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

Cara mempercepatkan loading blog

Kecepatan loading sesuatu blog amat berpengaruh pada pencarian melalui sesuatu search engine.Blog yang mempunyai banyak gambar akan melambatkan lagi proses loading sesuatu blog.Bagi mengatasi masaalah ini,kod skrip boleh dimasukkan bagi mempercepatkan loading blog


Cara membuatnya:
1.masuk ke dashboard  blogger
2.Klik  template dan pilih edit html
3.Cari kod </head> dan masukkan kod dibawah ini diatasnya:

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&amp;&amp;!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
4.Kemudian simpan template anda

Widget artikel terkini dengan efek sliding

Widget dari blogger kebanyakan adalah dalam bentuk statik.Dengan sedikit ubahsuai dengan menjadikan ia bergerak akan nampak lebih menarik lagi.Widget ini seakan seakan seperti pada artikel cara pasang widget animated recent post tetapi lebih menarik lagi kerana tidak meninggalkan ruang kosong apabila bertukar artikel.

artikel terkini animasi

Langkah langkah bagi membuatnya:
1.Masuk kedashboard blogger
2.Pilih layout....Add a gadget

layout dashboard blogger

3.HTML/Javascript
4.Masukkan kod dibawah ini

 <div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

</div>

Nota:
a)kod berwarna oren adalah kecepatan berpindah dari post ke post
b)kod warna merah pula adalah jumlah artikel yang hendak dipaparkan
c)kod berwarna hijau masa berhenti/pause
 Yang boleh anda ubahsuai jika diperlukan


5.Kemudian klik save untuk menyimpan widget anda.

Widget popular post hitam dan merah

Sebelum ini admin pernah membuat artikel mengenai Cara pasang widget popular post  berwarna warni.Kali agak berbeza sedikit kerana ia berwarna hitam dan merah serta akan bergerak bila dilalukan mouse diatas nya.

cara memasangnya pada blog:
1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout dan klik pada Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang sesuai


3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F
Kemudian letakkan kod ini diatasnya

/*Popular Post by http://www.bloggerspice.com */
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li:hover {
border:4px groove #fff;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px;
color: #ffffff;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
min-height: 30px;
orphans: 2;
padding: 0px;
text-align:-webkit-auto;
text-decoration: none !important;
text-indent: 0px;
text-transform: none;
white-space: normal;
widows: 2;
word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px;
}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border:2px solid #ccc;
background:#353535;
box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{
background:#000000;
width:90%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#C50101; width:93%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#1a1a1a ;width:93%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{
margin:0;
padding:0px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:6px 0;
border: 1px solid #c2c0b8;
-webkit-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
padding:10px;
}
.PopularPosts .item-title a{
font: normal bold 36px Segoe UI;
font-size:16px;
color: #ffffff;
}
.PopularPosts .item-title a:hover{
color:#ffffff;
text-decoration:none;
}
.widget-content.popular-posts li{
font: normal normal 16px Segoe UI;
}
.item-snippet {
height:2.5em;
overflow:hidden;
}

5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template

sumber:bloggerspice

Cara pasang expandable recent comments

Widget Recent Comments  adalah  Widget Blogger baru, yang menampilkan ulasan pembaca bersama-sama dengan Tarikh dan masa.Widget ini yang sangat menarik yang membolehkan anda mudah melihat kandungan Komen, anda tidak perlu klik pada pautan tajuk atau commenter untuk menunjukkan komen.
komen
Cara memasangnya:

1.Pada dashboard klik layout dan pilih Add a gadget
2. Kemudian pilih HTML/Javascript
3.Salin kod dibawah dan masukkan padanya
<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;
}
</style>
<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>
<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://thatsblogging.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://teknikbuatblog.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>
<style type="text/css" media="screen"> .row-aa { background: #f2f2f3; } .row-bb { background: #F8F5F1; } .row-div { margin:0px; padding:5px; } .comment-header { font-size:0.9em; // border:1px solid #E0E0E0; // background-color:#F3F3F3; padding:4px; margin-top:10px; margin-bottom:5px; } .comment-box { margin:0px; padding:0px; font-size:0.9em; height:500px; overflow:auto; } .comments1 { // background: #F3F3F3; padding:3px; border-left:1px dashed #A6A6A6; color: #888888; font-style: italic; padding-top:4px; margin-bottom:5px; } .comment-footer { text-align:center; font-size:0.9em; padding:4px; margin-top:5px; } </style> <div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div> <div class="comment-box"> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script> <script type="text/javascript" src="http://teknikbuatblog.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"> </script> <script type="text/javascript" src="http://teknikbuatblog.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments"> </script> </div>
Nota:tukarkan http://teknikbuatblog.blogspot.com dengan alamat blog anda

4.Simpan widget anda

sumber:thatsblogging

Cara letak butang navigasi atas dan kebawah

Butang keatas dan kebawah boleh digunakan untuk menavigasi ke bahagian atas dan bahagian bawah kandungan halaman, terutamanya apabila pada halaman utama terdapat banyak rencana atau apabila artikel yang mempunyai terlalu banyak komen. Butang ini mempunyai fadeIn dan kesan fadeOut, ini bermakna ia akan pudar sedikit apabila kita bergerak ke bahagian atas bawah halaman dan ia mempunyai fungsi naik ke atas atau ke bawah blog


Cara meletakkan butang kebawah dan keatas

1.Pada dashboard pilih template dan klik edit HTML

2.Cari kod  ]]></b:skin> dengan menggunakan Ctrl+F

3.Letakkan kod dibawah ini diatasnya
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2YHhZApHtnyBTHwtgwgrh4TWwwGlfDIm8tKWODS5YWfICsZtILfv0xuYXPNDAbpZtVMc8HbBVfIhe9MEj80q80alEEVioGG7rM4gMBCdJW0dDHreW_D_nrr95FlqsQ8hyg7YP5p5eso8/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXvXnHzuvexSmLcTXrLeRYHIAC6J_KAnH2AtnYZwFG3SNpCf7VxSIhnCcrisfUXiqO3FXcC54GylhGo7epDy6NwcPe1Az4vGgYhOU1tGjiVGbE3JV6escC9fsJsZutkXEMUOT7zVcSis/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}


Nota:teks berwarna hijau adalah jika anda hendak mengubah kedudukan butang.
        Untuk menukar warna latar belakang ubahkan teks white dengan  warna yang dingini

4.Seterusnya cari kod </body>

dan letakkan kod ini diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>


5.Simpan template anda
sumber:helpblogger

Cara letak site map pada blog

Salah satu kekurangan yang ada pada blog ialah ia tidak mempunyai indeks atau peta laman bagi sesuatu blog bagi menyenangkankan pembaca mencari sesuatu kandungan posting.Blog archive dan labels pula tidak memaparkan keseluruhan kandungan,jadi untuk mencari sesuatu posting atau artikel yang diingini adalah agak sukar.

site map

Artikel kali ini akan membolehkan anda meletakkan site map pada blog yang akan memaparkan indeks kesemua post yang ada dan dipisahkan oleh kategori.Ia juga memaparkan posting terbaru dengan teks New!

Cara memasukkan site map pada blog anda:
1.Masuk ke dashboard blog anda dan pilih blog anda
2.Pilih pages dari senarai dan klik pada new page dan pilih blank page

letak pages pada blog


3.Pada ruangan posting klik pada tab HTML dan letakkan kod berikut:

 <style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://teknikbuatblog.blogspot.com/2014/01/cara-letak-site-map-pada-blog.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCug-zHsfY3Tm8SNjco26bXPG612xjCJimLF3iDWKL4FCrLjumT1NhGFk9nWVU20rPB50pyq096cmR-KVC8HU0-oB3f7di9vz9vMdYRWpy5Xf4WPwiGkzp__9URqxYAk67ZX-Vs4mTE2GJ/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://teknikbuatblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>


* ubahkan http://teknikbuatblog.blogspot.com dengan alamat blog anda
4.pada sebelah kanan klik pada Options dan pilih Don't allow (hide existing) for the reader's comments


5.Kemudian klik pada publish

Nota:
untuk mengubah warna dan saiz font tukarkan nilai pada teks berwarna merah
Untuk mengubah warna link pula pula ubah nilai pada teks berwarna hijau

sumber:helpblogger

widget label berbentuk daun

Label  adalah merupakan salah satu cara untuk memberikan kategori pada setiap postingan kita. Pemberian label pada setiap artikel kita, akan sangat bermanfaat untuk memudahkan pengunjung dalam memilih kandungan dengan kategori yang sesuai dengan yang mereka cari dan  membolehkan  pengunjung dengan mudah mengakses kandungan  yang mereka perlukankan.


Posting kali ini adalah unuk memberi kelainan pada paparan widget label.paparannya adalah berbentuk bujur sperti daun.bagi yang inginmembuanya berikut adalah langkahnya

Cara membuatnya.
1.Masuk ke dashboard blogger
2. Pilih template -> Edit HTML Cari ]]></b:skin> dan salin kod label seperti dibawah dan
    letakkan diatas kod ]]></b:skin>
3.Simpan template anda


.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}

Cara pasang widget related post nrelate

Sebelum ini Admin ada membuat posting tentang cara memasang artikel terkait linkwithin.Nrelate adalah satu widget yang serupa dengan linkwithin tetapi lebih menarik kerana anda mempunyai pilihan bagi mengubah setting pada widget ini.Terdapat enam styles widget yang boleh anda pilih serta pilihan untuk tidak memaparkan logo nrelate pada paparan widget.

related post

Cara memasangnya:
1.Masuk ke web nrelate.com
2.pada sebelah kanan web terdapat ruangan untuk daftar dengan nrelate

related post

3.klik pada create and acccount

related post
4. Isikan form yang muncul dengan butiran yang dikehendakki dan klik pada complete sign up
5.kemudian email akan dihantar bagi mengesahkan pendaftaran tadi
6.Buka email dan verify pendaftaran tadi
7.Selepas berjaya log in ke akaun anda
   Paparan berikut akan terpapar setelah berjaya log in ke akaun anda
 
related post

8.Klik pada menu install
9.Pada paparan seterusnya pilih logo blogger

related post


10.Masukkan url blog anda dan klik submitt

related post

11.Pilih version untuk widget anda

related post

12.Pada add page element pilih blog yang diperlukan dan klik add widget

related post

Jika anda ingin membuat perubahan pada widget,log in ke nrelate dan pilih menu setting,disana anda boleh menetapkan bentuk paparan dan sebagainya dan akhir sekali jangan lupa pilih save untuk menyimpan setting anda.

Cara buat borang tempahan

Dunia perniagaan secara online berkembang pesat,mempunyai satu laman web atau blog perniagaan adalah perlu bagi peniaga memperkenalkan jualan masing masing.Borang tempahan adalah suatu kemestian bagi sesuatu blog atau web perniagaan bagi membolehkan pelanggan memesan sesuatu barangan.Untuk tutorial kali ini saya akan tunjukan cara membuat borang tempahan yang membolehkan pelanggan memesan barangan dari laman blog perniagaan anda.
borang tempahan

Terdapat banyak laman web yang menyediakan borang tempahan secara online.Salah satunya adalah laman web response-o-matic.com.

Langkah bagimembuatnya:
1.Masuk ke web response-o-matic.com
2.Klik pada get started….

3.Isikan form signup yang muncul,isikan ruangan nama,email dan password dan klik sign up, paparan untuk sign in akan muncul jika anda telah berjaya mencipta akaun dengan response o matic.
4.Buka email anda untuk pengesahan pendaftaran, masukkan email dan password tadiuntuk log in
5.Selepas pengesahan email anda akan dibawa kepaparan bagimencipta form.Terdapat ruangan nama dan email(boleh dipinda dengan mengklik pada edit),klik pada add question untuk menambah butiran yang diperlukan pada form,bila dah siap klik pada continue.




6.Kemudian muncul option untuk form yang akan anda buat.Yang bertanda upgrade adalah option yang perlu anda bayar jika hendak menggunakannya.Pada bahagian ini masukkan butiran pada email & sms
notifications supaya bila ada tempahan anda akan menerima email,kemudian klik continue.
borang tempahan
 

7.Paparan kod html akan muncul,salin kesemua kod ini.
kod html

8.Log in ke blog anda
9.Klik pada pages dan pilih new page….blank page
page baru


new page

10.Masuk kan nama pages sebagai borang tempahan.klik tab HTML dan pastekan kod yang disalin tadi pada ruangan tersebut(bukan pada mode compose).Kemudian klik pada publish.
publish posting

Pada pages akan keluar senarai page yang telah dibuat tadi
senarai page

Tentunya bagi laman web atau blog perniagaan anda perlu membuat pages(halaman) seperti senarai produk,borang tempahan,hubungi saya dsb.Anda perlu buat langkah bermula pada langkah ke 9 untuk membuat halaman(page) yang berasingan.Pada pages terdapat tiga pilihan iaitu:

  • Top tabs ----tab navigasi berada diatas
  • Side links ----tab navigasi akan berada ditepi blog
  • Don’t show---jika anda ingin membuat link dengan butang link tersendiri.Anda perlu buka page dan ambil link yang terpapar pada ruangan search dibrowser.
Sebelum ini juga ada posting tentang membuat pages dan anda boleh rujuk disini.
Selamat mencuba …:)

klik butang +1 jika suka artikel ini :) :)

Facebook like box muncul bila blog dikunjungi

Widget Facebook like box ini akan muncul apabila pengunjung memasuki blog.Mungkin anda pernah meliha widget ini dipasang pada kebanyakan blog diwaktu ini.Ia boleh dipasang pada blogger dan juga wordpress.Widget ini boleh di tutup paparannya,bukan seperti sesetengah blog yang memasangnya seolah olah memaksa pengunjung untuk klik butang like.

Cara memasangnya:

Log in keblogger
Klik pada Layout >>Add a gadget


Pilih HTML/javascript


Dan masukkan kod dibawah ini
<style>
   
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
   
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
     
    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeHg2qjooQ_SSfWjxQbotxaQyk6zISw-V7MxtBJJZ5afEkryid_Dj3N2ww8Xfx1lUESCmHfqJIZmg3umKC_EflTYj6ScZBR9hqLSIBlbg5mcS1jXfNBAHDVFp_vwLjmCMXBv_KcXklxw/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeHg2qjooQ_SSfWjxQbotxaQyk6zISw-V7MxtBJJZ5afEkryid_Dj3N2ww8Xfx1lUESCmHfqJIZmg3umKC_EflTYj6ScZBR9hqLSIBlbg5mcS1jXfNBAHDVFp_vwLjmCMXBv_KcXklxw/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUunRZdyH0s5wXvLSZBmNklkf18Px7TJpBPx_sYK25Ce51wf0sFOK13QZcP2u0j9NAxPClZv2HT0fOH5HIhG3U8GPz92hTyrss2VJbXQMIoY3tQzLFtkAX0f1hm_3T7tvbcxRlVdprc3U/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgloxma4kurdGNWFPtBROxh6Ioa_4nmzwAa6q4dmnpzlKyOsqkGtKgcxaycymEr-aWqm8gsthFiJM6hZzX0IagZ99dSjWXSAispPRjfwMnblWR2vewwkuXgizAXZ6XRhFiD4M3HphEDS48/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUZirWx7fe_1smdsa-8wMKhKdsC-Q0dx3onbU-IzQyFUkjf7t2dxq5eHX76v4bNnZ-DciEfR0sn-QsR6qmqnGoMCZ_ZGKni2htKYkbE-zIqaKWRB6Y9Y9YBXmkoXDf_tB6WpuPvaD6UE/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}


    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="https://sites.google.com/site/teknikbuatblog/tbb/facebook%20pop-up.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
    
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
          <center>

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>


#Tukarkan bloggertricks pada kod diatas dengan username facebook anda

Kemudian klik pada save untuk melihat hasilnya:
Kredit untuk mybloggertricks 

update 8/5/2013

Cara pasang widget add me on google

Widget add me on google adalah seakan akan facebook like box.Ia adalah widget yang memaparkan jumlah follower bagi Google + Circle.Ia adalah widget yang membolehkan kita berhubung dengan pengunjung.







Langkah langkah bagi  memasangnya:
Dapatkan google+ id pada google plus profile page
Url contohnya adalah seperti dibawah ini
https://plus.google.com/b/()812701480064512353519/posts

1.Masuk ke web widgetplus.com
2.Klik pada butang get widget
3.Masukkan google+ id tadi pada tab basic setting (seperti contoh pada teks berwarna merah diatas)











   Beberapa setting lain juga boleh diubah seperti warna background,warna button,saiz  teks dan sebagainya.
4.Kemudian klik pada butang get code(yang akan muncul diatasnya) dan salin kod yang diberi
5.Masuk ke design>>Page elements>>HTML/Javascript
6.Masukkan kod pada widget dan simpan untuk melihat hasilnya.



klik butang +1 jika suka artikel ini :) :)

Cara pasang welcome image pada blog

Welcome image ini adalah imej akan terpapar bila kita mula mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya dah banya blog yang memasangnya dengan berbagai bagai imej.Jika ada berminat untuk membuatnya.Ikuti langkah seterusnya:


1.Log in ke Dashboard
2.Pilih Template >>Edit HTML >> proceed




3.Cari kod  ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:

</style></head>
<script language="javascript" type="text/javascript">
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}

function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}

function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center><img src="http://i219.photobucket.com/albums/cc282/garam63/welcome.png"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

#bahagian teks berwarna merah boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda

Update 1/11/2012
klik butang +1 untuk sharing artikel ini pada google :) :)

Cara buat simbol hati(love) berguguran

Tutorial kali adalah bagi anda yang suka menghiasi blog dengan bermacam macam widget iaitu cara membuatkan simbol hati yang berguguran pada blog anda.
Langkah langkah bagi membuatnya:
Log in ke blogger Pilih design--Layout--Add a gadget


layout


Pilih ruangan dibawah header


HTML/javascript






Masuk kan kod ini:
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=49 height=731 style='position:absolute; left:85%; top:6px; width:15; height:731px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=22 height=755 style='position:absolute; left:9%; top:170px; width:15; height:755px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=49 height=759 style='position:absolute; left:80%; top:70px; width:15; height:759px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=47 height=729 style='position:absolute; left:34%; top:70px; width:15; height:729px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=13 height=584 style='position:absolute; left:12%; top:128px; width:15; height:584px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=7 height=789 style='position:absolute; left:48%; top:170px; width:15; height:789px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=19 height=777 style='position:absolute; left:23%; top:140px; width:15; height:777px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=9 height=719 style='position:absolute; left:40%; top:91px; width:15; height:719px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=17 height=592 style='position:absolute; left:52%; top:181px; width:15; height:592px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=23 height=795 style='position:absolute; left:10%; top:1px; width:15; height:795px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=50 height=532 style='position:absolute; left:77%; top:1px; width:15; height:532px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=27 height=772 style='position:absolute; left:8%; top:8px; width:15; height:772px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=43 height=750 style='position:absolute; left:33%; top:174px; width:15; height:749px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=44 height=556 style='position:absolute; left:92%; top:197px; width:15; height:555px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=36 height=577 style='position:absolute; left:87%; top:185px; width:15; height:578px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=15 height=760 style='position:absolute; left:89%; top:47px; width:15; height:759px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.giff" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=8 height=786 style='position:absolute; left:29%; top:0px; width:15; height:785px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=31 height=720 style='position:absolute; left:29%; top:108px; width:15; height:719px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=46 height=531 style='position:absolute; left:38%; top:45px; width:15; height:530px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=39 height=573style='position:absolute; left:73%; top:129px; width:15; height:572px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGy-7uXVCfa6g0lms-dSunAXfvhYV_49FruvZwd1FtlA-qu1m2YYvOutmqL6-Qd98LBgUPkcieDLVNiEn7qUC_rt8t8-s9tIBLT38J2l-kVhGigiopO_Nj1wJVVQoeEsLVEWAFmxpL5g4/s1600/heart.gif" border="0" /></marquee>

Kemudian klik butang save dan lihat hasilnya.

update 9/5/2013

Ucapan kepada pengunjung bila meninggalkan blog

Kedatangan pengunjung keblog kita merupakan sesuatu yang diharapkan para blogger.Sebagai menghargainya, bolehlah kita letakkan ucapan  yang akan terpapar bila pengunjung hendak meninggalkan blog kita.

ucapan blog

Dibawah ini adalah cara membuatnya.

Masuk ke blogger pilih design ---pada dashboard,Klik pada template----edit Html


dan cari kod </head> pada template

Kemudian masukkan kod dibawah ini selepas kod </head>
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39; Terima Kasih kerana berkunjung,sila datang lagi.. &#39;);
}
parent.window.onunload=goodbye;
</script>
Gantikan teks berwarna hijau dengan teks yang anda inginkan
Dan seterusnya  klik save template.

update 9/5/2013

pasang radio online pada blog

radio era
Radio era adalah antara stesyen radio yg diminati.Mungkin ada yg berminat hendak memasang radio era blog masing masing .Berikut adalah cara memasangnya:

masuk ke Dashboard--Layout---add a gadget


 dan pilih HTML/Javascript


dan masukkan kod dibawah ini:

<center><div></div><div><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="145" height="50"></object></div></center>


 Radio sinar FM
<embed name="plugin" src="http://ads.sinar.fm/inc/app/shared/dvrplayer/capsules/sinar.swf" type="application/x-shockwave-flash" width="199px" height="46px"></embed>
saiz boleh diubah pada width dan height pada kod diatas.

 Hitz Fm
<center><iframe src="http://ads.hitz.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/hitz/index_t.html" width="640" height="360" scrolling="no" frameborder="0"></iframe></center>

 ria89.7 fm
<p><embed name="mediaplayer1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" showstatusbar="1" enablecontextmenu="false" autostart="true" transparentstart="1" loop="0" controller="true" filename="http://www.mediacorpradio.sg/radioliveplayer/asx/ria897/fm897.asx" width="320" height="63"></embed>
kemudian klik save.

update 9/5/2013