Cara Membuat Kotak Search Box Beautifull Blogger

Mau Membuat Kotak Search Keren? Kotak Search Cantik dan Simple? Bagaimana cara membuat kotak search box css? Mau tau caranya? Panduan mengenai pemasangan search box ini semoga dapat membantu Anda yang belum memiliki elemen kotak search di template blognya. Berikut ini adalah demo skin dengan CSS pembuatan kotak search cantik dan elegant ini.

Bagaimana bagus tidak? Silahkan Anda cari di blog tetangga sebelah kalau ada yang seperti ini. hahaha^^. Kebanyakan saya membuat artikel tidak pernah copy paste, paling hanya sekedar mengamati, mempelajari, dan memodifikasi itupun kalau ide dalam otak saya sedang tidak bersemangat. Kalau sedang fresh saya akan selalu memberikan kualitas artikel yang terbaik dan beragam bagi pengunjung semua.

Kembali lagi ke topik awal yaitu Cara Membuat Kotak Search Box Beautifull ini. Mengenai pembuatannya di blogger sangatlah mudah, hanya dengan memanfaatkan keragaman dan design CSS serta sedikit tambahan elemen HTML, Kotak Search Box ini dapat dipasang dengan mudah.

Langsung ke tahap pemasangan sekarang juga. As previous search boxes you can also add this search boxes in one step.See preview of search boxes below in search boxes,now lets see how to add them into blogger blog?

Follow and watch step by step making of Search Box :
1. Masuk ke Blogger.
2. Klik Tambah Widget / Add a Gadget.
3. Pilih HTML/Javascript.
4. Copy kode di bawah ini dan letakkan disana.

Search Box Style Green

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchFcIoBy-hJ5ngChwODkXFpDT62UHqus21Cvj9W2zfDtUAgwttem2tTHfKMJV-h9jmuDEdVJeSSioTMCDT8W3-JrWdho78FaG5uFUOV-R_ECC8pcgFScEgazlgi-0yZ8pzBUoaOPOYjYp/s1600/.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus=if (this.value == "Search...") {this.value = ""}        onblur=if (this.value == "") {this.value = "Search...";} />        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"        />    </form></div>

Untuk Cara Pemasangan Search Box Warna Lain, ganti kode berwarna merah kode diatas dengan url gambar di bawah ini :

- Style Red ( Merah )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxI_zCA0uuf6PMX-MiMzfI8MQHueSwyvlDaXe2Qi_MVrPCza4WvxA3CAxWXv_0t1l_oIuYiyYgqDiwFQgnoFB9Q7yhnPincCcQkiw7o-00Yldp5ai8sGr62jzLBGjzz3iQMvlCzOQ1zY5L/s1600/.blogspot.com-red.png

- Style Blue ( Biru )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrEJ1x0oNI8WzTSOk1JJquVdkko_vjKGNlGpItjlIQae7Qa_QIaUNy4eK5pEJ83IwWk6pR98mIvYBAEDR9Dhe4g2ecDaglOmzX02cMV2ihhxhZg4fHonadFI3QXjzVa3iJdgihZdKotJ05/s1600/.blogspot.com-blue.png

-Style Orange

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBbK6T9i0L3U_KuQJMNK0b907ZSoIY1wzweQhZzHZIXWGqaqw-92qLSgKizNwnAcbDO0TnmDhUlwXN-vra9HPT6Q0zAwsNwroXSYNrQ9brsEuYpSXKqSmLapnJ2vqCqeC_abVhjnChcrl/s1600/.blogspot.com-orange.png

Setelah selesai, Klik Save.
Itulah tadi panduan mengenai Cara Membuat Kotak Search Box Cantik di Blogger. Oke, terimakasih sampai jumpa di kesempatan tutorial blogger berikutnya hanya di Media Blogger. Lihat dan Baca Cara Menambahkan Email Subscription Widget di Bawah Posting , Cara Membuat Recent Posts Tumbnail with Scroll Professional , Membuat SEO Smart Auto Link di dalam Artikel Posting

Read More

Cara Memasang Musik MP3 di Blogger

Berbagai macam widget dan gadget dapat dipasang di blog. Mulai dari Musik, MP3, Radio Online, Chat Box, Widget Melayang, Kalender, Animation, Game dan lain sebagainya. Pemasangan beberapa gadget tadi tergantung dengan kebutuhan pemilik blog.

Untuk anda pengguna blog dengan menggunakan blogger/blogspot, semua widget dapat dipasang dengan mudah. Tutorial Blogger kali ini akan membahas bagaimana Cara Memasang Widget Musik MP3 di Blogger. Banyak yang telah mengetahui cara pemasangan musik yang autoplay ini, karena hanya dengan menambahkan script HTML/Javascript sederhana.

Cara Memasang Widget Music / MP3 di Blog :
1. Login ke Blogger.com
2. Pilih blog anda yang ingin dipasang gadget MP3.
3. Klik Layout, lalu pilih Add a Gadget / Tambah Gadget pada elemen blog Anda.
          Disini anda dapat meletakkannya sesuai dengan keinginan. Bisa diletakkan di sidebar sebelah kanan.
4. Pilih HTML / Javascript.
5. Masukkan kode musik MP3 yang dapat anda cari di :
    Widget Musik Autoplay , Gadget Musik MP3 Blogger , Widgetbox Media Player
Untuk yang widgetbox harap lakukan registrasi untuk mendaftar terlebih dahulu.
6. Anda juga dapat menggunakan kode lagu di bawah ini jika anda menyukainya. ( Contoh Script )

# Pitbull - Give Me Everything

<center>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" alt="Get Free Music at www.divine-music.info"></a><br>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmlogo.gif" border="0" alt="Get Free Music at www.divine-music.info"></a>
<br><br><b>
<a target="_blank" title="Get Free Music at www.divine-music.info" href="http://www.divine-music.info">Free Music</a> at divine-music.info</b><br>
<EMBED SRC="http://divine-music.info/musicfiles/01 Give Me Everything (feat. Ne-Yo,.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

Contoh diatas, saya menggunakan divine-music.info .

Cari judul lagu yang ingin anda pasang di blog, lalu copy kode nya dan paste di dalam langkah no.4 tadi.

Bagi yang ingin bertanya langsung dan komentarnya langsung dibalas, mari bergabung di Grup Idbloggers.

Cara Memasang Musik / Lagu AutoPlay di Blog (Cara Kedua) :
1. Untuk mendapatkan kode lagu yang anda inginkan baik itu lagu Indonesia, Barat, Melayu, K-POP dan sebagainya. Silahkan masuk ke 4shared.com.
2. Kemudian Tuliskan dan cari lagu yang ingin anda pasang.
3. Download lagunya, lalu klik Pause. Copy link lagu tersebut dan masukkan pada kode berwarna merah disini.

<object data="http://static.4shared.com/flash/player/5.10/player.swf?file=http://dc280.4shared.com/img/3579932921/5703126b/dlink__2Fdownload_2FKjiZNVMe_3Ftsid_3D20130501-163924-ad3a3999_26dsid_3D3n6018.8e0f260b8292b888fbe862a91bd91ef3/preview.mp3&repeat=no&autostart=true" width="0" height="0" type="application/x-shockwave-flash"></object>

4. Simpan semua kode diatas dan letakkan pada widget anda. Caranya sama seperti menambahkan widget seperti diatas.

Untuk yang menggunakan IDM ( Internet Download Manager ) berikut ini adalah contoh gambar pengambilan url link. Sedangkan yang tidak menggunakannya, anda dapat mendownload lagunya terlebih dahulu, kemudian klik pause agar proses download berhenti. Setelah itu, klik kanan pilih Copy Download Link.

Dengan menambahkan widget mp3 musik ini, pengunjung dapat mendengarkan lagu dengan asyik. Tetapi, tidak semua orang menyukai lagu yang anda pasang. Tentu sangat mudah, untuk memasang musik mp3 di blogger untuk wordpress dapat menambahkan plugins yang ada. Semoga Bermanfaat.

Read More