Tutorial cara membuat artikel terkait bergambar di bawah postingan blog, pada artikel sebelumnya telah kita bahas cara membuat artikel terkait dengan mudah di weblog ( 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 weblog kita
1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke carte Template dan pilih edit HTML
3. Centang EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no iii gak ada langsung no four 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 come inwards dan lihat akan ada tanda di kata </head> yang anda cari tadi
5. Dan selanjutnya re-create 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 = four 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 weblog kita
1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke carte Template dan pilih edit HTML
3. Centang EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no iii gak ada langsung no four 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 come inwards dan lihat akan ada tanda di kata </head> yang anda cari tadi
5. Dan selanjutnya re-create kode dibawah ini tepat diatas atau sebelum kata </head> tadi
<!-- withdraw --><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 venture #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 venture #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'/>
<!-- withdraw --></b:if>
<!--Related Posts amongst thumbnails Scripts as well as 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 venture #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 venture #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'/>
<!-- withdraw --></b:if>
<!--Related Posts amongst thumbnails Scripts as well as 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 re-create script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi
<!-- Related Posts amongst 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/AVvXsEg4wu3YzUvaCO37rvFnS6Y-et__TPYFE0O1_x4Ss9Ikn1EKKpVHM940S4Tl9CUeIcndmI1BlpTwkFsuN8bAv1mqGb2f7CkOaPDt_zrmI5G6NZd96aWbnYEI_EHv5V-CkPReGZfO9fyVoMSG/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts amongst 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/AVvXsEg4wu3YzUvaCO37rvFnS6Y-et__TPYFE0O1_x4Ss9Ikn1EKKpVHM940S4Tl9CUeIcndmI1BlpTwkFsuN8bAv1mqGb2f7CkOaPDt_zrmI5G6NZd96aWbnYEI_EHv5V-CkPReGZfO9fyVoMSG/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts amongst 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.
