
Baiklah sobat pada kesempatan ini seocips akan membagikan sebuah widget menu yang dapat anda pasang di sidebar Blogger anda. Widget ini bisa anda pasangi gambar di depannya agar terlihat lebih keren dan ciamik. Widget ini juga ada efek animasi dengan CSS, jadi tanpa menggunakan script.
Lihat demonya di bawah ini:
Bagaimana sob? tertarik ingin menggunakannya? ok berikut adalah kode-kodenya yang dapat anda pasang pada Widget HTML Blog.
Menu Widget
<div class="seocipsmb">Untuk Wallpaper depannya anda dapat mengganti kode berwarna merah diatas dengan gambar anda, oh iya ukuran gambarnya lebar 300px dan tinggi 526px. Kode berwarna hijau adalah lebarnya silahkan disesuaikan dengan lebar sidebar/tempat widget. Untuk kode # dapat anda ganti dengan Link/url tujuannya. Yang lainnya dapat sobat edit sendiri. Ok sekian, semoga bermanfaat.
<input type="checkbox" id="tm" />
<!-- The menu -->
<ul class="sidenav">
<li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
<li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<section>
<!-- Label for #tm checkbox -->
<label for="tm">MENU<br/> ~ Click Me ~ </label>
</section>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);
#addku1,#addku2 {display:none;}
.seocipsmb {
float: left;
position: relative;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#tm {
display: none;
}
.seocipsmb section {
background: url("http://4.bp.blogspot.com/-XZ7sZ3r4rhs/VVlxgzV-GwI/AAAAAAAAEzI/PStopOT5KS4/s1600/seocips22.jpg");
width: 300px;
height: 500px;
position: relative;
transition: all 0.25s;
}
.seocipsmb section label {
color: white;
font: bold 14px Montserrat;
text-align: center;
border: 2px solid white;
border-radius: 4px;
display: block;
padding: 10px 0;
width: 60%;
position: absolute;
left: 20%;
top: 100px;
cursor: pointer;
text-transform: uppercase;
}
.sidenav {
background: rgb(50, 60, 60);
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 100px;
}
.sidenav li {
list-style-type: none;
}
.sidenav a {
color: white;
text-decoration: none;
}
.sidenav b {
font: bold 12px/48px Montserrat;
display: block;
opacity: 0;
transform: translateX(50px);
transition: all 0.4s;
}
.sidenav i {
display: block;
width: 50px;
float: left;
font-size: 16px;
line-height: 48px;
text-align: center;
}
#tm:checked ~ section {
transform: translateX(150px);
}
#tm:checked ~ .sidenav b {
opacity: 1;
transform: translateX(0);
}
#tm:checked ~ .sidenav li:nth-child(1) b {
transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b {
transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b {
transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b {
transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b {
transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b {
transition-delay: 0.48s;
}
</style>
15 Komentar untuk "Memasang Widget Menu Keren di Sidebar Blog"
Pertamaxxx.. mas . .
keren bangeetttt menunya . . ^_^
langsuung d comot yaah . . ^_^
#mampir
Yang dicari - cari ketemu makasih gang :)
best..
Request Donk :) Cara Memasang Widget Selamat Datang Dan Sampai Jumpa Di blog :)
Lama ga ngesot kemari apa kabarnya bang..? hahahahyyy
takut berat ah :P , soalnya kalo dipasang di website ane yang paling unyu-unyu nanti takut berat kak.
Kang cara membuat Halaman Statis Full Widht Pada Halaman Tertentu Yang Valid Gimana Gan??
sepoel-cyber.blogspot dot com
Wah sobat harus ngerti bagian-bagian template yang sobat gunakan, misalnya mengatur lebarnya dan menyembunyikan sidebar.
Oh gitu yah, kayak blog ini berat...hehehe
ehh iya yah.. kabar baik sob. hahayhehehe
Nanto sob, kalau udah tahu caranya..hehehe
Ok silahkan sob..
Bagus nih gan, numpang nyimak ya :-)
Silahkan sob..
Wah ternyata yang ginian lumayan yang nyari yah..