Membuat Top Komentator Blogger Blogspot

{ Blogger Tutorial }

Menampilkan top komentator pada dasarnya adalah sebuah bentuk penghargaan bagi komentator - komentator blog kita. Di blog ini, ada 5 komentator terbanyak yang ditampilkan. Semua membawa link menuju blog masing - masing. Nah, bagaimana sih caranya bikin top komentator untuk blogger blogspot?

Mudah saja. Pertama, add new gadget. Tambahkan gadget javascript/HTML yang bisa anda temukan pada dashboard tampilan blog anda. Setelah itu isi dengan kode berikut :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a08a1225cab99d71150697405dc19ed8&url=http%3A%2F%2Fposide.blogspot.com&num=10&filter=BudiTyas,Poside" type="text/javascript"></script>

Beberapa yang perlu diganti diantaranya :

• poside.blogspot.com : ganti dengan nama blog anda.
• num=10 : adalah jumlah komentator yang ditampilkan. Bisa anda ganti sekehendak anda.
• filter=BudiTyas,Poside : adalah nama komentator yang difilter/tidak ditampilkan. Dalam contoh di atas, ada dua nama yang tidak saya tampilkan.

Tertarik? Modalnya cuma copy - paste kok. Mudah sekali. Silahkan dicoba.

Auto Readmore : Read More Otomatis Blogger

{ Blogger Tutorial }

Berbeda dengan mekanisme kerja readmore versi manual, readmore otomatis ini bekerja dengan mengganti/mereplace materi post dengan text yang digenerate oleh javascript. Disamping kelebihannya yaitu simpel - tidak repot, metode ini bisa gagal saat javascript tidak terload/pemanggilan gagal. Javascript sebagai mesin pemroses instruksi bisa anda pasang secara langsung di template, bisa juga anda tempatkan di lokasi lain kemuddian dipanggil menggunakan kode yang jauh lebih singkat. Untuk yang dipasang langsung, tutorial bisa anda dapatkan di blog o-om (link di bawah), sedang untuk javascript external, berikut tutorialnya :

Pasang kode pemanggil javascript

Masuk ke editing HTML, jangan lupa contreng expand template widget. Kemudian pasang script berikut diatas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 350;
summary_img = 300;
img_thumb_width =250;
</script>
<script src='http://www.geocities.com/beteworks/readmorebudi.txt' type='text/javascript'/>

Note : kode sedikit berbeda jika dibanding aslinya. Tinggi tumbnail tidak diperlukan karena dibuat menyesuaikan lebar sehingga tetap proporsional.

var thumbnail_mode = pilihan adalah float atau no-float. Jika float, tumbnail ada di sebelah kiri dan dilingkupi tulisan, jika no-float, tumbnail sejajar dengan tulisan.
summary_noimg = menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail
summary_img = menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail
img_thumb_width = lebar maksimal tumbnail dalam piksel.

Pasang kode penampil hasil

Ganti code <data:post.body/> dengan script dibawah ini;

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<b:else/><data:post.body/></b:if>

Pasang kode icon readmore

Kode berikut berfungsi untuk memunculkan icon readmore. Kode bisa dipasang dibawah kode di atas, atau bisa juga dipasang sejajar dengan link komentar, kategori, atau di lokasi lain sesuka anda selama masih dalam lingkup post.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><img src='http://www.geocities.com/beteworks/readmore.gif' style='float:right;'/></a>
</b:if>

Level	5
Fungsionalitas	8
Estetis	8
Tutorial Indo	Cara pasang Auto Read More
Tutorial Inggris	-
Sampel	Poside

Tab Navigasi Blogger Blogspot

{ Blogger Tutorial }

Mungkin ada beberapa dari anda tertarik untuk mengimplementasikan tab navigasi seperti yang saya gunakan di sidebar untuk mengelompokkan widget(komentar | pos baru | jejak | dst..). Tab navigasi selain praktis, hemat tempat, juga bisa menambah nilai artistik maupun fungsionalitas blog anda. Nah, berikut ini adalah langkah - langkah untuk membuatnya :

Menuju dashboard editing, klik tata letak, pilih bagian edit HTML. Expand template widgetnya tidak perlu dicontreng. Ok, saya asumsikan anda cukup advance, sudah cukup mengenal elemen - elemen template, jadi to the point aja :

1. Persiapkan CSS
Agar bisa tampil, CSS kita pasang dulu. Mudah, tinggal copy - paste. Jika nantinya anda menghendaki tampilan yang berbeda, anda bisa ubah sendiri sesuai template blog anda. Berikut kode yang perlu anda pasang :

/*======== SIDE TABBER =======*/

#tabsidebar-wrapper{
width: 320px;
/* This will manage the width of the tab content. Usually this be same as your sidebar*/
float: left;
margin: 0px 0px 15px 10px;
border: 1px none $bordercolor;
}

.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:1px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}

.tabber .widget {margin-bottom: 0.3em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0px;
padding: 8px 0;
border-bottom: 0px dotted $bordercolor;
}

ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em 7px 0.5em;
margin-right:2px;
border: 1px solid $bordercolor;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:$titlecolor;}
ul.tabbernav li a:visited { color: #00638d;}
ul.tabbernav li a:hover{color:#eee; background: $titlecolor; border-color: $bordercolor;}
ul.tabbernav li.tabberactive a{
background-color: $pagetitlecolor;
color: #eee;
border-bottom: 1px solid $bordercolor;
}

ul.tabbernav li.tabberactive a:hover{
color: #eee;
background: $titlecolor;
border-bottom: 1px solid $bordercolor;
}

.tabberlive .tabbertab {
background: #fff;
margin-top:5px;
padding:5px;
border-bottom:1px dotted $bordercolor;
border-top:1px dotted $bordercolor;;
max-height:350px;
overflow:auto;
}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

note:
- CSS berbasis template minima
- kode warna menggunakan $blablabla.. inherit dengan variabel minima. Jika template anda tidak menggunakan variabel CSS blogger, bisa anda ganti dengan #FFFFFF atau yang semacamnya.
- max-height:350px; adalah ketinggian maksimum isi tab navigasi, bisa anda ubah sendiri sesuai selera, atau bisa anda hilangkan jika anda tidak membatasi ketinggian isi tab.

2. Pasang Javascript
Kode javascripnya cukup panjang, jadi ditempatkan di file tersendiri. Untuk memanggilnya, cukup anda pasang kode berikut di atas tag </head> atau di bawah ]]></b:skin>

<script src='http://www.geocities.com/beteworks/tabber.js' type='text/javascript'/>

note:
Kode saya tempatkan di geocities yang akan ditutup oktober mendatang. Jadi, sebaiknya anda hosting sendiri kode tersebut.

3. Tempatkan Tab Navigasi
Nah, karena perangkat pendukung sudah terpasang, sekarang tinggal menempatkan kode agar tab navigasi tampil di blog. Lokasi penempatan kode sangat variatif tergantung template blog anda. Biasanya diletakkan di sidebar diantara kode pembuka dan penutup sidebar. Kode dasarnya adalah sebagai berikut :

<div class='tabber' id='tab1'>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab01' preferred='yes' showaddelement='yes'/>
</div>

</div>

Jika anda menghendaki tab 4 kolom, tinggal duplikat saja bagian dalamnya menjadi :

<div class='tabber' id='tab1'>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab01' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab02' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab03' preferred='yes' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab04' preferred='yes' showaddelement='yes'/>
</div>

</div>

Nah, anda sudah memiliki tab navigasi 4 kolom dalam kondisi kosong. Selanjutnya adalah cara mengisi tab - tab yang masih kosong tersebut.

note:
Jika anda ingin membuat lebih dari 1 tab navigasi, tulis saja seperti di atas, hanya perlu dibedakan id nya. Misal di atas adalah id=tab1 , bisa anda namakan id=tab2 untuk yang lain.

4. Mengisi tab dengan beragam widget
Editing di mode html sudah selesai. Setelah anda save, kita berpindah ke bagian penempatan elemen/widget. Jika penempatan kode sebelumnya berhasil, maka di halaman penempatan widget akan muncul tab dengan angka satu hingga empat (atau sejumlah anda pasang tab sesuai kode di atas). Screenshoot jika berhasil adalah sebagai berikut :

Untuk mengisi widget/gadget di tiap tab, tinggal anda klik angkanya lantas klik add new widget/tambah widget. Selanjutnya sama seperti umumnya penambahan widget biasa. Bisa di drag-drop atau anda seret kesana kemari sesuka anda.

Demikian tutorial kali ini, jika kurang jelas silahkan tinggalkan pertanyaan di kolom komentar.

Tag Cloud Flash Untuk Blogger Blogspot

{ Blogger Tutorial }

Jika anda tertarik membuat label tag cloud flash untuk blogger blogspot seperti yang tampak di bagian kanan blog ini, berikut langkah membuatnya :

Pertama, anda pasang dulu widget label standar dari blogger. Setelah itu, masuk ke editing html. Jangan lupa contreng expand widget template. Kemudian cari kode label berikut :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ganti kode tersebut dengan :

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a>, <a href='http://poside.blogspot.com'>Poside</a>, and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;150&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='16'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keterangan :
300 : Lebar widget.
150 : Tinggi widget.
#ffffff: Warna backgroud widget.
0x333333 : Warna font/huruf.
100 : Kecepatan pergerakan animasi.
16 : Ukuran zoom huruf.

Semua bisa anda ganti sesuai dengan theme anda.

Level	5
Fungsionalitas	5
Estetis	7
Tutorial Indo	Poside
Tutorial Inggris	-
Sampel	Poside

Blogspot : Tampilan Daftar Isi dan Kategori Yang Sederhana

{ Blogger Tutorial }

Daftar isi blog, kategori, dan hasil pencarian jika ditampilkan utuh layaknya halaman utama tentunya akan terasa berat dan makan waktu untuk tampil. Untuk itu, tips berikut merupakan penyederhanaan tampilan sehingga data yang ada bisa tampil lebih sederhana dengan loading time yang lebih cepat.

Langkah - langkahnya sebagai berikut:
Setelah masuk ke bagian modifikasi kode blogger dan mencontreng expand template widget, temukan kode berikut :

<b:include data='post' name='post'/>

Kemudian ganti dengan kode berikut :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div> <data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Penjelasan :
Dengan kode di atas, maka untuk halaman non homepage dan non item, data yang ditampilkan hanya data judul post saja.

Bagi theme - theme tertentu, data tanggal mungkin tetap muncul. Untuk menghilangkannya, di atas kode yang baru saja diganti tadi ada kode semacam ini :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Mungkin tidak identik, tapi tetap mengandung kode <data:post.dateHeader/> di sana. Nah, hapus dan pindahkan kode tadi ke kode pengganti sehingga keseluruhan kode pengganti yang terbentuk adalah :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div><data:post.title/></div></a>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>

Dengan begitu, informasi tanggal hanya muncul di halaman homepage dan halaman item post saja.

Untuk membuat daftar isi, tinggal bikin link dengan alamat sebagai berikut :

http://BLOGANDA.blogspot.com/search?max-results=200

Link bisa anda tempatkan dimanapun anda suka. Jumlah 200 itupun bisa anda ubah sesuai selera.