2 Cara Membuat Sekaligus Memasang Artikel Terkait Bergambar di Blog ala Juragan Cipir

Bagikan :

Tweet

Cara membuat sekaligus memasang artikel terkait di bawah potingan di blog - Artikel terkait di bawah postingan blog sangat penting karena dapat menaikan pageview blog anda. Banyak pengunjung yang membuka artikel terkait setelah selesai membaca artikel sebelumnya.

Jika anda membuat artikel terkait jangan lupa untuk membuat label yang sama dengan artikel blog yang sedang di baca pngunjung sehingga pengunjung akan tertarik karena memiliki label topik yang sama. seperti artikel terkait dengan gambar (thumbnail) Blog Juragan Cipir di bawah ini.

Banyak cara untuk memasang artikel terkait di blog, misalkan artikel terkait dengan gambar (thumbnail) sehingga visitor membaca judul sekaligus melihat gambarnya secara langsung, ada juga artikel terkait dengan scroll bar, untuk memudahkan pembaca memilih artikel terkait yang disukai, artikel terkait sederhana, hanya muncul judul dari artikelnya saja sehingga membuat blog anda dapat terbuka dengan cepat dan terakhir artiket terkait keren yang berjalan, ini biasanya arikelnya secara terus menurus bergantian ke atas dan ke bawah sehingga terlihat lebih menarik.

Kali ini bacaan gratis akan membahas cara membuat sekligus memasang artikel terkait di blog, jangan lupa membackup Template Blog anda sebelum anda menambahkan kode script baru, untuk memudahkan anda dalam mengambalikannya jika terjadi kesalahan. Silahkan anda pelajari dengan seksama panduannya di bawah ini.

Cara Membuat Artikel Terkait Bergambar ( Thumbnail )

1. Login di akun blog anda
2. Kemudian pilih Template
3. Pilih Edit HTML
4. Silahkan cari kode ini </head>  dan letakan script di bawah ini tepat di atas kode </head>, gunakan CTRL+F untuk mempercepat pencarian.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 meletakan kode script dia atas, selanjutnya cari kode <div class='Post-Footer'> letakan script di bawah ini tepat di atasnya , biasanya terdapat lebih dari 1, silahkan anda coba semuanya

<!-- 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=6&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;Baca juga Artikel Terkait  : &quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
 </script>
 </div><div style='clear:both'/>
 </b:if>
 <!-- Related Posts with Thumbnails Code End-->

6. Silahkan anda ganti, “var maxresults=5” dengan jumlah artikel terkai yang ingin anda tampilkan dan ganti Baca juga Artikel Terkait dengan judul artikel terkait 

7. Kemudian Simpan Template

Maka hasilnya akan seperti gambar artikel terkait dengan gambar thumbnail di bawah postingan di bwah ini

Jika anda juga ingin mencoba membuat artikel terkait sederhana dengan scroll di bawah postingan blog anda wajib mencoba panduan berikut ini.

Membuat Artikel Terkait di bawah Posting Blog

1. Login ke akun blog anda terlebih dahulu.
2. Pilih Template 

3. Pilih Edit HTML. (Saya sarankan untuk backup dulu template sobat untuk menghindari hal-hal yang tidak diinginkan)

4. Cari kode ini <data:post.body/> Untuk mempermudah pencarian gunakan Ctrl+F dan letakan kode script di bawah kode <data:post.body/> biasanya kodenya lebih dari satu silahkan anda coba semuanya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>

5. Simpan Template

Hasilnya akan seperti gambar di bawah ini.

Demikian tuorial membuat artikel terkait di bawah postingan blog, semoga dapat bermanfaat bagi anda.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Tag : BLOG