G-aNkar BloG: Artikel Terkait

Membuat Related Artikel Ala Kang Ismet

Membuat Related Artikel Ala Kang Ismet, G-aNkar Blog - Saya share ini karena saya berkunjung ke blognya Kang Ismet, lalu saya cari artikelnya dan ketemu di salah satu blog sahabat.

Karna penasaran saya coba dan ternyata Related Artikel atau Artikel Terkait saya berhasil menyerupai milik kang ismet, waw amazing..!! Saya kagum dengan kreatifitas mereka dan mulai saat ini saya berprinsip untuk memahami dunia blogging khususnya untuk kode HTML dan CSS. Untuk liat hasilnya bisa masuk ke blog saya di http://newtwitt.blogspot.com

Artikel terkait memanglah suatu yang lumayan dibutuhkan dalam blog, untuk menguatkan optimasi seo pada blog, kali ini saya akan memberikan Artikel terkait ala kang ismet, maaf sebelumnya apabila ada yang merasa dirugikan, banyak sekali teman blogger yang menginginkan related ini, dan berikut kode nya :

Masukkan CSS berikut :

.related-post { margin:2em auto 0; font-size:13px; background:#fff; border-radius:4px; } .related-post h4 { font-size:14px; margin:0 0 .5em; background:#9dcb63; color:#fff; padding:14px 20px 14px 75px; font-weight:normal; border-radius:4px 4px 0 0; position:relative; font-family:Oswald,Arial, Sans-Serif; text-transform:uppercase; } .related-post h4:before { content: "\f074"; font-family:fontAwesome; font-size:22px; font-style: normal; background-color:#8db857; color:#fff; border-radius:4px 0 0 0; top:0; left:0; padding:13px 20px; position:absolute; } ul.related-post-style-1 { padding-left:0 !important; margin-top:-12px; } .related-post-style-1 li { list-style:none; padding:15px 20px; border-top:1px solid #eceef5; } .related-post-style-1 li a{ color:#79798d; text-decoration:none; } .related-post-style-1 li a:hover{ color:#33aea5; text-decoration:none; } .related-post-style-1 li:before { content: "\f08e"; font-family:fontAwesome; color:#c7cbd4; font-style: normal; top:0; left:0; margin-right:13px; }

Lalu masukan kode Htlm berikut :

<b:if cond='data:blog.pageType == "item"'> <div id='related-post' class='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4>Artikel Terkait:</h4>", numPosts: 5, titleLength: "auto", containerId: "related-post", newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script> <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/> </b:if>

Maaf jika tutorialnya kurang lengkap khususnya bagi para newbe, dan yang pasti ini mengajarkan kita untuk lebih cerdas lagi dalam mempelajari kode Html. Selamat Mencoba !!!

Cara Membuat Artikel Terkait Dengan Gambar/Thumbnail

Kali ini saya akan posting artikel tentang cara membuat artikel terkait dengan thumbnail gambar di blog. Beberapa waktu lalu saya juga sudah update artikel tentang related post, tapi waktu itu related post biasa,

tapi bagi yang tertarik boleh juga koq mencobanya. Silahkan dibaca: cara membuat artikel terkait atau artikel terkait. Tapi, membuat related post dengan thumbnail gambar pastinya lebih keren dan membuat pengunjung lebih betah di blog kita, silahkan lihat contoh di atas. Nah, bagi yang tertarik untuk membuatnya, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun Blogger sobat.

2. Klik Template >> Edit HTML

3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>

4. Pastekan kode di bawah tepat di atas kode </head>

<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.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZe8UwjqwBinKORaCFuKtBdTMUgwcTDq6CG_L9tpKSHXv95jhNkMd3SGNQTr18B9UP3vyQ6oxAVD6i_8B0zrJGdcgCaZgrhnghFv8yYoj05jqZK0V38brZqHDjXHYOOnf97QDcfxXIXns/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/> tadi

<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/><script src='http://secebisilmu.blogspot.com' type='text/javascript'></script></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

6. Simpan template sobat dan lihat hasilnya

Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.

var relatedpoststitle="Related Posts"; kamu bisa ganti kata Related Posts dengan kalimat lain yang sobat inginkan.

Demikianlah posting mengenai cara membuat artikel terkait dengan thumbnail. Semoga bermanfaat buat semua.

Sumber: http://secebisilmu.blogspot.com/2013/04/cara-membuat-artikel-terkait-dengan.html#ixzz2VatPSa99