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

Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

5 comments

Write comments
ID JENIUS
AUTHOR
May 7, 2015 at 7:39 AM delete

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

Reply
avatar
Mata malaikat
AUTHOR
August 7, 2015 at 6:20 PM delete

Gak pungsi...

di pake malah blank ke blog-nya

Reply
avatar
CEKING
AUTHOR
December 27, 2015 at 6:27 PM delete

Tks
Liat cerita Di Ceking48.blogspot.com

Reply
avatar
August 30, 2016 at 1:22 AM delete

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

Reply
avatar
Wasis Zain
AUTHOR
December 7, 2017 at 4:18 PM delete

error gan coba dipraktekan sendiri
asis10.com

Reply
avatar