27 October 2014

Cara membuat pos terkait versi seluler

Related Posts untuk seluler-Blogspot secara defauld artikel terkait tidak terdapat pada tampilan seluler atau mobile, jika anda bertanya bisakah pos terkait di tampilkan pada perangkat seluler atau mobile , jawabanya tentu sangat bisa yaitu dengan cara mengatur beberapa opsi dan tambahan kode script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan. Untuk lebih jelasnya,ikuti langkah-langkah sebagai berikut:

Pertama, Login ke akun blogger anda
-Dan selanjutnya pada menu ‘Template’ ubah sesuaikan konfigurasi pada template seluler .
-Pilih atau centang Ya untuk menampilkan versi seluler pada blog yang dimaksud,
-Kemudian pilih template seluler ‘Khusus’
-Selanjutnya klik tombol ‘Simpan’, seperti yang tampak pada gambar di bawah ini.

Baca juga: Cara Agar widget tampil di seluler

Kedua, pilih ‘Edit HTML’ untuk menambahkan script pada template yang digunakan,
Ketiga,letakkan code Css berikut di atas kode ]]</b:skin>
/* ==related-posts tanpa gambar== */
#related-posts .widget h2,#related-posts h2{font:normal 16px Oswald;color:#333;text-transform:none;margin:0 0 10px;padding:0}
#related-posts h2{border-bottom:3px solid #aaa}
#related-posts a{color:#995c00;font:14px Tahoma}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.2em;border-bottom:1px dotted #B7B3B4;margin:0;padding:3px 0 3px 12px}
#related-posts a:hover{color:#006666;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}


-Cari kode </head>
-Kemudian letakkan kode berikut ini persis diatas kode </head>


<script type='text/javascript'>
var relatedpoststitle=&quot;TERKAIT&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h2>"+relatedpoststitle+"</h2>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Keempat, lakukan pencarian untuk kode
<div class='post-footer-line post-footer-line-2'>
yang di bawahnya ada kode

<b:if cond='data:top.showMobileShare'>


Kelima, tepat di bawah kode
<div class='post-footer-line post-footer-line-2'>
dan di atas kode
<b:if cond='data:top.showMobileShare'>
masukkan kode di bawah ini.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=15;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>


Terakhir simpan
-Dan silahkan cek blog anda untuk mengetahui hasil pemasangan pos terkait khusus seluler
-Ingat...! ngeceknya harus lewat browsur seluler ya...!


cukup mudah dan simpelkan .oky sampai disini penjelasan tentang pembuatan daftar artikel terkait pada template untuk tampilan seluler


EmoticonEmoticon