Friday, May 18, 2012

Cara Membuat Logo SearchBox dan Lencana Profile Bersatu Dengan CSS






Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Tombol Like Facebook Mengikuti Kursor,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Tombol Like Facebook Mengikuti Kursor.
Caranya :
1. Login Ke Akun Blogger Sobat
2. Pergi Ke Bagian Edit HTML
3. Pasang Script CSS Dibawah :

#menu {
background-color: #212121;
height: 61px;
width: auto;
}
#logo {
float: left;
margin-left: 0;
width: 461px;
}
#searchbox {
float: right;
height: 61px;
width: 374px;
margin-right: 60px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT205aG1IYGuR_tJrPDL3hq7uJdZALPl8Ocz0k4AsQU8p6wTL8Y9qFYn6xDtY3lHkT1xD6rGo-_OC_u1L851BiFQmmmn6Njcmtw4rsIxlUCxeUas53YeEtE0lh9rv2vzZaJ0w9VaQI1c/s1600/searchbg.png");
background-repeat: no-repeat;
}
#huruf {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #CCCCCC;
height: 21px;
left: 20px;
position: relative;
top: 18px;
width: 331px;
}
#penulis {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0PbyagfftjzFXOdYuWFOx8gBTpcQVykWlFmF5BYVr6kyNKRmrN4EilG9V_bH-98HBvlqNu5mKvVw-h2lH1ZE2gyWeDQgzYIrc1cQUjoG9b-5HuiUNf1JTKRd6L-TZ_33zr-EMQSnLkg/s1600/penulis+(1).png");
background-repeat: no-repeat;
float: right;
height: 96px;
position: relative;
right: 65px;
width: 372px;
}
Tepat Dibawah Script :

/* Header
-----------------------------------------------
*/

4. Terus Cari Kode <head> Lalu Pasang Script Dibawah Tepat Dibawah Kode <head>
<div id='menu'>
<div id='logo'><a href='http://tb4all.blogspot.com/' title='TB4all Community | All About Tutorial'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KbgSfr0yTQhTgd_xhigU5WNGR3xRn6juM7zQv2ILxwW9gIJcUtk9DwxKsCE6gnDVSAGXkWwMBZkWuy5Ll-RgYh_fZj2yZdcQhyicJ7ZzSeY_n1HSs7MxG_gYRHDzWLjs2FPqP29VVz4/s1600/Logo.jpg' height="57"/></a></div>
<div id='searchbox'>
<form action='http://tb4all.blogspot.com/search' method='get'><input id='huruf' name='text' type='text' value='Search Here.....'/>
</form>
</div>
</div>
<div id='penulis'></div>

5. Jika Sudah Save Template Dan Lihat Apa Yang Tejadi ... Blog Sobat Memiliki Lencana ^_^
Keterangan : ==> Ganti Link Logo https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KbgSfr0yTQhTgd_xhigU5WNGR3xRn6juM7zQv2ILxwW9gIJcUtk9DwxKsCE6gnDVSAGXkWwMBZkWuy5Ll-RgYh_fZj2yZdcQhyicJ7ZzSeY_n1HSs7MxG_gYRHDzWLjs2FPqP29VVz4/s1600/Logo.jpg Dengan Link Logo Sobat Ingat Ukuran Harus Sama Klo Gk Meleber Nanti !==> Ganti Link Seacrhbox http://tb4all.blogspot.com/search Dengan Link Search Sobat ! Contoh www.URL-BLOGSOBAT.blogspot.com/search==> Ganti Link Lencana https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0PbyagfftjzFXOdYuWFOx8gBTpcQVykWlFmF5BYVr6kyNKRmrN4EilG9V_bH-98HBvlqNu5mKvVw-h2lH1ZE2gyWeDQgzYIrc1cQUjoG9b-5HuiUNf1JTKRd6L-TZ_33zr-EMQSnLkg/s1600/penulis+(1).png Dengan Link Lencana Sobat Ingat Ukuran Harus Sama !
Jika Ada Yang Tidak Di Mengerti Sama Sobat Monggo Silahkan Comment Di Bawah Dan Kami Akan Membantu Sobat-Sobat Sekalian !^_^ dan Selamat Mencoba !
Contoh :


No comments:

Post a Comment