Tutorial Floating / Sliding Twitter, Shoutbox, Music

Assalamualaikum.

Sebenarnya bendanya macam bawah ni :


Tutorial untuk Template Designer / Modern Template

1 . Design > Page Elements > Add a Gadget > HTML / JavaScript
2 . Copy code berikut :
<style type="text/css">
.music {
padding:30px;
border-bottom-right-radius:10px;
background:url(URL BACKGROUND);
}
#ytube {
text-align: center;
position:fixed;
left:4px;
top:-310px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#ytube:hover {
top:-10px;
}
#pict {
height:35px;
width: 50px;
align:center;
}
</style>
<div id="ytube">
<div class="music">
CODE TWITTER / SHOUTBOX / MUSIC PLAYER
</div>
<div id="pict"><br /><img src="URL IMAGE" /></div></div>

3 . Ubah mana perlu. Boleh create Twitter Widget kat sini. Ubah tulisan warna merah kalau gambar korang terpotong / pelik / whatever. Save.

*Ehem. Aku bukannya apa tapi code untuk Template Designer, aku coding sendiri. Ubah dari yang asal. Kalau nak RE-TUTORIAL, pandai-pandai lah credit kan?

Tutorial untuk Blogskin / Classic Template
Cr : here

1 . Template > Ctrl + F code </style>
2 . Copy code berikut dan paste sebelum </style> :

.music {
padding:15px;
border-bottom-right-radius:10px;
background:url(URL BACKGROUND);
}
#ytube {
text-align: center;
position:fixed;
left:4px;
top:-310px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#ytube:hover {
top:-10px;
}
#pict {
height:35px;
width: 50px;
align:center;}
3 . Ctrl + F code </body>
4 . Copy code berikut dan paste atas </body> :

<div id="ytube"><div class="music">

CODE TWITTER / SHOUTBOX / MUSIC PLAYER

</div><div id="pict"><br><img src="URL IMAGE"></div>
5 . Ubah mana yang perlu dan Save Template.

*Sila CREDIT kalau anda RE-TUTORIAL benda ini.

4 comments:

  1. Kenapa tak lepas nak copy sode ni . ? -_-

    ReplyDelete
  2. mcm mne nak buat shoutbox mcm naafa..??nnti gtaw aku ea..??maaf gne aku

    ReplyDelete
    Replies
    1. http://behindmysoom.blogspot.com/2013/01/tutorial-hover-over-chatbox.html

      Delete

I don't approve harsh comments (: