Membuat Artikel Terkait di Template Blogspot Seluler

Cara Mudah Membuat Artikel Terkait di Template Blogspot Seluler. Update artikel kali ini Bikinblogger akan memberikan Tips Blogging atau Tutorial Blogger mengenai cara membuat artikel terkait atau related post di template blogspot seluler. Biasanya jika blogspot diatur kedalam template versi seluler atau mobile, tidak ada artikel terkait seperti dalam tampilan desktop. Oleh karena itulah, Anda harus membuatnya sendiri dengan cara memasang artikel terkait ke dalam template seluler.

Sebelum Anda memasang artikel terkait ke dalam template blogspot seluler, pastikan terlebih dahulu blogspot Anda sudah di atur ke dalam versi mobile sesuai dengan custom template. Kemudian setelah itu Anda tinggal pasang kode atau script artikel terkait untuk template blogspot seluler.

Berikut ini cara pasang artikel terkait agar bisa tampil di template blogspot versi seluler/mobile:

1. Login ke Blogger.com => => Template => Edit HTML, kemudian cari kode </head> dan masukkan kode berikut ini di atasnya.

<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>

2. Kemudian cari kode <b:includable id='mobile-post' var='post'>, kemudian cari kode bagian footernya, kodenya seperti ini biasanya <div class='post-footer-line post-footer-line-2'>, setelah itu Anda tinggal pasang kode berikut ini di bawah kode tersebut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Artikel Terkait: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>

3. Setelah itu klik Save template dan Anda bisa lihat hasilnya dengan cara menampilkan blog Anda dalam tampilan seluler/mobile yaitu dengan mengetikkan www.namablogAnda.blogspot.com/?m=1.

Demikianlah tips blogging kali ini tentang cara mudah membuat artike terkait di template blogspot seluler. Cara ini sudah saya praktekkn sendiri dan terbukti berhasil. Semoga bermanfaat.di sini gambar luh

mak nyus....

Dapatkan Wisbenbae versi Android,GRATIS di SINI !  Lihat yg lebih 'seru' di sini !
Follow @wisbenbae

Membuat Recent Post Pada Setiap atau Satu Kategori Label

Di dunia blogger, up to date adalah hal yang harus kita lakukan agar blog kita terlihat selalu beraktifitas. Pembuatan Recent Posts juga merupakan kategori yang harus kita utamakan untuk memberikan kemudah pengunjung melihat artikel terbaru yang ada dalam halaman situs website kita.

Namun kali ini sedikit berbeda, recent posts yang ingin saya ajarkan adalah recent post yang tampil di setiap labelnya. Atau kita dapat melakukan pengaturan terhadap label atau kategori apa saja yang ingin dijadikan recent posts. Bagaimanakah Cara Membuat Recent Post Per Label ini ? ikuti saja yuk cara pembuatannya.

Biasanya penggunaan recent posts per kategori ini sering terlihat di beberapa media berita yang proffesional seperti kompas dan lainnya. Berikut cara membuat recent posts di blogger :

1. Login ke blogger, lalu masuk ke Template klik EDIT HTML.
2. Centang kotak Expand Template Widget.
3. lalu carilah kode ]]> </b:skin> dan paste kode di bawah ini tepat diatasnya.

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}

img.label_thumb:hover{background:#f7f6f6}

.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}

ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}

.label_with_thumbs a{}

.label_with_thumbs strong{}

4. Kemudian cari kode </head> dan letakkan kode dibawah ini tepat di atas kode </head>.

<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>

5.Save template anda dan tinggalkan halaman edit HTML dan menujulah kehalaman rancangan.

6.Klik add gadget  » HTML/Java Script.

7.Masukkan kode di bawah ini tepat pada kolom yang sudah disediakan.

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Ket :

• ganti tulisan NAMA LABEL dengan nama kategori yang Anda inginkan.
• ganti angka 3, sesuai jumlah postingan yang diinginkan pada recent posts tersebut.
• jika ingin menonaktifkan tumbnails, ketik false pada tulisan true seperti yang berwarna merah kode script diatas.

8. Klik Save.

Sumber Article : http://impoint.blogspot.com/2013/01/cara-membuat-recent-post-1-kategori
Lihat yg lebih 'menarik' di sini !
Follow @wisbenbae

BAGAIMANA AGAR VIDEO YOUTUBE DI BLOG AUTO PLAY

yaitu tinggal menambahkan &autoplay=1 pada akhir kode video yang akan anda tambahkan.


perhatikan baik-baik contoh berikut:

kode yang awal mulanya seperti ini

<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/oqRsmkOb6iU?feature=player_detailpage" width="540"></iframe></div>

akan menjadi seperti ini

<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/oqRsmkOb6iU?feature=player_detailpage&autoplay=1" width="540"></iframe></div>


gampang khan....
mudah-mudahan bermanfaat

Lihat yg lebih 'menarik' di sini !
Follow @wisbenbae

CARA MENAMPILKAN LINK OTOMATIS KETIKA DI COPAS

1. Masuk ke menu template yang ada di blogger

2. Pilih Edit HTML >>lanjutkan >> centang expand template widget..

3. Tekan CTRL + F kemudian cari kode </body>

4. Tambahan kode dibawah ini di atas kode </body> itu

<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://bangmu2.googlecode.com/files/link%20sumb3r%20otomatis.js ';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

catatan : sebaiknya paste dulu ke notepad dan bersihkan dari link sumber saya... semoga bermanfaat.

Lihat yg lebih 'menarik' di sini !
Follow @wisbenbae