Cara Memasang Bread Crumb Pada Blogger

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. 

Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Breadcrumb sangat penting untuk membuat blog kita SEO Friendly karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog yang saya buat muncul di halaman awal google, ternyata di pengaruhi juga oleh keberadaan breadcrumb ini.

Contoh Tampilan Breadcrumbs biasanya seperti ini:
Home page> Nama Kategori> Judul Postingan 

atau 

Home page: Nama Kategori: Judul Postingan

Cara memasang Breadcrumb di Blogger :

• Masuk/Login ke Akun Blogger

• Pilih akun blog kamu kemudian masuk ke menu "Template" lalu klik "Edit HTML"
• Lalu klik tombol "Lanjutkan" untuk masuk ke menu HTML 
• Nah setelah masuk jangan lupa centang "Expand Tempalte Widget" (4) dipojok kiri atas. 
• 
  
• Setelah itu cari kode dibawah ini, untuk mempermudah gunakan menu find dengan menekan tombol Ctrl+F 

<b:if cond='data:post.title'>

•  
• Tambahkan kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<a href='http://nama-blog.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

Jangan lupa ganti tulisan warna merah (nama-blog.blogspot.com) dengan nama blog kalian

• Nah jadi kan, Jangan lupa setelah selesai klik SAVE

Selamat Mencoba ...

Happy Blogging ^_^

Read More

Cara Pasang Widget Artikel Terkait Pada Blogger

Cara Pasang Widget Artikel Terkait (Related Post) Blogger

Cara Pasang Widget Artikel Terkait (Related Post) Blogger. Mungkin beberapa kalian pernah membuka sebuah postingan dimana dibawah postingan terdapat link-link artikel yang terkadang saling berkaitan maupun tidak, nah itu yang dinamakan Related Post atau Artikel Terkait.

Nah kenapa ini perlu??? Karena dengan adanya fasilitas ini di blog akan mempermudah pengunjung dalam melihat postingan yang lain di blog tersebut serta tentunya meningkatkan SEO Blog itu sendiri menjadi Friendly . Maka related Post (artikel terkait) sangat penting dan wajib ada diblog kalian. 

Cara Pasang Related Post (Artikel Terkait) :

1. Langkah pertama tentu Login ke blogmu
2. Klik menu template lalu pilih Edit HTML
3. Centang Expand Widget Templates
4. Cari kode <data:post.body>
5. Copy kode dibawah ini letakkan dibawah <data:post.body> 

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<span class='box'>
<div class='widget-content'>

<h3>Jangan Lupa baca artikel di bawah ini juga ya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot;
&quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</span></div>
</b:if>

6. Jangan lupa SAVE ya

Kalian bisa merubah font atau judul dari Related Post diatas sesuai kesukaan kalian

Selamat Mencoba ...

Note : Sebelum kalian merubah kode di menu HTML Blog terlebih dahulu backup template blog nya

Read More

Memasang Tombol Social Share

Menambahkan widget social network pada blog, banyak direkomendasikan oleh para pakar SEO.  Hal ini menjadi penting, karena dengan terpasangnya widget tersebut secara signifikan dapat meningkatkan trafic blog yang beasal dari situs social network.  Widget yang akan dibahas kali ini adalah Tombol Social Share dari situs jejaring sosial populer seperti Twitter, Facebook, Stumbleupon serta Google +1, ditambah tombol advance dari Addthis.

Tombol-tombol ini dapat digunakan untuk blog dengan platform Blogger maupun Wordpress.  Jika ingin artikel anda menyebar di berbagai situs jejaring social, gunakanlah widget berharga ini pada blog anda dan nikmati trafic yang mengarah ke blog anda dari situs jejaring sosial populer.  Metode implementasi yang akan dibahas pada artikel ini dikhususkan bagi blog dengan platform Blogger sedangkan untuk Wordpress silahkan menyesuaikan.

Berikut adalah langkah-langkah untuk Menambahkan Tombol Social Share di Bawah Judul Posting

• Login ke Blogger dengan ID anda

• Pilih menu Template dan silahkan Backup Template anda terbeih dahulu.

• Klik Template >> Edit HTML >> Proceed

• Beri tanda ✔ check pada kotak "Expand WIdget Templates"

• Kemudian cari kode <data:post.body/>

• Copy kode di bawah ini dan paste tepat di atas kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background:transparent; border:none; padding:10px;'>
<table border='0'>
<tr>


<td><!-- Twitter -->

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if>
</td>

<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</td>

<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
</td>

<td><div style='margin-right:5px;'><!-- GOOGLEPLUS -->
<g:plusone expr:href='data:post.url' size='medium'/></div>
</td>

<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MULTI PASTE | Menabur Ketulusan Menuai Kebahagiaan&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; }
</script>
</td>

</tr>
</table></div> </b:if><br/>

• Ganti kode yang ditulis tebal "Tips SEO Blogger | Menabur Ketulusan Menuai Kebahagiaan" dengan title blog anda, selanjutnya cari kode ]]></b:skin> dan tepat di bawahnya paste kode berikut ini, sebagai catatan jika anda sudah pernah memasang tombol Google+ pada blog, abaikan saja langkah ini :

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

• Simpan perubahan Template dengan menekan tombol Save Template dan periksa blog anda, pastikan widget ini hanya tampil pada halaman posting dan tidak pada homepage,  jika widget tampil pada Homepage dan anda tidak menginginkannya silahkan hapus kode yang diarsir kuning.

• Jika anda berhasil memasang widget ini Silahkan komen :) ...

Read More

Menambahkan Floating Fans page Facebook

Banyak cara yang dilakukan oleh para blogger untuk meningkatkan Followers Facebook Fun Page, diantaranya adalah memasang Widget Facebook Like Box pada blog.  Widget ini dipasang dengan berbagai macam variasi agar kelihatan menarik sehingga merangsang pengunjung untuk mengklik tombol like pada widget tersebut.

Beberapa waktu yang lalu, telah diterbitkan artikel yang membahas tentang cara Menambahkan Facebook Like Box di Blog ini, dan pada kesempatan ini saya masih menawarkan widget yang sama, namun berbeda dalam hal tampilan, jika sebelumnya widget Facebook Like Box terpasang mengambang pada sisi kanan halaman blog dengan tombol slide, maka widget Facebook Like Box kali ini tampil melayang di tengah halaman blog dan akan menutup jika pengunjung menekan tombol close pada widget.  Dilihat dari sisi tampilan, kedua widget ini sama menarik, namun dari segi efektifitas widget dengan tampilan Floating atau melayang ini akan lebih efektif karena bersifat sedikit memaksa pengunjung untuk mengklik tombol like, widget akan terus tampil di tengah halaman sampai tombol close diklik oleh pengunjung.

Untuk menambahkan widget Floating Facebook Like Box ini cukup mudah, anda hanya perlu menambahkan gadget type HTML/Javascript pada layout blog, dan masukkan script berikut ini ke dalamnya, setelah itu simpan gadget dan Facebook Like Box akan segera tampil pada blog anda.  Berikut adalah detail cara menambahkan widget ini.

• Login ke blogger dengan ID anda

• Pada halaman dashboar blogger klik link nama blog anda

• Pilih menu Layout ->> Add a gadget ->> pilih gadget type HTM/Javascript

• Copy script di bawah ini dan masukkan ke dalam kotak Content gadget type HTM/Javascript

<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
 barheight=document.getElementById("topbar").offsetHeight
 var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
 var d = document;
 function ml(id){
  var el=d.getElementById(id);
  if (!persistclose || persistclose && get_cookie("remainclosed")=="")
  el.style.visibility="visible"
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
  el.y -= startY;
  }
  return el;
 }
 window.stayTopLeft=function(){
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : iecompattest().scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
 }
 ftlObj = ml("topbar");
 stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://lh6.googleusercontent.com/-XTEeefHkPX8/T_LB86oUVmI/AAAAAAAACEY/1oRjxlCLaps/s512/close3.png" /></a></div>
<center>
<div style="background: #fff;">

MASUKKAN KODE FACEBOOK FUN PAGE ANDA DI SINI

</div>
</center>
</div>

• Sebelumnya edit script tersebut ganti tulisan MASUKKAN KODE FACEBOOK FUN PAGE ANDA DI SINI dengan kode Facebook Fun Page anda

• Simpan gadget dengan menekan tombol Save
• Selamat Mencoba

Read More

Backgroun Musik di Blogger

Ketika sedang browsing atau lagi blog walking mungkin anda pernah menemukan blog, ketika dibuka akan memainkan musik favorit pemilik blog.  Sebenarnya untuk melakukan hal ini cukup sederhana, dan ada berbagai metode yang dapat Anda gunakan untuk memasang musik sebagai latar belakang blog, mulai dari injeksi script ke dalam template atau menambahkan gadget pada sidebar blog, masing-masing memiliki kelebihan dan kekurangan.

Saya akan berbagi informasi dalam posting ini tentang bagaimana menambahkan musik sebagai backgound di blogspot.  Hal pertama yang perlu dipersiapkan adalah file musik favorit Anda yang akan dijadikan sebagai musik latar belakang di blog kesayangan Anda.  Silahkan memilih cara yang dianggap paling mudah dan familiar dari bebrapa cara yang ada di bawah ini.

Menanamkan Script ke Dalam Template Blog 

Metode ini dilakukan dengan memasukkan beberapa baris script ke dalam template blog.  Ikuti detail implementasinya sebagai berikut :

• Sebelumnya, konversi file musik Anda dari format mp3 menjadi format swf, hal ini dimaksudkan agar lebih kompatibel dengan berbagai jenis browser, mengingat borwser yang digunakan oleh pengunjung sangat beragam.  Keuntungan lain adalah size file musik yg akan diload menjadi lebih kecil.

• Upload atau simpan file musik yang telah di konversi ke tempat hosting file yang sering anda gunakan.

• Login ke blogger dengan ID Anda.

• Pada halaman dashboard klik link title blog Anda

• Pilih menu Template ->> Edit HTML ->> Proceed

• Cari kode <head> pada template dan tempatkan script di bawah ini tepat di bawah kode <head>

<embed style="width:1px; height:1px; visibility:hidden" autostart="true" loop="1" volume="100%" src="https://sites.google.com/site/sitesuppblog/music/Rossa%20-%20Ku%20Menunggu.swf"/></embed>

•  Ganti URL musik pada script di atas (warna biru) dengan URL musik favorit Anda

• Simpan template dengan menekan tombol Save Templates dan periksa hasilnya.

Kelemahan dari metode ini, adalah pengunjung tidak dapat mengontrol musik.  Jika pengunjung kurang menyukai musik yang disuguhkan tentunya akan terasa mengganggu dan pengunjung bisa terburu-buru menutup browsernya.

Menambahkan Gadget Musik pada Sidebar Blog

Metode ini paling sering digunakan oleh para blogger, yaitu dengan menambahkan Gadget pada sidebar blog, selain caranya cukup mudah juga lebih save karena pengunjung lebih bebas memilih untuk memainkan musik atau tidak, detail implementasinya sebagai berikut

• Upload atau simpan file musik favorit Anda ke tempat hosting file yang sering Anda gunakan (file musik tidak perlu dikonversi, biarkan file musik dalam format mp3)

• Login ke blogger dengan ID Anda

• Pilih menu Layout ->> Add a Gadget ->> pilih gadget type HTML/Javascript

• Masukkan script di bawah ini ke dalam kotak Content Gadget

<embed type="application/x-shockwave-flash" flashvars="audioUrl=https://sites.google.com/site/sitesuppblog/music/pop_andra__the_backbone__sempurna.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="300" height="27" quality="best" wmode="transparent"></embed>

• Ganti URL Musik (warna biru) dengan URL musik favorit Anda

• Simpan Gadget dengan menekan tombol Save dan periksa blog Anda

Read More

Menggunakan Widget Random di Blog

Widget Random Posts adalah widget bloger yang akan menampilkan artikel secara random. Widget ini penting untuk dipasang di blog kita karena selain sebagai navigasi untuk memudahkan pengunjung dalam mencari informasi di blog kita juga memungkinkan pembaca blog untuk tetap berada di blog kita dalam waktu yang lebih lama yang pada gilirannya akan meningkatkan Page Views blog.

Memasang widget ini cukup mudah dan dilakukan dalam 2 tahap, yaitu menanamkan kode CSS ke dalam dokumen HTML template serta menambahkan gadget type HTML/Javascript ke dalam layout blog.

Berikut ini adalah langkah untuk menambahkan widget Random Post di blogger

Menanamkan kode CSS ke dalam dokumen HTML Template

• Login ke blogger dengan ID anda

• Pada halaman dashboard blogger klik link title blog anda

• Pilih menu Template ->> Edit HTML ->> Proceed

• Cari code ]]></b:skin>

• Tambahkan kode brikut ini tepat di atas kode ]]></b:skin>

#categorylist{float:left;  margin-top:0px;  margin-bottom:10px}
#categorylist ul{float:left;  margin:0px;  margin-left:20px;  padding:0px;  font-size:11px}
#categorylist li{list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSa3if40q0wv2cn6eoF4NcSGC7TNr-YWC9f2u9lY82RcVlVaTn9JqVmtMn9umf8246ITHMOrODdLViPWYd26K0CQ5xkajNsNc9pbSyhf5zg4lyi0vlF2cgm06tZG7icaTkjBsHBQIYcLBk/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
#categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none;  color:#696969; font-size:12px}
#categorylist a:visited {color:#3483b0; text-decoration: none}
#categorylist a:hover{color:#f79e1f}

• Simpan perubahan template anda dengan menkan tombol Save Templates.  Sampai di sini proses menanamkan kode CSS ke dalam dokumen HTML template selesai, dan lanjutkan dengan langkah berikutnya.

Menambahkan gadget type HTML ke dalam Layout Blog

• Pastikan anda masih dalam posisi login di blogger

• Pilih menu Layout ->> Add a gadget ->> Pilih gadget Type HTML/Javascript

 

• Masukkan kode di bawah ini ke dalamnya dan tekan tombol Save untuk menyimpan gadget.

<script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
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() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)

}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>1)
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
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>
<div id="categorylist">
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

• Sekarang periksa blog anda pastikan widget Random Posts telah tampak pada blog anda.  Jika berhasil jangan lupa berkomentar ya ...

Happy Blogging ^_^
NOTE :

Untuk mengatur jumlah artikel yang ditampilkan secara acak pada widget silahkan ganti angka 8 pada kode maxresults=8 sesuai dengan keinginan anda.  Pada script di atas terdapat 2 kode maxresults=8, jika anda merubahnya samakan angka pada kedua kode tersebut.

Read More

Menggunakan Top Post di Blogger

Widget Top Posts yang akan saya share kali ini, adalah salah satu widget blogger yang akan menampilkan daftar posting berdasarkan jumlah komentar pengunjung.  Postingan yang paling banyak medapatkan komentar pengunjung akan ditempatkan pada urutan teratas disusul postingan berikutnya yang mendapatkan komentar lebih sedikit, demikian seterusnya sampai batas yang telah ditentukan.

Top Posts Widget Blogger memiliki prinsip kerja yang mirip dengan Widget Popular Posts yang sering digunakan oleh kebanyakan blogger, yaitu menampilkan daftar posting yang sering dibaca oleh pengunjung, yang membedakan kedua widget ini adalah parameter yang dijadikan tolak ukur untuk menampilkan daftar posting, jika widget popular posts mengambil parameter page views maka widget top posts menggunakan parameter jumlah komentar pengunjung, sehingga Widget Top Posts dapat dijadikan alternatif pengganti Widget Popular Posts atau Anda dapat menggunakan kombinasi kedua widget ini. 

Widget Top Posts didesign oleh author BloggerSentral blog menggunakan kombinasi javascript serta Yahoo Pipes untuk mengkalkulasi jumlah komentar pada setiap posting yang telah dipublikasikan serta mengurutkan postingan berdasarkan jumlah komentar pengunjung pada sebuah blog.

Script widget TOP Posts ini telah saya modifikasi dari script aslinya dengan menghilangkan tampilan angka jumlah Komentar setelah judul posting dan mengganti nomor urut daftar top posts dengan bullet list.  Walaupun menggunakan javascript namun widget ini cukup ringan, instalasinya pun sangat mudah, Anda cukup menambahkan gadget type HTML/javascript pada layout blog, penempatannya bisa pada sidbar atau pada bagian footer seperti yang dapat Anda lihat pada bagian bawah halaman homepage blog ini.

Cara Memasang Widget TOP Posts pada Blog dengan Platform Blogger

Untuk memasang widget ini, ikuti detail langkah-langkahnya seperti di bawah ini :

• Login ke blogger dengan ID Anda

• Pada halaman dashboard bloger klik link Title Blog Anda

• Pilih menu Layout (Tata Letak) >> Add a gadget >> Pilih gadget type HTML/Javascript

• Copy script di bawah ini dan paste ke dalam kotak Content gadget type HTML/Javascript.  Pada bagian Title masukkan TOP Posts

<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ul style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write('</a></li>');
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://tipsseoblogger.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json"
type="text/javascript"></script>

• Klik tombol Save untuk menyimpan gadget dan atur penempatan gandget, sesuaikan dengan tampilan blog Anda.

Kustomisasi Script Top Posts Widget Blogger

• Script di atas akan menampilkan daftar posting dengan bullet lists jika ingin menggunakan nomor urut ganti kode <ul style pada script di atas dengan kode <ol style> serta </ul> dengan </ol>, lihat kode yang dibold dengan warna biru

• Untuk mengatur jumlah daftar postingan yang akan ditampilkan ganti angka 10 yang dibold biru dengan angka yang Anda inginkan

• Ganti URL http://tipsseoblogger.blogspot.com dengan URL blog Anda. 

Happy Blogging ^_^

Read More