Kotak Pencarian CSS3 Bergaya Apple.com

Kamu pasti sudah mengenal kotak pencarian yang ada di Apple.com. Itu adalah kotak pencarian keren yang dapat melebar ketika diklik. Banyak orang yang ingin menambahkan kotak pencarian tersebut termasuk saya. Sekarang, akhirnya Bloggermint menyebarkan cara menambahkan kotak pencarian ini. Tersedia 3 macam warna kotak pencarian, yaitu dengan latar belakang gelap, latar belakang terang, dan latar belakang via apple.com yang merupakan campuran dari kedua latar sebelumnya.

Lihat Demo

Fitur

• Menggunakan CSS3.
• Memiliki 3 gaya/model.
• Cepat loading.

Cara Menambahkannya:

Langkah 1: Masuk ke Dasbor Blogger > Tata Letak > Tambah gadget > Html Javascript.

Langkah 2: Masukkan kode dibawah ini dan simpan widget tersebut.

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Langkah 3: Pergi ke Template - Edit Html - lanjutkan. masukkan hanya salah satu dari ketiga kode dibawah ini tepat di atas/sebelum kode ]]></b:skin>



Kode 1: Kotak pencarian dengan latar belakang gelap

#search {
}
#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 2: Kotak pencarian dengan latar belakang terang

#search {
}
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 3: Kotak pencarian via apple.com

#search {
}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Langkah 4: Simpan templatemu dan lihat hasilnya.

Bila muncul masalah di kotak pencarian ini silahkan dikomentari. Saya tahu kotak pencarian ini masih belum sempurna :)

Baca Selengkapnya

Widget Berlangganan Dengan Background Melebar Pada Hover

Saya akan menyebarkan sebuah widget keren untuk berlangganan dengan blog kita. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya. Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS.

Lihat Demo

Cara menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.

Langkah 2. Kemudian masukkan kode dibawah ini:

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHemICHoKWZphtj7kf_bu7nh-7dskvHlLz9ERhyphenhyphenhVGJJxsrpz8TxrLO82wNiDlTsFGYwL4GMeXueqEO93twpOHZLTw62uwGlGdzyvPFNUghE5mHIM6Jkk-JGttgqmYqhuJTWuv5es4P4/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/halaman fan page facebook/">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/username/">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/alamat profil google+/">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Alamat profil Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat feed rss">Subscribe with RSS</a></li>
</ul>

Langkah 3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.

Langkah 4: Simpan widget ini dan nikmati...

Baca Selengkapnya

Menambah Traffic Dengan Mengatur Gambar

Jangan menganggap sepele dengan gambar yang diupload ke blog. Selain untuk menghiasi ataupun mengimformasikan berita, gambar juga bisa menambahkan traffic bila kita bisa mengaturnya.

Mari saya jelaskan dulu. Kamu pasti biasanya men-upload gambar yang telah didownload dari Google atau gambar yang difotoin dengan kamera untuk diletakkan keblog, kan? Biasanya gambar-gambar itu akan mempunyai nama-nama yang aneh, tapi kita malahan upload tanpa mengatur apapun. Itulah kesalahan kita.

Maka, kamu harus mengikuti 2 langkah di bawah ini sebelum mempublikasikan postmu..

1. Mengubah Nama Gambar Menjadi Kata Kunci

Ketika kita men-download gambar ataupun berfoto. Biasanya gambar itu memiliki nama yang aneh, seperti untitled.png, img6.png, sshot1.jpeg, dll. Jadi, untuk mengubah nama menjadi keyword, Saya akan membuat namanya blog.png atau tentang blog.png, dll.

2. Menambahkan Alt Tag ke dalam gambar

Alt Tag adalah tulisan yang dimasukkan ke gambar agar gambar tersebut bisa dimengerti oleh mesin pencari. Alt Tag juga dapat menambahkan traffic pada blogmu.

Cara menambahkan Alt tag:

Langkah 1: Bikin sebuah blog pos dan upload gambar didalam posting tersebut.

Langkah 2: Klik pada gambar sehingga muncul batang tulisan berwarna biru muda. Lalu klik pada "Properties".

Langkah 3: Pada kotak yang muncul, masukkan deskripsi gambar sesingkat mungkin pada kotak tulisan dibawah "alt text". kemudian klik "OK".

Sekarang gambarmu sudah memiliki alt tagnya. Alt tag yang ideal biasanya menggunakan 3-5 kata pada satu gambar.

Baca Selengkapnya

Menghilangkan Kotak Komentar Pada Post Tertentu

Kamu tahu kotak komentar yang ada di setiap halaman dan posting blog kita, itu biasanya ditampilkan dengan cara embed. Tapi ada beberapa halaman yang tidak mau ditampilkan kotak komentarnya seperti halaman Forum, Buku Tamu, Site Map, dll. Untuk itu saya akan sebarkan cara menghilangkan kotak komentar berikut ini:

Cara Menghilangkan Kotak Komentar:

Langkah 1: Bikin dulu 1 posting yang tidak mau ditampilkan kotak komentarnya (bila telah dibikin tinggal diedit kembali)

Langkah 2: Tetap dihalaman edit entri/laman, lihat bagian kanan halaman, temukan dan klik kata "Pilihan" (Options) disamping tanda roda bergerigi.

Langkah 3: Dibawah kata "Komentar pembaca", klik pada pilihan "Jangan bolehkan" kemudian klik "Selesai" (bila posting/halaman sudah pernah dipublikasikan, klik pada "Jangan bolehkan, sembunyikan yang ada")

Sekarang kamu sudah bisa mempublikasikan postingmu kapan saja.

Baca Selengkapnya