Tutorial Letak signature dalam post entry

Kat bawah ni contoh signature untuk letak dalam post entry. Boleh try tutorial dibawah ni ye. Harap harap membantu.

Tutorial Letak signature dalam post entry

1. Create satu signature guna apa apa software pun boleh. Save dalam file .png (Saya gunakan photoshop)

2. Kemudian upload signature yang dah create tu dalam blog. Simpan dalam draft tak perlu publish. 

3. Log in blogger

4. Dashboard >> Theme >> Edit html 

5. Cari code <div class='post-footer'>
6. Letakkan code ni <img src='URL signature image'/> di bawah code no.5 tadi
7. Gantikan URL signature image dengan code URL signature image dalam draft post tadi.

(Klik pada gambar, kemudian right click mouse copy image address.)

contoh complete coding

<div class='post-footer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNDkRG_LWKdyAyHYn7XOXdm6If0ahH5dyUgg17HcNbxClbYj7iNItYWTyksFDnjMuOi8PGjK8NxkGstuis6hH9_rKh78-2uWRgzNWftRktqv5SuOKpWBkaEgwnqI_3bDJwSoYAah2yhb-/s1600/contoohsignature.png'/>

8. Preview. Kalau tak menjadi boleh cuba letakkan coding yang dah siap di atas code no 5.

9. Kalau dah puas hati boleh save terus.

Tutorial buat menu tab comel di tepi blog [ hover rotate -5deg]

Menu tab comel di tepi blog nampak menarik bila ada hover effects -5deg dan buatkan kau orang suka nak main main dengan hover tu. Seriously nampak style juga. Contoh macam bawah ni. 

Disebabkan ada yang bertanya dan ada masa nak buat tuto simple ni.

sumber : N comel

Sebelum mulakan tutor ni, save dulu template blog kau orang

1. Log in blogger>>Dashboard>>Design>>Edit HTML

2. Click pada expand widget templates

3. Cari code ]]></b:skin>

*tekan serentak ctrl+f dan masukkan code no 3 di dalam box untuk memudahkan pencarian

4. Copy code bawah ni

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

*Customize coding ikut kesesuaian blog,korang boleh tukar jenis font,warna font,size font,warna background dan position tab menu tu.

code warna

5. Pastekan code no 4 sebelum code  ]]></b:skin>

6. Cari code </body>

*tekan serentak ctrl+f dan masukkan code no 5 di dalam box untuk memudahkan pencarian

7.Copy code bawah ni

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG'>Home</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
</ul>
</div>
</div>

*letak link menu dan tajuk menu pada code di atas ni

8. Paste code no 7 sebelum code </body>

9. Preview

10. Kalau dah ok tekan SAVE

kalau buat tak menjadi, mungkin ada masalah coding dalam template. So, sila switch template baru dan buat  semula macam template asal. So, kalau tak jadi masa first time buat tu, kau orang kena switch pada template baru dan buat balik blog. Sebelum switch template baru,save dulu template lama.

Tutorial buat drop cap [Huruf pertama besar]

 

Drop cap adalah huruf pertama besar dalam artikel seperti yang kau orang tengok dalam majalah dan akhbar tu. Contohnya dalam gambar di atas.

1. Log in blogger>>Dashboard>>Design>>Edit HTML

2. Cari code </head>

*tekan serentak ctrl+F dan masukkan code dalam box untuk memudahkan pencarian

3.Copy code bawah ni

<style type="text/css">
hufufbesar{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#343434;
line-height:80%;
}
</style>

Untuk customize :*80=lebar size drop cap Edwardian Script ITC=Jenis tulisan 343434=Warna tulisan

4. Paste kan code di no3[di atas] sebelum code</head>

5. Save

Cara nak gunakan drop cap

1. Tulis entry macam biasa.

*untuk lebih jelas tengok pada gambar bawah ni

2. Click pada edit html dan taipkan code ni <hufufbesar> sebelum huruf pertama dan </hufufbesar> selepas huruf pertama.

*untuk lebih jelas sila tengok gambar bawah ni.

3. Kemudian preview.Kalau dah settle,boleh teruskan penulisan entry.

*kalau nak buat code ni selepas menulis entry pun boleh.Pastikan code ni di antara huruf pertama yang nak dibesarkan tu.

Nampak entry macam lagi menarik je kan.

sumber tutorial : http://www.carabuatwebgratis.com/2011/06/cara-membuat-huruf-pertama-pada-ertikel.html

Tutorial pisahkan widget sidebar untuk simple template

Tutorial pisahkan widget sidebar untuk simple template. Ape yang dimaksudkan pisahkan widget sidebar ni, kita pisahkan satu persatu macam dalam gambar di bawah ini.

Sebelum buat tutorial sile save dulu template blog.

Dashboard>>Design>>Edit HTML>>Download Full Template.

Dah siap download[save],boleh mulakan tutorial.

1.Cari code 

/* Widgets

----------------------------------------------- */

*tekan ctrl+F untuk memudahkan pencarian.bile dah tekan akan keluar satu box. Mmasukkan code yang  nak di cari tu.

2. Lepastu copy code bawah ni

.sidebar .widget, .sidebar2 .widget {

background: #ffffff url(LINK GAMBAR BACKGROUND);

-moz-border-radius: 0em 0em 0em 0em;

border-radius: 0em 0em 0em 0em;

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;

text-align: justify;

border: 2px solid #000000;

text-transform:none;

}

3.Kemudian paste kat bawah sekali dalam bahagian widget, sebelum code /* Footer

4.Customize code mengikut pilihan masing-masing

ffffff-code warna background*code warne boleh >> http://userabbe.xtgem.com/code_warna

 LINK GAMBAR BACKGROUND-kalau nak letak backround

-moz-border-radius: 0em 0em 0em 0em;border-radius: 0em 0em 0em 0em;-bentuk widget,boleh tukar nilai 0 tu kepada 1 akan terbentuk corner.

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;-coding ni tak tukar pun takpe.kalau paham coding,bolehlah nak tukar.

text-align: justify;-boleh tukar align tajuk tu,kiri dan kanan..just type left or right.

border: 2px-ketebalan border widget sidebar

solid-boleh jugak buat dashed[garisan putus-putus]..tukar solid kepada dashed

000000-code warne border widget sidebar

5.dah siap customize, tekan preview dulu.

6. Jika dah berpuas hati bolehlah SAVE.

Siap!

Tutorial Buat Slider Sebagai Header Using JQuery

1. Log in blogger>>Dashboard>>Theme>>Edit HTML

2. Cari code

]]></b:skin>

3. Copy code bawah ni

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 560px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

4. Paste diatas code ]]></b:skin>

5. Kemudian cari code

</head>

6. Copy code bawah ni

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

 <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 560, navigation: false, delay: 5000 }); });</script>

7. Paste di atas code </head>

8. Save template

9. Pegi pada page element

dashboard>>page element>>Add a gadget>>HTML/Java

10.Copy code bawah ni

<div id='coin-slider'>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

    

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

</div>

11. Paste dalam box HTML tadi

560 - lebar boleh adjust ikut kesesuaian blog masing-masing

LINK Post - link post yang nak diletakkan dalam slide

URL image - URL image yang nak diletakkan dalam slide

Image's decription - boleh ambil terus dari post entry [copy+paste] atau nak buat ayat sendiri

Tutorial Tukar Font Dalam Blog Tanpa Install

1.Pilih font di web Google font API

Nak pilih font click sini

2. Log in blogger>>Theme>>Edit HTML>>Cari code <head>
*untuk memudahkan pencarian tekan cltrl+F serentak,kemudian masukkan code<head> dalam box pencarian td.

3.Copy code ni

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

4. Paste di bawah code <head> tadi
*pastikan code Font+Name korang tukar name font yang korang dah pilih tadi [yang Fiza bulatkan dalam gambar kat atas tu adalah contoh name font]

5. Copy code ni

font-family: 'Font+Name', arial, serif;

paste pada part yang korang nak tukar font

Page Text
cari code
body {

paste code
font-family: 'Font+Name', arial, serif;
selepas codebody {

contoh code yang dah siap

body {font-family: 'Font+Name', arial, serif; 

Tajuk Post entry
cari code
.post h3 {

 dan paste di bawah code .post h3{
contoh

.post h3 { font-family: 'Font+Name', arial, serif;

Sidebar
cari code
.sidebar h2 {
paste kat bawah code .sidebar h2{
contoh
.sidebar h2 { font-family: 'Font+Name', arial, serif;

untuk part lain pun same juga. Cari code dan paste selepas tanda { dan pastikan tiada code font selain code font-family tu ye.

Jangan lupa code Font+Name perlu tukar kepada name font

font arial dan serif tu tak kesah nak letak font ape sebab tu 2nd and 3rd font yang akan appear kalau first font yang korang pilih tu PC tak leh bace.

Kemudian preview. Kalau dah jadi dah puas hati, save terus. Kalau masih tak puas hati atau tak jadi re-check steps atau silap nama font atau coding.

Tutorial Popup New Tab

 Tutorial Buat Popup New Tab atau "Open Link in Popup Window opens as a new tab"

1. Log in blogger
2. Template>>Edit HTML
3.Cari code 

<head> 

4. Copy code di bawah ni dah paste selepas code <head>

<base target='_blank'/> 

5. Save

Tutorial Auto Read More

Tutorial Auto Read More untuk blogspot

1. Log in bloggger.com

2. Pergi ke dashboard>>>Template>>Edit html

[save and back up template dulu]

3.Cari code </head>
[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]
2.copy code bawah ni and paste sebelum code </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;


summary_noimg = 450;

summary_img = 350;

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>

Editing

summary_noimg = 450; jumlah patah perkataan yang muncul pada homepage pada entri tidak bergambar

summary_img = 350;jumlah patah perkataan pada homepage pada entri bergambar

img_thumb_height = 140;tinggi gambar entri

img_thumb_width = 140;lebar gambar entri

3.Cari code <data:post.body/> kemudian gantikan code tersebut dengan code di bawah..

[tekan ctrl + F serentak dan paste code atas ni didalam box untuk memudahkan pencarian]

*Ada beberapa code ni <data:post.body/> dalam html, korang gantikan dengan code yang kedua korang jumpa.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<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'><span style='color:#000;font-weight:bold:font-size:20px;border-radius:5px; padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 2px; padding: 9px; background:#c7c7c7;'>Read More</span></a></span>
</b:if>
</b:if>
</div>

Editing

color :#000; Tukar warna tulisan
font-size:20px; Size tulisan
background:#c7c7c7; warna background tulisan
Tukar ikut tema warna blog ye :)

4. Preview
5. Kalau tiada error dan menjadi boleh terus save 

Selamat mencuba sehingga berjaya

Tutorial Letak Widget Top Komentator Bulanan

1. Log in blogger.com

2. Dashboard >> Layout >> Add gadget >> HTML/Javascript

3. Copy code bawah ni

<script type="text/javascript"> function getYpipe(feed) { document.write('<ol>'); var i; for (i = 0; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; if(feed.value.items[i].link == "") var item ="<li>" + feed.value.items[i].title + "</li>"; else var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=URL BLOG &ExcludedNick1= NAMA ADMIN &ExcludedNick2= Anonymous &ShowHowMany=10 &ExcludeCommentsBefore=01-05-2014 &IncludeCommentsBefore=31-05-2014 &_callback=getYpipe &_id=50b225c916b74b06779b9489abceef2a &_render=json" type="text/javascript"></script>

4. Paste ke dalam box HTML/Javascript
5. Edit coding.
URL BLOG = Url Blog korang contoh http://www.tutorialpemblog.com/
NAMA ADMIN = Admin 10 = Jumlah komentator 01-05-2014 = kiraan tarikh komen mula masuk Hari-Bulan-Tahun
31-05-2014 = kiraan tarikh komen berakhir Hari-Bulan-Tahun

6. Dah siap Edit. Save!

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan.

1. Login >>> dashboard >>> layout >>> add a gadget >>> HTML/javascript

2. Copy kod kat bawah ni paste di ruangan HTML/javascript

<style type="text/css">
.tcotp_tallyBox {
margin-top: 1em;
}
</style>
<div id="tcotp">
<div id="tcotpMsg">
</div>
<div class="tcotp_tallyBox">
<form name="tcotp_tallySpace">
<select id="tcotp_period" name="period"></select>
</form>
</div>
<div id="tcotpScriptBox">
</div>
<script type="text/javascript">
var tcotpUserPrefs = {
blogName: 'http://' + 'www.tutorialpemblog.com',
period: 'month',
maxNumberToShow: 10,
excludeBlogAuthors: true,
excludeAnonymous: true,
excludeCommenters: []
};
</script>
<script>
var tcotp=function(){var x,k,q,y,z,s,n,t,A,o,m=[],r=[],i=[];x=tcotpUserPrefs.blogName;k=tcotpUserPrefs.period;q=tcotpUserPrefs.maxNumberToShow;z=tcotpUserPrefs.excludeBlogAuthors;y=tcotpUserPrefs.excludeAnonymous;s=tcotpUserPrefs.excludeCommenters;o=function(a){a=a.slice(0,23).split("T");a=a[0].split("-").concat(a[1].split(":"));a[1]=a[1]-1+"";a=a.concat(a.pop().split("."));return new Date(a[0],a[1],a[2],a[3],a[4],a[5],a[6])};t=function(){var a,g,b,f,d,l,j,c=new Date,e=new Date,h=[];d={};var u=document.getElementById("tcotpMsg");
e.setHours(0,0,0,0);c.setHours(23,59,59,999);k=document.tcotp_tallySpace.period.value;switch(k){case "day":e.setDate(e.getDate()-1);break;case "week":e.setDate(e.getDate()-7);break;case "month":e.setMonth(e.getMonth()-1);break;case "year":e.setMonth(e.getMonth()-6);break;case "halfyear":e.setFullYear(e.getFullYear()-1);break;case "alltime":e=0;break;default:if(/ /.test(k)){e=new Date(k.split(" ")[0]+" 1, "+k.split(" ")[1]);c=new Date(e);c.setMonth(c.getMonth()+1)}else{e=new Date("January 1, "+k);
c=new Date(e);c.setFullYear(c.getFullYear()+1)}c.setMilliseconds(c.getMilliseconds()-1)}f=function(){return e===0?true:j>=e};a=function(){return e===0?true:j<=c};g=function(v,w){var p=w.count-v.count;if(p===0){p=w.latest-v.latest;return p===0?w.name>v.name?1:-1:p}else return p};for(b=0;b<i.length;b++){j=o(i[b].published.$t);if(a())break}for(a=b;b<i.length;b++){j=o(i[b].published.$t);if(f()){a=i[b].author[0].name.$t;l=i[b].author[0].uri?i[b].author[0].uri.$t:"";if(d[a])d[a].count++;else{d[a]={};d[a].name=
a;d[a].uri=l;d[a].latest=new Date(j);d[a].count=1}}else break}for(b=0;b<m.length;b++)delete d[m[b]];for(b in d)if(d.hasOwnProperty(b))for(a=0;a<r.length;a++)if(d[b].uri===r[a]){delete d[b];break}for(b in d)if(d.hasOwnProperty(b))h[h.length]=d[b];if(h.length===0)u.innerHTML="<i>No comments were made during that period.</i>";else{h.sort(g);g=document.createElement("ul");a=q!==0?q<h.length?q:h.length:h.length;for(b=0;b<a;b++){f=document.createElement("li");if(h[b].uri!==""){d=document.createElement("a");
d.href=h[b].uri;d.target="_blank";d.appendChild(document.createTextNode(h[b].name));f.appendChild(d);f.appendChild(document.createTextNode(" ("+h[b].count+")"))}else f.appendChild(document.createTextNode(h[b].name+" ("+h[b].count+")"));g.appendChild(f)}u.innerHTML="";u.appendChild(g)}};A=function(a){var g,b,f,d,l,j,c;f=new Date;f.setDate(1);f.setHours(0,0,0,0);b=new Date(a[0],a[1]-1);d=["Since One Day Ago","Since One Week Ago","Since One Month Ago","Since Half a Year Ago","Since One Year Ago","Since Forever"];
l=["day","week","month","halfyear","year","alltime"];j=["January","February","March","April","May","June","July","August","September","October","November","December"];a=document.tcotp_tallySpace.period;for(c=0;c<d.length;c++){g=document.createElement("option");g.value=l[c];g.appendChild(document.createTextNode(d[c]));a.appendChild(g)}for(;f>=b;){c=j[f.getMonth()]+" "+f.getFullYear();g=document.createElement("option");g.value=c;g.appendChild(document.createTextNode(c));a.appendChild(g);if(f.getMonth()===
0){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}f.setMonth(f.getMonth()-1)}if(f.getMonth()<11){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}for(c=0;a.options[c].value!==k&&c<6;)c++;a.selectedIndex=c===6?2:c};n=function(){var a,g,b,f=0,d=false,l=true,j=false;g=function(c,e){return o(e[0].published.$t)-o(c[0].published.$t)};
b=function(c){for(var e=[];c.length!==0;)e=e.concat(c.shift());return e};a=function(){if(!d&&!l&&!j){j=true;t()}};return{lockGate:function(){d=true},unlockGate:function(){d=false;a()},addBlock:function(){f++},removeBlock:function(c){var e,h;c=c.feed.entry;h=i.length;i[h]=[];for(e=0;e<c.length;e++)i[h][i[h].length]={author:c[e].author,published:c[e].published};f--;if(f===0){i.sort(g);i=b(i);A(i[i.length-1].published.$t.slice(0,7).split("-"));l=false;a()}}}}();return{gateway:n,fetcher:function(a){var g,
b,f,d;g=x+"/feeds/comments/default?alt=json-in-script&callback=tcotp.gateway.removeBlock";b=document.getElementById("tcotpMsg");f=document.getElementById("tcotpScriptBox");if(!a||!a.feed)b.appendChild(document.createTextNode("This widget did not work. Please refresh the page you are viewing to try again."));else if(!a.feed.entry||a.feed.entry.length===0)b.appendChild(document.createTextNode("There are no comments available on this blog, or this blog is set to private which makes the comment feed inaccessible."));
else{document.tcotp_tallySpace.period.onchange=t;if(z)for(b=0;b<a.feed.author.length;b++)r[r.length]=a.feed.author[b].uri.$t;if(y)m[m.length]="Anonymous";for(b=0;b<s.length;b++)m[m.length]=s[b];b=parseInt(a.feed.openSearch$totalResults.$t,10);a=Math.ceil(b/200);n.lockGate();for(b=0;b<a;b++){n.addBlock();d=document.createElement("script");d.type="text/javascript";d.src=g+"&start-index="+(b*200+1)+"&max-results=200";f.appendChild(d)}n.unlockGate()}}}}();
</script>
<script type="text/javascript" src="http://www.tutorialpemblog.com/feeds/comments/default?alt=json-in-script&callback=tcotp.fetcher&max-results=1">
</script>
</div>

3. Gantikan 
merah : link blog sendiri. 

biru : jumlah bilangan komentator pilihan.

4. Save

Jangan letak widget ni di sidebar sebab akan menyebabkan blog lambat loading. Letakkan di pages. 

Cara Daftar Akaun Pinterest dan Tutorial Letak Button Pinterest Dalam Blog

Cara Daftar Akaun Pinterest

• Masuk ke website pinterest (https://www.pinterest.com)
• Sign up, daftar akaun baru dengan menggunakan facebook atau google account. Boleh juga create business, click pada create business account bahagian bawah sekali.
• Selepas berjaya daftar, verikasi link blog untuk menghubungkan antara link blog dengan akaun pinterest di bahagian setting pinterest.

Kalau gunakan template blog yang dah siap-siap ada script pinterest pin it button for images tu. Sila gunakan sepenuhnya dan jangan sesekali buang!

Kalau tak ada, boleh cuba tutorial letak button pinterest pin it button for images dalam blog sendiri ye.

Tutorial Letak Button Pinterest Dalam Blog

1. Dashboard>>Theme>>Edit HTML
2. Cari code </head>
3. Copy code dibawah dan paste atas code </head>

<script>

//<![CDATA[

var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGigXliMhZL5100laPsaVuVWDivJKhyqqGHiVzsZ4Z-6JTJdzRn7Ap5DmB5XOmO-fseJ9S3_XxElvaiWFi24DsK0THg5a6qAfsP6dc4OSefG6iRKSwzjr-KbUHIoxtFdgyX831BUJPu3I/s72/pinterest-round.png";

var bs_pinButtonPos = "center";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1B(1C).1A(s($){$(\'Z\').1z(\'<4 x="w:H;" U="B" T="\'+15+\'">\');3 l;3 m;3 n;$(\'.B\').1w(s(){m=$(\'.B\').K(L);n=$(\'.B\').M(L);$(\'.B\').1x()});1d();s 1d(){$(\'.7-19 4,.r-Z 4,.7-14 4,.r-7 4,.r-J 4,.16-J a\').1y(\'.1a,.1a 4\').1D(s(){$(\'.9-p\').u("w","H");1c(l);3 a=$(q);3 b=13(a.u("W-v"));3 c=13(a.u("W-t"));3 d;3 e;1E(1K){D\'1L\':d=a.6().v+a.M(L)/2-n/2;e=a.6().t+a.K(L)/2-m/2;C;D\'1I\':d=a.6().v+b+5;e=a.6().t+c+a.K()-m-5;C;D\'1F\':d=a.6().v+b+5;e=a.6().t+c+5;C;D\'1G\':d=a.6().v+b+a.M()-n-5;e=a.6().t+c+a.K()-m-5;C;D\'1M\':d=a.6().v+b+a.M()-n-5;e=a.6().t+c+5;C}3 f=a.1k(\'T\');3 g=a.1i(\'.r,.1j,.7\').R(\'.r-S,.7-S,.7-1u\');3 h=g.1o();y(O 18===\'P\'){18=\'\'}y(O 11===\'P\'){11=\'\'}y(g.R(\'a\').1q){3 Y=g.R(\'a\').G(\'Q\').1b(/\\#.+\\b/1e,"")}V{3 Y=$(1r).G(\'Q\').1b(/\\#.+\\b/1e,"")}3 i=\'<12 U="9-p"x="1s:E;6:1m;z-1l:1J;1N:2c;" ><a Q="24://2e.28/27/26/29/?2a=\'+Y+\'" 2b="25"><4 U="23" x="-1S-I-F:E;-1T-I-F:E;-o-I-F:E;I-F:E;20:21;W:0;1Y:0;1X:0;" T="\'+15+\'" S="1W 17 1Z"></a></12>\';3 j=a.10().1V(\'a\')?a.10():a;y(!j.A().1U(\'9-p\')){j.1P(i);y(O l===\'P\'){j.A(\'.9-p\').G("1h","q.x.1f=1;q.x.w=\'X\'")}V{j.A(\'.9-p\').G("1h","q.x.1f=1;q.x.w=\'X\';1c(1R)")}}3 k=j.A(".9-p");k.u({"v":d,"t":e});k.u("w","X");k.N().1g(1Q,1.0,s(){$(q).1O()})});$(\'.7-19 4,.r-Z 4,.7-14 4,.r-7 4,.r-J 4,.16-J a\').17(\'2d\',s(){y(/1p [1-8]./.1H(1v.2f.1t())){3 a=$(q).A(\'.9-p\');3 b=$(q).10(\'a\').A(\'.9-p\');l=22(s(){a.N().u("w","H");b.N().u("w","H")},1n)}V{$(\'.9-p\').N().1g(0,0.0)}})}});',62,140,'|||var|img||position|entry||pinit||||||||||||||||wrapper|this|post|function|left|css|top|visibility|style|if||next|pinimgload|break|case|none|shadow|attr|hidden|box|image|outerWidth|true|outerHeight|stop|typeof|undefined|href|find|title|src|class|else|margin|visible|pinitURL|body|parent|bs_pinSuffix|div|parseInt|summary|bs_pinButtonURL|block|on|bs_pinPrefix|content|nopin|replace|clearTimeout|hoverCheck|gi|opacity|fadeTo|onmouseover|closest|hentry|prop|index|absolute|3000|text|msie|length|location|display|toLowerCase|header|navigator|load|remove|not|append|ready|jQuery|document|mouseenter|switch|topleft|bottomright|test|topright|9999|bs_pinButtonPos|center|bottomleft|cursor|show|after|300|bsButtonHover|moz|webkit|hasClass|is|Pin|border|padding|Pinterest|background|transparent|setTimeout|pinimg|http|_blank|create|pin|com|button|url|target|pointer|mouseleave|pinterest|userAgent'.split('|'),0,{}))

//]]>

</script>

Tukar tulisan warna merah dengan url button pinterest pilihan. Copy url button yang disediakan dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQc2aaLZeBFxtupopLzb4Qp8Hg_Inf_iUOp-bLTn2WSYywaRqZy_SZUR7ZZJSZvKnxP9XLqMUj_nZeTCYHFXymIEmsRlLbTc41DqIs3SzIi6FZpzJ2TD6AqOR_Dwkkv03Jxd8YxaGFVCc/s72/pinterest-square.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGigXliMhZL5100laPsaVuVWDivJKhyqqGHiVzsZ4Z-6JTJdzRn7Ap5DmB5XOmO-fseJ9S3_XxElvaiWFi24DsK0THg5a6qAfsP6dc4OSefG6iRKSwzjr-KbUHIoxtFdgyX831BUJPu3I/s72/pinterest-round.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtcnzX9ymk47heAWNnkv4wR0uWLdWMk3kKmaP51Ev-oy9q4abWjYyxN_OIGrOye0ZoVNxxeBZZGaawjdo6Qjdt_YdnwzkYQcxOgnunrQW6kJV4mhcs_uM2DOkgAfcsug6lSYr6BHkvZ8f/s84/pinterest-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTP554sCtcD4E2MqZbZY18MEO-1UHIKNR6SZABCSgfjC29hyphenhyphenKa4meMevt3W3ejxnn-EIykfT5loBYmmU05igj6ZgdwOFrMlV-hperIeAAjx6Je48SHHWIcBYd6wnl9ev8jr2tPN8y7Asqa/s92/pinterest-button-pin+it.png

Untuk tulisan warna biru center kedudukan button interest pada gambar. Boleh ubah posisi mana ikut suka, gantikan kod center dengan salah satu kod dibawah.

• topleft
• topright
• bottomright
• bottomleft

5. Save Template

Dah save lepas tu check kat blog samada button pinterest berfungsi atau tidak. Kalau dah berfungsi rajin-rajinlah pin it gambar untuk promote dan secara tak lansung boleh naikkan traffic blog.

Credit untuk owner script pinterest.