Widget Menu Di SideBar Keren

Oleh Unknown

Wednesday, September 30, 2015

Bagikan :

Tweet

Widget Menu Di SideBar Keren
Pada Artikel sebelumnya saya juga membahas mengenai Cara Membuat Widget Artikel Terbaru dan Artikel kali ini membahas mengenai Widget Menu Di Sidebar Keren dan saya akan membagikan sebuah widget menu yang dapat anda pasang di sidebar Blogger agan. Widget ini bisa anda pasangi gambar di depannya agar terlihat lebih keren . Widget ini juga ada efek animasi dengan CSS, jadi tanpa menggunakan script.

Gambar Widget Menu Di Sidebar Keren

Dari gambar diatas itu adalah penampakan dari Widget Menu Di SideBar Keren ..Gimana gan ..

Oke Tanpa basa basi Langsung aja ini scriptnya gan

Menu Widget

<div class="seocipsmb">
    <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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvAXtJ_BzUd-54uOdz_aTJ5nHAO2sLOa6xciifqQhgsyEj_pIbDozJMbfxfJWecKMFzDeZYXaUnaLPsJLG_MWJzW2JN9NMXWIOb57cL5Vmg8xKLjDLGoMQ17mZFDeJ2J4s9emLAPuadY/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>

Cara memasangnya :
1. Login Blogger 
2. Tata Letak - Tambahkan Gadget - Tambahkan html/java script
3. Di Edit Dulu 
4. Simpan
 
Untuk Penyesuaian 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.

Sekian, semoga bermanfaat Artikel Widget Menu Di SideBar Keren nya Jangan Lupa Share dan Komentarnya ..!

Tag : Blogging, Widget