Tutorial Float Status With Background (Simple Template)

Misaki PureBlood | Wednesday, January 21, 2015 | | | |

Yohooa, sekarang ni musim anime kegemaran Misaki tengah ongoing. Macam gambar dekat atas.. Tajuk dia Tokyo Ghoul. Memang tengah HOT sekarang nih. K.E.J.A.M. Ahahaha.. Anyway, Misaki tak bagi adik Misaki yang form 2 and darjah 6 tengok cerita ni. Sebab diorang tu mudah terpengaruh. Risau.. Ahahaha..

Ada lagi yang memang sentiasa HOT yang memang Misaki tengah layan (ongoing) 
  • Kuroko No Basuke
  • Durarara!
  • Kamisama Hajimemashita
Itu top 3 anime yang Misaki tengah layan. Manga dia pun Misaki baca wokie. Kalau Tokyo Ghoul, Misaki baca spoiler manga ja.. Mwahahaha.. :P

Anyway, back to topic. Misaki rasa bosan gila tak tahu nak buat apa. Kebetulan dah seminggu tak update blog. Sedangkan rajin je tiap minggu tukar theme blog.. Mwahahaha..

Tutorial kali ni, Misaki nak buat tutorial float status a.k.a status terapung. Yang nih version Misaki dengan background dekat title status dengan kotak status dia :) |Kalau korang perasan, Misaki punya status box dekat belah kiri atas takde background kan :D


1. Go to dashboard > Layout > Add gadget > HTML/Javascript

2. Copy this code and paste in HTML/ Javascript
<style>
@font-face {
font-family: "tinytots";
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
#line{position:fixed;
left:35px;
top:-30px;
border-left:10px solid #ff0000;
border-right:10px solid #ff0000;
width:85px;
height:50px;}

.statioo {
font-family:calibri;
font-size:12px;
letter-spacing:2px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;color:#fff;
border:1px solid #ff0000;
width:150px;
margin-left:-38px;
margin-top:40px;
text-align:center;
padding:4px;background: url(http://3.bp.blogspot.com/-jCWgRFaKPoM/VL2NT9cUUJI/AAAAAAAAD24/KVP3lDrYp54/s0/red.gif) ;}

#notii {
border:1px solid #ff0000;
width:150px;
font-family:calibri;
font-size:11px;margin-top:10px;
margin-left:-38px;
padding:4px;
height:60px;
text-align:left;
background: url(http://3.bp.blogspot.com/-jCWgRFaKPoM/VL2NT9cUUJI/AAAAAAAAD24/KVP3lDrYp54/s0/red.gif) ;
color:#fff;}
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

</style>
<div id="line">
<div class="statioo">
TODAY's QUOTE</div>
<div id="notii">
When the world shoves you around, you've just gotta stand up and shove back - Roronoa Zoro
</div>
</div>
 You can change everything else according to your taste :)
Pst:/ you can use this tutorial for quote or put your blog status or anything you want.. |Ask me if you don't understand|

Credit to: Afiqah

8 comments:

  1. Etto,, Kuroko no Basuke , Kamisama Hajimemashita and Tokyo Ghoul are ongoing animes?? :OO

    ReplyDelete
  2. Yupsie :D Kuroko No Basuke (3rd season-ending season), Kamisama Hajimemashita (2nd season) and Tokyo Ghoul (2nd season) ahaha XD

    ReplyDelete
  3. Oh,dulu saya selalu baca kuroko no basket kat mangafox.Anime dia je blum tgok lagi

    ReplyDelete
  4. ye ke? kalau cemtu anime dia kena tgok pulak lepas nih :D sekarang nih season 3 ending untuk cerita kuroko no basuke tengah tayang :D hehe ^__^

    ReplyDelete
  5. Kak ! asal tukar tokyo ghoul theme plak?..terkezut hna ! haha..takderlah ,hna pun tgk tokyo ghoul tau ~ tapi tgk ep 1 jer.. yg perempuan tu asyik ckp oishi.oishi..oiishii..tak habis2..jilat2 jari plak tu..haissh,,trus tkr anime lain..hohoho. kte form 2 tapi x terpengaruh..hrp2 nya lah

    ReplyDelete
  6. hehe :D suka Tokyo ghoul.. ikut mood sebenarnya nak tukar2 theme nih hehehe XD


    best woa Tokyo Ghoul :D faveret ^__^

    ReplyDelete