Cara Membuat Artikel Terkait Dengan Gambar di Blogspot

Cara Membuat Artikel Terkait Dengan Gambar di Blogspot | INDOBLOG BLITAR - Artikel terkait atau releated artikel di blogspot khusus untuk template bawaan atau asli dari Blogspot memang tidak tersedia, sementara untuk artikel terkait untuk template editan atau custom yang biasanya sudah di edit oleh pembuat template kadang tersedia widget releated artikel terkadang juga tidak tersedia. Releated post pada intinya berfungsi untuk meningkatkan page view sebuah blog dengan tujuan untuk meningkatkan optimasi atau SEO sebuah blog.

Widget releated artikel pada umunya terdiri dari beberapa jenis, ada berbentuk list saja atau tulisan maupun disertai dengan gambar atau thumbnail, mana yang lebih baik tentu saja tergantung jenis template yang Anda gunakan, pengaruh cepat dan lambatnya dari widget artikel terkait tentu saja sedikit berpengaruh karena berupa gambar, namun biasanya semakin baik template di buat kecepatan loading gambar juga akan berpengaruh.

Jika Anda penasaran ingin membuat menu releated artikel disertai gambar di blogspot template custom ada baiknya memperhatikan terlebih dahulu ukuran lebar postingan di blog Anda untuk memudahkan Anda mensesuiakan dengan ukuran blog Anda. Untuk mengetahui ukuran dari lebar posting blog gunakan software Inspec element, silahkan cari di Google software ini, download gratis dan ukuran juga tidak terlalu besar. Jika sudah paham tentang menu Inspect element lakukan langkah-langkah berikut ini

Masuk ke dasboard Blog pilih menu template , edit HTML

Klik tepat pada kotak menu edit HTML selanjutnya pada keybord tekan menu Ctrl+F setelah muncul menu search masukkan kode </head> setelah itu copy paste kode di bawah ini tepat di atas kode </head> .

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#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;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Selanjutnya masih pada menu edit HTML cari kode <data:post.body/>, jika Anda tidak menemukan kode ini, close terlebih dahulu menu Search setelah itu ulangi lagi dengan menekan tombol Crtl+F di keyboard PC Anda. Selanjutnya pastekan kode HTML di bawah ini tepat di atas menu <data:post.body/>. Jika terdapat lebih dari satu kode <data:post.body/> masukkan satu persatu sampai proses berhasil.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
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://dedy-restu.blogspot.co.id'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzzC3Dh8PYhwU-x5VjGDBUF9Vp3ybzfSjyGMWWLd2IiidKhboz6Zynke-1lYs348zUjDNusO70VZC2dGI005a0X_B7rC2RPfw_GjMIEhZ84fdi_3ukx7gOIWTK32i7oC6TuINb1YAf7V-/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
  <br/>
<br/>
<br/>

Untuk angka 5 bertanda merah adalah maksimal gambar yang ingin ditampilkan, untuk Releated Post bisa diganti sesuai dengan selera Anda. Setelah selesai simpan template. Lihat hasilnya, jika kurang sesuai dengan ukuran di postingan blogspot Anda lakukan editing pada menu yang berwarna merah yang terdapat di atas kode </head>.

Tags : #SCRIPT BLOG

Share This :

INDOBLOG BLITAR