Cara pasang sharing widget dibawah blog post

Share button yang ni amat unik kerana mengandungi semua share button bagi halaman sosial,yang mana bukan sahaja mengandungi facebook share button,malah google plus,digg,twitter dan lain2.Saya amat menggalakkan korang semua agar menggunakan tutorial ini berbanding dengan tutorial share button yang telah saya ajar sebelum ini.Untuk demonya korang boleh jer tengok dibawah post ini.Terima kasih kepada My Blogger Tricks kerana berjaya menyediakan tutorial yang berguna ni.

Langkah 1
Pergi ke Dashboard > Template > Edit template > Expand widget template

Langkah 2
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod <data:post.body/>


Langkah 3
Copy kod dibawah kemudian pastekan ia selepas kod <data:post.body/>

<style> 

/*--------Flipper Sharing Widget ------*/ 

.flipper a { 

display:block; 

height:48px; 

width:48px; 

padding:0 4px; 

float:left; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpg76XAIFBdqXuLg3xQ5nTJV9D1hbAIrHbPdzH3IqngTqBEPxbC1B0-ZTLPTcbSncMnIDbiS7RdssIelrmnzkTHU9J56CJvn_IDS-DeLfbiFiceXoWoONL3q2w2QQlU3byS4RpZraviFJd/s1600/flipper.png) no-repeat; 

-webkit-transition: ease-in 0.15s all;    

-moz-transition: ease-in 0.15s all;    

-o-transition: ease-in 0.15s all;    

-ms-transition: ease-in 0.15s all;    

transition: ease-in 0.15s all; 

cursor:pointer;

}

 

.flipper a.googleplus { 

background-position: 0px -348px;

} 

.flipper a.googleplus:hover { 

background-position: 0px -406px;

}

.flipper a.pinterest { 

background-position: 0px -464px; 

} 

.flipper a.pinterest:hover { 

background-position: 0px -522px;

}

.flipper a.delicious { 

background-position: 0px 0px; 

} 

.flipper a.delicious:hover { 

background-position: 0px -58px;

} 

.flipper a.digg { 

background-position: 0px -116px;

} 

.flipper a.digg:hover { 

background-position: 0px -174px;

} 

.flipper a.stumbleupon { 

background-position: 0px -812px;

} 

.flipper a.stumbleupon:hover { 

background-position: 0px -870px;

} 

.flipper a.technorati { 

background-position: 0px -928px;

} 

.flipper a.technorati:hover { 

background-position: 0px -406px;

} 

.flipper a.twitter { 

background-position: 0px -928px;

} 

.flipper a.twitter:hover { 

background-position: 0px -986px;

} 

.flipper a.facebook { 

background-position: 0px -232px;

} 

.flipper a.facebook:hover { 

background-position: 0px -290px;

} 

.flipper a.reddit { 

background-position: 0px -580px;

} 

.flipper a.reddit:hover { 

background-position: 0px -638px;

}

.flipper a.rss { 

background-position: 0px -696px;

} 

.flipper a.rss:hover { 

background-position: 0px -754px;

}

.Pleaseshare{ 

margin:10px 0px; 

color:#333333; 

font-weight:bold; 

font-size:20px; 

font-family:sans-serif;

} 

</style>

<div class='flipper'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare"> 

Please Share it! :) 

</div>

<!--Google Plus--> 

<a class='googleplus' href="http://plus.google.com/" rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

 

<!-- Pinterest --> 

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble--> 

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS --> 

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 

</b:if></div>

<div style="clear:both"/>

Tukar perkataan please share it dengan perkataan yang korang ingin gunakan.Dan tukarkan angka  #333333    dengan kod warna yang korang suka.KLIK SINI untuk mendapatkan kod warna.

Kemudian cuba tekan preview,dan jika tiada error.Klik save.
*Sila tinggalkan komen jika widget tidak tampil di bawah blog post.

Teruskan membaca...

Cara memasang floating share button

Floating share button merupakan satu widget yang amat menarik kerana ia amat unik,malah ia akan sentiasa tampil walaupun blog discroll.Jika korang berminat,turuti sahaja langkah dibawah.

Langkah 1
Pergi ke Dashboard > Layout > Add gadget >Html/javascript.

Langkah 2
Copy kod dibawah kemudian pastekan kedalam Html/javascript yang korang buka tadi.

<!-- floating page sharers Start -->

<style>

#pageshare {position:fixed; bottom:17%; margin-left:-61px; float:left;

-moz-border-radius:5px 0px 5px 0px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:0px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:0px;

background-color:#ffffff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Share this">

<div class='sbutton' id='fb'>

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</div>

<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>

<a class="DiggThisButton DiggMedium"></a>

</div>

<div class='sbutton' id='gplusone'>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall"></g:plusone>

</div></div>

Tukarkan angka -61 untuk menyesuaikan kedudukannya mengikut lebar blog korang.
Semoga berjaya.:)

Teruskan membaca...

Cara pasang widget popular post berdasarkan bilangan komen

Pada tutorial kali ini saya akan mengajar korang cara memasang widget popular post berdasarkan bilangan komen,tidak seperti selalunya yang mana ia adalah disusun berdasarkan pageviews.Jadi jika korang inginkan kelainan didalam blog korang bolehlah cuba tutorial ni.Senang jer:)

Langkah 1
Pergi ke Dashboard > Layout > Add gadget > Html/Javascript

Langkah 2
copy kod dibawah dan pastekan ia kedalam Html/javascript yang anda buka tadi

<ul>

<script language='javascript'>

aBold = false;

numposts=1000;

maxshowresult=5;

home_page = "Alamat blog korang dsini";

</script>

<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>

</ul><br/><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small> 

Langkah 3
Ubah angka 5 yang berwarna merah dengan jumlah post yang ingin ditampilkan.
Ubah perkataan  Alamat blog korang dsini dengan alamat blog korang.

Save dan lihatlah hasilnya.

Teruskan membaca...

Cara membuat slider berdasarkan label

Slider ni adalah lain dari slider yang ada di blog lain kerana slider ini adalah disusun berdasarkan label.Slider ni sesuai diletakkan samada di bawah banner ataupun di footer,namun korang digalakkan memasangnya di bawah banner barulah sesuai dan nampak normal.Sebelum tu saya ingin beritahu awal-awal yang kodnya adalah banyak dan berat blog korang akan meningkat.
*sebelum saya memulakan tutorial,korang disarankan download template terlebih dahulu bagi tujuan backup jika berlaku error semasa mengedit Html.

Langkah 1
Pergi ke Dashboard > Template > Edit Html > Tick expand widget template

Langkah 2
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod ]]></b:skin>.Setelah jumpa kod tu,pastekan kod dibawah sebelum kod ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQyiBouMNK431oEi7_d6FadnPdMjTnoSKBDOspY2L16QQyL3yB_2HeYsFVi0ayvaITcINUhirKoubcx8yv0Jc2dHGVAvE9N8PGkuxYbyytamPmjylo_G-fpqhaLiDsxtjCu5ggiwaKLpk/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-EEFWrlq4O-ykB6ZPf3yd3IymCxChovLRItvxLG2wFf13Kh8eItcMESLPKAXIpIbVaapznz2yi7JoKbiijtScKN3rTBIR4Me54zZM0KTzaA5hNvQRDecoS6IdiZS3FnFBoAPEtyzHls/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2OwPIyr23HaFDprsgqvD13kZ9cQ8bqB51-Kn2aCwcRkGof9UsXAfhEBUXjI8JjZNYCha72_6gyDqhbbpdYsvDKlO2KAdz3MloT8F-bBu-GqVhRP4PaGIoGLdAF0-YbX29ICLRFGol97w/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjngANP67b6dUXMtXIuHC__CFv4WcAf0LhGKXUTmbZayVrQj1bTBaofo87eOpNLfO17RPiEfPjj_AEKDCY5LnUHmxOwCj5CN4vhHUU7tJwOS6aBldOtV7kYN7PDL-qT0P03e81VN43UGYs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jcRrd6QPLWtSEMzAa6KDIFLqNxhJtUcj4USBrReLmxSODOgkmwkg3JfNVspG9zat1aE4Sji8kTCKUXXeITWVd3uTabQjlXg2goAZ60Q63C_lGHz-Pu1SYsyVqcxZGQbDxDmtyopKNxU/s1600/next.png) center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Cf6ZsFT8tKbsCv1wRiMa0ruErUtXpX_1D8Px79Ohqd5gcM9BEqsKCtK48wIFamE_3mDOZl2GPixmCRU-0OETvH5l92oun9GTSU__1SVkhywjcOxsJRdPxBBWeFRrlUDZqDKkSZ_Atfc/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}

#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}

*ubah angka 950 dan 185 yang berwarna oren mengikut ukuran yang sesuai untuk template korang.Angka tu ialah lebar dan tinggi slider yang dipasang.

Langkah 3
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod </head>.Setelah jumpa kod tu,pastekan kod dibawah sebelum kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX5Rc9Vafgp9zdu-zRzP1cTlwCmMWPKi1j8g4qYdrPYcFuMCETQn8pouSoWP1Hq9KZBXCWZJ57k6Z_QzTBTmfWN31VFtxdqudlKjK18tYjEZaZy5Iu4T5ongl4MZOTm-mlqXaElnSuWHU/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 140;

summaryTitle = 25;

numposts1 = 15;

label1 = "news";

function removeHtmlTag(strx,chop){

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

s = s.join("");

s = s.substring(0,chop-1);

return s;

}

function showrecentposts(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

document.write('<ul>');

for (var i = 0; i < numposts1; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);

j++;

}

document.write('</ul>');

}

//]]>

</script>

 *Perhatikan kod 'numposts1 = 15;' dan 'label1 = "news";'
Angka 15 mewakili bilangan topik yang akan tampil di slider,manakala news mewakili label.
Tukar angka 15 dengan angka yang korang ingin tampilkan,manakala tukar news kepada label yang ingin korang tampilkan pada slider.Kecik/besar huruf pada label tu perlulah sama dengan label sebenar korang.

Langkah 4
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod <div id='main-wrapper'>.Setelah jumpa kod tu,pastekan kod dibawah sebelum kod <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>    

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

<script type='text/javascript'>

(function($) {     $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

    auto:4000,

    scroll: 1,

    speed: 800,    

    visible: 5,

    start: 0,

    circular: true,

    btnPrev: &quot;#previous_button&quot;,

    btnNext: &quot;#next_button&quot;

    });

    })})(jQuery)    

</script>

</b:if>

*Pastikan korang turuti satu persatu langkah yang diberikan, jika tidak ianya tidak akan muncul.
Cuba tekan preview,jika tiada error dan slider tu kelihatan.Savekan sahaja. Semoga berjaya:)

Teruskan membaca...

Cara memasang post berkaitan beserta thumbnails

Pada entri kali ini saya akan mengajar anda cara2 untuk memasang post berkaitan beserta thumbnails dengan menggunakan LinkWithin.Widget ini akan muncul pada setiap post anda dan sudah pastinya mampu menghasilhan trafik yang tinggi.Gambar diatas adalah contoh thumbnails yang akan muncul di blog korang selepas dipasang di blog.

Langkah 1
Pergi ke LinkWithin

Langkah 2
Isi apa yang perlu,platformnya pilih blogger,jika korang menggunakan platform wordpress,maka pilih wordpress.Kemudian pilih jumlah thumnail yg korang inginkan di blog korang samada 3,4, atau 5.

Langkah 3
Klik sahaja Get Widget.Dan ikuti pula tutorial mudah yang akan diajar di LinkWithin.:)

Teruskan membaca...

Cara memasang fungsi Read more

Memasang fungsi Read more ni juga boleh dikatakan amat penting bagi seseorang blogger yang inginkan trafik blog mereka meningkat,malah mampu membuatkan blog mereka kelihatan kemas.Jadi kalau korang perasan semua blog2 otai yang pageviewsnya tinggi guna fungsi ni.Jadi,jom ikut tutorial ni skrang :)

Sebelum tu,
Disebabkan langkah ni memerlukan kita edit template kita,jadi lebih baik korang download dulu template korang.

Langkah 1
Pergi ke Dashboard>Template>Edit Html>Proceed>tick pada Expand widget template

Langkah 2
Aktifkan fungsi find dengan cara klik ctrl + F kemudian cari kod </head>


Langkah 3
Paste kod dibawah kemudian paste kod tersebut sebelum kod </head>

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Langkah 4 
Aktifkan fungsi find dengan cara klik ctrl + F kemudian cari kod <data:post.body/> pada ruang find.

Langkah 5
Gantikan kod <data:post.body/> dengan kod yang diberikan dibawah.

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyb3s3gfPUGb1oJdoTzS2B-4YnEUg69vqWEd5FKbBYWmex3P2ccBkismOqBgOqW6npqQ24B1S7Sn8wilp46_cOVV_Z21j6JiKUE1jPoKsB2rv7nluEnjPwe34MotLGhfkq12dOVMrQNOI/s320/read+more_thumb%5B1%5D.png'/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Dan akhir sekali cuba klik preview dan jika read more tu keluar dan tiada error.Klik saja save.:)

Teruskan membaca...

Cara memasang like button

Like button merupakan satu alat penting untuk meningkatkan trafik blog selain share button.Maklumlahkan,facebook merupakan satu perantaraan yg penting untuk menghubungkan antara fb user dengan entri2 yg korang tulis.Jadi,tunggu apa lagi?jom pasang skrang..

Langkah 1

Login akaun blogger korang,pergi ke dashboard > design > edit HTML > expand widget templates
( backup template korang dulu)

Langkah 2
Menggunakan fungsi find (ctrl + F), cari kod berikut: <div class='post-header-line-1'/> atau jika tiada,cari kod  <div class='post-header-line-1'> atau <data:post.body/>


Langkah 3
Copy kod dibawah kemudian pastekan dibawah kod <div class='post-header-line-1'/> atau jika tiada,cari kod  <div class='post-header-line-1'> atau <data:post.body/>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/>

Tekan preview,dan jika tiada error,tekan save.

Teruskan membaca...

Cara pasang facebook share button

Kelebihan share button ialah ia dapat menambah trafik blog.Dan semamangnya tu jer tujuan button tu dipasang.Jadi lebih baik korang pasang cepat-cepat.Berikut ialah contoh2 button yang boleh korang pilih untuk dipasang di blog korang.^_^

Code full:code yang mempunyai counter di atas butang share

Code compact:code yang mempunyai counter di tepi butang share

Langkah 1
Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)


Langkah 2
Menggunakan fungsi find (ctrl + F), cari kod: <div class='post-header-line-1'/> 
atau jika tiada,cari: <div class='post-header-line-1'> 


Langkah 3
Copy kod berikut dan pastekan selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> 


Kod untuk Full:

<div style="float:right;padding:4px;"> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>

Kod untuk compact:

<div style="float:right;padding:4px;"><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>

klik preview,jika tiada error,klik save:)

Teruskan membaca...