Friday 28 February 2014

Tambahkan Pro Biru Splashish Menu Horisontal

Memiliki Profesional Menu pada blog Anda yang menunjukkan profesionalisme blog apapun dan itu cara tampilan dan nuansa dan tepat waktu ini blogging akan melampaui pada batas-batas profesionalisme hanya be'coz anak yang berusia hampir 13 tahun yang dapat merancang apa saja dalam blogging jadi, kita harus melakukan sesuatu yang baru blogging be'coz mengalami persaingan yang sangat ketat yang juga tergantung pada desain, konten, data, privasi dll Jadi, MOTO kami sangat sederhana Membuat Blog Seperti Pro. Tim kami selalu siap untuk memberikan hal terbaik dan profesional. Hari ini Anda akan mendapatkan Horizontal menu profesional Blue Splashish yang hanya dibuat oleh CSS PURE.

Instal Kode Pro Biru Splashish Menu Horisontal :

1.Login ke Blogger> Dashborad
2.Klik pada Drop Down Menu lalu pilih Tata Letak 
3.Tambah Gadget HTML / JavaScript
4.Paste di bawah kode di dalamnya.

<style>

#RWGmnuqw {
font-family:'Open Sans', Helvetica, Arial, sans-serif;
right:0;
border-top:2px solid #000;
border-bottom:2px solid #000;
width:100%;
overflow:hidden;
padding:0;
}

#RWGmnuqw ul {
list-style:none;
margin:0;
padding:0;
}

#RWGmnuqw ul li.kiri {
-moz-border-radius:0 0 0 3px;
-khtml-border-radius:0 0 0 3px;
-webkit-border-radius:0 0 0 3px;
border-radius:0 0 0 3px;
}

#RWGmnuqw ul li.kanan {
-moz-border-radius:0 0 3px;
-khtml-border-radius:0 0 3px 0;
-webkit-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}

#RWGmnuqw ul li {
font-weight:700;
width:11%;
float:left;
text-align:center;
border-right:1px solid #333;
background:#04BDFA;
border-left:none;
}

#RWGmnuqw ul li a {
display:block;
color:#FFF;
line-height:18px;
font-size:15px;
padding:19px 0;
text-decoration:none;
}

#RWGmnuqw ul li a:hover {
text-decoration:none;
color:#fff;
cursor:pointer;
background:#005C91;
}

#RWGmnuqw ul li.home {
float:left;
height:56px;
background:#005C91;
width:11.1%;
border-right:1px solid #333;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWGmnuqw ul li.home a {
color:#FFF;
padding:18px 0;
}

#RWGmnuqw ul li.home a:hover {
color:#fff;
background:#04BDFA;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWG-ioio {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtqwyOdYILpIQGK7BoX-8g-GrUb5JyY3AHQnRl5fZ4uV88E23m5dZnM2Oz1FI49Z0m0d-xuO7QOxinywYje0PcxuY7fJqMhcXoebF_UOGi-ekP6qjHREAr9FNaFDlEEA_ef1yUMuw3Vjt/s1600/bg-RWG.png) repeat scroll top left;
max-width:1150px;
width:1150px;
margin:0 auto;
}

</style>





<div id='RWG-ioio'>
<div id='RWGmnuqw'>
<ul>
<li class='home'><a href='http://www.widgetgenerators.com'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJ15KOipmB6CbZZK8zZznSqHy8OOXK9ipd_u03iBWjHZLJIMglCE9xGkNYDm0Y48amLTcAkyGWXmyntgph85SFuyq7Dxegcb0WqZbrSw5Nr4fSljCkek_-W1DN_6Q5DgrpzQ7UpMD-thS/s1600/homeRWGmnu.png' style='margin-right:10px'/>HOME</a></li>
<li><a href='#'>Business</a></li>
<li class='kanan'><a href='#'>Technology</a></li>
<li><a href='#' target='_blank'>Application</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Economy</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Sports</a></li>
<li class='kiri'><a href='#'>Lifestyle</a></li>
</ul>
</div></div>


9.Simpan Widget Anda dan Anda Selesai.
Cara Mengganti:
  • Gantilah # dengan link anda.
  • Gantilah background Oren dengan nama tab Anda.  
  • Gantilah 1150px dengan lebar blog Anda sendiri dalam piksel (Opsional)  

No comments:

Post a Comment