Cara membuat teks menu bergulir secara dinamis di blog

Teks menu bergulir CSS ini dibuat dengan menggunakan efek populer, dimana teks dapat begerak keatas mengungkapkan duplikasi dari dirinya sendiri ketika mouse atau krusor digerakan ke menu tersebut. Duplikasi dari konten item menu pertama  menggunakan CSS2, kemudian  CSS3 transisi dan transformasi mengubahnya untuk menggeser duplikat konten yang ada dalam menu tersebut.

View Demo

KODE CSS

ul{ margin:0; padding:0; } li{ display:inline; list-type:none; } a.glidebutton{ display: inline-block; position: relative; color: #4A4A4A; /* default color */ background: #ececec; /* default bg color */ text-decoration: none; font: bold 14px Arial; /* font settings */ letter-spacing: 2px; /* font settings */ overflow: hidden; height: 30px; /* height of each button */ text-align: center; border-radius: 5px; /* border radius */ -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.glidebutton > span:first-child{ /* first span inside button */ position: relative; display: block; height: 100%; padding: 6px; /* padding of button */ -moz-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.glidebutton > span:first-child:after{ /* CSS generated content */ content: attr(data-text); /* Duplicate text of span markup */ display: block; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: inherit; position: absolute; top:100%; left:0; } a.glidebutton:hover{ color: black; /* color of button on hover */ background: #72cb47; /* bg color of button on hover */ box-shadow: 0 0 4px green inset; } a.glidebutton:hover > span:first-child{ -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan CTRL + F untuk memudahkan pencarian
• Pastekan kode CSS tepat diatas tag  ]]></b:skin> 
• Simpan template... 

 KODE HTML

<ul>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/"><span data-text="Home">Home</span></a></li>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/p/blog-page_14.html"><span data-text="Site map">Site map</span></a></li>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html"><span data-text="Contact Us">Contact Us</span></a></li>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/p/about-us.html"><span data-text="About Us">About Us</span></a></li>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><span data-text="Privacy Policy">Privacy Policy</span></a></li>
<li><a class="glidebutton" href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html"><span data-text="Link Exchange">Link Exchange</span></a></li>
</ul>

• Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript  
• Pastekan kode di atas didalamnya

CATATAN: 

• Silahkan Ganti link warna kuning dengan URL/Link anda
• Ganti judul Menu sesuai dengan menu yang anda inginkan
• Simpan gadget, selesai...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.00