Cara Membuat Widget Sejajar Bersebelahan Dan Rapi Di Blog

Siapa sich yang gak pengen blog / website-nya terlihat tidak rapi? Semua orang pasti menginginkan agar blog / website-nya tampak rapi, yaitu salah satunya dengan meletakkan widget agar sejajar bersebelahan/berdampingan.

Ternyata, caranya sangat mudah lho rekan-rekan blogger, contohnya seperti ini :

Untuk membuat seperti gambar berdampingan diatas, kamu hanya cukup menambahkan kode berikut ini :

<table><tr>

<td>Url Widget atau Gambar</td>

<td>Url Widget atau Gambar</td>

<td>Url Widget atau Gambar</td>

</tr></table>

Keterangan :

* Ganti tulisan yang berwarna Ungu dengan kode widget atau gambar yang kamu inginkan

GutLaK! Semoga blog / website-nya semakin keren!

Sumber : lano-htc.blogspot.com

Lihat yg lebih 'menarik' di sini !

Cara Membuat Widget LinkWithin Hanya Muncul Di Halaman Posting Blog

Rekan blogger, kalo kalian mengalami kebingungan yang sama seperti saya dalam beberapa minggu ini untuk mencari tahu, bagaimana cara membuat widget LinkWithin hanya muncul di halaman postingan saja, sekarang sudah ditemukan jawabannya.

Tadi iseng ngalor-ngidul keliling-keliling kayak ngeronda, nyari-nyari jawaban atas pertanyaan yang selama ini mengganjal di hati, dan syukurlah akhirnya terpecahkan juga di salah satu blog rekan blogger kita. Karena itulah, kali ini saya pun ingin berbagi juga ke rekan-rekan sekalian.

Ok, bila kamu telah memasang widget LinkWithin di blog kamu, maka yang akan terjadi adalah selain nongol di halaman posting, widget ini juga akan tampil di beranda atau home page di bawah posting blog.

Widget yang muncul di beranda ini tentunya akan membuat waktu loading home page blog kamu menjadi lebih lama. Nah, maka dari itulah agar loading home page menjadi lebih ringan, kita buat saja widget LinkWithin ini hanya tampil di halaman posting saja.

Bagaimana caranya? Tanpa berpanjang lebar lagi, silahkan simak tutorial untuk hide widget LinkWithin di home page ini. Namun ingat sekali lagi, pastikan kamu telah memasang widget LinkWithin pada blog kesayangan kamu, dan kalo belum silahkan klik disini.

Ikuti langkah-langkah berikut ini :

1. Login ke akun Blogger

2. Klik Design (Rancangan), lalu klik “Edit HTML”

3. Demi keamanan, klik Download Full Template (Download Template Lengkap) untuk mem-backup template kamu. Hal ini dilakukan untuk berjaga-jaga kalau nanti ada kesalahan dalam pengeditan, maka kamu dapat dengan mudah mengembalikan template ke seperti semula.

4. Beri tanda centang pada kolom “Expand Widget Templates”

5. Cari kode seperti di bawah ini :

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>

<b:includable id='main'><data:content/></b:includable>

</b:widget>

Seperti biasa, gunakan "Ctrl + F", kemudian masukkan kata kunci LinkWithin sebagai kata kunci utamanya

6. Tambahkan kode :

<b:if cond='data:blog.pageType == &quot;item&quot;'> setelah kode :

<b:includable id='main'> dan kode :

</b:if> sebelum kode :

</b:includable>

sehingga hasilnya menjadi seperti ini :

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>

</b:widget>

7. Silahkan klik “SAVE TEMPLATE” (SIMPAN TEMPLATE)

8. Done!

Gutlak! Semoga hasilnya seperti yang kamu harapkan.

Sumber : klikmunadi.blogspot.com

Kalau artikel diatas bermanfaat, lebih baik anda berlangganan di bawah ini :

Enter your email to subscribe:

Powered by FeedBlitz

Bikin Video Search di blogger...

Kalo lu pengen bikin video search yang terkastomisasi (ada pilihan search yang bisa lu isi menunya sendiri) macem punya gua ini (lihat di bagian paling bawah noh), itu tidak sesulit yang elu bayangin loh, cumak tiga jurus saja:

1. Lu Save dulu deh copy dari template elu yang sekarang ke hard drive lokal elu, kemudian lu musti dapetin kunci dari mbah Google.

2. Seperti biasa, buka Template->Edit HTML, pastikan "Expand Widget Templates" udah lu centhang. Tambahin kode dibawah ini, tepat setelah tag penutup </head>, dan gantiin kode dibawah yang udah ditebelin dengan kunci lu sendiri seperti di langkah nomer satu tadi. Kemudian Save template luh.

  <script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAA8UsdRzPglCG4j-KxFJ5BGdbNuZw'
type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet'
type='text/css'/>
<script src='http://www.google.com/uds/solutions/videobar/gsvideobar.js'
type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/videobar/gsvideobar.css'
rel='stylesheet' type='text/css'/>

3. Sekarang lu tambah widget satu lagi deh,pergi ke template=>page element=>tambah page element=>HTML/Javascript

a. Lu lihat kode dibawah ini :
</b:section>
</div>
<div id='sidebar-wrapper'>

b. Tambahin baris kode dibawah ini tepat sebelum baris kode di langkah 3.a diatas:

  <b:widget id='TextList1' locked='false' title='Interesting Video Search' type='TextList'>
<b:includable id='main'>

<!-- Video Mod/Hack by Hoctro. Free for use
in Blogger Beta. Please do not remove this
line & refer others to my original hacks
stored at http://hoctro.blogspot.com for proper
installation and latest updates - 10/18/06 -->

<h2><data:title/></h2>
<div id='videoPlayer'>Loading...</div>
<div class='widget-content'>
  <center>
  <div class='video-tags'>
    <b:loop values='data:items' var='item'>
      <a expr:href='"javascript:vbm.execute(\"" + data:item + "\")"'><data:item/></a>
      <span class='tag-sep'>|</span>
    </b:loop>
  </div>

  <div class='horizontalVideobar' id='videoBarMiddle'>Sabar...</div>
  </center>
 
  <script type='text/javascript'>
   var vbm;
   var options = {
       largeResultSet : true,
       horizontal : true,
       thumbnailSize : GSvideoBar.THUMBNAILS_SMALL
     }
     // set up the right bar as the master
     vbm = new GSvideoBar(
                 document.getElementById("videoBarMiddle"),
                 document.getElementById("videoPlayer"),
                 options
                 );

     vbm.execute("koeaing");
  </script>
  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

c. Tambahin entry di video search lu yang baru lu bikin ini,buka Template->Page Element, klik "Edit" di persegi panjang yang ada tulisannya "Interesting Video ..."

4. Selesai dan segera beramal ke Fakir miskin !

Wordpress Comment Style in Blogger

Sering kali kita males nulis comment di blog yang berbasis blogger karena kesannya ribet, perlu beberapa langkah buat nulis komen saja. Yang tadinya menggebu-nggebu niat mau komen jadi BT karena prosedur rese dari blogger buat sekedar komen saja. Lain dengan wordpress yang langsung nyediain kolom komen di halaman yang sama, kemungkinan orang ngisi komen lebih besar, karena gak ribet, jadi gak keburu BT.

Nah, ada orang pinter yang bernama jackbook, yang bisa mecahin soal ini. Edan tenan ini orang. Lu bisa lihat contohnya di bikinblogger bagian komentar ini, bagus kan ?

Lantas bagaimana caranya dong bik (panggilan panggung Bikinblogger)...tenang saja gua terangin ah.

1. Elu musti nyet-up comment in pop up window =>dasboard=>setting=>comment => enable pop up comment.

2.Pindah lah ke template=>edit HTML=> centang expand widgetnya=>Dowload full templatenya=> lu namain cobakomentarwp.xml.

Ingat selalu, lu tambahin .xml di belakang nama file, dan save as rtf file.

3. Buka wordpad lu kalo pake windows, kalo pake linux pake Gedit.=>Find/Search kode dibawah ini

<b:includable id=\'comments\' var=\'post\'>
<div class=\'comments\' id=\'comments\'>
<a name=\'comments\'/>
<b:if cond=\'data:post.allowComments\'>
<h4>
<b:if cond=\'data:post.numComments == 1\'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id=\'comments-block\'>
<b:loop values=\'data:post.comments\' var=\'comment\'>
<dt class=\'comment-author\' expr:id=\'\"comment-\" + data:comment.id\'>
<a expr:name=\'\"comment-\" + data:comment.id\'/>
<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=\'\"#comment-\" + data:comment.id\' title=\'comment permalink\'>
<data:comment.timestamp/>
</a>
<b:include data=\'comment\' name=\'commentDeleteIcon\'/>
</span>
</dd>
</b:loop>
</dl>

<p class=\'comment-footer\'>
<a expr:href=\'data:post.addCommentUrl\' expr:onclick=\'data:post.addCommentOnclick\'><data:postCommentMsg/></a>
</p>

</b:if>

<div id=\'backlinks-container\'>
<div expr:id=\'data:widget.instanceId + \"_backlinks-container\"\'>
<b:if cond=\'data:post.showBacklinks\'>
<b:include data=\'post\' name=\'backlinks\'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Kemudian lu genti gih sama kode dibawah :

<b:includable id=\'comments\' var=\'post\'>
<div class=\'comments\' id=\'comments\'>
<div class=\'comments\' id=\'comments\'>
<a name=\'comments\'/>
<b:if cond=\'data:post.allowComments\'>
<h4 id=\'comments\'>Comments for this post</h4>
<div id=\'comment-frame\' style=\'border: medium none ; background: transparent none repeat scroll 0%; display: block; height:750px; width: 98%; margin-bottom: 2px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;\'>
<iframe expr:src=\'data:post.addCommentUrl\' frameborder=\'0\' height=\'100%\' scrolling=\'auto\' style=\'border:none; background: transparent none repeat scroll 0%; \' width=\'100%\'/>
</div>
</b:if>
</div>

<div id=\'backlinks-container\'>
<div expr:id=\'data:widget.instanceId + \"_backlinks-container\"\'>
<b:if cond=\'data:post.showBacklinks\'>
<b:include data=\'post\' name=\'backlinks\'/>
</b:if>
</div>
</div>
</div>
</b:includable>

4. Search/find lagi kode dibawah ini :

<a class=\'comment-link\' expr:href=\'data:post.addCommentUrl\' expr:onclick=\'data:post.addCommentOnclick\'>

Kemudian lu genti deh ama kode dibawah ini :

<a expr:href=\'data:post.url + \"#comments\"\'>

5. Save template elu.

6.Pergi ke dashbor elu=>template=>restore/Back up template=>browse=>cobakomentarwp.xml=>upload=>save template =>Jadi deh ! HORE !

Di kode diatas, elu bakalan nemuin kode macem bawah ini :

http://lifewg.googlepages.com/html-code-leave-comment.gif

Itu tuh isinya gambar comment, kan critanya kita nggunain iframe nih buat nge-hack (hehehe....licik ya ?), nah gambarnya sih gambar default mbah blogger kayak inih :

Kalo lu mau, lu bisa pake gambar lu sendiri. Misalkan background biru, huruf digenti arial, biar cocok sama tema template blogger lu. Kalo lu kreatif sih boleh juga, gua males sih...heheheh/..kalo ada yang sudah buat bilangin gua ya ? Ntar tak copy...hahahah..dasar blogger males.

Related Post on Blogger - II

Dulu udah pernah gua tulis, contekan dari si Hoctro di sini, tapi rupanya ada orang yang lebih edan lagi dari Hoctro, bernama jackbook. Dia menyederhanakan hack ini dengan alasan yang sederhana, simple gak usah ruwet-ruwet.

Harus diakui memang yang dari si Hoctro agak mbulet dan lagian yang namanya related post kan hanya terdiri dari 'posting yang berhubungan' berdasar label. Kalo punya hoctro, postingannya sendiri masuk juga, kalo jackbook ini bener-bener posting yang berhubungan ,dalam satu label tapi tidak termasuk postingan itu sendiri.

OK mari kita mulai langkah-langkahnya :

1. Buka blogger dasbor lu=>template=>edit html=>click download full template buat cadangan kalo -kalo ada kericuhan ntar (buat cadangan gitu lho), terus jangan lupa, klik Expand widget.

2.Tadi kan elu sudah nge-save full template kan ? Copy lagi satu buat diotak-atik. Misalkan lu simpen sebagai cobarelatedposttemplate.xml. Ingat, harus dikasih .xml ! Lu tulis aja manual, simpen sabagai RTF (pake wordpad ya ? kalo lu pake windows, kalo pake linux mah gua saranin pake gedit, manteb tuh !

3.Lu sekarang sudah buka Wordpad/Gedit. Klik menu find/search. Cari kode dibawah ini

<data:post.body/>

4. Setelah itu coba lu copy kode ini :

<b:if cond=\'data:blog.pageType == \"item\"\'>
   <div class=\'similiar\'>
    <!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
    <!-- *****************Related Articles by Labels - Take Two****************** -->

    <!--
     Modified by JackBook.Com to make it easier to use. 
    1. Now, users don\'t need to change anything to use this widget. just copy and paste, and done!
    2. The current article will also be listed, now it\'s no more.
    -->

    <div class=\'widget-content\'>
    <h3>Related Posts by Categories</h3>
    <div id=\'data2007\'/><br/><br/>
     <div id=\'hoctro\'>
      Widget by <u><a href=\'http://hoctro.blogspot.com\'>Hoctro</a></u> | <u><a href=\'http://www.jackbook.com/\' title=\'Related Posts on Blogger Modified by JackBook.Com. Read More?\'>Jack Book</a></u>
     </div>
     <script type=\'text/javascript\'>

     var homeUrl3 = "<data:blog.homepageUrl/>";
     var maxNumberOfPostsPerLabel = 4;
     var maxNumberOfLabels = 10;

     maxNumberOfPostsPerLabel = 100;
     maxNumberOfLabels = 3;


     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('data2007').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>

   </div>
  </b:if>

ato lu bisa ngedonlot di sini

5. Lu tinggal paste kode diatas setelah kode di point#2 diatas tuh...

<p><data:post.body/></p> Script_related_posts_disini

Fleksibel aja yah ? Lu bisa narok sesuka lu, kalo masih bingung mau narok dimana, lu lihat lagi posting gua tentang narok adsense di tengah tulisan.

6. Sekarang lu ke Edit template HTML=>Backup/Restore Template=>Browse file cobarelatedposttemplate.xml =>upload > selesai deh....

Bagaimana, gampang kan ?

How to remove nofollow - bagaimana ngilangin nofollow attribute di blogger!

TThis hack is courtesy of Jackbook.com translated to Indonesian by bikinblogger. Ini sih sebenernye hack kacangan, malah gua nggak pernah mikir bakal bikin postingannya. Jadi makasih lah buat pembaca bikin blogger yang udah ngemail masalah ini tentang bagaimana ngebuang attribute nofollow di blogger ato blogspot blog.

Nofollow sendiri bukanlah sebuah tag, ini cumak sebuah attribute. Ini cumak sebuah property di links tag

[ <a href=”#” rel=”nofollow”> ]

, Ok mari kita mulai nge-hack ;)
Elu bisa ngikutin semua langkah dibawah, kalo elu berhasil, elu mau narok link gua di blogroll elu kan ? Hahah..nggak ding.. becanda ajah. Tarok kita punya link di blogroll elu kalo elu ngerasa blog ini berguna. Kalo enggak, ya lupain ajah, ngapain repot ? :)

JADI, ini langkahnya:
1. Login ke Blogger account lu.
2. Lihat ke HTML Editor di dasbor blogger.
3. Centhang Expand Widget Template
4. Temuin kode dibawah:

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

Ato lu bisa ngeklik CTRL+F tus paste kode diatas di search box kalo lu make Firefox. blon make Firefox ? Kampungan, dapetin gratis disini
5. Ilangin tuh attribute rel=’nofollow’. Ntar jadi kayak ginih

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

6. Save template elu
7. refresh blog elu dan selesai deh!

Masih pengen ngilangin tag nofollow di backlinks elu juga ?
1. Ikutin semua langkah di atas sampe langkah nomer 3
2. Temukan kode dibawah :

<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

3. Ilangin rel=’nofollow’. harusnya sih kayak gini jadinya :

<a expr:href='data:backlink.url' ><data:backlink.title/></a>

4. save template elu
5. refresh blog elu, selesai deh...

Get Adsense Inline, narok adsense di tengah postingan !

Akhirnya saat kejayaan itu telah tiba kawan-kawan ! Sambutlah kabar gembira ini, apakah itu ? Ya telah datang sang Juru Selamat buat anda-anda yang performa adsense-nya cembre macem kaum papa, maka hari kemaren google telah memberikan tools-nya yang paling berharga, bisa narok adsense di tengah postingan !!!

Sebelumnya kalo elu masih inget, pernah gua tulis narok adsense ditengah postingan juga, tapi versi xml hack, nyang ini nih resmi, cumak pake page element lagih ! Orang bute aja juga bisa !

Ok lu udah kebanyakan bacot, cem mane caranye bang ?

Dasar melayu, enggak sabaran ! Nih gini cep, tingali bae-bae nya ? :

1. Log in ke account Blogger lu di sini http://www.blogger.com .
2. Langsung menuju ke TKP di blog's Template tab dan klik pas di Page Elements link.
3. Klik Edit di bagian Blog Posts.

4. Lihat di kotak yang gua lingkarin merah disamping Show Ads Between Posts noh ! Elu bisa milih sesering ape iklan elu bakalan ditampilin ama mbah gugel, mau sekali tiap posting atau tiap kali ngepost terus menerus ( pasti elu pilih yang terakhir, gua udah tahu sipat elu yang tamak hahahaha...)

5. Elu utak-atik iklannya, kalo udah manteb baru klik Save Changes when you're done.

Nyang terakhir entong lupa ya neng ! Buat sekarang ini nih, elu hanya diijinken buat nyisipin Google ads ajah kalo make widget ini, dan bukan AdSense for search boxes atau referral units.

Udah pigi sonoh, ngapain ngejedog dimari ajeh ? Buruan bikin !

Polls Page element- Nambahin polling di blogger !

Polls page element adalah fitur terbaru di Blogger in draft. Dengan page element yang baru ini, elu bisa nambahin polling di blog’s sidebar yang bisa dipilih sama pembaca blog elu (lihat noh di pojok kanan atas ? isi ya ? :P ). Tambahin sebanyak mungkin pilihan kalo elu mau, bahkan elu bisa milih tanggal penutupan polling elu.

Tanpa banyak bacot, bikinblogger akan ngasih tahu caranya, ayo kita lihat tutorialnya dibawah ini :

1. Pertama elu musti log in dulu ke http://draft.blogger.com
2. Elu masuk ke template/page element
3. Pilih Add Page element, pilih poll

4. Bikin Poll eluh !

5. Kalo elu pingin narok polling di postingan ini kodenya :

<iframe height=\'xxx\' name=\'poll-widget-xxxxxxxxx\' src=\'http://www.google.com/reviews/polls/display/-xxxxxxxxx/blogger_template/run_app?purl=http%3A%2F%2Fxxxxx.blogspot.com%2F\'

style=\'border:none; width:100%\'></iframe>

Gimana ? Mantabh kan ? Cobain gih !

Blogger Hacks - Cara mudah menghilangkan Navigation Bar

Seringkali Navigation Bar diatas bikin kita punya blog betul-betul tampak gratisan, belum lagi kalo ada orang iseng yang ngasih flag, bisa-bisa blogger kita bisa dibanned ! Maka ini ada cara sederhana make CSS buat ngilangin navbar diatas. This is courtesy of Tech Thoughts our Indian friend, translated to Indonesian by Bikinblogger.

Ikuti langkah-langkah mudah buat copy paste code dibawah ini :

/* CSS to hid navigation bar */


#navbar



{



        height:0px;



        visibility:hidden;



        display:none



}

1. Log in ke akun blogger elu terus pilih Layout blog yang bakal lu ulik
2. Pilih tab page Template dan klik di Edit HTML
3. Cari kata-kata body { di kode template HTML elu, dan paste kode diatas setelah elemen body { ... }.
4. Udah! Mulai sekarang elu kagak bakal lihat Nav Bar bangsat itu lagi !

Ini yang bakalan elu lihat di kode template HTML eluh setelah masang kode hack diatas :

Blogger in Draft dan Video Upload

Terpujilah blogger dan para blogger, karena ada layanan baru yang baru diluncurkan yang berjudul blogger in draft dan Video Upload.

Anggep ajah draft ini sebagai laboratorium buat Blogger elu: ini punya berbagai layanan mulai dari iseng-iseng dengan isi blogger, coba-coba, atau posting yang belum siap di “publish” ke situs utama blog kita.



Layanan baru yang pertama dalah video upload. Blogger udah nambahin sebuah tombol baru di bagian post editor () yang akan memunculkan dialog pop up yang bisa lu gunain buat ngupload sebuah video tepat di postingan eluh. Misal video seperti dibawah ini:

Kalo masih pening baca aja di tanya jawab di sini !

TabView Widget - Bagian 2

This hack is courtesy of Hoctro, translated to Indonesian by Bikinblogger.

Kawan-kawan, langkah gua selanjutnya adalah menyempurnakan the TabView widget dengan nambahin dua tab default yang gunanya buat nunjukin komentar maupun tulisan terbaru dari sebuah blog. Gua juga udah memodifikasi kode tertentu jadi elu ntar bisa punya berbagai blog yang muncul dengan view yang berbeda-beda. Kalo elu udah nginstal widget ini seblon hari Sabtu, 19 Mei 2007, coba elu instal lagi tiga langkah terdahulu.

Multiple TabView....

Tapi tunggu dulu anak muda, ada sebuah keterangan sedikit tentang hal yang menyangkut "commenting out" dari sebuah template Blogger.

Kalo elu pengen ngeluarin sejumlah kode yang berada diantara <script> and </script>, elu bisa nggunain // buat kode tunggal, atau /* */ buat kode multiple.

Untuk kode template diluar Javascript seperti html tags, gunain ini nih <!-- -->

Nha sekarang, buat ngeliat hasil dari multiple tab views, di langkah nomer 3 dari tutorial "TabView Widget - Pengantar" tutorial, tinggal elu ilangin <!-- in front of and -->

setelah kode yang tercetak tebel dibawah sehingga kodenya akan berbentuk seperti ini

<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>


<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>

dan jangan lupa di deket bagian paling bawah elu ilangin /* in front of and dan */
setelah kode tebel dibawah sehingga segmennya akan terlihat seperti ini:

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');


var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i < labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

</script>

</b:includable>
</b:widget>

Sekarang elu bakalan ngelihat penampakan tab view yang lain, yang memperlihatkan Post2,komentar2 terakhir si Hackosphere dan sejumlah watch list dari label-label yang menarik.

Penampakan tab view yang laen....

Seperti yang elu bisa lihat, Gua sengaja bikin ini agak mudah buat elu untuk nambahin tab view yang baru, dengan cara ngilangin comments. Tapi proses buat nambahin view yang baru dari program memang agak ruwet, jadi elu musti agak konsentrasi biar jadinya bener. Gua sih percaya, kalo elu tertarik baca artikel ini,pasti elu udah gape buat bikin. (Gua sih pengennya nggunain penyelesaian yang paling manteb, yaitu dengan nulis sebuah pseudocope class, tapi sayangnya gua masih kurang pengalaman buat ngoprek json dan array menjadi sebuah parameter by reference. Jadi hadapilah kenyataan dengan pemecahan masalah yang agak konvensiaonal macem gini.)

Nambahin sebuah tab view baru ke dalam widget adalah sebuah proses tiga tahap, dan gua bakalin ngajarin elu secara bertahap.

Langkah 1.

Kalo elu belum pernah nginstal TabView widget, tolong diinstal dulu.

Sekarang kita coba nambahin view ketiga dari blog lain dengan tujuan untuk melacak perkembangan terbaru dari blognya si Hans' Beautiful Beta blog, dan ini bakalan banyak melibatkan buanyak cut-and-paste, modifikasi dan juga logika eluh. MAri kita namain id dari "div" yang bakal kita bikin ini sebagai multiTab3.

Langkah 2: Nambahin kode HTML buat nampung/ngandangin judul dan tabview

Di bagian ini memungkinkan elu untuk menyususn tampilan dari tab views, baik itu vertikal, atau seperti tabel 2 kolom, ato apapun yang elu pengenin.

Di kode pada langkah nomer 3 di bagian 1, cut dan paste kode dibawah ini tepat di sebelahnya.

<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>


<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>

lalu gantiin isi h2 dan id-nya menjadi (yang ditebelin):

<div>
<h2>Beautiful Beta</h2>
<div class='yui-navset' id='multiTab3'/>
</div>

Langkah 3: Tambahin kode Javascrip buat bikin view baru
Di langkah kode nomer 3 di bagian 1, cut dan paste kode dibawah tepat setelahnya.

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

Lha yang bakal kita kerjain sekarang ini kerjaan kuli nih, karena kita pengen menggandakan apapun dari "1" ke "3", atau merubah nama blog, seperti

blog1 -> blog3
hoctro.blogspot.com -> beautifulbeta.blogspot.com
tabView1 -> tabView3
multiTab1 -> multiTab3
labels1 -> labels3

dan seterusnya.

Tapi tenang dulu jangan panik, di bawah ini gua udah nemuin solusinya biar gak jadi kuli, dengan ngganti semua yang tercetak tebal dibawah:

var blog3 = "beautifulbeta.blogspot.com";
var tabView3 = new YAHOO.widget.TabView('multiTab3');
var labels3 = ['hacks', 'tutorials','widgets', 'gadgets']; // These are Hans' labels.
function listTab3(json) {
listOneTab(json, tabView3, "", false);
}
function listLatestPostsTab3(json) {
listOneTab(json, tabView3, "Latest Posts", true);
}
function listLatestCommentsTab3(json) {
listOneTab(json, tabView3, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog3, "posts", 1, 25, 'listLatestPostsTab3');

// Latest Comments
cb.search( blog3, "comments", 1, 25, 'listLatestCommentsTab3');

// Preferred Labels
for (var i=0; i < labels3.length; i++)
if (labels3[i]) cb.searchLabel(blog3, labels3[i], 'listTab3');

Gua juga nyadarin kalo kode html di langkah nomer 2 bisa elu tarok dimanapun, jadi gua baru aja mindahin tab view hoctro.blogspot.com gua ke depan widget blog, dan berhasil dengan mantabhnya.

Gitu aja men! Cobain deh !

Selamat mencoba.

TabView Widget - Pengantar

This hack is courtesy of Hoctro, translated to Indonesian by Bikinblogger

Hallo boss,

Sekarang gua punya maenan baru nih, yakni tab widget - nggunain labels sebage tabs, mirip kayak Yahoo! widget ini.

Yahoo! widget....

Dengan pertolongan oom Yahoo! TabView widget, maka kita bisa menghemat waktu ngulik.

elu bisa tengok di blog gua noh :

punya gua ,keren kan ?

Kalo elu pengen masang ginian di blog elu, ikutilah petunjuk berikut.

Langkah 1: Nginstal the core Javacript library object

Pertama,ikutin instruksi2 dari tulisan ini: Bagaimana memodifikasi blogger template, khusus di bagian C.2 (untuk langkah nomer 1 & 2) dan B.4 (untuk langkah nomer 3).

Berikutnya, installin the Javacsript Core Library versi yang terbaru.

Langkah 2: Menginstall Yahoo! Tab View requirements

Cut dan paste kode dibawah tepat setelah langkah pembikinan kode di nomer 1 tadi (jadi kode-kode ini masih ada sebelum tag penutup </head>.). Coba lihat instruksi di sini kalo lu masih binun.

 
<link href='http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js' type='text/javascript'/>



<style type='text/css'>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

Langkah 3: Nginstal widget

Tambahin kode dibawah ini diantara dua tag "b:widget", save template elu, ya udah elu hampir selesai.

 
<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>

<!--
<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>
-->

</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length &lt;= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i &lt; numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "&lt;a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));


}

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i &lt; labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

/*
var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i &lt; labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

*/
</script>
</b:includable>
</b:widget>

Setelah elu nginstal sesuai tiga langkah diatas, elu tinggal ngubah hal-hal dibawah ini seperti yang bisa elu temuin kodenya di langkah nomer 3' :

a. Buat mengganti judulnya, lihat perintah ini:

<h2>Hoctro's Place</h2>

b. Lu ganti deh label tabs biar cocok ama blog elu:

var labels1 = ["JSON Hacks", "Label Hacks",
"Free Templates", "Notable Hacks"];

c. Ganti nilai angka dibawah dari angka 10 ke berapapun nilai yang elu pengenin, ini bakal bikin berapa banyak judul tulisan elu per tab

var nPost = 10;

d. kemudian ganti deh nama blog gua dengan nama blog elu

blog1 = "hoctro.blogspot.com";

Gua udah nggunain blog dibawah ini buat testing, disitu elu bisa lihat judul2 artikel tepat diatas area artikel utama:

http://hoctro-multipletabs.blogspot.com/

Buat bloggers tingkat lanjut yang mau ngulik CSS, "Langkah 2" berisi informasi bagaimana caranya. Kalo bisa sih berkonsultasilah dengan the Yahoo! TabView widget tutorials serta contoh2nya buat variasi lain.


Catatan temping:
Gua barusan bikin update temping, untuk memasukkan artikel dan komentar terbaru dari blog manapun yang elu pinginin secara otomatis, serta memungkinkan elu untuk narok sebanyak mungkin tab views. Coba dilihat bagian nomer 2 dari tutorial TabView di bagian tentang bagaimana menambahkan view baru. Jika elu sukses nambahin TabView sebelum hari Sabtu tanggal 19 Mei 07, coba elu ulangin lagi tiga langkah itu sekali lagi.

Untuk menambahkan tabview yang laen seperti widget di gambar bawah ini, coba elu lihat di tutorial bagian 2.

multi viewtab....

Bagaimana ? Asyik kan ?

Bagaimana memodifikasi blogger template ?

This hack is courtesy of Hoctro, translated to Indonesian by Bikinblogger

Tulisan kali ini akan menerangkan bagaimana membikin modifikasi New Blogger template elu, dan bagaimana 'mengandangkan' Javascript JSON library code versi terakhir. Ini akan mempermudah elu pada buat ngutak-ngatik template eluh karena ini biangnya !

1. Langkah2 penginstalan

A. Mengakses tab template
1. Kalo elu lagi di blog elu, dan sudah masuk ke dasbor, tinggal klik aja "Costumize"

Customize Tab....

2. Jika elu dari salah satu blog elu, dan elu pingin beralih ke template blog yang lain, klik ajah "Dashboard"

Dashboard....

3. Kalo elu udah di "Dashboard", klik ajah "Layout"

Layout....

4. Kalo elu udah ada di halaman Setting, klik ajah tab "Template"

Template....

B. Mengubah halaman "Edit HTML"

Edit HTML....

Keterangan :

1) Sebelum lu nekat ngobrak-abrik template eluh, simpan dulu satu copy di hardisk elu, biar gak nyesel kalo ntar ada yang salah.

2) Ntar, elu bisa aja nimpe template baru yang lebih yahud daripada yang sekarang lu pake.

3) Ini adalah toggle yang membedakan antara "collapsed" dan mode "explanded widget templates" .

4) Buat bikin widget baru, masukin kode tepat diantara pasangan kode ini "b:section", dengan id='sidebar', dimanapun asal diantara dua baris "b:widget" tunggal. Ntar jugak, kalo kode lu ditrima, guampang banget buat nggeret widget dari satu tempat ke tempat lain, di bagian "Page Element".

C. Buat nambahin CSS atau kode JavaScript :

1) Tempat paling mantebh buat nambahin kode CSS itu adalah tepat di depan tag penutup b:skin

2) Tempat paling mantebh buat nambahin kode JavaScript adalah tepat diantara tag penutup b:skin dan tag penutup head .

CSS dan Javascript....

Ingat, kalo hack ada judulnya sebagai "JSON Hack",maka pastikan bahwa feed setting elu adalah "short" atau "full", bukan "None". Gua jelasin nih:

a. Pastikan settingan feed elu kayak di bawah ini:

Settingan feed....

b. jangan kayak gini:

None....

Dan ingat juga, pastikan "Settings"->"Archiving", "Enable Post Pages?" elu set ke "Yes"

Yes....

II. Menginstal the core Javacript library object

Ini satu-satunya tempat dimana the Core Library bakalan dibuat. Alasan gua kenapa gua bikin ginian dan enggak bikin link keluar ke external js file karena gua enggak pingin users gua gondok ato malah bingung dengan js. Gua pingin elu yang ngontrol kalo elu misalnya mau ng-update versi library lu yang sekarang dengan kode terbaru.

Elu cumak narok kode di bawah ini sekali aja di template eluh,karena kode ini bakal dibagi beberapa widgets seperti TabView, Unlimited Posts, dan Unlimited Comments.

Cut dan paste kode dibawah dan paste diantara tag penutup

</b:skin>

dan tag penutup

</head>

:

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.

// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&amp;start-index='
+ start + '&amp;max-results=' + increment + '&amp;callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&amp;callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by &lt;a href='http://hoctro.blogspot.com" + "'&gt;Hoctro</a>";
}
};
</script>

Ok, Selamat mengulik !!

Calendar Archive Widget - Cara bikin

Seperti biasa, saya colongin satu ulikan blogger yang cukup mantab dan sudah diujicoba oleh Bikinblogger. Kali ini kita pake arsip yang berbentuk kalender, top markotop kan ? Dan jelas, mesti nyolong lagi kite, kali ini kita colong dari punyaannya bung purple moggy yang tampan lagi baek hati !

Coba aja tengok di seblah kanan tuh, ada gambar kalender, dan tanggal yang terselubung warna hijau menunjukkan tanggal postingan di bulan itu, dan postingannya otomatis ada di bawah kalendar. Pokoke manteb abis !

Ha tus carane piye ? Tenang bang jangan panik, segera ikuti langkah di bawah ini

PETUNJUK !
Langsung saja pergi ke bagian Template -> Edit HTML dan tambahin kode berikut diantara tag

<head>

  
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css"/>

Nha sekarang tambahin kode dibawah ini diantara tag tags

<head>

(tepat dibawah yang udah lu tambahin tadi diatas)

<script type="text/javascript">
//<![CDATA[
  /*
      Created by: PurpleMoggy
      http://purplemoggy.blogspot.com
      dicolong oleh: Bikinblogger
      http://bikinblogger.blogspot.com
  */

  var _yourBlogUrl = "http://bikinblogger.blogspot.com"; //edit this
  var _yourBlogTimeZone = "+07:00"; //edit this

  _yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);

  var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

  YAHOO.namespace("example.calendar");

  function cal1Init() {
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
      YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
      YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true); 
      YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
      YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
      YAHOO.example.calendar.cal1.render();
      myChangePageHandler();
  };


  var myChangePageHandler = function(type,args,obj) {
      var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
      if (month.toString().length == 1) {
          month = "0" + month;
      }
      var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();
   
      document.getElementById("cal1Titles").innerHTML = "";
      _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
   
      checkPostsForMonth(month, year);
  };

  function checkPostsForMonth(month,year) {
      document.getElementById("cal1loadimg").style.display = "block";

      var script = document.createElement("script");
      script.setAttribute("type", "text/javascript");
      var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
      script.setAttribute("src", theUrl);
      document.documentElement.firstChild.appendChild(script);
  };

  function checkPostsCallback(json) {

      if (json.feed.entry) {
          for(i = 0; i < json.feed.entry.length; i++) {
              var month = json.feed.entry[i].published.$t.substr(5,2);
              var year = json.feed.entry[i].published.$t.substr(0,4);
              var day = json.feed.entry[i].published.$t.substr(8,2);
              var date = month + "/" + day + "/" + year;
              var href = json.feed.entry[i].link[0].href;
              var title = json.feed.entry[i].title.$t;
           
              if (day.substr(0,1) == "0") {
                  day = day.substr(1);
              }
           
              document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
              _dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";
       
              YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

          }
          YAHOO.example.calendar.cal1.render();
      }
   
      document.getElementById("cal1loadimg").style.display = "none";

  };


  function showDayTitles(day) {
      document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
  }


  var myCustomRenderer = function(workingDate, cell) {

      var day = workingDate.toString().substr(8,2);
      if (day.substr(0,1) == "0") {
          day = day.substr(1);
      }


      cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
      YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
      YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
      return YAHOO.widget.Calendar.STOP_RENDER;
   
   
  }

  var mySelectHandler = function(type,args,obj) {
      var dates = args[0];
      var date = dates[0];
      var year = date[0];
      var month = date[1];
      if (month.toString().length == 1) {
          month = "0" + month;
      }
      var day = date[2];
   
      var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];
   
      if (day.toString().length == 1) {
          day = "0" + day;
      }
   
      if (element.className.indexOf("highlight1") != -1) {
          window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day + "T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day + "T23%3A59%3A59" + _yourBlogTimeZone;
      }

  };

  var changeDate = function() {
      YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
      YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
      YAHOO.example.calendar.cal1.render();
      myChangePageHandler();
  }

  var syncMonthYear = function(type) {
      YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());
   
      var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());
   
      var isYearFound = false;
      var i = 0;
      while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
          if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
              isYearFound = true;
          }
          i++;
      }
      if (!isYearFound) {
          var option = document.createElement("option");
          option.setAttribute("value", fullYear);
          var text = document.createTextNode(fullYear);
          option.appendChild(text);
          document.getElementById("cal1yearselect").appendChild(option);
      }
   
      YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
  };

  YAHOO.util.Event.addListener(window, "load", cal1Init);
  YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>

Akhirnya , buka menu Template -> Page Elements dan tambahin sebuah kode HTML/Javascript element baru seperti dibawah ini

 
 
<div id="cal1wrapper">

<div id="cal1select">

<select name="cal1monthselect" id="cal1monthselect">
  <option value="0">January</option>
  <option value="1">February</option>
  <option value="2">March</option>
  <option value="3">April</option>
  <option value="4">May</option>
  <option value="5">June</option>
  <option value="6">July</option>
  <option value="7">August</option>
  <option value="8">September</option>
  <option value="9">October</option>
  <option value="10">November</option>
  <option value="11">December</option>
</select>
<select name="cal1yearselect" id="cal1yearselect">
  <option value="1995">1995</option>
  <option value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999">1999</option>
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>
  <option value="2018">2018</option>
  <option value="2019">2019</option>
</select>
<input type="button" value="-->" id="cal1dateselect"/>

</div>

<div id="cal1Container"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
  <pre id="cal1loadimg" style="display:none;"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</pre>
  <pre id="cal1Titles"></pre>
</div>

</div>

Yang elu bisa utak-utik
Di kotak kode kedua diatas, elu musti ngedit dua variabel berikut

_yourBlogUrl mesti lu ganti jadi URL blog elu (jangan ditambahin garis miring dibelakangnya lho ya ?)
http://bikinblogger.blogspot.com <-- BENER http://bikinblogger.blogspot.com/ <-- SALAH NJING! _yourBlogTimeZone mesti lu ubah di daerah waktu elu Kalo daerah waktu elu UTC-08:00 maka masukin -08:00 disini Kalo daerah waktu elu UTC-07:00 maka masukin -07:00, begitu seterusnya. Elu bisa ngecek setting daerah waktu elu di sini Settings -> Formatting -> Time Zone



Bagaimana ? Penasaran kan ? COBA AJAH !