Dunia Blogger: March 2008

Idih Malu Aku

Sudah tahu rumah baru kang rohman di Kang Rohman dot com? pasti sudah banyak yang tahu, akan tetapi sudah jera untuk mengunjunginya karena setiap kali di kunjungi halamannya tetap kosong bak rumah tak berpenghuni, aneh bukan? yang lebih aneh lagi adalah yang punya rumah sendiri pun hampir tidak pernah mampir, bahkan hampir lupa bahwa kang rohman sudah
mempunyai rumah sendiri, lho ko bisa? entahlah saya pun kadang merasa heran sendiri.

Kemarin malam ada kejadian yang membuat saya cekikikan sendirian, apaan tuh? begini deh kakak. Selama ini kan kang rohman jarang sekali tuh nengokin rumahnya dan setiap kali di tengok, terlihat tidak ada perubahan sedikitpun yakni tidak ada komentar yang masuk. Cerita punya cerita iseng mau pasang chicklet dari feedblitz di sidebar, secara tidak sengaja saya klik untuk bagian komentar..dan.... wadowww.... ternyata
komentar yang menunggu persetujuan sudah bejibun.... lupa..lupa.. bahwa komentar saya memakai moderasi... aih malunya aku... ternyata dah banyak banget yang berkomentar, kirain ga ada yang perduli dengan rumah baruku tersebut... hicksss.. maaf ya teman...

Buat teman dan sobat yang telah berkomentar, sekarang komentarnya sudah saya aktifin semua.

Ada yang nanya, kapan blog tersebut akan di aktifkan... jawabnya kurang tau dhenk.. lagi nunggu mud nih.mAkhirul kata, terima kasih atas komentarnya.

Pasang Widget Post Terbaru dan Komentar Terbaru

Banyak dari blogger berkeinginan untuk menginstall widget Post Terbaru
serta widget komentar terbaru di bagian sidebar blog mereka, untuk hal
tersebut beberapa blogger menciptakan sebuah widget Post Terbaru dan komentar terbaru
dengan menggunakan javascrip seperti yang pernah saya posting di sini, namun sebenarnya memasang berbagai widget dengan menggunakan javascript
sangat berpotensi sekali untuk memperlambat loading blog serta tidak terlalu baik untuk
search engine, dan di samping itu pula apabila loading blog kita terlalu berat untuk
di akses, maka sangat besar kemungkinan blog kita akan langsung di tinggalkan oleh para pengunjung.

Untuk keperluan hal ini, ada alternatif lain selain memakai javascript yaitu engan menggunakan
alamat feed kita sendiri. Untuk Post Terbaru bisa menggunakan feed post, dan untuk
komentar terbaru bisa menggunakan feed comment. berikut ini adalah alamat feed untuk
Post serta feed komentar asli kepunyaan blogger. Alamat feednya adalah sebagai berikut :

Alamat Post Terbaru :

http://NamaBlogAnda.blogspot.com/feeds/posts/default

Alamat Komentar terbaru :

http://NamaBlogAnda.blogspot.com/feeds/comments/default

NamaBlogAnda harus di ganti dengan alamat blog anda. Contoh :
nama blog saya adalah kolom-tutorial, sehingga untuk alamat feednya sebagai berikut,

Alamat Post Terbaru :

http://kolom-tutorial.blogspot.com/feeds/posts/default

Alamat Komentar terbaru :

http://kolom-tutorial.blogspot.com/feeds/comments/default

Untuk cara memasang di blog adalah seperti ini :

Klik Layout

Klik tab Elemen Halaman

Klik Tambah sebuah Elemen Halaman

Setelah muncul window popup, klik TAMBAHKAN KE BLOG untuk yang feed.

Masukan alamat feed yang mau anda pasang (URL untuk post terbaru atau URL komentar terbaru). Contoh :

Setelah anda masukan alamatnya, klik tombol Lanjutkan

Ganti judul dengan Post terbaru atau Komentar terbaru, dan pilih juga
berapa yang anda inginkan (maksimal 5)

Klik tombol Simpan Perubahan

Pindahkan elemen yang baru di buat ke tempat yang anda inginkan, kemudian klik tombol Simpan

Selesai. Silahkan lihat hasilnya.

Sekarang ada mempunyai widget Post terbaru danKomentar terbaru yang
tidak terlalu membebani loading blog anda.

Selamat mencoba !

Menampilkan Video Dari YouTube

Seseorang bertanya, bagaimana caranya agar pada posting-an bisa menampilkan
video dari YouTube ataupun dari website lainnya? Untuk menampilkan
video dari youtube sangat mudah sekali, karena you tube memang menyediakan kode
yang bisa copy dan di pasang pada website atau blog kita. Nah jika masih bingung,
caranya seperti ini :

Langkah #1

Silahkan anda kunjungi situs http://www.youtube.com.

Cari video favorit anda yang sekiranya mau di pasang. Jika masih bingung, anda tinggal tuliskan
kata kunci pada mesin pencari di bagian sebelah atas. misal : humor. Setelah muncul pilihan video, tinggal di klik aja link nya.

Alihkan perhatian anda ke bagian sebelah kanan layar. Temukan tulisan → Embed. Misalkan gambarnya seperti ini :

Copy kode yang ada di bawah tulisan → Embed tadi. Paste pada notepad atau text editor lainnya. Simpan kalau perlu.

Silahkan tutup jendela situs youtube jika anda mau.

Langkah #2

Silahkan sign in ke blogger dengan ID anda.

Klik Posting Baru.

Klik tab Edit Html, jangan pada posisi tab Compose.

Copy kode embed yang ada pada notepad tadi, lalu paste pada kolom untuk posting.

Klik tombol MEMPUBLIKASIKAN POSTING

Selesai. Silahkan lihat hasilnya.

Berikut ini adalah contoh video yang saya dapat dari you tube.

Sangat mudah bukan? selamat mencoba !

Membuat Daftar Isi Blog (2)

Pada kesempatan tedahulu saya pernah mengulas bagaimana cara membuat daftar isi pada blog saya posting di sini, namun karena daftar isi tersebut menggunakan javascript, sehingga agak sedikit membebani loading blog sehingga yang saya sendiri tidak memasangnya di blog ini dengan alasan tidak mau blog ini terlalu berat ketika di akses oleh para pengunjung. Untuk mencari alternatif lain, kita bisa menggunakan engine pencari blogger sendiri. Namun untuk melakukan ini, tentu saja harus sedikit memodifikasi kode template. Sudah tidak sabar untuk membuat daftar isi di blog? caranya seperti ini :

Langkah #1

Bilsa sudah berada di halaman dashboard, klik Layout.

Klik tab Edit HTML

Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).

Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.

Lihat ke bagian body template, lalu cari kode seperti ini :
```
<b:include data='post' name='post'/>  
```

Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
   <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"> 
         <data:post.title/></div></a>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Klik tombol Simpan Template.

Selesai. Langkah pertama sudah selesai.

Langkah #2

Klik tab Elemen Halaman.

Klik tulisan Tambahkan sebuah Elemen Halaman.

Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.

Copy lalu paste kode berikut :

<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi»</a>

Ganti NamaBlogAnda nama blog anda sendiri. Contoh : nama blog saya adalah kolom-tutorial. ganti angka 200 dengan nomor yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.

Klik tombol Simpan Perubahan.

Selesai.

Keterangan tambahan :

Jika anda sedikit mengerti tentang CSS, anda bisa memodifikasi bentuk dari daftar isi ini, apakah mau di kasih backround gambar, bentuk huruf yang berbeda atau apa saja dengan mengubah kode yang di sini (ini adalah kode yg ada pada Langkah #1 di atas) :

<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">

Untuk melihat contoh seperti apa daftar isi ini? silahkan klik → Daftar isi »

Selamat berkreasi !

Free Template : Magazine template 1

Magazine Template 1 adalah free blogger template yang mengusung tema majalah atau magazine. Dengan tesedianya multi kolom anda dapat dengan luluasa menyimpan berbagai widget yang anda inginkan. Berikut screen shot dari Magazine Template 1:

Spesifikasi :

Type : Blogger beta template (XML)

Column type : Multy column

Background color : black (default)

Template color : white

Template Width : 900 pixel

Sidebar width : 300 pixel

Leftsidebar_1 : width : 280 pixel

leftsidebar_2 : width : 270 pixel

bottombar width : 210 pixel

Browser test : IE6, FF3 beta 4, opera 9.25, Netscape 9.0.0.6

Download file : 8kb

Demo

Live Demo Magazine Template 1

Download

Download Magazine Template 1

Changelog

* 21 June 21 2010 : penambahan fungsi blogger avatar dan kotak komentar langsung dibawah posting.

Membuat Menu Drop down dengan CSS

Silahkan arahkan mouse komputer anda ke tab menu di bawah ini :

Tab menu dropdown ini 100% menggunakan Cascading Style Sheet (CSS), tanpa javascript ataupun skript yang lainnya. Sehingga Menu drop down ini tidak akan membuat blog anda menjadi lambat ketika di loading, dan cocok dalam banyak browser. Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan untuk memasang menu drop down ini di blognya. Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun dalam kesempatan ini saya akan menuliskan dengan 2 cara. Kira-kira caranya seperti ini :

# Metode yang pertama :

langkah #1 :

Setelah berada pada halaman dashboard, klik Layout.

Kemudian klik tab edit HTML.

Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.

Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]></b:skin>

Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>

/* ================================================================  This copyright notice must be untouched at all times.  The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any  way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}  #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}  #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;}  #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;}  #menu dt a, #menu dt a:visited {display:block; color:#444;}  #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}  #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;}  #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}

Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/> </b:section>

Ubahlah kode yang saya cetak hijau, sehingga kodenya menjadi seperti ini :

  <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/> </b:section>

Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.

langkah #2

Klik pada tab elemen Halaman yang berada di bagian atas. Perhatikan gambar berikut :

Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:

setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:

Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :

<ul id="menu"> <li>  <dl class="one">   <dt><a href="../menu/index.html">DEMOS</a></dt>  <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>  <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>  <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>  <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>  <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>  <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>  <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>  <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>  <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl>  </li> <li>  <dl class="two">  <dt><a href="index.html">MENUS</a></dt>  <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>  <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>  <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>  <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>  <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>  <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>  <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl>   </li> <li>  <dl class="three">  <dt><a href="../layouts/index.html">LAYOUTS</a></dt>  <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>  <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>  <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>  <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>  <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl>  </li> <li>  <dl class="four">  <dt><a href="../mozilla/index.html">MOZILLA</a></dt>  <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>  <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>  <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>  <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>  <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>  <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>  <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl>   </li> </ul>

Klik tombol Simpan Template

Selesai. Silahkan lihat hasilnya.

Catatan : untuk beberapa template, cara ini tidak menghasilkan tampilan yang bagus, maka anda bisa mencoba cara berikut.

Metode kedua

Karena desain dari template sangat berbeda antara satu dengan yang lainnya, maka saya hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja. langkahnya adalah sebagai berikut :

setelah berada di halaman dashbord , klik Layout.

Kemudian klik tabedit HTML.

Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.

Silahkan anda beri tanda tik/cek pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.

Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>

Copy kode di bawah ini, lalu paste di atas kode: ]]></b:skin>

lihat ke bagian bawah dan temukan kode ini:

<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section>

Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :

<div class='descriptionwrapper'>  <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section>    <ul id="menu"> <li>  <dl class="one">   <dt><a href="../menu/index.html">DEMOS</a></dt>  <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>  <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>  <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>  <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>  <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>  <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>  <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>  <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>  <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl>  </li> <li>  <dl class="two">  <dt><a href="index.html">MENUS</a></dt>  <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>  <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>  <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>  <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>  <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>  <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>  <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl>   </li> <li>  <dl class="three">  <dt><a href="../layouts/index.html">LAYOUTS</a></dt>  <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>  <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>  <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>  <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>  <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl>  </li> <li>  <dl class="four">  <dt><a href="../mozilla/index.html">MOZILLA</a></dt>  <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>  <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>  <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>  <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>  <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>  <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>  <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl>   </li> </ul>

Klik tombol Simpan Perubahan

Selesai. Silahkan lihat hasilnya.

Langkah-langkah di atas hanyalah untuk template minima , jadi untuk template anda terkadang kode nya sama dan banyak juga yang berbeda, silahkan di pelajari saja.

Sedikit tambahan :

Pada kode menu drop down yang saya berikan, ada kode seperti ini :

    <dt><a href="../menu/index.html">DEMOS</a></dt>

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>

Perhatikan pada kode <dt> dan <dd>

Kode yang di awali dengan <dt>, adalah judul pada menu utama (tulisan yang muncul di muka).

Kode yang di awali dengan <dd>, adalah judul untuk sub menu (tulisan pada drop menu).

Anda harus mengganti link yang ada dengan link milik anda sendiri, sebagai contoh :

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page"> zero dollars</a></dd>

ganti menjadi :

<dd><a href="http://template-unik.blogspot.com/2007/11/unique-template-r-21.html" title="free template R 1.2">UniQue Template R 1.2</a></dd>

Selamat mencoba dan mempelajari.

Make a Drop Down Menu With Same Width

Sorry! this tutorial was moving to Here !