Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post di Blog.
Bentuk artikel terkait dengan gambar thumbnail seperti sobat temui pada
Blog sederhana ini. Di samping bentuk ‘style’ yang menarik, juga
dilengkap screenshoot gambar yang menambah nilai plus ketertarikan
pengunjung. Di sisi lain, jumlah tampilan perlabel relatif sedikit,
tidak seperti artikel terkait dengan menggunakan scroll.
Namun menurut penulis, artikel terkait ini cukup modis dan perlu
diterapkan pada Blog. Untuk pemasangannya, silahkan ikuti
langkah-langkah berikut ini:
1. Login diakun Blogger sobat,2. Pada halaman Dasbor, pergi ke Template dan pilih Edit HTML,
3. Pada kotak editor template, sembarang klik disalah satu ‘box’ tersebut, dan
tekan Ctrl + F, silahkan cari kode </head>,
4. Letakkan CSS dan JavaScript berikut ini sebelum kode </head>,
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Setelah script di atas, cari kode <div class='post-footer'> atau
<div class='post-footer-line post-footer-line-1'/>, letakkan script berikut di atas kode
tersebut.
<!-- 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=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</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=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Angka berwarna biru adalah jumlah posting tampilan related post,
sesuaikan dengan lebar Blog sobat.
6. Terakhir, klik Simpan Template.
0 komentar to "Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails"
Diberdayakan oleh Blogger.
About This Blog
Selamat Datang Di Blog Cara, Tips dan Informasi....
Cara, Tips dan Informasi menyajikan berbagai Cara, Tips, Informasi, & berbagai Download...
Semoga bermanfaat..
Partner
Popular Posts
-
Alfamart adalah Supermarket terbesar dan terhebat di Indonesia telah menjadi sekaligus berani menjadi menjadi partner yang disebut Al...
-
Apa itu Open ID ? Open ID adalah Identitas Digital (ID) adalah layanan otentikasi bagi pengguna (user) dengan kontrol akses ...
-
Cara Membuat Artikel Terkait di Blogspot - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Model seder...
-
Cara/Tips Mudah Membuat Read More Otomatis di Blog – banyak para sobat blogger yang masih kebingungan untuk membuat readmore otomatis di ...
-
Sahabat Blogger pada sore ini saya akan memberikan tips - tips tentang 8 Rahasia Percaya Diri , kepercayaan diri salah satu kunci su...
-
Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post ...
-
Privacy Policy untuk Cara, Tips Dan Imformasi Jika Anda memerlukan informasi lebih lanjut atau memiliki pertanyaan tentang kebijakan pri...
-
Menjaga Kesehatan Telinga. Para sobat blogger kali ini saya cara-tips-dan-informasi akan memberikan beberapa tips Bagaimana Menja...
-
Free Download Smadav - Go to page Free Download AVG - Go to page
Label
Translate
Followers
Iklan
Powered by 123ContactForm | Report abuse
Posting Komentar