MERUBAH TANGGAL POSTING MENJADI BENTUK KALENDER

Pernah kebayang ga tanggal posting blog anda jadi berbetuk kalender, tentunnya menarik bukan?dan juga menambah cantik blog anda. kalau mo lihat demonya, klik disini(maaf masih dalam proses karna belum ada waktu)

Untuk membuatnya, yang pertama harus anda lakukan adalah merubah format penaggalan blog anda menjadi mm.dd yyyy (bulan, hari, tahun). untuk melakukannya, login ke blogger anda, kemudian pilih "pengaturan-->format", rubah " format header tanggal" mejadi seperti yang saya katakan tadi.

selanjutnya, kita mulai:

1. klik layout-->edit html. lalu centang checkbok "expand widget template".
2. cari kode ini <TITLE><data:blog.pageTitle/></TITLE>,lalu copy kode berikut ini dan paste tepat di bawahnya. <SCRIPT type='text/javascript'> //<![CDATA[ function date_replace(date) { var da = date.split('.'); var day = da[1], mon = da[0], year = da[2]; var month = ['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>"); } //]]> </SCRIPT>
3. kemudian cari kode seperti di bawah ini: .date-header { margin: 1.5em 0 0; font-weight: normal; color: $dateHeaderColor; font-size: 100%; } atau jika kode diatas tidak ada, coba cari kode yang seperti di bawah ini: h2.date-header { margin:1.5em 0 .5em; }

4. jika anda sudah menemukan kode tersebut, langkah selanjutnya adalah minum kopi dulu biar tidak puyeng salin kode di bawah ini dan paste tepat di bawah kode tadi: .dateblock { background: url("http://lukman.oke.googlepages.com/bluecalend_cominfo.gif") no-repeat; width: 50px; margin: 0; font-weight: bold; height: 50px; /*position: absolute; top: 0; left: 0;*/ float: left; text-align: center; } .month { font-size: 11px; width: 37px; margin: 0 5px; text-transform: uppercase; color: #fff; } .day { color:#3366CC; font-size: 19px; width: 37px; margin: 0 5px; }
5. langkah terakhir adalah cari kode <data:post.dateHeader/>, nah jika sudah anda temukan, ganti kode tersebut dengan script di bawah ini: <DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
6. klik "save template"
7. lihat hasilnya, jadi tidak, kalau tidak berhasil, wah.....jangan nangis ya.....selesai

Apabila anda ingin mengganti icon calendernya, lihat kembali langkah no 5. disana ada kode: http://lukman.oke.googlepages.com/bluecalend_cominfo.gif. ini merupakan tempat penyimpana icon-icon tersebut, untuk menggantinya, anda tinggal ganti huruf yang bergaris bawah (bluecalend.gif) dengan nama nama imagenya seperti di bawah ini:

• blackcalend_cominfo.gif
• blue2calend_cominfo.gif
• bluecalend_cominfo.gif
• greencalend_cominfo.gif
• orangecalend_cominfo.gif
• pinkcalend_cominfo.gif
• redcalend_cominfo.gif
• ungucalend_cominfo.gif
• yellowcalend_cominfo.gif

Sebelum saya pamit, satu pesan dulu ya...SELALU BACKUP TEMPLATE ANDA TERLEBIH DAHULU SEBELUM BERURUSAN DENGAN KODE-KODE YANG BIKIN PUSING TERSEBUT, SEHINGGA ANDA TIDAK JUNKIR BALIKPUSING BILA ADA KESALAHAN. selamat nge-blog.

DEMO DISINI (sorry, lagi sibuk, belum sempat bikin demo) useful link useful link2

Baca Selengkapnya-->>......

add posting rate on blogger-menambahkan rating postingan artikel di blogger

Ingin menambahkan rating ke artikel/postingan blog saudara? gampang. Tetapi, sebelumnya saya mohon maaf bila postingan ini sudah ada di blog lain. Saya sendiri kurang tahu apakah kang Rohman sudah membuat artikel ini atau belum di blognya karena saya belum sempat mengecek dan menelusuri kembali postingan - postingan di blog beliau.

Ya sudah, tidak usah terlalu jauh. Kalau mo lihat demo atau penerapan di blogger dari artikel ini, klik disini atau lihat screenshoot gambar di atas.

Cara memasang di blogger, berikut langkahnya:

1. Login ke blog saudara, lalu masuk ke "edit template" lalu pilih yang "edit html".
2. Centang "expand template widget"
3. Cari kode seperti di bawah ini: <data:post.body/>

4. Copy kode berikut ini dan Paste/letakkan tepat di bawah kode tadi <script language='JavaScript'> var OutbrainPermaLink='<data:post.url/>'; var OB_demoMode = false; var OB_Script = true; </script> <script src='
   http://lukman.oke.googlepages.com/PostRating.js'
   type='text/javascript'/> Note : Sumber script aslinya adalah: http://widgets.outbrain.com/OutbrainRater.js' , saya sengaja menyalinnya dan menyimpannya sendiri untuk backup apabila nantinya script tersebut di hapus oleh yang punya. Anda bisa memilih menggunakan sumber seperti di atas atau dari yang asli dengan mengganti tulisan yang berwarna merah dengan : http://widgets.outbrain.com/OutbrainRater.js .
5. Klik "save template". Selesai.

Mudah bukan?.Saran saya apabila anda bekerja dalam layout blog di bagian edit html, gunakan fasilitas "Find" dalam browser anda untuk mencari tempat kode-kode yang akan anda rubah atau di tambah. Karena, ada kemungkinan bagi yang belum begitu memahami kode-kode tersebut akan mengalami kesulitan untuk mencari satu baris kode diatara sekian banyak kode-kode yang membuat kita bingung.

Untuk browser Mozilla, klik Edit>Find in This Page..., lalu ketikkan kode yang anda cari. Untuk browser Internet Explorer, klik Edit>Find on this Page..., ketikkan kode yang anda cari.

Selamat mencoba.(untuk melihat demo, klik disini>>>)

Baca Selengkapnya-->>......

HORISONTAL GREEN DROPDOWN MENU

Sudah lama blog ini tidak terisi dengan postingan baru, tepatnya sejak computer saya mengalami kendala. alhamdulillah sekarang dah bisa mulai nulis lagi.

Bila sebelumnya tulisan banyak ttg (dan baru mulai ke arah dunia komputer seperti: mempercepat komputer tanpa progam> maka sekarang tulisan akan banyak berubah ke dunia blog terutama blogger karna topik sebelumnya dah sangat banyak yang menekuni. Dan kebetulan sekarang lagi demam blogger (saya sasar blogger yang newbi…) dan bertepatan dengan senangnya saya belajar otak-atik ,maka deskripsi blog inipun (dan kata kunci) saya ganti tapi gambar header gak lah….males menggambar lagi..capek.

Oke dah…cukup ngelanturnya

Bebeapa hari yang lalu blog ini baru saya pasangi menu navigasi seperti yang di atas blog ini hasil otak-atik kode.

ternyata banyak rekan-rekan blogger yang tertarik dengan menu-menu seperti ini untuk blognya seperti rata-rata yang dicari pengujung blognya kang rohman. maka, sekarang akan saya buatkan tutorial cara membuatnya yang saya beri nama “horisontal green dropdown menu”. Simple kok

Sebentar...untuk melihat contohnya silahkan saudara mendongak ke bagian atas blog ini.
Updatecontoh di atas telah saya ganti dengan menu yang lain. bila anda tertarik dengan menu tersebut, silahkan tinggalkan pesan untuk dibuatkan tutorialnya, maka akan saya usahakan untuk membuatnya bila ada permintaan.trims

Ayo mulai...

#langkah 1

1. download dahulu greenddmenu.css disini!, lalu buka dahulu dengan progam editor anda..bisa ms.frontpage, macromediadreamveaver atau kalau tidak punnya………pakai notepad!!!!gitu aja kok repot…..
2. sign in ke blogger….(kalau ga sign ke blogger trus kemana.???orang tutorialnya buat blogger/blogspot kok…gitu loh…)
3. klik “layout”
4. klik menu “edit html”
5. download dahulu template anda untuk backup kalau-kalau terjadi sesuatu yang tidak diinginkan dengan mengklik “download template lengkap “yang ada di bagian atas halaman edithtml tadi
6. copy kode yang telah di download sebelumnya lalu paste tepat di atas kode di bawah ini

Paste kode di sini!!!!! ]]></b:skin> </head> <BODY>

7. copy code di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://lukman.oke.googlepages.com/dropdowntabs.js"> </script>

8. klik tombol simpan pengaturan

#langkah ke 2

1. klik menu elemen halaman
2. klik tambahkan sebuah elemen halaman
3. pilih yang html/javascript lalu klik tambahkan ke blog
4. copy code berikut ini lalu paste di kotak yang muncul…..ganti link dengan link milik anda:

<!--kode horiontalgreenddmenu dimulai. link dibawah bisa anda tambah atau kurangi seperlunya--> <div id="menuhijauku" class="greenmenu"> <ul> <li id="current"><a href="#">home </a></li> <li><a href="#" rel="awal">menu utama</a></li> <li><a href="#" rel="menu1">menu utama </a></li> <li><a href="#" rel="menu2">menu utama </a></li> <li><a href="#">tidakadsubmenu</a></li> </ul> </div> <!--indonesia>isi menu pertama kode awal,englih>>1st dropdown menu content with code:awal--> <div id="awal" class="dropmenudiv_e"> <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a> <a href="http://contoh link saya....">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--indonesia>isi menu1, english> "menu1" dropdown menu contents--> <div id="menu1" class="dropmenudiv_e"> <a href="http://freetemplateforyou.blogspot.com">freewebtemplate </a> <a href="http://best-song.blogspot.com">free music and lyrics download </a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--isi menu2, "menu2" dropdown menu content--> <div id="menu2" class="dropmenudiv_e"> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div> <!--jangan di hapus kode di bawah ini, don't replace code bellow!--> <script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("menuhijauku", 3) </script> <!--KODE HORISONTALGREENDDMENU BERAKHIR DISINI-->

5. klik tombol simpan
6. selesai!.

Gimana…gampang bukan?. berikut saya berikan sedikit penjelasaanya.

#penjelasan kode Langkah 5 no.4 ada kode yang mungkin bagi pemula akan sedikit membingunkan……..oke..begini..

1. Pada kode: <div id="menuhijauku" class="greenmenu"> Tulisan menuhijauku adalah sembarang penamaan yang penting sama dengan kode paling bawah yang yaitu

   <script type="text/javascript"> //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"]) tabdropdown.init("menuhijauku", 3) </script>

   Tulisan menuhijauku bisa anda ganti dengan apa saja semisal akujelek….. yang penting keduanya sama…

   class="greenmenu"> greenmenu adalah kode untuk memanggil kode css yang telah anda download dan di letakkan di atas kode berikut ini:

   ]]></b:skin> </head> <BODY>

   Sebaiknya kode tersebut jangan anda ganti…

2. Setelah itu perhatikan kode berikut:

   <ul> <li id="current"><a href="#">home </a></li> <li><a href="#" rel="awal">menu utama</a></li> <li><a href="#" rel="menu1">menu utama </a></li> <li><a href="#" rel="menu2">menu utama </a></li> <li><a href="#">yang initidakadddmenunya</a></li> </ul>

   Kode rel=”….”adalah kode yang harus anda sertakan bila ingin menampilkan submenu ataudropdown menu dibawahnya…kalau tabmenunya tidak ingin ada dropdownya maka hilangkan kode ini

3. .didalam kode rel=”…diisi denga sembarang penamaan yang penting sama degan kode penamaan submenu yang ingin ditampilkan sebagi dropdown ,seperti di bawah ini:

   <div id="awal" class="dropmenudiv_e"> <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a> <a href="http://contoh link saya....">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> <a href="#">sub menu</a> </div>

   Link-link dalam kode tersebut berarti akan muncul sebagai dropdown dalam tabmenu.: <li><a href="#" rel="awal">menu utama</a></li> Anda bisa menambahkan sebanyak mungkin link…seratus juga bisa………..

Oke, gampang buka?. nah, kalau kawan-kawan ingin menngganti tampilan dari tab menu ini…tinggal bukan kode yang tela di download sebelumnnya…gampang kok..sudah saya isi dengan keterangan –keterangan dimana kode yang bisa sobat ganti seperti merubah lebarnya kotak dropdownya,posisi penempatannya dan lain-lain. Kalau diterangkan lagi..capek to nulisnya….udah bingung nyusun katan-katanya lagi….

Selamat mencoba semoga berhasil

Baca Selengkapnya-->>......