Tutorial cara membuat artikel terkait bergambar di bawah postingan blog, pada artikel sebelumnya telah kita bahas cara membuat artikel terkait dengan mudah di blog ( blogspot ).
Artikel terkait dengan menyertakan gambar bisa juga jadi alternatif untuk memberi minat pengunjung untuk terus betah membaca artikel yang di sajikan dari 1 artikel ke artikel lainnya yang terkait.
Cara membuat artikel terkait dengan gambar di bawah postingan blog
Berikut langkah-langkah menambah Artikel terkait di bagian bawah blog kita
1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke menu Template dan pilih edit HTML
3. Centang EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no 3 gak ada langsung no 4 aja ya)
4. Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan akan muncul kotak pencarian di pojok kanan atas itu dan cari tekan enter dan lihat akan ada tanda di kata </head> yang anda cari tadi
5. Dan selanjutnya copy kode dibawah ini tepat diatas atau sebelum kata </head> tadi
6. Setelah selesai, cari kode <div class='post-footer'> seperti cara tadi (jika ada dua kode yang sama pilih aja yang kedua ya)
Ket: ubah maxresult = 4 dengan jumlah artikel terkait maksimal yang ingin ditampilkan
8. Ok, selesai, upsss belum.. jangan lupa klik simpan Template
Selesai sudah Tutorial membuat artikel terkait dengan gambar di bawah postingan blog, semoga berhasil dan bermanfaat.
Artikel terkait dengan menyertakan gambar bisa juga jadi alternatif untuk memberi minat pengunjung untuk terus betah membaca artikel yang di sajikan dari 1 artikel ke artikel lainnya yang terkait.
Cara membuat artikel terkait dengan gambar di bawah postingan blog
Berikut langkah-langkah menambah Artikel terkait di bagian bawah blog kita
1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke menu Template dan pilih edit HTML
3. Centang EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no 3 gak ada langsung no 4 aja ya)
4. Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan akan muncul kotak pencarian di pojok kanan atas itu dan cari tekan enter dan lihat akan ada tanda di kata </head> yang anda cari tadi
5. Dan selanjutnya copy kode dibawah ini tepat diatas atau sebelum kata </head> tadi
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
6. Setelah selesai, cari kode <div class='post-footer'> seperti cara tadi (jika ada dua kode yang sama pilih aja yang kedua ya)
7. Nah kalau sudah ketemu langkah selanjutnya adalah copy script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4Dcl5jnMBrIDWMpLmxQTGChqbrCNaAB3KgmcrTu-CPiJ8l2631taUvzVBAV13TshV8eyEx2dspMeYgsDnn_Y5oRM0sS7KpQl_FLZ_oWCHoUoOznmyhmNobFaYBTVUYpWBk2FoFFWuK6y/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4Dcl5jnMBrIDWMpLmxQTGChqbrCNaAB3KgmcrTu-CPiJ8l2631taUvzVBAV13TshV8eyEx2dspMeYgsDnn_Y5oRM0sS7KpQl_FLZ_oWCHoUoOznmyhmNobFaYBTVUYpWBk2FoFFWuK6y/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
8. Ok, selesai, upsss belum.. jangan lupa klik simpan Template
Selesai sudah Tutorial membuat artikel terkait dengan gambar di bawah postingan blog, semoga berhasil dan bermanfaat.
Cara membuat artikel terkait dengan gambar di blogspot
4/
5
Oleh
Ciharu
