Jumat, 20 Januari 2017

Cara Membuat Related Post di Blogger (blogspot)


Cara Membuat Related Post di Blog

yuk internet marketing pasuruan, baik kota pasuruan maupun kabupaten pasuruan kita belajar bersama. yuk UKM kita go onlinekan produk kita. saya siap membantu mengonlinekan produk anda. kalau produk anda sudah online pastinya banyak yang mengenal produk anda. kalau sudah terkenal siap siap nih banyak yang pesan produk anda. MAU??

UKM Pasuruan go Online.

Dengan Online Produk akan melanglang buana seluruh pelosok negeri bahkan mancanegara mau?

yuk belajar internet marketing di pasuruan.

SMS  0857-3213-4547
WA   0822-4341-4586
BBM 55007717

kali ini kita akan belajar tentang related post di blogspot.com


Related Post Versi Cepat ini hanya menampilkan judulnya saja. Tentu saja tampilannya dapat sedikit di modifikasi sesuai keinginan, seperti Merubah namanya jadi “Related Post”, “Baca Juga Artikel Dibawah ini” dan lain sebagainya.

Berikut Langkah-langkah Cara Membuat Artikel Terkait Versi Loading Cepat.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), dan cari kode berikut ]]></b:skin> atau </style>. Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas ]]></b:skin> atau </style> di bagian head.

==========================================

/* Related Post Cepat
--------------------------------- */#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}
 
==================================================
 
Warna Oranye adalah link gambar rss dan sebaiknya diganti sesuai keinginan.
Anda bisa merubah kode diatas untuk dimodifikasi kalo sudah mengenal.
7. Cari kode berikut </head>
8. Masukan Kode berikut diatas </head>
JQuery

=============================================

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
 
=====================================================
 
 
Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.
9. Kemudian masukan Kode berikut diatas </head>
Javascript

=================================================
<!-- Artikel Terkait Start Bro-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');}//]]>
</script>
</b:if>
<!-- Artikel Terkait End Bro-->
 
==========================================================
 
10. Cari kode berikut <div class='post-footer'>
Kode tersebut mungkin ada 2, pertama untuk versi mobile,
kedua untuk versi web (biasanya yang kedua).
11. Masukan Kode berikut diatas <div class='post-footer'> yang kedua (versi web).

==================================================
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>
 
==========================================================
 
Kira-kira tampilannya seperti ini
…Kodenya…
<div class='post-footer'>
Keterangan Cara Membuat Related Post Versi Loading Cepat:
Artikel Terkait berwarna pink: dapat Diganti namanya sesuai keinginan, berikut warna ungu untuk kode warnanya dan biru untuk besar hurufnya
Text berwarna hijau dapat dirubah angkanya untuk jumlah tampilan artikel.
12. Save Template, dan lihat hasilnya.
Demikian Cara Membuat Related Post Versi Loading Cepat di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

itulah cara membuat related post di blogspot.com. pentingnya related post adalah pembaca bisa melihat judul dan apabila tertarik akan membaca judul tersebut dengan meng klik tautannya. semakin lama waktu membaca, maka semakin bagus web kita di mata google. kalau web sudah dianggap bagus dan disukai oleh google maka kemungkinan besar web kita akan muncul di halaman pertama.