Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger - D-Copy Blog | Hai sobat blogger, seperti pada tutorial sebelumnya yaitu artikel terkait dengan gambar dan title saja, kali ini kita akan membahas bagaimana membuat artikel terkait dengan gambar dan deskripsi yang bagus untuk Anda buat di akun Blogger Anda.
Langkah Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger :
- Buka akun Blogger Anda
- Masuk ke menu template, edit HTML dan centang expand template widget
- Cari kode dibawah ini :
</head>
4. Diatasnya pastekan kode dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related_posts h4 {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
#relpost_img_sum {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
#relpost_img_sum:hover {background:none;}
#relpost_img_sum ul {list-style-type:none;background:none;margin:0;padding:0;}
#relpost_img_sum li {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
#relpost_img_sum li:hover {background-color:#F0ECE9;}
#relpost_img_sum .news-title a {color:#2C6BA8;}
#relpost_img_sum .news-title {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
#relpost_img_sum .news-text {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
#relpost_img_sum img {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
</style>
<script type='text/javascript'>
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "baca selengkapnya";
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>
5. Selanjutnya cari salah satu kode dibawah ini :
<data:post.body/>
Keterangan :
- Biasanya kode diatas ada 3-4, maka cari pada kode ke 2 ataupun 4. Tergantung pada pembentukkan template Anda.
atau kode dibawah ini :
<div class='post-footer'>
6. Pastekan kode dibawah ini, dibawah pada kode diatas :
<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
<h4>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'></script>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>
- Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
- Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.
Penyesuaian Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger :
- Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
- var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
- var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
- var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
- Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.
