0 CSS3 Posisi Vertikal Side Menu Untuk Blogger

Banyak situs yang kita kunjungi sekarang memiliki menu navigasi tetap ke sisi halaman untuk memudahkan akses ke halaman.Ini penting, saya memiliki menu yang sangat stylish dan penuh warna, menu akan tetap di tempat bahkan ketika gulungan pembaca turun naik pun tidak mengganggu menu content. memiliki 5 ikon yang bergulir di hover keluar untuk menampakan tujuan mereka, jadi misalnya ikon rumah di hover gulungan keluar 'Home' kata . untuk Home, About, Service, dan Portofolio Contact Us. Anda dapat mengubah ikon, Anda dapat mengubah teks untuk setiap ikon misalnya ikon portofolio dapat diubah untuk arsip. Menu ini terdiri hampir sepenuhnya dari CSS3 hanya dengan satu gambar dan cepat dan mudah untuk install. menu ini,  Anda dapat melihat demo dulu,



 

Tambahkan Menu Navigasi Untuk Blogger Tetap

Ingat Selalu Back Up Template Anda Sebelum Anda Membuat Perubahan

. Langkah 1 . Pada Dashboard Blogger Anda Klik Desain> Desainer Template> Tingkat lanjut> Geser ke Opsi Css Tambahkan sebagai ditunjukkan di bawah ini 
(Jika Anda menggunakan Blogger baru dashboard klik menu drop down untuk blog Anda, maka tata letak, kemudian desainer template)  






Langkah 2. Paste kode berikut ke dalam bagian Css: 

Catatan- Ini adalah sebuah kotak gulir, pastikan untuk mendapatkan semua kode.

/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

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

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg88mr0PNROGgZeRcCJRi-iEFmVKg-QcTHR9ZI886fd6hUj8_-mfQD1-s0pSjNtLOatmz-GuCZicpXRvv64JRvMgJDh4alnLqMD1tHAZcBqB5LI7L_TsJQHU8AqDc3PYbFPwPwg6Tg2nZg/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css - info @ http://www.spiceupyourblog.com */

Langkah 3. Simpan template Anda, itulah Css ditambah sekarang untuk html tersebut. 

Langkah 4. Kembali ke Halaman Desain atau Tata Letak blog Anda dan klik Add A Gadget> HTML / Javascript> 

 Langkah 5. Copy dan paste kode berikut ke dalam HTML / Javascript gadget:

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://bluejeansbutut.blogspot.com/">
<span>Home</span>
</a>
</li>
<li>

<a class="about" href="http://bluejeansbutut.blogspot.com/p/about-blue-jeans-butut-blog.html">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="http://bluejeansbutut.blogspot.com/p/hire-us_08.html">
<span>Services</span>
</a>

</li>

<li>
<a class="portfolio" href="http://bluejeansbutut.blogspot.com/">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="http://bluejeansbutut.blogspot.com/2009/09/contact-us.html">

<span>Contact us</span>
</a>
</li>
</ul>
</div><a href="http://bluejeansbutut.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Catatan- Merubah URL  warna merah dengan link Anda dan Anda dapat mengubah teks scrool Biru di atas.

Langkah 6. Simpan gadget , Anda dapat drag dan drop gadget ke bagian bawah dari halaman desain Anda.