Membuat Related Post dan Kotak Feedburner Bersebelahan

Related Post dan Kotak Feedburner

Membuat Related Post dan Kotak Feedburner Bersebelahan -- Untuk tutorial kali ini saya ambil sumbernya dari sang pembuat template Rohis Facebook, maskolis. Artikel terkait atau biasa para blogger kenal dengan istilah Related Post adalah pelengkap Artikel sekaligus sebagai pemancing para visitor untuk mau membuka-buka artikel yang bertemakan sama dan bisa jadi dengan adanya Related post ini bisa merampingkan Alexa karena makin lamanya visitor singgah di blog sobat maka disitulah Alexa akan mengecil (lihat cara kerja Alexa disini = Tingkatkan Alexa Rank Dengan Optimasi Link Komentator). 

Mari kita lihat cara pasangnya.

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed

5. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

6. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px} ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0} #related .related-posts{font-weight:400;width:50%;float:right} #related .related-posts p{margin:0} ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px} *html ul.rp#related-posts li{margin:0 13px} ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000} ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px} ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7} ul#related-posts li img{bottom:0;padding:0!important} ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)} #related .subscribe{width:43%;float:left;color:#bdbdbd;} #related .subscribe p.intro{font-weight:400} #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjugEdpULxoJtbdGYdk8Bwfgjcsf3hGSLE-9UTm-O92zeGQYDE5LEdk9oc_qr8P8UcJCHCqernNMzV0kcN9qH80srEZaJ7mzZsNykw7sLfH9hlT10lbAqZGzJyaPpMKJt3_CKejVc3pbdA/) 0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block}

7. Cari taq <data:post.body/> (gunakan kontrol F untuk memudahkan pencarian)

8. Setelah dapat lalu masukkan kode dibawah ini sebelum taq <data:post.body/>, kalau ada dua atau lebih pilih yang paling terakhir.

<b:if cond='data:blog.pageType == "item"'> <div class='clearfix' id='related'> <div class='related-posts'> <p> Related Articles</p> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCldGVWWdIK8X68yQPLvdmQoDYj6kH2H-Xs3fbN_myC99F_kQEIMnbDRdXtNAPmlDEHZuTIoe8Wl__qoFmIfK6iSOb35ep6ScHxIYkgcvipJiT_RhEFOoSs_xmB8IrNPw71V5lZMkonL0/s1600/no+image.jpg"; var maxresults=6; </script> <script src='https://masolis-javascript.googlecode.com/svn/trunk/related.js' type='text/javascript'/> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div class='subscribe'> <p class='intro'> If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'> <b>click here</b></a>, or subscribe to receive more great content just like it.</p> <p class='feed'> <a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='JohnyTemplate'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/> <input id='botsubbutton' type='submit' value='Submit'/><br/> <small>Your information will not be shared. Ever.</small><br/> <a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&fg=444444&anim=1' style='border:0' width='88'/></a> </form> </div> </div> </b:if>

Yang harus diganti dari script diatas adalah:

http://feeds.feedburner.com/JohnyTemplate : ganti dengan alamat feed sobat.
http://johnytemplate.blogspot.com : ganti dengan alamat link sobat.

9. Klik pratinjau, kalau tidak terjadi kesalahan lalu save dan lihat hasilnya.

Semoga bermanfaat.

Demo  

Update:
Ganti https://masolis-javascript.googlecode.com/svn/trunk/related.js
 dengan 
http://alif-fadli.googlecode.com/files/Aliyyah%20DEMO%20Related.js