Blog Gue (Simpler is Better!!)

Home » Blogger Hack

Membuat author gravatar pada blogspot

Banyak cara membuat modifikasi pada bagian komentar, seperti membuat mybloglog avatar, salah satu triknya suhu Jaloee dan lain-lain. Kali ini saya mencoba memberikan salah satu trik baru untuk modifikasi perwajahan bagian komentar dengan menampilkan author gravatar sehingga memberikan kesan seperti komentar themes wordpress. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua.sedangkan keuntungannya adalah tidak memakai javascript sehingga loading pagenya cukup cepat.

Langkah-langkah yang perlu di siapkan adalah

Login ke blogspot kemudian Layout > Edit HTML
Taruh kode di bawah ini di atas ]]></b:skin> :

.commentlistdiv { margin-top: 10px;padding:10px; background: #FFF;border: 1px dotted #ddd;font-size: 0.75em;color: #666;} .commentlistdiv h1 {font-size: 1.3em; color: #366799;border-bottom: 1px solid #eee; line-height: 1.5em;} .commentlist li {background: #fff; border-bottom: 1px dotted #ddd;padding: 20px;} .commentlist li.alt {background: #fff;} .pane_l {float: left;display: inline; width: 160px;min-width: 160px;max-width: 160px; border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;} .pane_r {display: block;line-height: 1.5em;margin-left: 201px;} .c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;} .gravatar {padding: 4px;float:right;border:2px solid #ccc;} .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;} .c_approved {color: #aaa;font-size: 0.9em;} .comment-form { background:#EFEFEF; border:5px solid #cccccc; margin:0 10px 20px 10px; padding:10px 0 0 15px; } .owner-Body {display: block;line-height: 1.5em;margin-left: 201px;} .owner-Body p { font-size:100%; margin:0 0 .2em 0; color:#FF0000; text-decoration:bold; }

Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
Cari kode <dl id='comments-block'> dan cari sampai tag pentupnya </dl>

NB : - ganti YOUR URL PIC dengan alamat images photo sobat ukuran photo width=55px dan height=55px - ganti YOUR URL NOPIC dengan alamat images photo pengunjung ukuran photo width=55px dan height=55px

Finally, simpan hasil pekerjaan sobat dan lihat hasilnya

Semoga trik sederhana ini bisa mempercantik bagian komentar sobat

Rewrite blog pagination di blogspot dengan javascript

Tulisan posting lama (older post) dan posting baru (newer post) pada blog pagination dapat di rubah sesuai dengan judul postingnya dengan bantuan javascript dan hack ini sebenarnya sudah lama dan tidak di unpublish oleh yang punya hack karena untuk kepentingan blog personalnya, tapi saya sudah bisa mengungkapkan buat sobat blogger yang ingin menampilkan blog pagination sesuai dengan judul postingannya. Kalau sobat mau lihat screenshootnya :

Demo Preview

Sudah tidak sabar ingin membuatnya?

Seperti biasa login ke blogspot kemudian Tata Letak > Edit HTML dan jangan lupa download full template!! Untuk mengantisipasi hal-hal yang di inginkan :p .
Cari kode di bawah ini :
#blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager {text-align: center; }
Nb : kode di atas merupakan standar kode template minima, intinya cari kode yang tercetak tebal
Kemudian ganti semua kode di atas dengan kode di bawah ini :

#blog-pager-newer-link, #top-pager-newer-link {
float: left;
width:200px;
text-align:left;
}
#blog-pager-older-link, #top-pager-older-link {
float: right;
width:200px;
text-align:right;
}
#blog-pager, #topPagerLinks {
margin:20px 0 0 0;
text-align: center;
font-variant:small-caps;
font-size:90%;
font-family: Tahoma, sans-serif;
letter-spacing:-0.05em;
}
#blog-pager a , #topPagerLinks a {
text-decoration:none;
}
#topPagerLinks {
padding:5px 0 5px 0;
margin:10px 0 0;
border:solid 1px #ddd;
}
Setelah itu Expand Widget Templates
Cari kode ini <b:include data='top' name='status-message'/> dan kemudian masukkan kode di bawah ini :
<div id='topPagerLinks'/> taruh kode tersebut di atasnya.
Kemudian cari lagi kode di bawah ini
<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> <script type='text/javascript'>pItemPager()</script> </div>
Nb : Kode berwarna merah sudah saya masukkan jadi tinggal menaruhnya seperti contoh
Langkah selanjutnya cari </head> terus masukkan kode ini <script src='http://subagya.googlepages.com/repagination.js' type='text/javascript'/> taruh kode tersebut di bawahnya.
Simpan hasil pekerjaan sobat dan semoga berhasil

Thanks to : phydeaux3

Next and previous comments in blogspot ?

Banyak sobat blogger yang menanyakan bagaimana cara menampilkan komentar dengan fasilitas next and previous comments, padahal ini bukan suatu yang baru di dunia blogspot, teknik ini sudah ada pada tahun 2006 hanya saja sobat blogger Indonesia kurang familiar (menurut saya-red)dengan next and previous comments hack ini. Baiklah saya akan sedikit ulas mengenai teknik hack ini.
Penemu hack ini adalah ( Ramani-red), beliau ini tidak mempublikasikannya teknik ini di blognya ini, tetapi Ramani ini sudah mengintegrasikannya ke dalam sebuah template yang disebut Neo Template yang menurut saya sangat cepat loading pagenya dan ada fasilitas next and previous comments , tidak hanya itu saja label dan recent posts nya juga di integrasikan dengan sistem panggil atau fetch mirip memang sepert Ajax Labels dari Deepak, ditambah lagi dengan fasilitas read more dan collapse postnya.
Template ini sudah disisipkan Ramani berbagai macam fasilitas yang bagi saya sangat menunjang di blog saya ini, hanya saja memang tampilan layout templatenya kurang menarik buat saya dan ada beberapa kelemahan pada template ini. Buat sobat yang tertarik dengan template original neo silahkan klik di sini untuk mendowloadnya atau mau lihat view demonya. Jadi silahkan menikmati betapa kerennya Neo Template dari Ramani.

Another numbering comments

Tentunya sobat blogger pernah mencoba hack numbering comments ala fernadoo , dan yang sudah di alih bahasakan oleh kang firdaus. Nah kali ini saya kan membahas bagaimana memberi nomor urut dengan metode lain atau istilahnya another numbering comments. Sebelum melangkah lebih jauh saya kasih lihat screen shootnya di bawah ini :

Nih Scren Shootnya!!!

Atau bisa di lihat live demonya silahkan klik di sini !!
Tapi trik ini mungkin agak sulit buat sobat blogger karena perlu pemahaman struktur dari template sobat terutama bagian komentarnya, saya sudah menguji cobakan dengan template minima yang menurut saya basic dari template-template yang lain dan berhasil!!!. Kalau memang tertarik silahkan lanjut membacanya.

Berbeda dengan teknik numbering comments ala fernadoo yang hasilnya nomor tersebut mempunyai permalink (atau url menuju ke arah komentar tersebut dan memakai internal javascript, tetapi dengan teknik yang baru ini tidak ada permalinknya, murni pengurutan penomoran komentar dengan teknik css dan kode HTML-an. Saya sarankan sobat blogger untuk mepertimbangkannya, karena ada keuntungan dan kekurangan memakai teknik ini.

Keuntungannya :
1. Tidak perlu kode javascript yang tentunya membebankan loading page blog sobat
2. Sangat simple pembuatannya karena sedikit memakai css - untuk membuat listnya( menurut saya - red)
Kekurangannya :
1. Monoton < karena penomoran ini memakai font body komentar)

Langkah-langkah pembuatan another numbering comments :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :



.commentlist {

margin: 0px 10px;

padding-left: 20px;

line-height: 130%;

font-weight: bold;

font-style: italic;

font-size: 150%;

}

.commentlist li{

margin-bottom: 10px;

padding: 5px 10px;

background: #BDBDBD;

}

.commentlist cite, .commentlist cite a, .commentlist cite a:visited {

font-weight: bold;

font-style: normal;

font-size: 85%;

color: #CC6600;

}

Simpan hasil pekerjaan sobat

3. Langkah ini sedikit memerlukan kejelian sobat saya akan memberikan penjelasannya
, cari kode ini <b:loop values='data:post.comments' var='comment'> kemudian ganti dengan kode di bawah ini :



<ol class='commentlist'>

<b:loop values='data:post.comments' var='comment'>

<li>

<cite>

Kemudian perhatikan struktur kode HTML-an ini:



<dl id='comments-block'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>



</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>      

</dl>

Kode di atas merupakan pemenggalan dari bagian komentar template minima, kalau struktur template sobat sama dengan struktur di atas silahakan ganti dengan kode di bawah ini :



<dl id='comments-block'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

</cite>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>



</dd>

</li>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</ol> 

</dl>

Perhatikan kode yang di cetak tebal merah!! Merupakan tag penutup kode <ol>, <cite> dan <li> yang kalau sobat blogger jeli bisa di aplikasikan ke template yang beda struktur dengan template minima!!! Perhatikan strukutur area komentar template lainnya dan silahkan sobat trial and error!!. Silahkan bereksperimen dan thinking out the box. Kalau masih bingung silahkan YM-an dengan saya atau kasih komentar mengenai another numbering comments ini.

Mempercantik area numbering comments

Postingan ini di buat atas permintaan sobat blog saya yaitu kang Riasmaja yang bunyi seperti ini,

Mmmm... kang... tuh tempelen nomer urut komentator diposting juga dunk caranya... pengennn... bagus banget soalnya...

Nah kali ini postingannnya bagaimana kita mempercantik bagian area "numbering comments" yang tentunya juga sudah tidak asing bagi sobat blogger tentang hack numbering comments, kalau mau lihat screnshootnya di bawah ini :

Mau tahu caranya?

Blogger hack ini saya integrasikan dengan blogger hacknya kang Jaloee yaitu "Menambah Numbering-Comments dan Photo-Author pada layout komentar 2 kolom" kalau belum baca silahkan meluncur ke TKP. Kalau sudah baca silahkan aplikasikan ke blog sobat, nah baru kita mulai hack area "numbering comments" nya.
Langkah-langkahnya mempercantik area numbering comments :

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML ( saya asumsikan sobat sudah aplikasikan hack dari kang Jaloee-red)

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.bubble1{
background:url(http://subagya.googlepages.com/comment-sobat.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}
.bubble2{
background:url(http://subagya.googlepages.com/comment-guwe.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

3. Kemudian cari kode ini :



<div class='commentphoto' style='margin-top:.5em;'/>

<span class='numberingcomments'>

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

Hapus kode yang berwarna tebal, setelah itu simpan hasil pekerjaan sobat
4. Sekarang masuk ke inti hacknya, sobat blogger cari kode ini <dd class='comment-footer'> dan masukkan kode ini dibawah ini tepat di bawah kode tersebut :



<div class='bubble1'><span class='numberingcomments'>

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

</div>

Langkah 4 merupakan hack untuk mengubah tampilan "numbering comments" nya komentar pengunjung blog sobat

5. Sekarang bagian yang punya blog (owner) kita ubah, cari kode di ini <dd class='comment-footer-author'> , kemudian masukkan kode di bawah ini tepat setelah kode tersebut :



<div class='bubble2'>

<span class='numberingcomments'>

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

</div>

Langkah terakhir simpan hasil pekerjaan sobat dan lihat hasilnya, kalau sukses berarti sobat hwebat, kalau gagal kasihan deeh loooh... kekekekekkeke :p . Btw anyway buzway blogger hack ini sudah saya aplikasikan ke template minima dan hasilnya berhasil, and then satu lagi template dari free downloadan hasilnya juga bagus. Ok, kalau masih bingung silahkan hubungi saya lewat YM, email atau berkomentar di postingan ini. Happy blogging and selamat menunaikan ibadah puasa.

Menampilkan kode HTML/Javascript yang unik di postingan (3)

Sehabis sahur buat posting baru nih sob biar masih refresh ingatan saya, sesuai dengan judulnya "Menampilkan kode HTML/Javascript yang unik di postingan versi 3" (biar lengkap bikin trilogynya-red). Seperti yang sudah saya posting sebelumnya di blog ini,ada banyak cara menampilkan kode HTML/Javascript di dalam postingan, kalau yang belum baca silahkan klik di sini untuk versi 1 dan klik di sini untuk versi 2. Sekarang kita lihat perbedaan masing-masing versinya. Mau tahukan perbedaannya?

Versi 1 :

Versi 2 :



#rec { margin:20px;padding:20px;}

.hint {

border: 1px solid #4AB7FF;

font-size: 11px;

color: #191919;

background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;

font-family: Verdana, sans-serif, "Courier New";

line-height: 125%;

margin: 5px 0px 0px;

padding: 12px 12px 12px 40px;

display: block;

font-weight: 400;

width: 85%;

}

Versi 3 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Sangat jelas sekali perbedaannyakan, nah sekarang tinggal bagaimana cara membuatnya dan kelebihan dari versi 3 ini.
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Masukkan kode ini di bawah 

3. Kemudian simpan hasil pekerjaan sobat, nah sekarang tinggal bagaimana mengaplikasikannya.
Gunakan tag kode ini setiap ingin memposting kode HTML-an atau CSS,dan javascript atau kalau mau lebih jelas mampir ke sini

<pre name="code" class="css">HTML/CSS/javascript </pre>

Kelebihan dengan memakai metode ini kita tidak perlu lagi memparse/encode kode HTML-annya langsung taruh saja sesuai kode mentahnya, dan kalau mau ambil kodenya klik view plain, terus kalau mau ngeprint klik print.

Ok bro, cukup kayaknya postingan kali ini soalnya saya sudah mengantuk berat nih, and btw anyway buzway happy blogging dan selamat menunaikan ibadah puasa.

Saya dapat ilmu ini dari sini.

Menampilkan kode HTML/Javascript yang unik di postingan (2)

Sesuai dengan judul titlenya (Menampilkan kode HTML/Javascript yang unik di postingan (2)), kali ini saya akan membuat blogger trick bagaimana menampilkan kode HTML/Javascript berbeda dengan versi sebelumnya, jika belum pernah baca versi sebelumnya silahkan klik di sini. Kalau mau lihat perbedaannya perhatikan contoh di bawah ini:

Versi 1 :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Versi 2 :



/* Label Cloud Styles

----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

Perhatikan perbedaanya ketika mouse di arahkan ke text area versi 2 warna backgroundnya berubah!!!

Blogger trick ini sangat simple sekali untuk kita aplikasikan di blog kita,mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> kemudian masukkan kode di bawah ini sebelum kode tersebut :



.post code {

font-family: 1.2em 'Courier New', Courier, Monospace;

display:block;

overflow: auto;

text-align: left;

padding: 10px;

color: #444E1F;

background-color: #F7BE81;

border-top: 2px solid #D0EC98;

border-right: 1px solid #D0EC98;

border-bottom: 1px solid #D0EC98;

border-left: 1px solid #D0EC98;

}

.post code:hover {

background-color:#F6E3CE;

}

Kemudian simpan hasil pekerjaan sobat.
3. Untuk mengaplikasikannya ke dalam postingan, sobat tinggal menaruh kode HTML/Javascript di antara <code> Kode HTML/Javascript </code> di mode edit HTML.
Contohnya :
<code> Kode HTML/Javascript </code>

Kalau berhasil berarti sobat orang yang beruntung, kalau gagal kasihan deeh loooh....!!!! Ok, sobat blogger nanti kita sambung lagi dengan blogger trick lainnya, happy blogging and have anice weekend :D

Integrasi Ajax Label dengan Label Cloud

Ketika saya berkunjung ke blog sobat Sawa , saya menemukan kalimat yang mengena buat saya “Blog ini kan sebenarnya ini hanyalah catatan elektronik saya, hanya bermaksud untuk mengingatkan saya.“ , kutipan di tersebut membuat saya semangat lagi untuk mengeblog lagi di saat saya sedang bimbang, jadi saya menulis ulang blogger hack ini untuk sekadar mengingatkan saya. Ok deh to the point ajah, sebenarnya blogger hack ini sudah pernah di bahas di blog kang Jaloee, mengenai Ajax label.

Blogger hack ini menurut saya sangat bermanfaat sekali. Karena memanggil summary dari postingan kita tanpa merefresh halaman blog sobat, kalau mau lihat yang punya blogger hack silahkan klik disini, nah di sini saya akan coba mensadur kembali blogger hack tersebut dengan mengintegrasikannya ke dalam label cloud punya si Phydeaux3 dan di integrasikan oleh Deepak dengan Ajax labelnya. Hasil dari blogger hack tersebut dapat di test di bog ini, silahkan sobat pilih label yang di kehendaki dan lihat hasilnya. Kalau tertarik silahkan sobat melanjutkan membacanya.

Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

Pertama kita install terlebih dahulu Label cloudnya, caranya adalah cari kode di ]]></b:skin> kemudian masukkan kode dibawah ini sebelum kode tersebut :

Setelah selesai masukan kode di bawah ini sesudah kode ]]></b:skin> :

Simpan hasil pekerjaan sobat terlebih dahulu

Nah di langkah ini saya sudah memasukkan kode dari ajak label supaya memudahkan instalasi ajax labelnya, yang perlu sobat lakukan adalah cari kode ini, tanpa mencentangkan expand widget

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Setelah ketemu ganti kode tersebut dengan kode di bawah ini :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

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

    <h2><data:title/></h2>

  </b:if>



  <div class='widget-content'>

  <div id='labelCloud'/>

<script type='text/javascript'>



// Don&#39;t change anything past this point -----------------

// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

      if(a&gt;b){

          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

             }

      else{

          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

          }

      return v

   }





var c=[];

var labelCount = new Array();  

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>



for (t in ts){

     if (!labelCount[ts[t]]){

           labelCount[ts[t]] = new Array(ts[t])

           }

        }

var ta=cloudMin-1;

tz = labelCount.length - cloudMin;

lc2 = document.getElementById(&#39;labelCloud&#39;);

ul = document.createElement(&#39;ul&#39;);

ul.className = &#39;label-cloud&#39;;

for(var t in ts){

    if(ts[t] &lt; cloudMin){

       continue;

       }

    for (var i=0;3 &gt; i;i++) {

             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

              }      

         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

         li = document.createElement(&#39;li&#39;);

         li.style.fontSize = fs+&#39;px&#39;;

         li.style.lineHeight = &#39;1&#39;;

         a = document.createElement(&#39;a&#39;);

         a.title = ts[t]+&#39; Postingan dalam label &#39;+t;

         a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;

         a.href = &#39;javascript:getCat(&quot;&#39; + encodeURIComponent(t) + &#39;&quot;,null)&#39;

         if (lcShowCount){

             span = document.createElement(&#39;span&#39;);

             span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;

             span.className = &#39;label-count&#39;;

             a.appendChild(document.createTextNode(t));

             li.appendChild(a);

             li.appendChild(span);

             }

          else {

             a.appendChild(document.createTextNode(t));

             li.appendChild(a);

             }

         ul.appendChild(li);

         abnk = document.createTextNode(&#39; &#39;);

         ul.appendChild(abnk);

    }

  lc2.appendChild(ul);    

</script>



<noscript>

    <ul>

    <b:loop values='data:labels' var='label'>

      <li>

        <b:if cond='data:blog.url == data:label.url'>

          <data:label.name/>

        <b:else/>

          <a expr:href='data:label.url'><data:label.name/></a>

        </b:if>

        (<data:label.count/>)

      </li>

    </b:loop>

    </ul>

</noscript>

    <b:include name='quickedit'/>

  </div>



</b:includable>

</b:widget>

Simpan kembali hasil pekerjaan sobat, jika berhasil di simpan, berarti sobat telah mengikuti langkahnya dengan benar

Kemudian cari kode </head>, (sekarang baru di centang expand widgetnya-red) paste kode di bawah ini di atas </head> :

//<![CDATA[

// User customisable parameters

// ----------------------------

// maxresults - Number of results to show per page

// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.

// feedLabel - Text to show for the label feed link.

// catLabel - Label for categories.

// closeLabel - Label for Close button. You can use hypertext also.

var maxresults = 3;

var navFlag = 1; //ON by default

var feedLabel = "Subscribe to";

var catLabel = "Di Simpan di:";

var closeLabel = "Tutup";

//]]>

</script>

NB : Script di atas sudah di modifikasi sedikit oleh saya, kalau mau aslinya silakan klik disini

Langkah selanjutnya cari kode ini di bawah ini :

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Setelah itu ganti dengan kode ini :

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Simpan hasil pekerjaan sobat, jika berhasi pasti tidak ada masalah, jika tidak silahkan ulangi prosedurnya dari no 5

Setelah itu masuk ke Tata Letak > add page elements pilih yang di atas post, kalau belum ada pilihan add page elemet di atas post silahkan baca di sini ( biasanya blogger hack ini di simpan di atas post-red). Pilih insert HTML/Javascript kemudian masukkan kode ini di bawah :

<div id="indicator" style="display:none"><img alt="Indicator" src="http://subagya.googlepages.com/loading-trans.gif"/>Sedang Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>

Kemudian simpan, dan silahkan lihat hasil pekerjaan sobat di blog sobat. Jika berhasil berarti ”selamat anda sukses”, jika tidak silahkan ikuti langkah-langkahnya dengan teliti.

Atau silahkan kunjungi ke blog sobat ini untuk, penjelasan dalam bahasa inggrisnya, atau ke sini blog sobat ini juga.

Menampilkan text di dalam area yang unik di postingan

Bagaimana cara menampilkan text yang berada dalam area tersendiri yang berbeda dengan isi postingannya? Hal ini di tanyakan oleh sobat saya Riasmaja dan saya akan mempostingnya untuk blogger mania lainnya, prinsipnya hampir sama dengan postingan saya sebelumnya silakan baca disini atau ke yang punya code aslinya di Mohamed Rias. Seperti contoh di bawah ini

Contoh (note) :