Muhammad Mizan ›› Catatan Dalam Jaringan

Hmmmm... Masih Inget ama Gue!!!?

2010-07-12T00:01:00.000+07:00

Weleh-weleh...!! Siapkah gue memulai postingan??!! Udah lama banget rehat dari blog. Meskipun begitu, skripsi gue belum kelar-kelar juga. :P ... Udah lebih dari 3 bulan vacuum.

Postingan ini gue buat khusus untuk memberi kabar kalau gue masih hidup alias ngga mati. Hehehe.. (abis! ngga ada kabarnya..)

Jujur, gue memang agak males-malesan untuk ngelanjutin blog. Banyak kegiatan belakangan ini. Banyak proyekkan (Alhamdulillah...), banyak tugas, ujian, dan segala macam.

Oke! Fokus pada postingan ini. Pertama-tama gue terima kasih banyak sama semua pengunjung blog ini. Meskipun gue ngga pernah absen, tapi ada aja yang datang memberi komen ^^ --arigatou--. Sekalian gue juga mau minta maaf sama semua blogwalker yang ngga bisa langsung gue balas. Khususnya untuk Boja Linuxer.. Rajin amat blogwalking ke sini.. ^^

Sayang sekali blog ini harus tercampakkan. Entah kenapa gue jadi malas buat on-line baik itu untuk nge-facebook atau nge-Tweett, ngaskus, blog apalagi!! Disamping itu, skripsi gue baru mulai ngerjain BAB IV. Doain gue ya! Selangkah lagi kelar nih..! Doain juga gue biar ngga berhenti blogging.

Mohon ditunggu postingan-postingan gue berikutnya.. Oke!

Mizan Out....!! zzzzzz..

Membuat "Sticky/Floating" Menu Navigasi Horizontal

2010-03-24T20:26:00.001+07:00

Udah lama banget ane ngga ngapdet postingan.. Semua aktifitas yang membuat ane pusing mulai dari tugas-tugas kuliah, skripsi ane yang judulnya bermasalah, konflik dengan pembimbing lah..!! Ditambah lagi ane sibuk belajar meng-edit template ini agar bisa fix (tapi rasanya ga pernah fix sih... ^^). Yah! Pokoknya bermacam-macam.

Oke! Kembali ke Blog.. karena mendengar permintaan beberapa teman ane yang bertanya bagaimana cara membuat navigational menu seperti yang ada di atas, ane berinisiatif lagi untuk membuat postingan ini. Sebenarnya trik ini sudah pernah terbit dalam blog ane, tapi sepertinya pengunjung juga malas untuk menjelajahi blog ini. Oleh karena itu ane buat judul baru saja tentang widget yang satu ini.

caranya sederhana karena kalian dapat mengaksesnya pada postingan ane untuk membuat floating object pada blog (silahkan klik di sini). dan di dalam floating object tersebut, kalian dapat mengisinya dengan sebuat navigational menu yang ada pada postingan jadul ane yang satu lagi.

Sesederhana itu sih..! Silahkan cek TKP bagi yang ingin membuat sama persis seperti blog milik ane ini. ^^

Membuat Tab Menu dengan Slide Effect (versi Abu Farhan)

2010-03-16T10:07:00.005+07:00

Entah kenapa jarang banget ane liat blog yang menggunakan widget ini. Padahal widget Tab Menu ini cukup keren dari segi tampilan dan ringan dalam proses loading. Alasan ane tidak menggunakan widget ini sendiri karena disamping ane sudah memiliki tab menu sendiri dari om Khendin, widget ini juga tidak sesuai dengan template ane yang sifat bentuknya tidak bergerak alias fixed size.

Widget ini merupakan Tab Menu yang sangat fleksibel, dengan slide effect menggunakan script JQuery. Penasaran seperti apa??? Lihat demonstrasinya di sini. Widget ini merupakan hasil karya dari Webitect, dan terima kasih pada om Abu Farhan yang mau berbagi infonya. ^^

Langsung aja ya! Untuk membuatnya sendiri cukup mudah, pertama-tama masuk ke "Tata Letak" dari Dasbor Blogger, dan masuk pada "Edit HTML".

Langkah awal, pasang kode CSS untuk membentuk tampilan widget ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;

}

ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Setelah itu, kita akan memasang script JQuery dari Google. Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode berikut tepat di atas </head>.

Yang terakhir, tinggal memasang widgetnya yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Perhatikan kode berwarna hijau!! "starttab" adalah nomor widget yang akan masuk dalam tab pertama, "endtab" adalah jumlah widget yang akan masuk ke dalam Tab Menu, sedangkan "sidebarname" adalah nama id dari kolom yang akan di jadikan Tab Menu.

Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu, lihat gambar berikut:

Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar "endtab=3". Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.

Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

CATATAN: Widget ini tidak akan muncul di pratinjau, jadi jangan stres bila kelihatannya gagal, langsung saja simpan dan lihat hasilnya ^^ (seandainya tidak muncul, mungkin blogger membutuhkan beberapa saat untuk memperbaiki error yang disebabkan cache dari tampilan sebelumnya).

Sederhana kan!!?? (meskipun keliatannya rumit -_-') Tapi patut di coba. Sekali lagi silahkan lihat CONTOH dari widget ini di blog ane yang satunya.. ^^v..

Oke! Selamat mencoba =)

Good Bye Translator Widget - Welcome "Sticky" Navigational Menu

2010-03-13T04:41:00.003+07:00

Gaya kan, kali ini postingan ane judulnya bahasa Inggris! hahaha... ehhmm.. -_-'. Kali ini ane dedikasikan untuk mengucapkan selamat tinggal pada widget google translator yang ada di blog ini karena memang kenyataannya tidak terlalu bermanfaat. Alasannya karena bahasa yang ane pergunakan di setiap postingan blog ini tidak bisa di-translate dengan baik oleh google (lha..! bukan bahasa Indonesia yang baik dan benar, jadi ngaco deh kalau pakai translator.. =P). Ditambah lagi pengunjung blog ini didominasi oleh para blogger yang cukup paham dengan bahasa ane (bukan bahasa Indonesia ya.. ^^). Sekali pun ada pengunjung blog yang tidak paham dengan bahasa ane, tidak banyak yang bisa paham dan memperoleh manfaat dari postingan-postingan blog ini. (yang dilakukan cuma komentar nye-pam -_-''). Jadi ane mengucapkan maaf sebesar-besarnya untuk para Mister dan Mistress di sana yang tidak bisa menikmati isi blog ini (itu pun kalau ente ngerti dengan ucapan permintaan maaf ane hehe..).

Tapi, segala sesuatu di dunia ini sebaiknya seimbang. Karena ane menghilangkan sesuatu di blog ini, ane jadi menambahkan sesuatu juga di blog ini ^^v. Yang ane tambahkan adalah Sticky Navigational Menu (Menu Navigasi yang "Lengket"). Meskipun widget ini sudah lebih dulu ane buat, tapi ada baiknya kalau ane resmikan sekarang. =)

Masih belum tahu apa "Sticky" Widget...! 0_o .. Itu lho...! Tiap kalian menggerakkan scrolling halaman ini ke bawah, tapi widget ini tetap kokoh pada posisinya. Contohnya seperti Menu Navigasi di atas, dan widget "Follow Me On Twitter" di sebelah kiri.

Nah..!! Kebetulan, ane juga mau berbagi tips bagaimana cara membuat widget ini pada blogspot kalian (Jiaah..! Cuma mau ngasi tau cara bikin widget ini aja pendahuluannya panjang bener!! :S).

Seperti biasa, login pada blogger, pilih "Tata Letak", kemudian "Edit HTML". cari kode ]]></b:skin> (gunakan Ctrl+F) lalu copy dan paste kode CSS berikut tepat di atasnya.

#sticky1 { position:fixed;_position:absolute;bottom:300px; left:0px;
clip:inherit; _top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Note: Perhatikan kode berwarna biru di atas. Kode tersebut mengandung arti bahwa jarak widget adalah 300 pixels dari bottom (bawah window) dan 0 pixels dari left (kiri window). Kode berwarna hijau dapat di ubah dengan top (dari atas window), atau right (dari kanan window).

Setelah selesai memasang kode CSS di atas, pasang widget-nya. Caranya, cari kode </body> lalu copy dan paste kode HTML berikut tepat di atasnya.

<div id="sticky1">

<a href="http://twitter.com/mimuha">

<img src="http://lh5.ggpht.com/_W0jEX3f70oA/S4o6lCtWc_I/AAAAAAAAAS4/vavzcsANjko/Untitled-2.gif" /></a>
</div>

Kode HTML di atas adalah kode widget "Follow Me On Twitter" yang ada pada blog ini. Kalian bisa mengganti script berwarna hijau dengan kode tag gambar, Menu Navigasi, CBox Chat Widget, Stats Counter, Alexa PR, Translator, atau widget apa pun. Untuk menambah sticky widget yang baru, buat lagi kode CSS dan HTML di atas pada tempatnya, tapi ubah nama "#sticky1" menjadi "#sticky2", begitu juga dengan <div id="sticky1"> menjadi <div id="sticky2">. Jangan lupa pada kode CSS-nya ubah posisinya menjadi berbeda (bottom, left, top, right). Apabila semua sudah dilakukan, pilih pratinjau, jika berhasil, simpan pilih simpan.

Script widget ini tidak membuat lemot loading blog, semua tergantung pada widget apa yang di pasang dalam kode "div" di atas. Sebaliknya, dengan ane menghapus widget "Translator" malah membuat loading blog ane jadi makin cepat. Jadi, ane cukup senang dengan perubahan ini.

Semoga bermanfaat ya sob..! sampai ketemu lagi... ^^v.

Setujukah Kalian Kalau Blogger Menghapus Blog Yang Dicampakkan?

2010-03-05T05:01:00.001+07:00

Hmmm... Apa yang dimaksud dengan "blog dicampakkan"?? Ini berawal dari kisah saat pertama kali ane membuat blog ini. Alamat blog yang ane isi pertama kali adalah muhammadmizan.blogspot.com. Ternyata ane sama sekali tidak bisa memakai nama alamat tersebut karena sudah ada yang memiliki. Yang sangat disayangkan, ternyata blog itu hanya berisi headline judul blog, tanpa ada postingan sama sekali (entah sejak kapan blog ini dibuat, yang jelas, sih Muhammad Mizan ini bukan ane -_-').

Ada beberapa kemungkinan kenapa blog itu dicampakkan:

Kemungkinan pertama, si Muhammad Mizan itu memang hanya iseng membuat blognya.

Kemungkinan kedua, si Muhammad Mizan memang sengaja mempersiapkan blog-nya untuk keperluan nanti.

Kemungkinan ketiga, si Muhammad Mizan lupa dengan user dan password yang dia miliki.

Kenyataannya sih, membuat nama domain tersebut memang tidak menjadi masalah serius, apalagi kita bisa membuat alamat sendiri dari penyedia domain web, mulai dari yang komersil, sampai yang gratisan seperti dot co.cc, co.tv, co.nr, dsb. Namun, adakalanya memiliki alamat dari blogspot dengan nama asli kita pada nama subdomainnya dapat menjadi kebanggaan tersendiri. ^^

Sebagai salah satu contoh, nama url subdomain "cantik" (udah kayak nomor handphone aja ^^ ) yang dicampakkan adalah http://blog.blogspot.com/. Blog ini hanya berisi postingan berbahasa korea dengan satu postingan berjudul "Test" yang diterbitkan tahun 2003.

Tadinya besar harapan ane kalau blog ini akan muncul dengan nama alamat url http://muhammadmizan.blogspot.com/ tapi ternyata sudah ada dan tercampakkan. Lalu ane ubah menjadi http://mizan.blogspot.com/, ternyata juga sudah ada dan tercampakkan pula. Subdomain m-mizan, bukan menjadi favorit ane =P, muhanmmad-mizan juga tidak menarik. Akhirnya ane memutuskan alamat url blog ini menjadi http://em-mizan.blogspot.com/, sebuah alamat url yang lumayan ane suka, unik, dan ane tidak berniat untuk menggantinya dengan nama domain apapun. ^^v

Tadi adalah awal mula cerita bagaimana nama alamat situs blog ini terbentuk... hehe.. Jadi bagaimana seharusnya blog yang "tercampakkan" ini? Apa dibiarkan beredar terus tanpa ada kejelasan (mungkin selamanya 0_o), atau tidak ya..!??

Tips Sederhana Membuat News Feed Ticker Pada Blogger

2010-02-28T14:45:00.001+07:00

Postingan ini sebenarnya sudah ane bahas di Membuat Slideshow News/Feed Ticker, tahun lalu. Tapi ternyata masih banyak orang yang bertanya-tanya bagaimana blog ini bisa memiliki feed ticker dengan slideshow seperti yang ada di bawah postingan ini.

Kalau pada postingan yang dulu, ane menjelaskan tentang kehebatan situs BlastCasta, yang dapat membuat beragam widget feed dari situs web, blog, atau akun twitter. Tapi kali ini ane langsung aja memberi kode html yang dapat di copy & paste ke dalam widget "Kode HTML/Javascript".

Caranya sederhana, masuk pada "Tata Letak" Blogger, lalu pilih "tambah gadget", dan pilih "Kode HTML/Javascript". Setelah muncul, berikan judul sesuka hati, dan masukkan kode berikut di dalamnya:

Kode Feed Ticker:

Dengan kode di atas tampilan widget akan tampil sama persis seperti yang ada dalam blog ini. Perhatikan kode-kode berwarna hijau, ubah alamat URL em-mizan.blogspot.com dengan alamat blogspot kalian. Ubah juga font, color, dan size sesuka hati.

Sederhana kan..!! kalau begitu silahkan mencoba... ^^

Kontes "Ekspresi Puisi Cinta Satu Bait" Berhadiah...!!! Ayo Ikutan....!!!

2010-02-25T08:23:00.001+07:00

Ada yang menarik nih di blog mba Aliaz. Sobat blogger Wordpress yang satu ini mengadakan kontes berhadiah dengan cara membuat PUISI CINTA yang panjangnya satu bait dalam postingan blog kalian. 5 besar puisi yang Aliaz anggap cukup oke akan mendapatkan hadiah yang lumayan. Batik asli dari Pekalongan... ^^

Kebetulan ane belum punya batik asli dari Pekalongan, oleh karena itu ane ikutan dah kontesnya. Simak puisi ane berikut ini ya!

AKU CINTA KAU?

AKU CINTA KAU!!!!

Alasannya karena aku cinta dia,

mereka, serta semua materi dan iluminasi dari yang paling kecil

sampai yang paling besar di dunia ini...

Tidak lupa terima kasih juga buat Kang Tejo & Abeedee atas infonya. Untuk keterangan lebih lengkap mengenai kontes ini, silahkan kunjungi Ekspresi Puisi Cinta Satu Bait.

Udah..!! Hindari Blogging, demi Judul..... Oh Judul...! -_-' (Curhatan nih..!)

2010-02-17T00:35:00.000+07:00

Pusing.. Pusing...! Bener-bener pusing dah..!! Ngemenk-ngemenk sori ya kalo postingan kali ini tidak seperti biasanya, maklum lagi pusing, jadi ane tulis aja apa yang ada.

Ane nulis kayak gini gara-gara mengalami dilema hidup (dilema melulu... -_-'). Ane cuma bisa bilang, bagi ente-ente sobat blogger yang sekarang lagi kuliah, khususnya di semester-semester akhir, lebih baik jangan, mengenal Blogger deh...!!

"Blog itu adalah candu", itu yang sekarang ada di benak ane.. -_-', rasa fun, enjoy, dan wadah berekspresi, sampai akhirnya pada titik ini, ane kesulitan menyeimbangkan gaya hidup ane antara dunia nyata dan maya.

Ane memulai blog ini pada bulan Nopember 2009, saat ane sedang mendekati Ujian Akhir Semester 7, saat ane baru selesai membuat laporan Kerja Praktek, saat ane udah tenang-tenang, dan fokus pada ujian. Dimulai dari blog biasa yang tidak ada apa-apanya, sampai sekarang jadi blog yang bikin ane jadi sibuk begini. Ini akibatnya kalo fenomena blog dijadikan gaya hidup, atau trend. Hidup ane jadi cukup kacau sob..!! Nilai kuliah turun, waktu untuk tidur jadi berkurang, kesehatan apalagi. Yang lebih parah dari itu semua, ane malah jadi lebih kecanduan blogging nih..!!

Saat ini ane menjadi orang yang hampir lupa dengan kewajiban. Saat ane menulis postingan kali ini, adalah hari 'H -1' deadline ane mengumpulkan daftar judul yang ane harus ajukan sebagai skripsi, yang nantinya harus ane pilih untuk ane kerjain secara serius. Mungkin karena emang kepribadian ane yang pemalas juga, membuat ane banyak membuang-buang waktu dengan hal-hal sesaat yang bisa menghibur ane.

Yang menjadi keinginan ane sekarang adalah menjalani hak dan kewajiban ane secara seimbang. Klo bisa kuliah jalan, blogging juga jalan.. hmm... ane perlu management waktu nih..!! Ada yang punya masukan buat judul skripsi ane...??? Ane jurusan Ilmu Komunikasi nih..!! Mau ngambil skripsi tentang kegiatan blogging.. kira-kira apa ya??

Membuat Alternatif Twitter Update Widget dengan Javascript

2010-02-16T07:23:00.000+07:00

Postingan ini sebenarnya mau diterbitkan bulan lalu, tapi karena tanggung, lebih baik diterbitkan awal bulan ini saja biar lebih terasa nuansa semangat tanggal mudanya.. ^^ ..

Beberapa dari sobat blogger pasti pernah dan /atau masih menggunakan widget Twitter Updates pada platform blogger yang dibuat oleh BloggerBuster. Kali ini, kalian bisa membuat alternatifnya dengan kode Javascript. Keuntungannya apa...!!?? Hehe... Tentu saja widget ini jadi lebih gampang dimodifikasi dibandingkan dengan widget yang biasa, meskipun mungkin membingungkan, tapi tenang saja, karena saya akan membantu langkan demi langkah agar widget ini lebih mudah di utak-atik.

Masuk pada Dasbor Blogger, kemudian pilih Tata Letak (Edit Layout), lalu pilih Edit HTML, kemudian beri centang pada Expand Template Widget. Cari kode ]]></b:skin> (gunakan Ctrl+F pada browser untuk mencari kode) kemudian letakkan kode CSS berikut tepat di atasnya.

.twittop{margin:5px 0px 0px 0px;height:30px;background:#141313 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfLEoxY28cXqB0LonSNDCd4hbBPrFkQyEnjHfXJ-p83xatyrHMnTSx2CPPwLlu-qRKHqyVYlcjxCkojY6FPNytbchNaUxSwxhUloykpaYLz1lZ5VrToVLqlQHizm9WSzkjo2_mYXGscM/s1600/twitop.jpg) no-repeat; /* Gambar Header*/
width:335px;}

#twitter_div{width:333px; /* Lebar Widget*/
float:left;height:100%;padding:0px 0px;margin:0px 0px;background:#fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;font-family:Tahoma,Century gothic,verdana, Arial, sans-serif; /* Jenis Huruf*/ }

ul#twitter_update_list{list-style:none;padding: 0px 0px;margin:0px 0px;}

ul#twitter_update_list li{font-size: 11px; /* Ukuran Teks Status*/
list-style:none; /* pilih bentuk daftar circle, disc, square, atau none*/
padding: 5px 5px;margin:0px 0px;line-height:18px;background:#B5D3DD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeEH_omJWMQAx8xnX6SGCNKpUS10cElXbH_VCvJY-RrJe9u1n1mkhFTr_STEyhtdvfIvWZjY3pNW_WoHMc5ST54Ij2PNi1S8vJYxcfNS3aFR-gTBhE-BrXkXi5d7iEhyphenhyphennxQj7OawFa4FM/s1600/twit.jpg) repeat-x; /* Gambar Background Update Status*/
border-bottom:1px dotted #ccc; /* Warna Border*/
color:#222; /* Warna Teks Update Status*/}

/* Berikut atur saja sama seperti di atas, tetapi yang ini untuk saat mouse over (ketika kursor mouse menghampiri kotak)*/
ul#twitter_update_list li:hover{font-size: 11px; /* Ukuran Teks Status saat hover*/
list-style:none; /* pilih bentuk daftar saat hover*/
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#dcdcdc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Hl3HGDjKpLTGDcxigCAcl_gpLoAsfEqnQraQhDj-BeSFzeJBucgVOHZeHDSuWYEGdQP8Ff66eMkvGAzGmXjIBxuvNrIQcHmsLTFPPYjVKNSrquj_vkmU4rb5Fg4Xjebrhy-UzFzBTm4/s1600/twith.jpg) repeat-x; /* Gambar Background Update Status saat hover*/
border-bottom:1px dotted #ccc;}

/* Berikut aturan untuk tautan (link)*/
#twitter_update_list li a:link, #twitter_update_list li a:visited{color:#D3116D;}

#twitter_update_list li a:hover{color:#BC0C0F; /* Warna Teks Links saat hover*/ }

Perhatikan teks catatan berwarna biru, kalian tinggal mengganti lokasi gambar atau bisa juga hanya menggunakan warna, ubah warna & ukuran teks dsb. Setelah itu Simpan (Save), lalu masuk pada Elemen Halaman (Page Elements), kemudian tambah gadget, pilih Kode HTML/Javascript, dan paste-kan kode javascript berikut, kemudian Simpan.

<div class='twittop'> </div> <div id='twitter_div'> <ul id='twitter_update_list'/> </div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/> <script src='http://twitter.com/statuses/user_timeline/ID-user-twitter.json?callback=twitterCallback2&count=5' type='text/javascript'/><br/>
<center><a href='http://twitter.com/ID-user-twitter'>Ikuti Saya di Twitter</a></center>

Ubah ID-user-twitter dengan user twitter milik kalian, dan ganti angka 5 yang menunjukkan jumlah tweet yang akan muncul pada widget.

Cara ini kelihatan rumit, tapi kalau diikuti dengan hati-hati dapat memuaskan sobat semua, karena bentuknya yang lebih unik, orisinil buatan kalian sendiri, baik itu terlihat dari gambar, warna, bullet, dan gambar.

Contoh widget ini terdapat pada bagian bawah blog ini, tapi pada blog ini saya tidak menggunakan gambar background, hanya menggunakan permainan warna saja.

Ini cuma untuk latihan dan menambah pengalaman saja, jadi jangan ragu mencoba... ^^ ...

Dari Mangatar, Babytar, Sampai Zombietar. Tinggal Pilih Saja..!!

2010-02-14T23:54:00.002+07:00

Sering banget ane lihat avatar dalam situs jejaring sosial yang unik-unik, dan kreatif. Lebih sering lagi ane ngeliat yang bentuknya narsisme, tapi ga masalah sih... Sebelumnya kalian paham ga maksudnya avatar...!? (bukan film lho..! ^^, bukan juga kartun). Avatar itu yang biasa dijadikan foto profil di situs jejaring sosial (blogger, FB, Twitter, dll.)

Membuat avatar sendiri biasanya penting bagi kalian yang mementingkan eksistensi (Chiee...) biar lebih dianggap oleh orang lain, biar saat seseorang melihat foto profil kalian, mereka akan langsung tahu bahwa itu adalah foto milik kalian.

Bagi sebagian orang mungkin memasang foto sendiri sebagai foto profil menjadi sebuah keharusan. Tapi kalau kalian memiliki jiwa misterius, jiwa unik, kreatif, atau jiwa pahlawan bertopeng (atau mungkin kalian salah satu orang yang malu dengan wajah sendiri.. hehe... amit2 dah -_-'), kalian pasti lebih memilih foto profil yang berbeda dari yang lain, bisa berupa gambar kartun, pemandangan, atau objek lainnya. Kalau mencari foto profil yang unik, kalian bisa menggunakan alternatif gambar dengan situs jejaring pembuat foto wajah online di internet.

Kalian tau Mangatar, yaitu istilah yang merujuk pada avatar yang gambarnya berupa manga (istilah komik Jepang [Naruto, Doraemon, dll.]). Nah...! untuk membuat foto sendiri berbentuk manga kalian bisa memanfaatkan situs-situs jejaring seperti DoppelMe, yaitu situs yang dapat membuat mangatar online, atau pilihan lain seperti Tektek.org Dream Avatar, yaitu situs pembuat custom avatar dengan bentuk seperti karakter 2D game RPG (Final Fantasy, Lunar, dll.)

Untuk mangatar sendiri, yang menjadi favorit ane pribadi adalah situs FaceYourManga. Tampilannya cukup sederhana, kita dapat membuat dan meng-edit gambar berdasarkan rambut, mata, bentuk kepala, bibir, hidung, dsb. Kenapa ane merekomendasikan yang ini alasannya karena hasil jadi dari Mangatar situs ini tampilannya hampir mewakili seluruh tampilan karikatur bentuk wajah manusia. Plus, tidak perlu daftar lagi..! ^^

Sebagai tambahan, kalau kalian tertarik dengan mengedit foto yang akan dijadikan avatar mungkin situs Make Your Baby ini bisa menjadi pilihan. Adalah sebuah situs yang dapat membuat gambar wajah bayi yang diprediksikan sebagai keturunan kita. Cukup upload foto wajah kalian, dan gabungkan dengan foto wajah lain. Uniknya lagi foto wajah kalian bisa digabunggan dengan foto wajah para selebritas lho..!! ^^

Tambahan satu lagi yang ini jauh lebih ekstrim...!! Karena situs Zombiefy-Yourself dapat mengubah wajah kalian menjadi zombie...!! (-_-' serem sih, tapi unik juga) Tinggal upload foto wajah kalian, dan beri efek-efek zombie cukup dengan dragg & drop.

Menarik kan...!!? Kalau begitu selamat menuju TKP... ^^

"SPECIAL TAGS + AWARD" PERDANA DARI CATATAN DARING ^^v

2010-02-12T05:12:00.017+07:00

Beberapa hari lalu ane cukup kaget ada beberapa sobat blogger yang berbaik hati memberikan ane beberapa bonus berupa metode backlink gratis melalui metode pemberian Award dan Tag. Yang bikin ane kaget adalah mereka memberikannya pada waktu yang bersamaan (Janjian kali ya....!! ^^). Maka dari pada itu, ane pribadi benar-benar mengucapkan terima kasih pada para sobat blogger ane khususnya pada Kang Tejo, Kucing Tengil, Sii Wina, dan si bungsu Mauren Fitri (jd kayak yang bersaudara.. -_-').

Selanjutnya ane bakalan persembahkan award ini pada beberapa sobat blogger ane yang lain, antara lain:

Bos Crockie, Bos Hunits, Bos Boja, Bos Cilaw, Bos Local, Bos Stroomz, Bos Sikumbang, Bos Ari, dan Mba Dwi ^^

Kenapa ane memilih sobat di atas, adalah karena para blogger tersebut ane anggap sebagai blogger yang mementingkan jalinan pertemanan dan silaturahmi antara satu sama lain... (Bukan sekadar nulis "Blogwalking" aja, trus ilang entah kemana... ^^).

Ini logo Award ane nih:

AWARD

AWARD Mizan: []

BOOK TAG

BOOK TAG Mizan: []

QUESTION TAG

QUESTION TAG Mizan: []

Selamat mengambil award-nya, sob! Tetap jalin tali silaturrohmi kepada para sobat blogger agar trafic blog-nya cepat. Selamat kepada para blogger yg mendapat award.....!! Kalau hanya mau posting salah satu dari ketiga pilihan ini juga tidak apa-apa... ^^ ... Trims semuanya...! ^^v.. Keep Blogging, ane tunggu postingan berikutnya..

Spoiler Unik untuk Blogger (Alternatif Spoiler dengan Kode HTML)

2010-02-10T06:50:00.003+07:00

Kalian pernah melihat situs forum Kaskus?? (Kalo belum,, kemane aje lo...!!! hehehe.. ehhmm.. -_-'), Kalian pasti lekat dengan istilah 'Spoiler' (Bagi yang tidak tahu, contohnya ada di postingan ini). Spoiler dapat menyembunyikan sesuatu baik itu teks kalimat, gambar, tabel, widget chat, dll. Spoiler juga dipakai oleh Situs Ensiklopedia Online Wikipedia untuk membuat daftar isi dan menu pada tiap-tiap halaman judulnya.

Untuk membuatnya sendiri cukup menggunakan kode HTML yang sederhana. Kode tersebut dapat di copy & paste ke dalam widget blog dan dapat ditempatkan sesuka hati, atau bisa juga dipasang dalam postingan seperti postingan kali ini.. ^^

Berikut bentuk-bentuk spoiler yang dapat kalian gunakan beserta kodenya:

Judul Spoiler Biasa :

Judul Spoiler Soft:

Judul Spoiler Tanpa Background & Border :

Judul Spoiler Ala Wikipedia: []

Untuk memasangnya sendiri cukup sederhana. Kalau ingin memasang dalam postingan seperti di atas, cukup copas kode HTML untuk spoiler yg diinginkan ke dalam postingan (Harus dilakukan di tab 'Edit HTML' lho...!!! ^^ ). Kalau ingin memasangnya sebagai widget, bisa di-copas ke dalam widget Kode HTML/Javascript (di tata letak blogger, pilih 'tambah gadget', dan pilih kode HTML/Javascript, dan simpan) silahkan letakkan sesuka hati.. ;)

Isi spoiler bisa kalian tentukan sendiri, entah itu kata-kata, widget (dari kode javascript), dsb.

Unik kan...!! Kalau begitu silahkan langsung mencoba...^^

Ayo.....!!!! Pasang Foto-Foto yang Keren dari PicApp ke dalam Posting-an Kamu!!

2010-02-04T02:34:00.000+07:00

Pusing mencari gambar untuk mewakilli isi postingan kamu??? Biar ane tebak, biasanya kamu masih pakai Google Image untuk mencari gambar untuk dicantumkan dalam postingan blog?

Kalau seperti itu, tentu saja resikonya gambar yang kamu cantumkan dapat digunakan orang lain, baik itu blog, web, atau poster selebaran di pinggir jalan. Ditambah lagi gambar yang kamu dapat bisa jadi merupakan gambar dari blog lain, bisa-bisa kamu di bilang plagiator gambar tuh...!! ^^

Tapi jangan khawatir karena sekarang kamu bisa mencari gambar unik tersendiri untuk isi blog kamu di situs PicApp, yang berisi puluhan ribu gambar yang berbeda, tidak umum, dan yang paling penting, fotonya diambil oleh para fotografer professional, dijamin keren deh foto-fotonya!!

Gambar-gambar yang ada di situs tersebut bukanlah gambar yang berasal dari blog/situs orang lain, tapi dari data mereka yang legal. Dengan begitu, tidak perlu khawatir bila ingin langsung mengambil gambar-gambar dari data mereka.

Cukup akses situsnya masukkan query value atau nama gambar yang ingin dicari, copy link-nya, langsung deh..! Untuk pengguna Worpress juga mempunyai kemudahan dalam embed picture-nya.

Oh.. ya..!! yang lebih asyik lagi, kalian tidak perlu men-download gambar-gambar tersebut terlebih dahulu, karena situs ini akan memberikan tautan (link) menuju arah gambar-gambar yang ada.

Okeh kan???!! langsung aja, silahkan mencoba...!!! ^^

Klik disini.

Tips Sederhana Mengedit Template Blogger Bagi Pemula

2010-02-03T06:21:00.002+07:00

Ingin tampilan blog yang orisinil...? Dengan kata lain tidak dimiliki oleh blog lain dan menjadi sebuah ciri khas sendiri. Tapi kadang template atau tampilan blog yang kita gunakan biasanya bertebaran luas di dunia maya, sehingga terdapat kemungkinan ada dua blog yang memiliki tampilan yang sama.

Jangan khawatir..! hal tersebut dapat diatasi dengan mengedit gambar yang ada pada template blog yang kita gunakan. Bagi yang jago web editing, hal itu pasti tidak menjadi masalah, tapi untuk kalian yang masih pemula pada urusan kode-kode HTML, berikut ada tips sederhana dan patut dicoba.

Perlu diketahui, tampilan blog biasanya diatur oleh kode CSS yang terletak di antara kode <b:skin><![CDATA[ sampai dengan kode ]]></b:skin>. Semua bentuk, ukuran panjang, lebar, pixel, dan gambar pada blog, diatur oleh kode-kode tersebut. Pada tampilan blog ini contohnya, gambar head top, button, dll. merupakan gambar sendiri yang saya upload ke situs hosting gambar seperti Picasa, Flickr, atau Photobucket.

Berikut cara kerjanya. Sobat blogger pasti sudah tahu cara meng-install template pada blogger bukan? Download saja salah satu template blogger yang ada, kemudia upload pada blogger di menu 'Tata Letak' pada tab 'edit html'. Setelah selesai, modifikasi saja template tersebut dengan mengubah gambar, ukuran, dsb. pada kode CSS-nya.

Caranya, di browser sobat (Mozilla, IE, dll.), klik kanan pada salah satu gambar yang ingin diubah, entah itu background tombol, atau header blog, lalu pilih "View Background Image", lalu browser akan berpindah pada alamat gambar yang sobat pilih tersebut, lalu blok address bar atau alamat gambar pada browser kemudian catat atau copy alamat tersebut (Ctrl+C pada keyboard). Pada Internet Explorer, langsung saja pilih Copy Background saat klik kanan.

Masuk pada "Tata Letak" di dasbor Blogger, pilih "Edit HTML", dan centang "Expand Template Widget". Tekan 'Ctrl+F' di keyboard dan pastekan alamat gambar yang sudah dicatat tadi. Sobat blogger akan menemukan alamat tersebut pada salah satu kode CSS yang terdapat pada blog. Yang perlu dilakukan sekarang adalah mengganti alamat tersebut dengan alamat gambar lain, yaitu gambar yang sudah di-upload ke situs Photobucket contohnya.

Kalau sobat blogger tidak ingin pusing, lebih baik gambar baru yang digunakan memiliki resolusi, atau ukuran panjang dan lebar yang sama dengan gambar sebelumnya, tapi kalau ingin ukuran yang berbeda ukurannya, kalian juga harus ikut mengubah beberapa kode CSS seperti "height:...px;" atau "width:...px;". Sebagai contoh, perhatikan contoh kode CSS sbb:

#top { height:396px;
            margin:auto;
            background:#f4f4f4 url(http://i919.photobucket.com/albums/ad33/mimuha/top-2.jpg);
            width:1000px    }

Setelah itu pilih "Pratinjau", kalau hasilnya memuaskan, silahkan simpan hasil editan template kalian. Dengan begitu blog sobat akan memiliki gambar-gambar yang unik, berbeda dengan yang lain.

Saran bagi sobat blogger yang masih pemula, kode-kode CSS adalah kunci dari tampilan blog. Jika ingin merombak tampilan sebuah blog, ubah satu per satu variabel atau angka-angka pada kode CSS blog. Lakukan dengan sabar, niscaya kalian akan jago dalam mengedit, bahkan membuat template sendiri, serta jangan lupa untuk selalu "pratinjau" terlebih dulu agar dapat melihat hasilnya sebelum benar-benar di simpan, okeh...!! Selamat mencoba... ^^

Mengalihkan Halaman Blog Blogger (Redirecting Blogger Page)

2010-02-02T20:00:00.000+07:00

Beberapa kali pasti sobat blogger pernah mengakses situs yang mengalihkan halaman web-nya. Biasanya akan tertulis pesan seperti "Redirecting you to the site in 15 second". Mengalihkan halaman web mungkin dapat bermanfaat kalau para sobat blogger ingin mengalihkan pengunjung ke situs blog atau domain yang baru. Bahkan kadang, hal tersebut juga dimanfaatkan untuk menyelipkan iklan sebelum masuk ke situs utama.

Untuk membuat halaman web khususnya untuk blogger, kalian dapat dialihkan, kalian bisa menggunakan kode META agar dapat dialihkan, tapi akibatnya, Page Rank Google pada blog yang lama akan hilang (Hal tersebut karena cara ini banyak dimanfaatkan untuk tindakan SPAM, sayangnya saya belum menemukan cara untuk mengalihkan blog Blogger dengan cara yang berbeda... -_-'. Tapi mungkin kalau kalian mengetahuinya, mungkin bisa berbagi di post ini ^^).

Caranya seperti biasa, masuk pada "Tata Letak" di Dasbor Blogger, dan pilih "Edit HTML", centang "Expand Template Widget". cari kode <head>, setelah itu pastekan kode META berikut tepat di bawahnya.

<meta http-equiv="refresh" content="0;url=http://www.alamat-blog-yang-baru.com">

Ubah URL ke alamat situs blog yang baru. Ubah angka 0 pada 'content', untuk menentukan berapa detik halaman blog akan muncul sebelum dialihkan. Pada halaman blog bisa kalian isikan postingan atau judul Headline blog berisi kata-kata seperti "Mengalihkan halaman ini ke situs baru. Klik di sini apabila halaman tidak teralihkan", atau kalian bisa juga mengisinya dengan widget iklan.

Mengalihkan halaman blog bisa bermanfaat untuk proses pengalihan pengunjung setia blog yang lama agar dapat mengenal blog yang baru. Sebenarnya blog yang lama dapat dihapus saja, tapi sayang bagi para sobat blogger yang tersesat mencari-cari blog kita, betul tidak...!!! ^^

Tips Modifikasi Link "Posting Lama", "Posting Baru", & "Halaman Utama"

2010-02-01T06:28:00.000+07:00

Berikut tips untuk meng-hack tampilan blog Blogger. Yang akan di modifikasi kali ini adalah tautan (link) pada yang biasanya terdapat di bagian bawah postingan kalian. Secara default, link tersebut adalah 'Posting Lama' (Older Pages), 'Posting Baru' (Newer Pages), dan 'Halaman Utama' (Home).

Cara untuk memodifikasinya sendiri cukup sederhana. Masuka pada halaman 'Tata Letak' dari Dasbor Blogger, pilih 'Edit HTML', dan jangan lupa untuk memberi centang pada 'Expand Template Widget'.

Apabila sudah, cari kode-kode berikut (Seperti biasa, gunakan Ctrl+F pada browser untuk mencari kode ^^).

<data:newerPageTitle/> = Posting Baru
<data:olderPageTitle/> = Posting Lama
<data:homeMsg/> (hanya kode yg pertama) = Halaman Utama

Ketiga kode di atas, mewakili masing-masing link tersebut. Untuk memodifikasinya, kalian tinggal ubah saja kode tersebut sesuai keinginan kalian, dapat dilakukan dengan teks, gambar, dll.

Contoh, ganti kode '<data:olderPageTitle/>' dengan teks 'Berita Sebelumnya' (tidak perlu pakai tag '< & />' lagi ^^). Apa bila ingin menambahkan gambar di samping teksnya, tambahkan saja kode 'img' sehingga menjadi <data:olderPageTitle/><img src='http://i42.tinypic.com/34ns01u.png'/>. Atau bisa juga hanya menggunakan gambarnya saja.

Dengan tips ini, blog bisa di ubah menjadi lebih unik, berbeda dengan yang lain.

Keren kan....!! Selamat mencoba... ^^

Dilema Video Codec (Tips Bagi yang Bingung Memilih Video Codec)

2010-01-27T02:30:00.003+07:00

Dilema.... Oh dilema...!! Itu yang terjadi beberapa hari yang lalu tepat saat muncul pesan balon "Low Disk Space" dari system tray PC saya -_- . Ternyata hal tersebut disebabkan karena saya terlalu banyak memelihara beberapa (atau mungkin banyak ^^) video klip musik dengan ukuran file yang lumayan besar. Sehingga dengan sangat terpaksa saya memutuskan untuk meng-convert alias mem-format alias mengompres video-video tersebut agar ukurannya lebih kecil. Ternyata, hal tersebut tidak semudah yang saya bayangkan. Mengubah video HD (High Definition) atau kualitas tinggi menjadi rendah memiliki kendala tersendiri. Entah itu ukurannya kurang kecil, kualitas gambar menjadi jelek, proses convert gagal, dsb.

Solusi Codec Untuk Video-video yang Dipelihara dalam Hard Disk

Akhirnya, setelah beberapa jam mengutak-atik, dan gonta-ganti software pengonvert video, saya berhasil menemukan solusi terbaik, yaitu mengonvert video menjadi format RMVB. Codec yang dikeluarkan Real Network ini berhasil mengubah ukuran video menjadi lebih kecil dari 50% ukuran aslinya dengan kualitas audio visual yang tidak kalah dari video HD.

Tunggu sebentar..!! Apa itu codec?? Ehem... Sebuah video codec adalah sebuah software atau perangkat lunak yang dapat mengompres video dan dekompresi (menjalankan hasil kompresan) untuk video digital. Biasanya codec di-install dalam komputer agar video yang sudah diformat dengan codec tersebut dapat dimainkan. Begitu banyak codec yang dapat di-install seperti DivX, XVid, H.264, dll. Kalau tidak mau repot, kita juga dapat langsung meng-install satu software yang isinya kumpulan codec yang dapat ter-install sekaligus (Seperti K-Lite Codec Pack, yang sudah terkenal di mana-mana ^^)

Cara Convert dan Memainkan video Dengan Codec RMVB

Format RMVB sangat berbeda dengan format lainnya. Codec ini memerlukan software RealPlayer untuk memainkannya. Alternatif lainnya adalah menggunakan Real Alternatif (silahkan klik link-nya untuk men-download ^^), jangan lupa juga untuk meng-install Real Media Splitter (untuk membaca codec [TIDAK PERLU SPLITTER JIKA SUDAH MENG-INSTALL K-LITE CODEC PACK..!!!]). Dengan menginstall kedua software tersebut, file dengan berekstensi .rmvb akan bisa dimainkan di semua player (Kecuali kalau player tersebut memakai codec bawaan sendiri dan tidak terintegrasi dengan codec Microsoft Windows). Catatan: rmvb tidak dapat dimainkan di sistem operasi MAC (entah kenapa...!!?? -_-).

Bagaimana cara mengubah format videonya?? Gunakan software Imtoo MPEG Encoder. Silahkan download software ini agar dapat mengonvert puluhan format jenis video audio (Pastinya terdapat pilihan RMVB ^^). Proses mengonvertnya sendiri terhitung sangat cepat, prosesnya hanya memakan waktu selama 50%-80% dari durasi asli videonya. Catatan: Saya mohon maaf pada pihak Imtoo, karena software yang ini merupakan hasil bajakan -_- ini hanya sekadar berbagi kebahagiaan, tidak ada maksud mencari keuntungan atau merugikan pihak lain.

Pada setting-an aplikasi Imtoo di sebelah kanan, gunakan pilihan kualitas video pada normal atau higher (hasilnya sudah cukup memuaskan). Jangan lupa untuk mengecilkan ukuran video. Untuk versi layar lebar gunakan resolusi 480x272, dan ukuran kotak, gunakan ukuran 640x480 (hasilnya juga cukup memuaskan ^^). Apabila hasil yang didapat masih kurang memuaskan, setting-an tersebut juga dapat diubah sesuai kehendak. Polanya seperti ini, semakin hitam/gelap warna dan cahaya video klip/film, maka ukuran video akan semakin kecil, tentunya tetap dengan kualitas gambar bagus. Begitu juga sebaliknya, jika warna/cahaya video semakin cerah, maka semakin besar ukurannya. Jadi jangan heran dengan ukuran yang berbeda pada tiap video yang sama durasinya.

Mantaff kan...!!!?? ^^

Untuk download Imtoo MPEG Encoder Ultimate 5, silahkan klik di sini.

Untuk download Real Alternatif 1.90, silahkan klik di sini.

Untuk download Real Media Splitter (tidak perlu jika sudah meng-install K-Lite Codec Pack), silahkan klik di sini.

Membuat Alternatif Widget Polling Sederhana dalam Waktu Singkat pada Blog

2010-01-21T23:02:00.022+07:00

Akhirnya kembali lagi setelah sekian lama menelantarkan blog ini...!! -_-' .. Sebelumnya saya menyampaikan permohonan maaf terlebih dahulu karena tidak sempat memberi kabar beberapa minggu ini..

Dari pada berlama-lama, sebaiknya blogging langsung kita lanjutkan sekarang.. ^^ .. Polling (angket) memang sudah tersedia pada fasilitas tambahan di setiap blog. Tapi bagi kalian yang membutuhkan kenikmatan dalam hal kecepatan akses, mungkin ini bisa menjadi salah satu solusi.

Polling memang sangat bermanfaat, apalagi bila kita letakkan pada blog kita sendiri. Pertanyaan dapat kita susun agar kita dapat menemukan jawaban konkret berdasarkan hasil survei. Membuat pertanyaan terutama seputar pendapat pengunjung mengenai blog kita, dapat menjadi tolak ukur dalam melakukan tindak lanjut berikutnya.

Polling memang sudah tersedia dari blogger sehingga dengan mudah dapat dibuat dalam blog. Tapi pada posting-an ini, saya menyarankan untuk menggunakan fasilitas polling gratis yang disediakan oleh Free Website Poll. Kenapa...? pembuatan widget polling ini sangat sederhana dan dapat diletakkan di mana saja. Untuk mengakses polling ini juga menggunakan proses loading yang sangat cepat.

Untuk membuat widget polling ini, cukup masuki situs utamanya, tanpa perlu daftar apapun, langsung saja membuat pertanyaan dan jawaban pada formulir yang disediakan dan kita akan langsung diberikan kode html form yang dapat kita copy & paste ke dalam widget atau ke dalam postingan seperti yang di bawah ini.

Karena bentuknya berupa kode script HTML, kalian dapat memodifikasi sendiri widget ini sesuka hati, baik itu jenis huruf, warna, panjang lebar, gambar, dll. Widget ini dapat diletakkan tidak hanya pada sidebar, tapi juga dalam posting-an blog.

Untuk langsung mencoba silahkan langsung menuju TKP... ^^ ..v..

Download Template Neosapien Empat Kolom untuk Blogger

2010-01-14T13:40:00.001+07:00

Belakangan ini Admin sibuk banget. Sibuk dengan UAS dan berbagai pembuatan laporan yang menumpuk. Oleh karena itu, postingan bulan ini masih sedikit. Tapi bukan berarti bloging dihentikan sementara lho..! ^^

Kali ini saya berbagi template untuk platform Blogger yang unik. Uniknya karena template ini dibuat dengan empat kolom. Kenyataannya template blogger memang didominasi oleh template berbentuk dua atau tiga kolom, jarang kita dapat temui yang memiliki empat kolom.

Alasan kenapa sobat blogger memilih template ini adalah karena template dengan empat kolom tentunya membuat kita mampu untuk memasukkan widget lebih banyak dari biasanya.

Template ini adalah Template Neosapien, dari Templates Block. Terdiri dari satu kolom menu di sebelah kiri posting-an, dan dua kolom menu di sebelah kanan. Untuk kolom paling kanan, cocok untuk kalian gunakan sebagai iklan. Untuk pengeditan gambar juga cukup mudah, cukup mengganti dari kode CSS-nya.

Menarik kan..! kalau mau lihat live demo-nya silahkan klik di sini. Untuk langsung men-download, silahkan sedot di sini... ^^

Mempercepat Loading Blog dengan CSS Drive Script Compressor

2010-01-10T05:05:00.003+07:00

Kadang para sobat blogger tidak sadar kalau tidak semua pengunjung blog itu memiliki koneksi 'Dewa'.. Banyak juga pengguna internet hanya mengandalkan koneksi terbatas pada kecepatan 2G atau sekelas dengan internet-an GPRS via ponsel dengan kecepatan rata-rata sekitar 64-128kbps..

Di situ tantangan kita sebagai para blogger untuk mencari celah bagaimana agar para pengguna internet yang koneksi-nya masih belum 'Dewa' bisa tetap enjoy saat mengunjungi blog kita. Kalau sobat blogger lain perhatikan, blog saya juga mengalami perubahan drastis dalam hal loading halaman utamanya. Jika dibandingkan yang sekarang, dulu Catatan Daring ini membutuhkan waktu 2 kali lebih lama untuk masuk dan memunculkan semua elemen halaman.

Blog menjadi lebih 'berat' untuk dibuka, tentu saja karena terlalu banyak elemen di dalamnya. Oleh karena itu, jangan lupa untuk membuang elemen/widget blog yang kurang perlu, dan periksa lagi, apakah ada script-script yang tercantum, tapi sama sekali tidak terpakai dalam blog.

Kompresi Kode CSS

Salah satu alternatif lain yang dapat membuat proses memunculkan halaman blog menjadi lebih cepat, adalah dengan mengompres CSS script yang ada pada blog. CSS Script adalah script yang mengatur bagaimana tampilan yang ada pada tiap-tiap elemen/widget pada blog, sehingga widget dapat diatur bagaimana warna, ukuran, border, gambar background, dsb.

Kenapa bisa berpengaruh??? Ternyata bagian kosong dalam halaman blog dapat membuat ukuran blog menjadi lebih besar, dengan kata lain proses loading menjadi lebih lambat. Contohnya pada script berikut:

.widget-content-kotak {
     border-top:0px solid #323c47;
     border-bottom:1px solid #323c47;
     border-left:1px solid #323c47;
     border-right:1px solid #323c47;}

Yang dapat dikurangi ukurannya dengan meminimalisasikan script di atas seperti berikut:

.widget-content-kotak{border-top:0px solid #323c47; border-bottom:1px solid #323c47; border-left:1px solid #323c47; border-right:1px solid #323c47;}

Hal ini disebut juga dengan mengompres script. Kalau tidak percaya, coba saja copy dan paste kedua script di atas pada 2 file .txt yang berbeda menggunakan notepad, kemudian save. Hasil yang di dapat sudah pasti bahwa script ke-2 memiliki ukuran file yang lebih kecil.

Biasanya jumlah CSS script pada blog banyak jumlahnya, sehingga apabila semua script itu di kompres dapat mempercepat loading blog hampir 100% lebih cepat.

Nah...! Cara agar kita dapat mengompres kode CSS dengan instan adalah salah satunya dengan menggunakan layanan gratis yang disediakan oleh CSS Drive.

Cukup masuk pada situsnya, dan copy semua kode CSS dalam blog kita, kemudian di-paste pada kotak yang sudah disediakan, dan klik Compress it. Pada opsi pengaturannya juga menyediakan pilihan antara kompres dengan tingkat Light, Normal, dan Super Compact.

Saya sarankan untuk menggunakan light atau normal, karena kalau menggunakan pilihan ke-3, kode akan dibuat terlalu rapat, bisa-bisa sobat blogger kebingungan kalau mau meng-edit kode CSS-nya.. ^^

KODE APA YANG HARUS DI KOMPRES??? Hehe.. jangan khawatir, kalau sobat bingung yang mana kode CSS, copy saja semua kode tepat sesudah kode <b:skin><![CDATA[ sampai dengan kode sebelum ]]></b:skin>. Masuk pada 'Edit HTML' pada 'Tata Letak' Blogger dan gunakan 'Ctrl+F' untuk mencari kode tersebut, kemudian tinggal di-cut, kemudian ganti dengan kode yang sudah di kompres.

Jangan lupa untuk 'Pratinjau' terlebih dahulu, sebab kadang mengompres dapat membuat script rusak, meskipun itu biasanya terjadi pada Javascript, tidak pada CSS..

Kalau semua sudah dilakukan, dijamin proses loading blog akan terasa meningkat secara drastis..

Untuk langsung mencoba silahkan ke TKP ----> Klik Di Sini <---- Selamat mencoba... ^^

Alternatif 'Smooth Navigational Menu v1.31' (Bentuk Vertikal)

2010-01-07T02:36:00.000+07:00

Postingan ini sama dengan postingan sebelumnya, bedanya kali ini merupakan tips untuk mengubah bentuk-nya menjadi bentuk vertikal. Caranya dengan mengganti beberapa kode javascript dan kode CSS-nya dengan script berikut.

Ganti Javascript yang di atas <body> dengan kode berikut:

Ganti kode CSS dengan kode CSS berikut:

Kalau sudah Pratinjau dan lihat hasilnya... ^^

Menambahkan MP3 Player Pada Blog Dalam Waktu 60 Detik

2010-01-03T14:53:00.001+07:00

Kalian merasa tidak? Judul posting-an kali ini seperti judul buku programming! hehe..! Kenyataannya memang widget kali ini cukup mudah untuk dipasang. Widget ini saya pakai untuk melengkapi tugas blog BoxBerita dari dosen saya yang mengharuskan untuk mencantumkan rekaman suara dalam postingan blog.

Awalnya saya tidak tahu bagaimana cara membuatnya, tapi alhamdulillah ada sobat BloggerTuts yang berbaik hati untuk memberikan tips ini.

Widget ini cukup mudah dipasang dalam blog, bisa diletakkan dimana saja, dalam postingan, atau menjadi widget di sidebar atau bawah postingan. Widget ini merupakan mp3 player ringan, yang hanya mampu menampilkan satu file mp3 saja (cocok untuk menampilkan hasil rekaman suara).

Berikut instruksi pembuatannya:

Masuk pada 'Edit HTML' pada 'Tata Letak Blogger', jangan lupa centang Expand Template Widget. Setelah itu copy dan paste kode berikut tepat di atas kode </head> (gunakan Ctrl+F untuk mencari kode).

<script type="text/javascript" src="http://flash.for.islam.googlepages.com/inlineflashplayercomp.js"></script>
<script style="text/javascript">
var paramplayerflash=2;
</script>

Perhatikan kode yang berwarna merah! Ada 1-8 jenis bentuk player yang dapat kamu gunakan, semua bentuknya berbeda dan dapat kamu lihat pada contoh di bawah.

Setelah itu simpan/save, dan selesai. Bagaimana cara memasang mp3 player-nya..?

Cara memasang widgetnya cukup sederhana, cukup membuat kode berikut ke dalam postingan atau widget 'Kode Javascript/HTML' dan bisa diletakkan dimana saja.

<a href="http://dl.getdropbox.com/u/1693834/Files/samplefile.mp3">Sample File</a>

Setiap kamu membuat tautan (link) yang tujuannya ke arah file berekstensi '.mp3' maka javascript akan otomatis mengubahnya menjadi sebuah mp3 player. Cukup ubah alamat URL yang berwarna merah pada kode di atas. Nama link (Sample File) juga bisa diubah sesuka hati.

Script widget ini cukup cepat dalam proses loading, dan bentuk player-nya dapat diubah sampai delapan jenis, berikut contoh-contoh yang dapat kamu pakai:

Sampel dari BloggerTuts : Player 1

Sampel dari BloggerTuts : Player 2

Sampel dari BloggerTuts : Player 3

Sampel dari BloggerTuts : Player 4

Sampel dari BloggerTuts : Player 5

Sampel dari BloggerTuts : Player 6

Sampel dari BloggerTuts : Player 7

Sampel dari BloggerTuts: Player 8

Keren kan...!?? Kalau begitu silahkan mencoba... ^^

Mencari "Twitter Profil Badges" yang Unik? Cobain TwitStamp..!!

2009-12-31T00:25:00.003+07:00

Dulu, salah satu kendala yang membuat blog ini lemot saat diakses adalah karena ada javascript untuk membuat "Twitter Profil Badges". Tujuan utamanya sih..! Untuk mempromosikan akun twitter dan blog, atau untuk memberitahu info status yang saya tulis di twitter.

Sebelumnya saya menggunakan widget yang secara resmi disediakan oleh twitter.com. Tapi, yang saya peroleh adalah widget javascript yang benar-benar BWKiller (Bandwidth Killer ^^). Proses loading untuk widget ini sendirian saja bisa memakan waktu sampai lebih dari 20 detik -_-.

Sekarang..! Sudah ada alternatif lain untuk masalah Twitter Bagdes ini (kayak pengobatan aja ^^), yaitu dengan menggunakan fasilitas gratis yang disediakan TwitStamp. TwitStamp adalah situs penyedia widgets Twitter Badges untuk akun twitter kita, dengan pilihan berbagai macam jenis dan bentuk. TwitStamp merupakan widget yang berisi status terakhir yang kita miliki sehingga dapat tampil pada web/blog.

Yang asyiknya lagi, TwitStamp sama sekali tidak menggunakan Javascript, sehingga proses loading widget jauh lebih cepat. Widget ini hanya berbentuk file gambar yang isinya sudah diintegrasikan dengan data status twitter yang kita daftarkan.

Kalian mencari badges yang orisinil?? Tidak masalah, karena TwitStamp menyediakan fitur untuk membuat badges sendiri menggunakan file gambar berekstensi '.png', dan kita tinggal mengatur penempatan avatar, nama, dan postingan status terakhir.

Kalau kalian pusing, kalian bisa menggunakan fitur Twitter Card (seperti yang ada di bagian bawah post ini) yang bentuknya bukan hanya data status terakhir kita, tapi juga data berupa lokasi, biografi, serta jumlah follower dan friends.

Jadi.. Tunggu apa lagi? Bagi para blogger yang ingin memperjelas info twitternya silahkan kunjungi TwitStamp. Cukup masukkan username twitter, dan pilih bentuk widget yang diinginkan. Untuk membuat badges sendiri, kalian harus mendaftar terlebih dahulu, tapi cukup mudah ko'..! Tidak butuh waktu yang lama.

Membuat Menu Navigasi yang Keren..!! (Smooth Navigational Menu v1.31)

2009-12-25T14:23:00.007+07:00

Hari ini adalah hari Natal... Oleh karena itu saya pribadi mengucapkan selamat bagi kemeriahan perayaan dan liburan keluarganya... Tapi, saat saya menulis posting-an ini, hujan deras sedang melanda Kota Bandung, makanya ga bisa kemana-mana nih...!!! -_- Dari pada tidak ada kerjaan jadi lebih baik menambah postingan blog, tul ga.....!! (Bukannya ane kaga ngormatin hari liburan ini ya... maklum... -_-')

Tips ini diciptakan oleh Dynamic Drive, sebuah situs yang berbagi script web secara gratis, dan kali ini, salah satu script-nya saya bagikan untuk sobat blogger semua.... ^^

Coba perhatikan menu navigasi yang ada di atas blog ini..! Keren kan..!! navigasi menu dengan fade animation pada slide menu-nya. Sekarang, saya akan menjelaskan bagaimana cara membuat menu tersebut untuk blog kalian sendiri, tentunya dengan modifikasi agar sesuai dengan blog lain.. ^^

Seperti biasa, untuk mengedit javascript, masuk pada Dasbor Blogger, klik Tata Letak, lalu pilih tab Edit HTML, kemudian centang Expand Template Widget. Setelah itu kalian siap menjadi Blogger Web Designer... hehehe...!!! ^^ Baiklah tanpa membuang waktu, berikut instruksinya:

Cari kode <body> (gunakan Ctrl+F untuk mencari), lalu letakkan script berikut tepat di atasnya.

Setelah itu masukkan script CSS ini tepat di atas kode ]]></b:skin>.

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*warna latar belakang menu*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Warna latar belakang items*/
color: white; /*Warna teks items*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ 
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*warna latar belakang onmouseover (hover state)*/
color: white; /*Warna teks onmouseover*/
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS untuk bayangan  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow transparansi. tidak bekerja di IE*/
opacity: 0.8;
}

Jangan lupa untuk memperhatikan catatan tips untuk mengubah warna pada script CSS. Setelah itu simpan editan, dan masuk pada tab 'Elemen Laman'. Tambah gadget baru, pilih 'HTML/Javascript Kode', lalu masukkan kode berikut ini:

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://em-mizan.blogspot.com">Halaman Utama</a></li>
<li><a href="#">Menu</a>
  <ul>
  <li><a href="http://em-mizan.blogspot.com/2009/10/blog-post.html">Daftar Isi</a></li>
  <li><a href="http://em-mizan.blogspot.com/2009/10/kontak-blogger.html">Kontak Saya</a></li>
  <li><a href="http://em-mizan.blogspot.com/feeds/posts/default">Berlangganan Feed</a></li>
  </ul>
</li>
<li><a href="#">Ikuti Saya</a>
  <ul>
  <li><a href="http://twitter.com/mimuha" target="_blank">Twitter</a></li>
  <li><a href="http://www.facebook.com/mimuha" target="_blank">Facebook</a></li>
<li><a href="http://www.mybloglog.com/buzz/members/mimuha/" target="_blank">MyBlogLog</a></li>
  </ul>
</li>
<li><a href="http://emmizan.mofuse.mobi/"><i>Mobile Version</i></a></li>
<li><a href="#"><i>Blogroll</i></a>
  <ul>
  <li><a href="http://abdibuku.blogspot.com/" target="_blank">ABDI MEDIA BUKU</a></li>
  <li><a href="http://www.blogngeblog.com/" target="_blank">Belajar Blog</a></li>
  <li><a href="http://yezdibooo.blogspot.com/" target="_blank">BOOOOOOOOOOOO's Blog</a></li>
  <li><a href="http://caramelcoklat.blogspot.com/" target="_blank">Caramelcoklat</a></li>
  <li><a href="http://technoscomputers.blogspot.com/" target="_blank">Computer tips</a></li>
  <li><a href="http://hotrevelation.blogspot.com/" target="_blank">Hot Revelation</a></li>
  <li><a href="http://hothottest1.blogspot.com/" target="_blank">Hottest Wonder World</a></li>
  <li><a href="http://infoupdates-sri.blogspot.com/" target="_blank">Info Updates</a></li>
  <li><a href="http://duniakecil-ku.blogspot.com/" target="_blank">Mauren's Blog</a></li>
  <li><a href="http://myworld-encyclopedia.blogspot.com/" target="_blank">My World - This moment</a></li>
  <li><a href="http://sharingyuk.blogspot.com/" target="_blank">Sharing Yuk...!</a></li>
  <li><a href="http://tasknews.blogspot.com/" target="_blank">Siva - Only For Actress</a></li>
  <li><a href="http://duidon.blogspot.com/" target="_blank">SuaveOnline</a></li>
  <li><a href="http://www.folklore4u.blogspot.com/" target="_blank">The Folklore</a></li>
  <li><a href="http://tipgoceng.blogspot.com/" target="_blank">Tips n Tricks</a></li>
  <li><a href="http://vkramz.blogspot.com/" target="_blank">Universal News</a></li>
 </ul>
</li>
</ul>

Kode di atas dibuat sama persis seperti menu yang ada pada navigasi blog ini. Ubah saja alamat tiap menunya (contoh: '<li><a href="http://em-mizan.blogspot.com">Halaman Utama</a></li>') Ubah saja alamat URL dan judul link-nya. Kalau ada menu yang ingin dihapus, hapus dari kode <li> sampai kode </li>. Untuk menghapus sub menu hapus dari <ul> sampai kode </ul>.

Setelah itu simpan dan letakkan gadget tersebut sesuka hati kalian... ^^, pilih pratinjau, dan lihat hasilnya. Jangan lupa disimpan... ^^ ...Selamat mencoba..

Ubah Blog-mu Menjadi 'Mobile Web Version' (Web Versi HP)

2009-12-20T13:17:00.002+07:00

Coba kamu akses blog-mu dari handphone...! Yang akan kamu lihat adalah bentuk web yang ribet..! Tampilannya persis seperti versi di komputer tapi dengan navigasi yang melelahkan karena melalui ponsel, tulisannya yang kecil, menu link yang tidak jelas entah dimana.

Dapat mengakses blog melalui ponsel memang bukan menjadi prioritas utama, karena blog umumnya berisi artikel yang cukup padat sehingga lebih nikmat kalau dibaca di layar monitor. Tapi dengan membuat versi 'Mobile Web' dari blog dapat membuat blog kamu jd lebih bergengsi dan tentu saja, blog jadi lebih fleksibel karena bisa diakses lebih banyak orang, kapan saja, dimana saja.

Solusi yang dapat kamu ambil agar blog dapat diakses lebih mudah dari ponsel adalah dengan membuat domain baru di situs Mofuse Blog. Situs ini adalah penyedia layanan pengubah web menjadi versi mobile web, yaitu dengan cara membuat sebuah web ringan yang berisi logo dan daftar feed RSS dari situs blog kita.

Setelah mendaftar menjadi user, kita dapat membuat sebuah web baru yang dapat langsung terisi postingan blog cukup dengan menuliskan alamat blog kita. Hasilnya, alamat blog ponsel kita akan menjadi 'namablog.mofuse.mobi' . Nama alamat bisa dibuat baru atau sama dengan nama blog kita.

Mofuse juga menyediakan versi Premium. Dengan begitu, kita dapat membuat alamat web ponsel menjadi lebih independen seperti 'm.namablog.com', dan tampilan blog dapat lebih diatur sesuka hati kita. Keren kan..!? Kalau begitu silahkan langsung mencoba.. ^^

Untuk daftar Mofuse Blog secara gratis silahkan klik di sini.

Untuk daftar Mofuse Premium berbayar silahkan klik di sini.

Untuk melihat preview web ponsel silahkan kunjungi Mashable di ponsel kalian.

Bagaimana penilaian anda terhadap tampilan "halaman utama" pada blog ini?
	Sangat Bagus
	Bagus
	Cukup Bagus
	Jelek
	Sangat Jelek
Lihat hasil