Assalamuallaikum Wr Wb selamat malam sobat blogger semua pada kali ini saya akan share tutorial blogger lagi yang berjudul Membuat Related Post dengan Efek Ceklis. sebenarnya tutor ini adalah request dari sahabat saya. Langsung saja kita lihat screenshotnya
2. Cari kode ]]></b:skin> atau bisa juga </style> dan letakan kode berikut di atasnya :
.rbbox
{
font-family:Federant;
background:#fff;
border:1px solid #ccc;
height:198px;
overflow:auto;
margin:10px 0 15px;
padding:10px
}
.rbbox ul li:hover
{
cursor:pointer;
list-style-image:url(http://4umi.com/image/icon/check.png);
color:#3B5998
}
.rbbox ul li
{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A94dZLcQjWR9yr44DlgYFYTMweEKuhM1hW963vmOK8__xp6vHqCMrRrAVnJtNDJ5xe0xgRNYpzbg2QpcgLvpYHjWKq2ihr7fB8d_11xxrt0TDPs_Zj_ZJSi2NH87tkTp-RaxEy2gs2w/s12/uncheck.gif);
padding:.5em 0 .5em .3em
}
3. Lalu cari kode : <data:post.body/> bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang pertama lalu copy kode berikut ini di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
5. Simpan Template Sobat
Catatan :
- Jika Nanti Related Post diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' lebih tepatnya di bawah tag </b:if>.
- Atau sobat juga bisa meletakan kode kode di atas di bawah kode <div class='post-footer-line post-footer-line-1'>
Sekian tutorial dari saya semoga dapat bermanfaat.
Title : Membuat Related Post dengan Efek Ceklis
URL : http://blogcunayz.blogspot.com/2012/06/membuat-related-post-dengan-efek-ceklis.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Related Post dengan Efek Ceklis sebagai Sumbernya.
URL : http://blogcunayz.blogspot.com/2012/06/membuat-related-post-dengan-efek-ceklis.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Related Post dengan Efek Ceklis sebagai Sumbernya.
keren bibeh banget nih, bisa menceklis otomatis.
ReplyDeletebutuh waktu rada panjang nih kang kalau dipasang....ooo iyah kebetulan lagi buat blog baru nih, bisa dipasang disonoh..
tengkyu ilmunya.
salam sehat dan met malming.
trimakasih kang itu cuma menggunakan efek hover saja.
Deletegak segitunya kali kang gak nyampe 10 menit pasangnya :),, weh kren bikin blog baru, tar saya mampir ah
sama2 kang
sekarang sudah hari minggu kang :)
Lebih tampak simple dan memudahkan penglihatan mana yang akan dikunjungi.
ReplyDeletesetuju saya dengan pendapat agan
Deleteehhh ternyata demonya sudah ada di blog ini yaa..
ReplyDeleteiya itu langsung masbro
Deletethx,nice share gan
ReplyDeletesama2 gan
DeleteKayaknya lebih keren dan lebih simpel yang ini sob :)
ReplyDeletebetul3x wkwkwk
DeleteKok saya coba belum berhasil yah sahabat, mohon pencerahannya. Adakah saya yang salah..
ReplyDeleteOh ya breadcrumb sukses dipraktekkan sahabat tips yang kemarin itu.
Hanya ini yang masih belum berhasil saya
belum berhasil bagaimana sobat?
Deletesebelumnya sobat sudah punya related post?, jika sebelumnya sudah punya tinggal di hapus dan di ganti dengan kode di atas
Setelah mengganti template sekarang sudah terpasang sahabat related postnya dengan check list ini
DeleteTerima kasih atas artikelnya.
ReplyDeleteo iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya
anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi
anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada
waktu saya akan berkunjung lagi.
#Semoga sehat selalu :D
Template apa nih ya? kok bagus
amin gan
Deletetemplatenya belum saya kasih nama gan wkwkwk,ah masa sih template jelek gini
suka banget deh artikelnya.. mengajarkan blogger untuk tambah mempercantik blognya, dan so pastinya memanjakan pengunjung juga,,heheheheehehe
ReplyDeletealhamdulillah jika sobat suka dengan artikel saya,, betul banget gan saya setuju
Deletemantap, Simpel dan keren
ReplyDeletesemakin mantabs saja info tutorialnya kawan :)
ReplyDeletetrimakasih kawan :)
Deletetutorial ini yg dr dlu aq cari.., kapan2 aq share ke blog sy ya sob.., thx...,templatex super simple banget sob keren..!, halamx homex ringaaaaannn banget..! hehehhe.., happy blogging . *smile
ReplyDeletesilahkan sob,,thank sob :) sip happy blogging juga
DeleteKeren Sob, sangat manfaat dan lengkap caranya.
ReplyDeletethank sob,, harus dong supaya pengunjung tidak bingung
Deletewiih.. keren nih dikasih bullet.. :)
ReplyDeletebulet apanya gan?
DeleteSembari menyimak dapat ilmu baru.. Thank you tipsnya ya sob..
ReplyDeletesilahkan di simak gan,, sama2 sob
Deletekeren rek . . .
ReplyDeletenanti kalo dah siap ngblog lgi, aku pke yah sob :)
silahkan kenapa belum siap ngblog gan?
Deletehmm,, kereen sob.. tapi kayaknya aq belum waktunya nii.. kontenQ masih acak2an. :)
ReplyDeleteijin nyobain ah, kayaknya bagus nih..
ReplyDeleteGan ijin make templatenya ya.
ReplyDeletewah keren sob, saya coba dulu ya :)
ReplyDeletewah keren banget nih, makasih gan!!:)
ReplyDeletekutunggu terus info selanjutnya sob
ReplyDeleterelated post ini membuat pengunjung kita betah karena langsung mendapat artikel-2 dengan hal-hal yang dicari ya..
ReplyDeletethanks infonya bermanfaat
sipp... makasih gan,
ReplyDeletenice info
Mkasih gan ats tutorialnya...!!!
ReplyDeletewah blognya rapi banget ya gan .jadi ngiri aku.hehehe
ReplyDeletemantap gan,,,keren,,thank tutorial nya
ReplyDeleteSeepp mas bro keren untuk template kaya punya blog ini download dimana Citra Indah Dan citra Gran
ReplyDelete