Iklan

Membuat Menu Vertikal Keren di BLOG dengan CSS 2015


Membuat Menu Vertikal Keren di BLOG dengan CSS 2015


Halo, Sobat blogger, bloggingpasuruan mau berbagi widget baru dan sangat indah untuk blogger.Tentang Bentangkan dan Perkecil Vertikal Sidebar Widget ini hanya dibuat oleh CSS dan beberapa kode scripting, ini sangat user-friendly dan mudah untuk menginstal di blog Anda. dan juga menggunakan beberapa kode JavaScript di widget ini untuk modifikasi biar keren dan tampak profesional untuk blog Anda. Jika Sobat tertarik memasangnya di Blog, silahkan ikuti langkah langkahnya berikut ini :


Cara Install Widget di Blog Sobat

Ø Masuk Akun Blogger Sobat
Ø Masuk ke menu TATA LETAK >> Add Gadget >> pilih HTML java script
Ø Masukkan kode dibawah ini di dalam kotak ( HTML java script )


Kode yang diletakkan pada kotak HTML java Script
<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
wgmenu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, wgmenu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
html{
  height: 100%;
background: rgb(234, 246, 243);
}
body{
  text-align:center;
  vertical-align:middle;
  height:100%;
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.wgmenu{
  vertical-align:middle;
  width:300px;
  display:inline-block;
 font-family: 'Source Sans Pro', sans-serif;
  transform:translate3d(0,0,0);
}
.wgmenu input{
  position:absolute;
  left:-9999px;
}
.wgmenu #togglewgmenu:checked ~ ul {
  max-height:300px;
  padding-bottom:1em;
}
.togglewgmenu {
background: #FC634B;
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'entypo', sans-serif;
}
.togglewgmenu:before{
  content: "\2630";
  font-size:1.5em;
  vertical-align:middle;
}
.wgmenu ul{
  margin-top:2px;
  text-align:left;
  max-height:0px;
  overflow:hidden;
  padding-bottom:0;
  transition:300ms ease all;
}
.wgmenu li{
  margin-bottom:1px;
  position:relative;
  z-index:10;
  transition:300ms ease all;
}
.wgmenu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;
box-sizing:border-box;
transition:300ms ease all;
}
.wgmenu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.wgmenu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}

.wgmenu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.wgmenu li:hover + li{
  z-index:1;
}
</style>
<nav class="wgmenu">
  <input type="checkbox" id="togglewgmenu" checked />
  <label for="togglewgmenu" class="togglewgmenu"></label>
  <ul>
    <li><a href="#">SEO</a></li>
    <li><a href="#">Widgets</a></li>
    <li><a href="#">Adsense</a></li>
    <li><a href="#">Blogging Tips</a></li>
  </ul>
</nav>



Kustomisasi


Silahkan yang di blok warna hijau sobat ganti dengan URL ( label milik sobat )
Silahkan yang di blok warna kuning sobat ganti dengan Nama Menu milik Sobat Suka

Ø Simpan dan lihat hasilnya

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Membuat Menu Vertikal Keren dengan CSS 2015. Semoga bermanfaat dan terima kasih..

Next
Prev Post
Previous
Next Post

8 comments:

  1. thanks bro ... kunjungan baliknya blog baru ane idjenius.blogspot.com

    ReplyDelete
  2. Gak pungsi...

    di pake malah blank ke blog-nya

    ReplyDelete
  3. Tks
    Liat cerita Di Ceking48.blogspot.com

    ReplyDelete
  4. makasih template nya bagus gan boleh copas ya buat di blog aku makasih

    ReplyDelete
  5. error gan coba dipraktekan sendiri
    asis10.com

    ReplyDelete
  6. Mksih bro ilmunya,kunjungi balik ya di jalanantikus.com

    ReplyDelete