Hidden Something Hover


Bodyguard

Assalamualaikum, ok tuto kali ni mmg Yura tak tau nak namakan apa.
So, mcm mana rupanya.

 Boleh tengok belah kanan blog.
Cuba hover kan

Itu lah contoh tuto kali ini.

Dekat dalam tu , awak boleh letak apa2 . Contohnya sidebar, ads, cbox, status ,credit dan sebagainya.
Selalunya, tuto ni hanya ada utk blogskin. Tp takpe tuto ni khas utk blogger template.
Here we go !

  • Dashboard > Layout > Add a Gadget > HTML/Javascript
  • Copy la semuanya dan masukkan kat dlm kotak HTML tu
<style> @font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');} .parceiros{ width:250px; top: 70px; text-align:center; position:fixed;background-color:transparent;right:-214px;-webkit-transition: all 1.2s ease-out; -moz-transition: all 1.2s ease-out;min-height:100px;} .parceiros:hover{right:1px;} .titulo{-webkit-transform: rotate(-90deg);position:fixed;margin-left:-30px;font-size:18px;color: #fa79b9;font-family:tinytots;margin-top:35px;text-align:left;background-color:#fff;opacity:0.6;height:40px;} .fotos{width:220px;text-align:center;margin-left:40px;margin-top:10px;} .fotos img {width:30px;border-radius:360px;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out;} .fotos img:hover{-webkit-transform: rotate(-360deg);} </style> <br /> <div class="parceiros"> <div class="titulo"> Bodyguard </div> <div class="fotos"> <a href="LINK"><img src="http://24.media.tumblr.com/avatar_a86c92b00d51_48.png" title="name" /></a> <a href="LINK"><img src="http://24.media.tumblr.com/avatar_7fd82f569f4e_48.png" title="name" /></a> <a href="LINK"><img src="http://25.media.tumblr.com/avatar_fb4bd825e67b_48.png" title="name" /></a> <a href="LINK"><img src="http://25.media.tumblr.com/avatar_960886cb0fd6_48.png" title="name" /></a> <a href="LINK"><img src="http://24.media.tumblr.com/avatar_444426db2f37_48.png" title="name" /></a> <a href="LINK"><img src="http://24.media.tumblr.com/avatar_fb4fe6f3e7e6_48.png" title="name" /></a> <a href="LINK"><img src="http://25.media.tumblr.com/avatar_34b636284287_48.png" title="name" /></a> <a href="LINK"><img src="http://25.media.tumblr.com/avatar_cdccd7210901_48.png" title="name" /></a> </div> </div>

  • Jangan lupa utk tukar kan url gambar dan letakkan link. Juga nama utk gambar tu.
  • Hijau : Warna tulisan
  • Oren : Warna background
  • Merah : Kedudukan kotak tersebut. Semakin besar nilai nombor, semakin ke bawah
  • Ok siap . Lepas tu Save !

No comments

Awak mehla komen? satu komen pun jadilah :')