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>

<ul>

<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..

Wong Pasuruan

Membuat Menu Vertikal Keren di BLOG dengan CSS 2015

8 comments: