ketika Anda membuka halaman blog saya, tentunya Anda akan melihat beberapa menu navigasi berupa "Home", "About Me", "Bannerku" dan lain sebagainya yang tentunya unik dan menarik. Dan sering kali temen-temen blogger menyebutnya dengan istilah "Slide Out Navigation". Tuuhh...lihat yang paling atas tuhh.. Menarik kan..??? hehe5.. Saya yakin deh Anda pasti penasaran dengan menu navigasi tersebut dan bertanya dalam hati, bagaimana yaa cara membuatnya, yaa kan..?? Jangan bohong deehhh..!!! hehe5..Tapi Anda jangan khawatir, kali ini saya akan mencoba untuk share ilmu dan pengalaman saya ini kepada Anda semua [kurang baik apa cobaa... hihi5..].
Oke.., berikut langkah-langkah cara membuat Slide Out Navigation :
[1]. Login Blogger
[2]. Klik Rancangan kemudian Edit HTML lalu cari kode ]]>
[3]. Copas script berikut dan letakkan di atas kode ]]> tadi :
/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;
}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbf0BWfP93CdMcYzkHvgLtqUaxThva5ipBqi4vWmiC7rKt0gElCtJm4jiliy-swEOJaSg9kt08ihVzuYHpybk9tykDfA-oYerC41vMBIiF4sUt0Pp_lhIzYObWq5sl-4-Nlpl_BUMaUKQ/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fKOhhYkIdBpSUpWchYAVKXxnovaVQjlWu32UJ10sYTVTtpMZwauwTrW11KZ_z_myQVDMXT_q1g7Hliyn8PCzmSiakjt05ayhuX7MG39M9N4Bqgi5_VugIrOt1ZrPzb4e2wIkQBGMBUo/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2Vt_qKmCbubi6c9JbLHTJ2JJPaSikp-UOzBwGZen5wH99E751XYhyphenhyphenU8lHtbPeXYltwXQPdQPavJ16mFBr8bMg72jJDPIeoMgWZS3lIaoFxdytGJuK9TLFi1wGDAvae0Np-aTciuLtqU/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXcCtd3iJZUQfDMc1XPeiQpuv1WZEjHkUv0hcD1Cu5nZUEMhSsuLEMCypzDJOpvOnbBnTGYgesULgF1G_if6AA3BALy_P_AaDCSEH4755BU1bVUGyuKwIHgAn6i7rsx5ThlJhl-yzT_x0/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsaWRgWPlXPIhE3QnGbN-BvnLIEl-Adz12Yg8W-hB12XR0bep3hvdqzhRqiCglZbAs-29O_lBrmTRlhEiNj-PoTYNMrChOQ4syt0Ft1LBF0iHGG8VxF48M1d750lrkxd0bThdqslJze4/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8RO549sBEWmTvpyOGtQf1QQJ5VPYDcQeHP_0_WDOlZcx4T3Y6IP7RWt4kzBduHMG2TX_KuImcNKKscVWM-3_-4cb9zDARvX2BBkU7gsLWmd1SrBu2NnKZFeCq_lvarBE0f9fl3HEa9hc/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1FxuITp4TaiV-C04NkBMayJtrMPkHKnyTj1FONqSRCcNsgEbqyl7BMb_RRIyQ2vhJ2ShTAMvLvZK_msC34StkLwCNRJY_ktrH6HrIdrN5iJClNs65jVh-PbdLnwIg7ZT-uiTjXDCOLw/s1600/mail.png);
}
[4]. Kemudian cari kode dan letakkan script berikut ini di atas kode :
[5]. Terakhir, cari kode dan letakkan script berikut ini di atas kode :
Catatan :
# : Silahkan Anda ganti dengan masing-masing link menu navigasi di blog Anda
[6]. Selesai deh.. dan jangan lupa Simpan Template
Bagaimana, mudah kah cara membuat Slide Out Navigation..??? Yakin deh Anda semua pasti bisa membuat SLide Out Navigation seperti yang saya terapkan di blog saya.
Selamat mencoba yaa dan semoga bermanfaat..
tutorial blog
05.49
Bagi pengguna AVG Antivirus, tentunya sudah mengenal adanya fitur LinkScanner yang ada sejak AVG 8. Dengan menggunakan fitur link scanner ini, link-link yang ada pada halaman web yang sedang diakses termasuk pada hasil pencarian Google atau Yahoo akan diperiksa apakah berbahaya atau tidak untuk diakses. Saat ini, Grisoft telah merilis AVG LinkScanner sebagai software tersendiri, sehingga memungkinkan bagi Anda yang tidak menggunakan AVG Antivirus dapat menggunakan AVG LinkScanner untuk membantu terhindar dari akses he halaman web yang diidentifikasi tidak aman.
