Showing posts with label mirip. Show all posts
Showing posts with label mirip. Show all posts

Wednesday, December 7, 2016

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!


BERIKUT ini cara kembuat kotak pencarian (Search Box) blog mirip Yahoo, yakni Kotak Pencarian Yahoo Indonesia. This is a Yahoo! Search Box Style!

Kotak Pencarian Yahoo Indonesia





Fungsi meniru atau menyerupai tampilan sebuah situs web terkenal adalah, selain biar tampak keren dan profesional, juga agar blog kita "user friendly", dikenal dengan istilah UX (User Experience). Pengguna jadi terbiasa dan tidak merasa asing.

Kotak pencarian mirip Yahoo! Search Box ini bisa ditampilkan di header sebelah nama blog (logo), bisa juga di atas atau di bawah posting. Penampakannya seperti di gambar di atas.

CARA MEMBUAT KOTAK PENCARIAN MIRIP YAHOO!
1. Template >Edit HTML
2. Capas kode berikut ini di atas kode ]]></b:skin>

<!-- Search Box Like Yahoo! -->
.searchform {background: url(https://lh6.googleusercontent.com/-_1OwVk5Mg6w/VK6wR9-Yf3I/AAAAAAAAJTM/4hlGeo2ddFQ/w550-h47-no/yahoo%2Bsearch.png) no-repeat; width:468px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #fff;width: 457px;outline: none;margin: 5px 7px 0px 10px;border-top: 1px solid #888;border-left: 1px solid #888;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.searchform .searchbutton {background: #3775dd;box-shadow: 0 2px #21487f;border: 0;height: 27px;width: 75px;padding: 5px;font: 500 15px sans-serif;color: #fff;border-radius: 4px;}

Catatan:
  • 468px = ukuran lebar kotak ini untuk ditampilkan di samping logo/nama blog. Bisa diubah.
  • 360px = ukuran lebar kotak entry teks, sesuaikan dengan lebar kotak. 
3. Save Template!

Kembali ke Dashboard:

4. Layout > Add a New Gadget di samping logo header > pilih "HTML/Java Script"
5. Copas kode berikut ini:

<form action= /search class=searchform method=get><input class=searchfield id=q name=q onblur=if (this.value == &quot;&quot;) {this.value = &quot;&quot;;} onfocus=if (this.value == &quot;&quot;) {this.value = &quot;&quot;} type=text value=/><input class=searchbutton type=submit value=Search/></form>

6. Save!!!

Demikian Cara Membuat Kotak Pencarian Blog Mirip Yahoo! Biar keren dan user friendly! Good Luck!

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,

Tuesday, December 6, 2016

Cara Membuat Search Box Mirip Apple com

Cara Membuat Search Box Mirip Apple com


Maybe bagi anda pengguna produk apple seperti safari tidak asing lagi dengan search box seperti di atas, karena jenis Search Box pada gambar tersebut memang di buat mirip dengan situsnya mendiang kaka ipar saya, itu tu Steve Jobs hehe (ngarep). Saya dapatkan Search Box tersebut saya dapatkan dari Bloggermint, dan yang membuatnya Rethnaraj Rambabu (katanya) Search Box tersebut menggunakan CSS 3 dan yang pasti keren lah di pasang  di blog.
Kalo mau liat contohnya emg lagi di pake ma saya salah satunya, tapi kalo mau liat contoh lainnya klik disini.

Nah sekarang kita langsung saja ke cara pembuatanya, cekidot.

1. Langkah paling wahid sih yang pasti masuk dulu ke Blogger.
2. Setelah itu masuk ke Template > Edit HTML > Lanjutkan
3. Lalu cari kode ]]></b:skin>
4. Lalu untuk Search Box jenis berikut,

COPAS kode berikut di atas kode ]]></b:skin>
#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/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;
    }
kalo untuk gambar berikut,

ini kodenya 
#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/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;
    }
nah kalo Search Box yang saya pake

kodenya sebagai berikut
#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/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(http://www.bloggermint.com/demos/css3searchbox/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);
    }
4. Nah kalo udah pilih salah satu, terus klik Simpan Template
5. Jika sudah, terus klik Tata Letak > Tambah Gadget > HTML/Java Script
6. Terus COPAS kode berikut.
 <form method="get" action="/search?s=" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>
 7. Terakhir klik Simpan
end....
-Semoga Bermanfaat(m)>_<-


Go to link Download

Read more »
Posted by at
Labels: , , , , , ,

Saturday, December 3, 2016

Cara Membuat Header Bar Top Menu Mirip Facebook

Cara Membuat Header Bar Top Menu Mirip Facebook


Cara Membuat Header Bar (Top Menu) Mirip Facebook
SEJAK Contoh Blog (CB) mengubah tampilan Top Menu Bar (Header Bar) menjadi mirip Facebook, terutama soal warna birunya, banyak pengunjung yang bertanya tentang bagaimana Cara Membuat Header Bar (Top Menu) Mirip Facebook itu.

CB memang sengaja mengubah Top Menu itu menjadi mirip Facebook dengan tujuan utama biar "user friendly". Pengunjung sudah terbiasa dengan tampilan itu sehingga diharapkan "betah" buka-buka blog ini.
Ini kode warna biru background header bar Facebook: #3a5795

Anda ingin juga membuatnya di blog Anda? Ini dia Cara Membuat Header Bar (Top Menu) Mirip Facebook:

1. Yang belum pasang Top Menu, cek Cara Membuat Top Menu Bar di Atas Header Blog.
2. Sesuaikan warna background dan hurufnya dengan kode berikut ini:

.page-menu {
width: 100%;
margin: 0 auto;
padding: 0;
background-color: #3a5795;
border-bottom: 1px solid #133783;
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
}

.page-menu li a {
color: #ddd;
font-size: 12px;
font-family: Oswald,Arial,Helvetica,Tahoma,sans-serif;
text-decoration: none;
text-transform: none;
padding: 0 10px;
border-right: 1px dotted #9c9c9c;
}

3. Posisikan <div class=page-menu> di atas kode <div class=content-wrapper>
4. Untuk menampilkannya agar statis, melayang, sticky, atau tetap muncul saat blog discroll seperti di blog CB ini, silakan Copy & Paste kode berikut ini di atas kode </body> (kode ini ada bagian bawah template).

<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $(.page-menu).offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $(.page-menu).css({ position: fixed, top:0, z-index:9999 });
        } else {
            $(.page-menu).css({ position: relative });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

5. Save Template!

Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook. Jika Anda menggunakan template blog New Johny Wuss V3, otomatis top menu tersebut ada.

Bagi pengguna template New Johny Wuss V1 &  V2 tinggal mengubah kode dengan mengikuti langkah di atas.

CARA MEMBUAT TOP MENU BARU
Bagi pengguna template lain dan belum ada Top Menu di atas Header Blognya, buat dulu dengan membuka link di No. 1 di atas, atau bisa juga coba cara berikut ini.

Kode-kode berikut ini bukan saja akan membuat Top Menu Bar di atas Header Blog, tapi juga --seperti top menu bar di blog CB ini-- juga akan "melayang", statis, atau tetap tampil saat scroll ke bawah --benar-benar mirip header bar Facebook! (Lihat juga demonya di Cibi Blogger). Template New Johny Wuss V3 juga sudah menggunakan Top Menu Bar mirip Faceook ini.

1. Template > Edit HTML.
2. Copas kode berikut ini di atas kode ]]></b:skin> 

<!-- Top Menu Bar Like Facebook -->
* html #top{position:absolute}
#top {margin: auto;padding: 10px 10px 0 10px;width: 100%;background: #3a5795;border-bottom: 1px solid #133783;z-index: 100;height: 40px;}
#top-wrap {margin:auto;padding: 0;width: 950px;background:#3a5795;}
#navwrap {margin: 0px auto; width:100%; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:12px;display:block;padding:10px 10px;color:#f2f2f2;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#444; color:#f2f2f2;}

3.Copas kode berikut ini di bawah kode <body> atau di atas kode </body>.

<div id=top style=position:fixed>
<div id=top-wrap>
<div class=topnav>
<ul id=topnav>
  <li><a href=#>About</a></li>
  <li><a href=#>Contact</a></li>
  <li><a href=#>Sitemap</a></li>
  <li><a href=#>Privacy Policy</a></li>
  </ul>
</div>
</div>
</div>

4. Tambahkan kode padding-top: 45px; di bawah elemen #header-wrapper atau #outer-wrapper seperti kode berikut ini:

#outer-wrapper {
width: 920px;
background-color: #ffffff;
margin: 0 auto;
text-align: left;
padding-top: 45px;
}

#header-wrapper {
margin: 0px;
background-color: transparent;
padding-top: 45px;

}

5. Save Template!

Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook di Blog Anda. Good Luck!

Go to link Download

Read more »
Posted by at
Labels: , , , , , , ,
Subscribe to: Posts (Atom)