Assalamualaikum wr. wb
Jauh sebelum membuat postingan ini saya sudah pernah membuat tutorial cara membuat artikel tutorial related Post otomatis dengan Linkwithin .Kalau lupa coba check lagi. Tetapi karena Ingin lebih bagus,akhirnya saya menemukan guru yang cocok ,.,wkwkwk yaitu mas Herman .Kalau sobat ada waktu main-mainlah kesana.^-^.
Sebetulnya Trik ini sangat mudah,tapi karena dasar saya seorang Newbie,gak tau apa-apa,makanya saya cari yang master hehehe.Scriptnya sengaja saya simpan didirectory saya biar mudah di load.^_^.Nah tanpa basa-basi langsung saja kita mulai tutorialnya.Ayo semua siapkan mouse dan tangannya.wkkwkwk.
LANGKAH_LANGKAH MENUJU SURGA EH....
.:MEMBUAT LINKWITHIN BERJALAN :.
1.Masuk ke Blogger,Jangan Masuk Kamar dulu
2.Lalu Klik Rancangan »EDIT HTML »Centang Expand Widget Template
3.Lalu cari kode </head>
4.Copy paste kode Berikut diatasnya
<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: white;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:red;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP61mmjL70hQyzY5tc55HORRPtGVgRD1gw9D9jccBwqSHHTki4otGYh8zZjc1JiljwGgLTjtIBZ9i1q7gE-vs2ns6EeC4ZUKT7u2MWmqkljKYHNRDrqLAEPpVRuRI40xy2_C__R0G2w2AD/s1600/230654_1685221302716_1603153877_31325099_6083166_n.jpg";
var maxresults=10;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://yangpentingshare.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End--><script type='text/javascript'>
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: white;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:red;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP61mmjL70hQyzY5tc55HORRPtGVgRD1gw9D9jccBwqSHHTki4otGYh8zZjc1JiljwGgLTjtIBZ9i1q7gE-vs2ns6EeC4ZUKT7u2MWmqkljKYHNRDrqLAEPpVRuRI40xy2_C__R0G2w2AD/s1600/230654_1685221302716_1603153877_31325099_6083166_n.jpg";
var maxresults=10;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://yangpentingshare.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End--><script type='text/javascript'>
5.Lalu Kemudian tambahkan sedikit garam,ehh koq garam sih,jadi ngelantur nih
wkwkw, maksudnya cari kode <p class='post-footer-line post-footer-line-1'/>
6.Kalau tidak Ketemu cari post-footer-Line-1 aja dengan CTRL +F
7.Setelah Ketemu,Letakkan Kode Berikut Ini dibawahnya
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=10"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</marquee></div><div style='clear:both'/>
wkwkw, maksudnya cari kode <p class='post-footer-line post-footer-line-1'/>
6.Kalau tidak Ketemu cari post-footer-Line-1 aja dengan CTRL +F
7.Setelah Ketemu,Letakkan Kode Berikut Ini dibawahnya
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=10"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</marquee></div><div style='clear:both'/>
Silahkan sobat coba ,semoga bermanfaat ,eits jangan lupa catatan di bawah ini:
- var defaultnoimage = "http://3.bp.blogspot.com/-rev1- _QaqME/TeFb1EYZDWI/AAAAAAAABoE/rPA8gSe5-lg/s1600/230654_1685221302716_1603153877_ 31325099 _6083166_n.jpg"
menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Sobat bisa mengganti gambar tersebut dengan gambar lain kalau tidak suka - var maxresults=10 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
- var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.
- var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan
My referrence: http://www.hermanblog.com/2010/07/membuat-related-posts-dengan-thumbnail.html
0 komentar:
Posting Komentar