Blogger Widgets - Muhammad Mizan ›› Catatan Dalam Jaringan

Tampilkan postingan dengan label Blogger Widgets. Tampilkan semua postingan

Membuat "Sticky/Floating" Menu Navigasi Horizontal

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. ^^

klik yg bawah bos...!!!

Jumlah komentar : (22)

Baca Selengkapnya

Membuat Tab Menu dengan Slide Effect (versi Abu Farhan)

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 =)

klik yg bawah bos...!!!

Jumlah komentar : (38)

Baca Selengkapnya

Good Bye Translator Widget - Welcome "Sticky" Navigational Menu

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.

klik yg bawah bos...!!!

Jumlah komentar : (26)

Baca Selengkapnya

Tips Sederhana Membuat News Feed Ticker Pada Blogger

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... ^^

klik yg bawah bos...!!!

Jumlah komentar : (32)

Baca Selengkapnya

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

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... ^^

klik yg bawah bos...!!!

Jumlah komentar : (6)

Baca Selengkapnya

Menambahkan MP3 Player Pada Blog Dalam Waktu 60 Detik

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... ^^

klik yg bawah bos...!!!

Jumlah komentar : (8)

Baca Selengkapnya

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

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.

klik yg bawah bos...!!!

Jumlah komentar : (3)

Baca Selengkapnya

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

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..

klik yg bawah bos...!!!

Jumlah komentar : (2)

Baca Selengkapnya

Mengubah Halaman Web/Blog Menjadi Dokumen .PDF

Blog yang berisi artikel-artikel panjang, dapat membuat pembaca pusing membacanya. Mungkin pembaca lebih suka mendokumentasikan tulisan kalian, dari pada membaca langsung di layar komputer, setelah itu di print atau di copas ke Word.

Nah...!! Kalau kalian memang peduli pada para pembaca, ada baiknya kalian memasang widget ini di bawah posting-an. (seperti yang ada di bawah postingan ini..! ^^).

Widget ini berguna untuk meng-convert halaman blog kalian menjadi dokumen PDF (yang dibuka dengan Adobe Reader). Kegunaannya dapat membuat halaman web/blog lebih gampang didokumentasikan oleh pembaca.

Caranya cukup dengan menggunakan fasilitas yang diberikan oleh PDF Online Script, daftar (signup), kemudian setelah mengisi username, password, dll. Sign in dan user akan akan langsung diminta membuat widget ini.

Pilih ukuran Margin, dan orientasi blog (potrait/lenscape), langsung klik 'generate the javascript', setelah itu copy-paste kode tersebut dan pasang di widget 'HTML/Javascript' pada 'elemen halaman' di 'tata letak bloger'.

Gampang kan? silahkan mencoba... ^^

klik yg bawah bos...!!!

Jumlah komentar : (1)

Baca Selengkapnya

Membuat Slideshow Featured Post dengan Javascript

Tertarik membuat 'Featured Post' seperti yang ada di sebelah kanan blog ini? Ternyata cara membuatnya cukup sederhana (terima kasih pada BloggerBuster ^^).

Widget ini menggunakan script dari JonDesign's SmoothGallery. Berikut langkah-langkah yang perlu dilakukan untuk memasang widget ini.

Pertama buat gambar dengan ukuran yang diinginkan. Jumlahya terserah, yang penting resolusinya harus sama, dalam post ini saya menggunakan contoh tiga gambar dengan resolusi 300x200 pixel. setelah itu upload ketiga gambar tersebut di situs image hosting seperti Photobucket atau Flickr.

Masuk pada 'Edit Halaman' di tata letak Blogger, dan tambahkan gadget, pilih HTML/Javascript kode berikan judul 'Featured Post', lalu simpan (isikan apa saja didalamnya, terserah karena tidak berpengaruh ^^), letakkan dimanapun sesuka hati.

Setelah itu masuk ke 'Edit HTML' di tata letak Blogger, centang "Expand Template Widget" cari kode ]]></b:skin> (gunakan Ctrl+F pada browser [mozzila, IE] untuk mencari kode ini). Setelah itu Copy dan Paste-kan kode berikut tepat diatasnya.

#myGallery { width: 300px !important; height: 200px !important; overflow: hidden; }

Langkah selanjutnya copy dan paste kode berikut ini tepat di atas kode </head>:

<script src='http://mimuha.byethost2.com/javascript/mootools.v1.11.js' type='text/javascript'/>
<script src='http://mimuha.byethost2.com/javascript/jd.gallery.js' type='text/javascript'/>
<link href='http://mimuha.byethost2.com/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

Sudah.....? Sekarang masih pada 'Edit HTML', cari kode title='Featured Post' pada kode-tersebut (gunakan Ctrl+F lagi ^^). Dibawah kode tersebut, terdapat kode berikut:

<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

Sekarang ganti kode yang berwarna merah dengan kode berikut:

<div>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting1.html'/> /* tautan/link ke posting-an 1 */
<img class='full' src='http://photobucket.com/gambar1.jpg' /> /* Alamat link gambar 1 yang sudah di-upload */
<h3>Judul Artikel 1</h3>
<p>Deskripsi Artikel 1</p>
</div>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting2.html'/> /* tautan/link ke posting-an 2 */
<img class='full' src='http://photobucket.com/gambar2.jpg' /> /* Alamat link gambar 2 yang sudah di-upload */
<h3>Judul Artikel 2</h3>
<p>Deskripsi Artikel 2</p>
</div>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting3.html'/> /* tautan/link ke posting-an 3 */
<img class='full' src='http://photobucket.com/gambar3.jpg' /> /* Alamat link gambar 3 yang sudah di-upload */
<h3>Judul Artikel 3</h3>
<p>Deskripsi Artikel 3</p>
</div>
</div>
</div>

Perhatikan keterangan yang berwarna hijau untuk pengaturannya. Setelah itu lihat pratinjau terlebih dahulu. kalau berhasil segera simpan blognya.

Kalau ingin mengubah ukuran yang lebih besar, ubah saja ukuran gambar yang di-upload, tapi jangan lupa untuk mengubah ukuran lebar dan tinggi widget (yang berwarna biru) pada kode #myGallery di atas kode </b:skin> tadi.

Selamat mencoba... ^^

klik yg bawah bos...!!!

Jumlah komentar : (1)

Baca Selengkapnya

Membuat 'Artikel Terkait' dengan Thumbnails (versi Linkwithin)

Postingan ini sama dengan postingan sebelumnya. Cuma bedanya, kali ini khusus ditujukan bagi kalian yang benar-benar masih awam atau mungkin malas dalam mengedit bahasa HTML.

Membuat artikel terkait dibawah postingan dapat dilakukan dengan cara yang mudah, yaitu dengan menginstall widget melalui situs Link Within.

Caranya cukup sederhana, tidak perlu daftar atau log in terlebih dahulu, bahkan tanpa ada bentuk Ads atau iklan terselubung lainnya alias gratis!!. Berikut langkah sederhana menginstall widgetnya:

Akses situs Link Within, atau bisa klik disini.
Masukkan data-data pada kotak sebelah kanan, berupa alamat email, alamat blog, platform yang digunakan (Blogger, Wordpress, Typepad, dll).
Pilih jumlah postingan yang akan muncul pada artikel terkait (3,4, atau 5 postingan).
Beri centang pada "My blog has light text on a dark background", apabila ingin tampilan tulisan berwarna putih.
Pilih get widget, dan
pilih install widget pada halaman berikutnya.

Apabila diinstall pada Blogger, maka browser langsung akan men-direct pada halaman penginstallan widget blogger.

Setelah memilih install widget pada blogger, anda bebas meletakkan widget tersebut dimanapun pada halaman blog, entah itu di sidebar, atau yang lazimnya di bawah postingan.

Selamat mencoba...

klik yg bawah bos...!!!

Jumlah komentar : (0)

Baca Selengkapnya

Membuat 'Artikel Terkait' dengan Thumbnails pada Blog

Membuat artikel terkait dengan gambar kecil (thumbnail) pada posting blog dapat membuat keunikan tersendiri pada blog. selain preview yang lebih enak dilihat. Gambar yang akan muncul adalah gambar yang masuk ke dalam postingan saat kita membuat entri pada blog.

Cara membuatnya cukup rumit juga, tapi bisa dicoba dan pasti berhasil, kalau tidak, berarti template blog terlalu diutak-atik sehingga perlu mengubah kode HTML di sana-sini. Bingung juga kalau begitu (

sori... can't help)

Pertama login ke dalam dasbor Blog dan masuk pada tata letak (Edit Layout), jangan lupa untuk mencentang "Expand Widget Templates".

Cari kode berikut (gunakan 'Ctrl+F' pada browser untuk mencari kode) :

</head>

Setelah itu letakkan kode berikut tepat diatasnya

Setelah itu temukan kode html ini:

<div class='post-footer-line post-footer-line-1'>

Letakkan kode berikut dibawah kode tersebut:

Edit jumlah postingan pada kode:

var maxresults=5;

Edit judul pada kode:

var relatedpoststitle="Artikel Terkait:";

Setelah itu simpat editan html, lihat blog dan adrakadabra....!!
Jadilah artikel terkait dengan thumbnails pada bagian bawah postingan.

klik yg bawah bos...!!!

Jumlah komentar : (3)

Baca Selengkapnya

Membuat Slideshow News/Feed Ticker

Apa itu Ticker? Biasanya news ticker digunakan untuk menampilkan informasi-informasi secara slide, contohnya seperti yanda di bawah postingan ini. News feed ticker sangat bermanfaat untuk memberikan informasi terbaru, atau juga bisa mempromosikan artikel blog yang kita terbitkan. Salah satu cara yang mudah untuk membuat flash ticker adalah dengan menggunakan fasilitas gratis yang diberikan oleh BlastCasta.

Caranya sangat gampang, cukup masuk ke situs BlastCasta, kemudian langsung isi entri alamat rss feed situs web yang ingin dituju (contoh: http://em-mizan.blogspot.com/feeds/posts/default/ ), lalu pilih "what do you want to do with this feed?", dan pilih "Create News Ticker".

Setelah mengklik "GO", maka kita akan diberi opsi untuk mengubah tampilan news ticker yang kita pilih. Pengaturannya sendiri sangat gampang karena hanya menyangkut warna dan ukuran flash. Untuk pilihan feed sendiri kita juga dapat membuatnya dari BBCNews dan akun twitter kita.

Setelah selesai mengatur tampilan ticker kita langsung dapat meng-copy javascript yang diberikan dan di-paste pada widget HTML/Javascript pada Blog atau langsung pada kode HTML web kita.

Selain News/feed Ticker, BlastCasta juga memberikan fasilitas lainnya seperti Feed Widget yang unik seperti yang ada di bawah Feed Ticker pada halaman Post ini.

klik yg bawah bos...!!!

Jumlah komentar : (1)

Baca Selengkapnya

Membuat Recent Post Lengkap dengan Gambar Thumbnails

Membuat Recent Post sangat penting agar pengunjung web/blog dapat dengan segera mengetahui update terbaru dari informasi yang kita terbitkan. Recent Post (Postingan Terbaru) kali ini berbeda dengan artikel sebelumnya, karena kali ini Recent Post akan dilengkapi dengan gambar thumbnails atau gambar preview berukuran kecil yang sudah di upload pada konten artikel.

Membuat Recent post ini sangat mudah, hanya perlu menambahkan widget baru dengan script didalamnya yang dapat anda copy-paste ke dalam widget.

Langkah-lahnya sbb:

Masuk pada dasbor blogger, lalu pilih tata letak (layout) blog
Tambah Gadget (Add Gadget) pada salah satu menu tampilan elemen halaman, lalu pilih HTML/Javascript Widget.
Setelah itu Copy script berikut dan paste di dalam Widget HTML/Javascript

Sebelum disimpan (save), ubah http://ALAMAT_BLOG.blogspot.com dengan alamat situs web yang diinginkan. Untuk pengaturan lain, silahkan ikuti keterangan berikut:

boxwidth - Lebar widget
cellspacing - Jarak antara cells (default adalah 1 sudah bagus)
borderColor - Warna Border
thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
fntsize - Ukuran huruf judul postingan
acolor - Warna huruf judul postingan
aBold - Bila ingin teks menjadi Bold isikan dengan true, jika tidak false.
numposts - Jumlah recent post yang akan ditampilkan

Pergunakan Ctrl+F pada browser (Firefox, IE, dll.) untuk memudahkan anda menemukan kode-kode script yang akan diatur.

Sumber: www.bloggertricks.com

klik yg bawah bos...!!!

Jumlah komentar : (3)

Baca Selengkapnya

Menampilkan 'Artikel Terkait' pada Blogger

Selama ini kendala yang sering dialami oleh blog adalah kurangnya keefisienan akses tautan pada artikel dalam sebuah blog. Para bloger biasanya lebih mengandalkan widget 'Label' atau 'Arsip' untuk membuat daftar blognya.

Salah satu alternatif lain untuk menunjukkan artikel pada suatu blog adalah dengan menambahkan 'Artikel Terkait' di bawah tulisan artikel. Tampilan 'Artikel Terkait' sangat sederhana, yaitu hanya berupa daftar judul postingan pada blog yang memiliki Tag/Label yang sama dengan artikel yang sedang dibaca, oleh karena itu, jangan lupa untuk memberikan label yang tepat pada setiap artikel yang dibuat..

Untuk membuatnya sendiri tidak terlalu sulit. Caranya dengan masuk pada menu 'Edit HTML' di layout (tata letak) dan cari code yang bertulistkan <data:post.body/> (jangan lupa untuk mencentang Expand "Widget Template"). Pada beberapa template code <data:post.body/> terdapat lebih dari satu, jadi jangan lupa untuk memilih code tersebut yang diapit oleh code <div class='....'> dan code </div>. Setelah itu, masukkan script berikut:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<br/>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Judul "Artikel Terkait" dapat diubah sesuka hati. Setelah itu save/simpan editan, dan lihat hasilnya pada tiap bagian bawah artikel blog.

klik yg bawah bos...!!!

Jumlah komentar : (0)

Baca Selengkapnya

Membuat Widget Recent Post (Tanpa Perlu Hosting Javascript)

Berikut adalah javascript untuk membuat widget Recent Post, atau Postingan Terbaru pada web atau blog. Script ini langsung tertanam pada halaman HTML, dan bisa langsung di-copy paste ke dalam widget blog, sehingga tidak perlu mengkhawatirkan hostingan javascript yang berpotensi untuk broken-link, entah itu karena di-delete oleh user-nya, atau situs hosting yang error.

<ul>
<script>
function showrecentposts(json) {

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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    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";
    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 (!standardstyling) document.write('<div class="bbrecpost">');
    if (standardstyling) document.write('<li>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ', ' + cdyear);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('</li>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">
var numposts = 8;
var showpostdate = true;
var showpostsummary = false;
var numchars = 0;
var standardstyling = true;
</script>
<script src="http://www.yourweb.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>

Jangan lupa untuk mengganti www.yourweb.com pada text "http://www.yourweb.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts" dengan alamat web atau blog anda.

Untuk mengubah jumlah postingan terbaru yang tampak, cari text 'var numposts = 8', dan ubah angka delapan tersebut sesuai dengan keinginan.

klik yg bawah bos...!!!

Jumlah komentar : (2)

Baca Selengkapnya

Muhammad Mizan ›› Catatan Dalam Jaringan

Membuat "Sticky/Floating" Menu Navigasi Horizontal

Membuat Tab Menu dengan Slide Effect (versi Abu Farhan)

Good Bye Translator Widget - Welcome "Sticky" Navigational Menu

Tips Sederhana Membuat News Feed Ticker Pada Blogger

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

Menambahkan MP3 Player Pada Blog Dalam Waktu 60 Detik

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

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

Mengubah Halaman Web/Blog Menjadi Dokumen .PDF

Membuat Slideshow Featured Post dengan Javascript

Membuat 'Artikel Terkait' dengan Thumbnails (versi Linkwithin)

Membuat 'Artikel Terkait' dengan Thumbnails pada Blog

Membuat Slideshow News/Feed Ticker

Membuat Recent Post Lengkap dengan Gambar Thumbnails

Menampilkan 'Artikel Terkait' pada Blogger

Membuat Widget Recent Post (Tanpa Perlu Hosting Javascript)

KATEGORI

ARSIP

KOMENTATOR

Mengenai Saya

Pos Terpopuler