AABI‍TALITA BLOG
12.30.2012

Membuat Widget Label Dengan Satu Thumbnail

Kali ini saya mencoba berbagi satu lagi tutorial blogger tentang membuat widget berdasarkan label dengan hanya satu thumbnail yang berada di bagian atas sedangkan  pada bagian bawah  hanya menampilkan judulnya saja,untuk lebih jelas sobat bisa lihat screenshot gambar dibawah ini.


Biasanya widget seperti ini banyak digunakan oleh blog yang memiliki konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Cara membuat widget per label yang di gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.

nah sekarang bagaimana cara membaut widget seperti screenshot diatas,berikut langkah langkahnya :

1. Masuk dulu ke Dashboard atau ke akun blogger sobat.
2. Terus pilih Layout  dan  Edit HTML
3. Sebelumnya ada baiknya sobat  Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>

Kode 1:
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height: 60px;width: 60px;padding:2px} img.label_thumb:hover{background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0} ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Warna biru diatas adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, cari kode </head> dan jika sudah ketemu copas kode berikut diatasnya:

Kode 2:
<script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp0qBF7xnbhgfTnH7J4bp2hoX4AZk9RMxyki_NfiENAn6Jra0vdAdk3UGdY_K4pO0hUVm6x6L6-lE-tCrIY0cRZFIseoI6AE67hoRLdW9JgcFMb8y0_ZneYKInRsIcrAAsI6og7pRBKtSG/';} var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true) document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;} else if("summary"in entry){var postcontent=entry.summary.$t;} else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}} var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) {if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script>

7. Setelah itu save templates sobat, kemudian masuk ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript dan copas kode berikut kedalamnya :

Kode 3:
<script type="text/javascript">var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> <script src="/feeds/posts/default/-/kesehatan?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li> "; document.write(item); } document.write('</ul> '); } </script> <script src="http://abitalita.blogspot.com/feeds/posts/summary/-/kesehatan?max-results=6&amp;alt=json-in-script&amp;callback=recentpostslist"></script> <a href="http://abitalita.blogspot.com/search/label/kesehatan" style="float: right; font: normal 11px Arial; padding: 5px 0;">More on this category »</a>


  • Silahkansobat ganti teks wara merah dengan URL blog sobat dan teks warna biru dengan nama label  sobat.
  • Tampilan dari widget ini mengikuti kode CSS sidebar (jika sobat meletakkan di sidebar) pada template yang sobat pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

8. Selanjutnya Save Tempalte dan lihat hasilnya.
Lihat sumbernya disini
12.23.2012

Hikmah Burung Beo


Alkisah di sebuah pesantren, Seorang Ustadz memiliki burung sejenis Beo yang terlatih untuk berdzikir seperti: Assalamu'alaikum, Subhanallah, Alhamdulillah, Allahu Akbar, dan lainnya

Suatu hari, pintu kurungan terbuka & burung itu terbang bebas. Sontak para santri mengejar burung milik guru mereka, sementara si burung terbang tidak terkontrol dan tertabrak kendaraan yang melintas dengan kencang hingga terkapar sekarat lalu meninggal

Sang Ustadz terlihat berbeda usai burungnya mati, nampak sekali sedih hingga seminggu lamanya. Para santri yang melihatnya pun mengira Ustadz nya bersedih karena burungnya mati, mereka berkata:

"Ustadz, jika hanya burung yang membuat ustadz sedih, kami sanggup menggantinya dengan yang bisa berdzikir juga. Tak perlu ustadz bermurung hingga sedemikian lamanya!"

Sang Ustadz menjawab: "Aku bukan bersedih karena burung itu."

Para Santri: "Lantas kenapa ustadz?"

Sang Ustadz: "Kalian melihat bagaimana burung itu sekarat setelah tertabrak?"

Para Santri: "Ya, kami melihatnya."

Sang Ustadz: "Burung itu hanya bersuara KKKKAAKK, KKKKHHEEK, KKKKAAKK, KKKKHHEEK,,, padahal sudah terlatih berdzikir sedemikian rupa, namun saat merasakan PERIHNYA sakaratul maut menjemput, hanya perih yang terasa.

Lalu aku teringat diriku, yang setiap hari terbiasa berdzikir, JANGAN-JANGAN NASIBKU SAMA SEPERTI BURUNG ITU, TAK KUAT MENAHAN SAKARAT LALU BUKAN DZIKIR YANG KUUCAPKAN.

Padahal burung itu tidak diganggu setan saat sakaratul maut, sedangkan manusia diganggu setan saat sakaratul maut. Tidak ada yang tahu bagaimana keadaan kita mati, khusnul khotimah ataukah su'ul khotimah?"

Para Santri pun terdiam dan membenarkan Sang Ustadz, dan mereka pun ikut murung memikirkan hal yang serupa dengan Ustadz-nya.:

Lalu bagaimana keadaan kita saat menjemput sakaratul maut nanti ?

NB : Sebagai ikhtiar kita utk bisa Khusnul Khotimah, marilah kita bersama2 utk menjaga dan terus meningkatkan kulaitas ibadah kita, dan biasakan utk membaca doa " Selamat " setiap habis Sholat 5 waktu. Karena dalam doa selamat ada permohonan keselamatan agama, jasamani rohani, keberkahan rezeki, dan diberikan rahmat dan keselamatan dan kemudahan ketika menghadapi kematian kelak.

dikutip dari kumpulan cerita penuh hikmah.
12.19.2012

Beberapa Manfaat Dari Ngeblog

Apa kabar sahabat.....saat kita memutuskan untuk menekuni dunia blogging tentu ada banyak manfaat yang bisa kita dapat..beberapa diantaranya yang bisa saya fahami adalah sebagai berikut :

1.Membuat kita menjadi lebih cerdas dan kratif.
Ketika kita memutuskan untuk menggeluti dunia bloging,bagi seorang blogger baik itu disadari atau tidak dia telah mengembangkan daya pikirnya,berusaha membuka wawasannya mencari tahu tentang banyak hal untuk kemudian dituangkan dalam sebuah karya,dilihat dan dinikmati oleh banyak orang.itulah sebuah karya hasil kreatifitas dan pemikiran  yang terus dikembangkan tadi.


2.Blog adalah Sebuah Tantangan.
mengapa demikian? karena menjadi seorang bloger haruslah berfikir keras serta mencari cara agar setiap karya yang diterbitkan selalu terindeks oleh mesin pencari baik itu oleh google,yahoo ataupun yang lainnya dengan demikian tidaklah menjadi sia sia apa yang sudah dibuat.dan ketika karya yang kita buat tersebuat terindeks oleh mesin pencari apalagi sampai berada pada urutan teratas tentu akan menjadi kebanggaaan tersendiri bagi seorang blogger.

3.Blog adalah dunia baru Tempat kita berbagi.
Saat ini ketergantungan orang akan internet sangatlah tinggi karena didalamnya kita akan selalu menemukan hal yang baru.dari internet juga kita mendapatkan jawaban atas pertanyaan yang belum terjawab.ketika kita membutuhkan update akan hal hal yang baru maka internet adalah solusi utamanya.dengan begitu keberadaan blog menjadi solusi dan tempat terbaik untuk saling berbagi pengetahuan dan hal-hal baru.bukankan suatu kebanggaan ketika apa yang kita berikan menjadi manfaat buat banyak orang.
     
4.Blog mengenalkan kita pada teman teman baru.
seorang blogger tentunya tidak dapat berdiri sendiri tanpa bantuan dari orang lain, hal ini dapat dilihat dari pentingnya back link keblog kita untuk mendongkrak posisi blog yang kita bangun di mata mesin pencari maupun meningkatkan optimasi blog itu sendiri , maka aktifitas seperti blog walking sangatlah dianjurkan bahkan sudah menjadi kewajiban karena dari sanalah salah satu sumber back link yang bisa didapat.kesemuanya itu tentu akan berdampak pada jiwa sosial seorang blogger yang menyempatkan diri untuk berkunjung ke blog lainnya dengan begitu akan tercipta sebuah pertemanan baru yang akan berdampak positip terhadap blog kita maupun blog yang kita kunjungi.

5.Blog mampu menjadi Mesin pengahsil Uang
ketika blog yang kita bangun sudah memiliki trafik yang tinggi tentunya ini akan mendatangkan keuntungan tersendiri karena akan banyak pemilik suatu produk yang ingin menempatkan iklannya pada blog kita.dengan begitu kita akan lebih serius lagi dalam mengurus dan merawat blog kita tercinta :)

Jika sobat merasakan manfaat lain dari ngeblog silahkan dishare melalui kolom komentar
Demikian semoga bermanfaat..happy blogging....
12.14.2012

Cara Membuat Menu DTree Simple diblog


Menu DTree adalah menu yang penampilannya sama seperti ketika sobat melakukan explore pada windows dikomputer sobat.fungsinya untuk memasukan link tertentu  sesuai keinginan sobat dan juga untuk mempercantik tampilan blog sobat tentunya.



Kali ini saya coba share cara pembuatannya pada blogger.langkah langkahnya adalah sebagai berikut :

1. Sobat masuk dulu ke akun blogger sobat kemudian pilih menu template, Lalu Edit HTML setelah itu centang Centang kotak kecil Expand Widget Templates.

2. Kemudian cari kode  </head> (untuk mempercepat gunakan Ctrl+F pada keyboard) jika sobat sudah menemukan kode tersebut copy kode di bawah ini dan letakan kode tersebut diatas kode </head>.

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /><script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Simpan template sobat.

4. Selanjutnya masuk ke Tata Letak dan pilih Add a Gedget -->HTML/Javascript. dan masukan kode berikut ini kedalamnya.

<div class="dtree"><script type="text/javascript"><!--d = new dTree('d');d.add(0,-1,'My example tree');d.add(1,0,'Node 1','link.html');d.add(2,1,'Node 1.1','link.html');d.add(3,2,'Node 1.1.1','link.html');d.add(4,3,'Node 1.1.1.1','link.html');d.add(5,0,'Node 2','link.html');d.add(6,5,'Node 2.1','link.html');d.add(7,5,'Node 2.2','link.html');d.add(8,0,'Node 3','link.html');d.add(9,0,'Node 5','link.html');document.write(d);//--></script></div>

 Keterangan :


  • Ganti tulisan "link.html" dengan link sobat.
  • Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
  • Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

5. Simpan template dan lihat hasilnya.

lihat sumbernya disini
12.10.2012

Telah Ditemukan Terompet Sangkakala Malaikat Israfil...


Peristiwa mengerikan yang akan terjadi pertama kali pada hari kiamat adalah ditiupnya sangkakala (ash-shur) oleh malaikat Israfil atas perintah Allah.Makna ash-shur secara etimologi (bahasa) adalah al-qarn (tanduk). Sedangkan menurut istilah syariat, yang dimaksud adalah sangkakala yang sangat besar yang malai
kat Israfil telah memasukkannya ke dalam mulutnya (siap untuk meniupnya), dan dia sedang menunggu kapan dia diperintahkan untuk meniupnya. (Syarh Lum’atul Itiqad karya Ibnu Utsaimin, hal. 114)

Makna ini disebutkan dalam hadits shahih dari Abdullah bin ‘Amr, dia berkata:Seorang badui bertanya :

“Wahai Rasulullah, apa itu ash-shur?” Rasulullah menjawab: “Tanduk yang akan ditiup.” (HR. Ahmad, Tirmidzi dan Abu Dawud. Hadits ini disebutkan dalam Al Jami Ash Shahih 6/113-114, karya Asy Syaikh Muqbil)

Ilmuwan NASA ‘Menemukan’ Terompet Sangkakala Malaikat Israfil Wilkinson Microwave Anisotropy Probe (WMAP) adalah alat yang merupakan bagian dari program atau misi NASA untuk melihat Kosmologi (studi tentang sifat alam semesta) secara keseluruhan. Proyek ini melakukan observasi terhadap alam semesta untuk menemukan bentuk sebenarnya dari alam semesta. Sebab prediksi yang umum selama ini mengatakan bahwa alam semesta berbentuk bulat-bundar atau prediksi lain menyebutkan bentuknya datar.

Dengan menggunakan WMAP, mereka mendapatkan sebuah kesimpulan yang sangat mencengangkan, karena hasil penelitian tersebut menemukan bahwa alam semesta ini berbentuk seperti terompet.Pada bagian ujung belakang wilayah ‘terompet’ alam semesta itu merupakan alam semesta yang tidak bisa diamati (unobservable), sedang bagian depan, di mana bumi dan seluruh sistem tata surya berada merupakan alam semesta yang masih mungkin untuk diamati (observable).

“Dan ditiuplah sangkakala, Maka matilah siapa yang di langit dan di bumi kecuali siapa yang dikehendaki Allah. kemudian ditiup sangkakala itu sekali lagi, maka tiba-tiba mereka berdiri menunggu putusannya masing-masing.” (Az Zumar: 68)

“Kami biarkan mereka di hari itu bercampur aduk antara satu dengan yang lain, kemudian ditiup lagi sangkakala, lalu Kami kumpulkan mereka itu semuanya.” (Al Kahfi: 99)

“Dan (ingatlah) hari (ketika) ditiup sangkakala, maka terkejutlah segala yang di langit dan segala yang di bumi, kecuali siapa yang dikehendaki Allah. Dan semua mereka datang menghadap-Nya dengan merendahkan diri. (An Naml: 87)

“Dan ditiuplah sangkakala, maka tiba-tiba mereka keluar dengan segera dari kuburnya (menuju) kepada Tuhan mereka.” (Yasin: 51)

Banyak ulama tafsir mengatakan bahwa tiupan terompet sangkakala di ayat-ayat tadi selalu diartikan sebagai peristiwa di hari kiamat.
Dr Wahbah az-Zuhaily dalam Tafsir Al Wasith menguraikan bahwa tiupan terompet di hari kiamat itu tiga kali.
Pertama, tiupan yang menggentarkan,
lalu kedua yang mematikan seketika seluruh makhluk.
Tiupan ketiga tanda mulainya hari kiamat, di mana semua dibangkitkan dan dikumpulkan.

Kalau kita cermati, Al Quran menyebutkan bahwa tiupan itu selalu “di dalam” terompet, “Wanufikha fi-shshuuri”.
Mengapa terompet?
Mengapa di dalam (Fi)?
Tim WMAP mengamati pola titik-titik panas dan dingin radiasi microwave kosmik, yang bisa menggambarkan bentuk alam semesta 380.000 tahun setelah Big Bang. Proyek WMAP dari NASA membuat peta titik-titik tadi secara mendetail, hasilnya ialah pola itu cenderung memudar, yakni tidak ada titik panas dan dingin yang tampak melebihi jarak rentang 60 derajat.

Ini menyimpulkan bahwa ketika mengembang, alam semesta terulur panjang. Sempit di awal dan kemudian makin lebar seperti corong. Mirip bentuk terompet abad pertengahan. Hal ini tentu mematahkan prediksi selama ini yang menyatakan bahwa bentuk alam semesta seperti bola (bulat) yang mengembang ke segala arah.Tim WMAP yakin bahwa alam semesta bukanlah berbentuk bola, tetapi berbentuk terompet.

Alam semesta bukan meluas tak terbatas, tetapi dibatasi oleh ujung terompet. Jadi, alam semesta ada awal dan akhirnya. Hanya Allah yang tidak berawal dan berakhir, “Huwal awwalu wal akhiru”.

“Sesungguhnya telah datang kepada kalian cahaya dari Allah, dan Kitab yang menerangkan. Dengan Kitab itulah Allah menunjuki orang-orang yang mengikuti keridhaan-Nya ke jalan keselamatan, dan (dengan Kitab itu pula) Allah mengeluarkan orang-orang itu dari keadaan gelap gulita kepada cahaya yang terang benderang dengan seizin-Nya, dan menunjuki mereka ke jalan yang lurus.”
(Al Maidah: 15-16)

“Itulah Kitab yang tidak ada keraguan di dalamnya, sebagai petunjuk bagi orang-orang yang bertakwa.” (Al Baqarah: 2)

“Sesungguhnya Al Quran itu adalah kitab yang mulia. Yang tidak datang kepadanya kebatilan baik dari depan maupun dari belakangnya, yang diturunkan dari Rabb yang Maha Bijaksana lagi Maha Terpuji.”
(Fusshilat: 41-42)

Maha Benar Allah atas segala Firman-Nya

Penulis: El Akrom Lazuardi
12.06.2012

Cara Membuat Menu dan Submenu Horizontal Dibawah Header Blog

Hai sob..apa kabar? pada kesempatan ini kembali saya akan coba berbagi seputar tutorial blog berkenaan dengan menu navigasi atau menu horizontal yang akan kita pasang dibawah header blog.

Hampir semua template standard yang berbasis wordpress maupun blogger sudah dapat dipastikan selalu dibakali dengan menu horizontal.hal ini dikarenakan keberadaan menu tersebut dinilai penting untuk memudahkan setiap pengunjung web/blog melihat setiap konten yang disajikan dalam sebuah web/blog disamping memperindah tampilan tempalte tentunya.tampilannya ada yg biasa biasa saja ada juga yang terlihat lebih menarik dan atarktif.jika sobat sedang mencari kode menu horizontal yang pas buat web/blog sobat mungkin totorial berikut bisa sobat jadikan referensi untuk menghiasai blog sobat.


  klik gambar untuk memperbesar

Seperti contoh gambar diatas menu horizontal  ini memiliki sub menu horizontal juga,nah jika sobat ingin mencobanya berikut langkah penerapannya :

1. Masuk dulu ke Dashboard atau ke akun blogger sobat.
2. Terus pilih Layout  dan  Edit HTML
3. Sebelumnya ada baiknya sobat  Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>  

Kode 1:
.wow-menu { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBD1EWxse8pDwhh9FunZRNia3HhaPRC3AZH5qFmu5WF2gMrE5szT0DagzzKq0P3FZIdwEwPx8FenIb50e5k7AxLrL4ex0RWfx-g_sGNDCuMoumJbD7Xd_rnv5mSYXjqj9Emg1PGmKQsA/s400/menu-bgd.png) bottom left repeat-x; position: relative; margin: 0; padding: 0; } ul#nav { border: 1px solid #cfcfcf; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBD1EWxse8pDwhh9FunZRNia3HhaPRC3AZH5qFmu5WF2gMrE5szT0DagzzKq0P3FZIdwEwPx8FenIb50e5k7AxLrL4ex0RWfx-g_sGNDCuMoumJbD7Xd_rnv5mSYXjqj9Emg1PGmKQsA/s400/menu-bgd.png) bottom left repeat-x; position: relative; font-size: 14px; font-family: helvetica, arial, sans-serif; list-style: none; margin: 0 auto; padding: 0; width: 979px; } #nav ul { margin: 0; } :focus { outline: 0; } *html ul#nav { clear: both; height: 1%; } ul#nav li a { display: block; float: left; text-transform: uppercase; font-weight: bold; line-height: 33px; padding: 0 13px 0 10px; color: #333; text-decoration: none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8R97IeSfc_72NhmkqPc5SQgBcIv4F9lk0PpCjyg9YDqtBuVk9zNVCSr6rGMa1DmiH4Jufy_abBbRSGMz8T6GrElPZdXrrlR1clWax_QhP5yIKIj4pKHnGQj4fwztwwne1VHLL-K1bFZQ/s400/menu-rule.png) right 2px no-repeat; } *html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } *:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } ul#nav li a:hover, ul#nav li a.open { color: #fff; } ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; } ul#nav li#link-naruto a:hover, ul#nav li#link-naruto a.open { background: #8E8E8E; } ul#nav li#link-games a:hover, ul#nav li#link-games a.open { background: #B20000; } ul#nav li#link-cerita a:hover, ul#nav li#link-cerita a.open { background: #12127D; } ul#nav li#link-health a:hover, ul#nav li#link-health a.open { background: #008E00; } ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; } ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; } ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; } ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; } ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; } ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; } ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; } ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; } ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; } ul#nav li#link-home a { padding: 0 33px 0 10px; text-indent: -9999px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8ztAogxyq6QAbmySB6s6-CGdHHwPwFInYdNgL3OWbdqFRjeH8Iu2i2DpPS7FdpUYfxQiQBVlkDfgFPohZlRI_isTi46QGrUS9S0YDzZG6iov5C9V1pUobnolMGPEusRVxFItbulJYgg/s400/home-icon.png) right 0px no-repeat; } *html ul#nav li#link-home a { padding: 0; width: 43px; } ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8ztAogxyq6QAbmySB6s6-CGdHHwPwFInYdNgL3OWbdqFRjeH8Iu2i2DpPS7FdpUYfxQiQBVlkDfgFPohZlRI_isTi46QGrUS9S0YDzZG6iov5C9V1pUobnolMGPEusRVxFItbulJYgg/s400/home-icon.png) right -33px no-repeat; } /* Sub-Vertical Navigation */ ul.sub-nav { position: absolute; top: 33px; left: -1px; overflow: hidden; width: 980px; display: none; z-index: 999; list-style: none; padding-left:0px; } ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VVnZ4Xh_NZbf_45Ow8QKW2bwXibIkxGPWGRs86mCFGN74eh8OUlzt6yvfIgmHqhU13goN8K6UGIXyUsB8tzQPyOR42PABrjSCXH5ltBGYMdLNrTSI06eSIDdkUTvdYbeoj-9k-tOJQs/s400/business-subnav-bgd.png) top left repeat-x; } ul#nav li#link-naruto ul.sub-nav { background: #CCCCCC; } ul#nav li#link-cerita ul.sub-nav { background: #1919B3; } ul#nav li#link-games ul.sub-nav { background: #FF0000; } ul#nav li#link-health ul.sub-nav { background: #00CC00; } ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVecalX6DpRFPinGR6TGHOm17h7HvBV8IcO89pxqD1LUIFLwC4qFP0mQ7adiFm9UU7Uyd3YePVPCfKuq_cJunnrruF_iadLyCphVamSgP-xVWVsioPfUjZg5lgLmLq9_BTi_PwXl6aZE/s400/entertainment-subnav-bgd.png) top left repeat-x; } ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dA7uAp2cD-4VzmYn5XxIGWy4cmyYXg3-AXvBt9TA8yuKQ8ALUxEJdUzXVwFNH6IMQdOfbol6sLaDPpqVP5q3bQhdh1OOOky8UFSzsHCkWo0XmdNO-7WorqAGG0sKa3XebOrfUMuJbgg/s400/news-subnav-bgd.png) top left repeat-x; } ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1SRYFkbYnoacUr-8dseEw49rPTb8cIFlhTbwDbsF4qqN54ncN5zrrUuherCHMaYFrcF2i4D7sAcie9wWb9ut252X6DV-4MjY6J7eD4ybwey1-1hPQcfMTiYA8o6y8vPEfhADE_-ZIuDU/s400/life-subnav-bgd.png) top left repeat-x; } ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmX2DucCoYt_BAEzFLG9yqHA_3ucdGFWww1I_dcxeMu-thAIkeUH3mFMSRwBr1Ujc8yfGxJWVzoA1oYVbBCPQa_NSke0l3yyHaIg8Qpe4IMlzbcljsrCx_jyz0UZSRMMtUBh9eR7N_pE/s400/technology-subnav-bgd.png) top left repeat-x; } ul#nav li ul.sub-nav li { float: left; } ul#nav li ul.sub-nav li a { float: none; background: none; font-size: 13px; text-transform: none; color: #fff; line-height: 25px; } ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; } ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; } ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; } ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; } ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }


6. Selanjutnya cari kode </head> dan pastekan kode dibawah ini diatas kode </head>


Kode 2:
<script src='http://wow-menariknya.googlecode.com/files/jQuery%20Colorful%20Pack.js' type='text/javascript'/> <script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-jcrousel.js' type='text/javascript'> </script> <script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-menu.js' type='text/javascript'/>

7. Kemudian sobat cari kode yang mirip seperti kode berikut


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Abitalita Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML22' locked='false' title='' type='HTML'/>
</b:section>
</div><!-- end header-wrapper -->
 
Jika sudah ketemu pastekan kode berikut dibawah  </div><!-- end header-wrapper -->

<div class='wow-menu'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='http://abitalita.blogspot.com/'>Home</a></li>

  <li class='top-link' id='link-health'><a href='URL'>Kesehatan</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Diet</a></li>
                    <li><a href='URL'>Fitness</a></li>
                    <li><a href='URL'>Food Healthy</a></li>
                   <li><a href='URL'>Body</a></li>
                    <li><a href='URL'>Nutrisi</a></li>
                    <li><a href='URL'>Jantung</a></li>
                    </ul>
                </li>

                <li class='top-link' id='mbt'><a href='URL'>Blogger</a>
                    <ul class='sub-nav'>
                    <li><a href='URL'>CSS</a></li>
                    <li><a href='URL'>Widget</a></li>
                    <li><a href='URL'>jQuery</a></li>
                    <li><a href='URL'>Tutorial Blog</a></li>
                   <li><a href='URL'>Tips Blog</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='URL'>Love</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Love Tips</a></li>
                    <li><a href='URL'>Marriage</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='URL'>Unik Aneh</a>
                    <ul class='sub-nav' style='display: none;'>
                     <li><a href='URL'>Design</a></li>
                    <li><a href='URL'>Animals</a></li>
                    <li><a href='URL'>Tech</a></li>
                    <li><a href='URL'>Nature</a></li>
                    <li><a href='URL'>Inspiration</a></li>
                   <li><a href='URL'>People</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='URL'>Beauty</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Skin</a></li>
                    <li><a href='URL'>Hair</a></li>
                    <li><a href='URL'>Tips</a></li>             
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='URL'>Resep</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Breakfast</a></li>
                    <li><a href='URL'>Cake</a></li>
                    <li><a href='URL'>Chicken</a></li>
                    <li><a href='URL'>Soup</a></li>
                    <li><a href='URL'>Meat</a></li>
                   <li><a href='URL'>Seafood</a></li>
                  <li><a href='URL'>Pasta</a></li>
                  <li><a href='URL'>Drink</a></li>
                <li><a href='URL'>Dessert</a></li>
                <li><a href='URL'>Bread</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-games'><a href='URL'>Games</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>PC</a></li>
                    <li><a href='URL'>PS2</a></li>
                    <li><a href='URL'>PS3</a></li>
                    <li><a href='URL'>Cheat</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-cerita'><a href='URL'>Cerita</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Cerita Lucu</a></li>
                    <li><a href='URL'>Cerita Seram</a></li>
                    <li><a href='URL'>Cerita Motivasi</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-naruto'><a href='URL'>Naruto Episode</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>New Episode</a></li>
                    <li><a href='URL'>Naruto 284</a></li>
                    <li><a href='URL'>Naruto 283</a></li>
                    <li><a href='URL'>Naruto 282</a></li>
                    <li><a href='URL'>Naruto 281</a></li>
                    </ul>
                </li>
<li class='non-vertical-link top-link' id='link-top10'><a href='URL'>Community</a></li>
                  <li style='clear: both;'/>
 </ul>
</div>

Keterangan :
- Ganti  http://abitalita.blogspot.com dengan alamat blog sobat
- Ganti tulisan URL dengan Url link yang dituju.
- Kode diatas diambil dari blog 'wow menariknya' untuk lebih lengkap sobat bisa lihat disini

8. Terakhir simpan template sobat.

Demikian cara membuat menu horizontal dibawah header blog semoga bermanfaat.
12.02.2012

Sendal Jepit Isteriku

Selera makanku mendadak punah. Hanya ada rasa kesal dan jengkel yang memenuhi kepala ini. Duh, betapa tidak gemas, dalam keadaan lapar memuncak seperti ini, makanan yang tersedia tak ada yang memuaskan lidah. Sayur sop rasanya manis bak kolak pisang, sedang perkedelnya asin tak ketulungan.

"Ummi... Ummi, kapan kamu dapat memasak dengan benar? Selalu saja, kalau tak keasinan, kemanisan, kalau tak keaseman, ya kepedesan!" Ya, aku tak bisa menahan emosi untuk tak menggerutu.

"Sabar Bi, Rasulullah juga sabar terhadap masakan Aisyah dan Khodijah. Katanya mau kayak Rasul? Ucap isteriku kalem.

"Iya. Tapi Abi kan manusia biasa. Abi belum bisa sabar seperti Rasul. Abi tak tahan kalau makan terus menerus seperti ini!" Jawabku masih dengan nada tinggi.

Mendengar ucapanku yang bernada emosi, kulihat isteriku menundukkan kepala dalam-dalam. Kalau sudah begitu, aku yakin pasti air matanya merebak.

*******
Sepekan sudah aku ke luar kota. Dan tentu, ketika pulang benak ini penuh dengan jumput-jumput harapan untuk menemukan baiti jannati di rumahku. Namun apa yang terjadi? Ternyata kenyataan tak sesuai dengan apa yang kuimpikan. Sesampainya di rumah, kepalaku malah mumet tujuh keliling. Bayangkan saja, rumah kontrakanku tak ubahnya laksana kapal pecah. Pakaian bersih yang belum disetrika menggunung di sana sini. Piring-piring kotor berpesta-pora di dapur, dan cucian, wouw! berember-ember. Ditambah lagi aroma bau busuknya yang menyengat, karena berhari-hari direndam dengan deterjen tapi tak juga dicuci. Melihat keadaan seperti ini aku cuma bisa beristigfar sambil mengurut dada.

"Ummi... Ummi, bagaimana Abi tak selalu kesal kalau keadaan terus menerus begini?" ucapku sambil menggeleng-gelengkan kepala. "Ummi... isteri sholihah itu tak hanya pandai ngisi pengajian, tapi dia juga harus pandai dalam mengatur tetek bengek urusan rumah tangga. Harus bisa masak, nyetrika, nyuci, jahit baju, beresin rumah?"

Belum sempat kata-kataku habis sudah terdengar ledakan tangis isteriku yang kelihatan begitu pilu. "Ah...wanita gampang sekali untuk menangis," batinku. "Sudah diam Mi, tak boleh cengeng. Katanya mau jadi isteri shalihah? Isteri shalihah itu tidak cengeng," bujukku hati-hati setelah melihat air matanya menganak sungai.

"Gimana nggak nangis! Baru juga pulang sudah ngomel-ngomel terus. Rumah ini berantakan karena memang Ummi tak bisa mengerjakan apa-apa. Jangankan untuk kerja, jalan saja susah. Ummi kan muntah-muntah terus, ini badan rasanya tak bertenaga sama sekali," ucap isteriku diselingi isak tangis. "Abi nggak ngerasain sih bagaimana maboknya orang yang hamil muda..." Ucap isteriku lagi, sementara air matanya kulihat tetap merebak.

Hamil muda?!?! Subhanallah … Alhamdulillah…

*******
Bi..., siang nanti antar Ummi ngaji ya...?" pinta isteriku. "Aduh, Mi... Abi kan sibuk sekali hari ini. Berangkat sendiri saja ya?" ucapku.
"Ya sudah, kalau Abi sibuk, Ummi naik bis umum saja, mudah-mudahan nggak pingsan di jalan," jawab isteriku.
"Lho, kok bilang gitu...?" selaku.
"Iya, dalam kondisi muntah-muntah seperti ini kepala Ummi gampang pusing kalau mencium bau bensin. Apalagi ditambah berdesak-desakan dalam dengan suasana panas menyengat. Tapi mudah-mudahan sih nggak kenapa-kenapa," ucap isteriku lagi.

"Ya sudah, kalau begitu naik bajaj saja," jawabku ringan.

Pertemuan dengan mitra usahaku hari ini ternyata diundur pekan depan. Kesempatan waktu luang ini kugunakan untuk menjemput isteriku. Entah kenapa hati ini tiba-tiba saja menjadi rindu padanya. Motorku sudah sampai di tempat isteriku mengaji. Di depan pintu kulihat masih banyak sepatu berjajar, ini pertanda acara belum selesai. Kuperhatikan sepatu yang berjumlah delapan pasang itu satu persatu. Ah, semuanya indah-indah dan kelihatan harganya begitu mahal. "Wanita, memang suka yang indah-indah, sampai bentuk sepatu pun lucu-lucu," aku membathin.

Mataku tiba-tiba terantuk pandang pada sebuah sendal jepit yang diapit sepasang sepatu indah. Kuperhatikan ada inisial huruf M tertulis di sandal jepit itu. Dug! Hati ini menjadi luruh. "Oh....bukankah ini sandal jepit isteriku?" tanya hatiku. Lalu segera kuambil sandal jepit kumal yang tertindih sepatu indah itu. Tes! Air mataku jatuh tanpa terasa. Perih nian rasanya hati ini, kenapa baru sekarang sadar bahwa aku tak pernah memperhatikan isteriku. Sampai-sampai kemana-mana ia pergi harus bersandal jepit kumal. Sementara teman-temannnya bersepatu bagus.

"Maafkan aku Maryam," pinta hatiku.
"Krek...," suara pintu terdengar dibuka. Aku terlonjak, lantas menyelinap ke tembok samping. Kulihat dua ukhti berjalan melintas sambil menggendong bocah mungil yang berjilbab indah dan cerah, secerah warna baju dan jilbab umminya. Beberapa menit setelah kepergian dua ukhti itu, kembali melintas ukhti-ukhti yang lain. Namun, belum juga kutemukan Maryamku. Aku menghitung sudah delapan orang keluar dari rumah itu, tapi isteriku belum juga keluar. Penantianku berakhir ketika sesosok tubuh berabaya gelap dan berjilbab hitam melintas. "Ini dia mujahidahku!" pekik hatiku. Ia beda dengan yang lain, ia begitu bersahaja. Kalau yang lain memakai baju berbunga cerah indah, ia hanya memakai baju warna gelap yang sudah lusuh pula warnanya. Diam-diam hatiku kembali dirayapi perasaan berdosa karena selama ini kurang memperhatikan isteri.

Ya, aku baru sadar, bahwa semenjak menikah belum pernah membelikan sepotong baju pun untuknya. Aku terlalu sibuk memperhatikan kekurangan-kekurangan isteriku, padahal di balik semua itu begitu banyak kelebihanmu, wahai Maryamku. Aku benar-benar menjadi malu pada Allah dan Rasul-Nya. Selama ini aku terlalu sibuk mengurus orang lain, sedang isteriku tak pernah kuurusi. Padahal Rasul telah berkata: "Yang terbaik di antara kamu adalah yang paling baik terhadap keluarganya."

Sedang aku? Ah, kenapa pula aku lupa bahwa Allah menyuruh para suami agar menggauli isterinya dengan baik. Sedang aku terlalu sering ngomel dan menuntut isteri dengan sesuatu yang ia tak dapat melakukannya. Aku benar-benar merasa menjadi suami terzalim!

"Maryam...!" panggilku, ketika tubuh berabaya gelap itu melintas. Tubuh itu lantas berbalik ke arahku, pandangan matanya menunjukkan ketidakpercayaan atas kehadiranku di tempat ini. Namun, kemudian terlihat perlahan bibirnya mengembangkan senyum. Senyum bahagia.

"Abi...!" bisiknya pelan dan girang. Sungguh, baru kali ini aku melihat isteriku segirang ini.
"Ah, betapa manisnya wajah istriku ketika sedang kegirangan… kenapa tidak dari dulu kulakukan menjemput isteri?" sesal hatiku.

Esoknya aku membeli sepasang sepatu untuk isteriku. Ketika tahu hal itu, senyum bahagia kembali mengembang dari bibirnya. "Alhamdulillah, jazakallahu...," ucapnya dengan suara mendalam dan penuh ketulusan.

Ah, Maryamku, lagi-lagi hatiku terenyuh melihat polahmu. Lagi-lagi sesal menyerbu hatiku. Kenapa baru sekarang aku bisa bersyukur memperoleh isteri zuhud  dan sepertimu? Kenapa baru sekarang pula kutahu betapa nikmatnya menyaksikan matamu yang berbinar-binar karena perhatianku?