Tutorial sidebar hover (Slide)

Assalamualaikum and annyeonghaseyo ! Ada orang tanya how to make hover Slide  sidebar  . So heree code ,, Godd luck  !

1. go to template and paste code on code ' </style>'
2. paste code it .

.sidebar{
background:#fff;
height:50px;
margin-top:5px;
color:#808080;
text-align:center;
overflow:hidden;
width:220px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}


.sidebar:hover {
height:200px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

3. Pergi dekat code Sidebar korang misalnya seperti yang di hijaukan .

<div class="sidebar">
<div class="nag">Follow</div>
<center><br>
<iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="106" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog=xioyuiminglovegoojaehee&color_scheme=light"></iframe>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fainanajihah4teen%3Fref%3Dhl&amp;width=210&amp;height=70&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:210px; height:70px;" allowTransparency="true"></iframe><br>
</center>
</div>

4. Paste code <div class="sidebar"> dekat atas code sidebar korang macam code kat atas !.

5. Previewlah kalau tak ade Syntax Error haha . Menjadi komen .

Tutor : Recent Post Like me .

Assalamualaikum and annyeong hari nih aku nak Ajar buat recent post cam aku . Just for blogskins user anyway credit Nurin asyada for code . start it.

• Cari sidebar yang sesuai and then paste code kat bawah nih .
•  okay preview kalau tak jadi komen 

<div style="height:120px;width:208px;background-color:#fff;border:1px dashed #ccc;padding:2px;overflow:auto;">
<div align=left>
<img src="http://i279.photobucket.com/albums/kk124/bibipiiggy/plug-1-1.gif">  <u>Recent posts</u></div><br>
<BloggerPreviousItems>
<font color=#FFAFAF>♥</font> <a href="<$BlogItemPermalinkURL$>"> <$BlogPreviousItemTitle$></a> <br>
</BloggerPreviousItems>
</div><br>

First post on may ! : Exam ! Freebies Shinchan . gif

Assalamualaikum and annyeonghaseyo ! HAri nih first time penat jugak wa nak buat post tutor and now nak ngubah header and ada freebies buat dari photoscape sume nih ,, well nak tunggu potochopp lameee -,- so heheh ni lah hasilnya

New Header : 

{Otaku's Header} Last farewell .

Okay dah sebut tentang tuh  dah bereh - bereh . Eihh aku ada new freebies nak bagi Shin chan and mirmo versi gif pun aku buat dari photosape . muehehhehe best lah weyhh ! Okay minggu nih exam right so selamat bercuti ! eih maaf Berexammmmmm hehehe . Hiastus mode {} esok offline until periksa habis okay , Bereh bereh okay ah nah freebies nak komeng okay . 

Icon version gif made by own 

http://i.imgur.com/1ozHm6q.gif

 

 http://i.imgur.com/Gy1UDMm.gif

Tutorial Letak iklan says, komli and dll Gif yang cool di footer

Assalamualaikum and annyeonghaseyo ! nak ngajar lah pulak how's to Letak iklan says , komli and dll Version Gif kat footer korang cute tahu hehhehe :D

Live preview ? kat blog aku jeh haaa

Freebies !

Template

• Biasa ah tampat tampal jeh hahah .

Blogskins :

• Cari code <Blogger>
• and then paste kat bawah code atas ni okay good luck ! dia ada dua kan so suka hati ah nak post mcam mana :D

<div style="background: #FFFFFF  repeat; repeat; padding: 5px; border:2px dotted #000000; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;"><center></center>

<center>

<a href="link iklan korang !"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLeNY5y3p6aTJXEnVRz_MonjAyd4bPRYXblZ69tbbPqM6J8nfmr87YYHTBjr90dTk7Cabps75u_zOEzsE-wEm65dNakMAM17iEDQYxeD19GRp4z5KDk9HDfe2-oC07SNxDf1sh_iMTZes/s1600/freebies+%231.gif" /></a>

</center>
</div>

Oyt nak kemana weyh hahahha tak ade ah ! cute tak ? tak cute nak aku lempang ? heheh freebies

New Short stories : Thunder curse Fitcion

 

Hidaka Yamazuki , 14 tahun melakukan sumpahan demi sumapahan yang misteri ke atas lelaki yang meninggalkannya , Motif nya mungkin ingin membalas dendam akan kematian Akaknya  , Maria Yamazuki 16 tahun yang mati kerana membunuh diri dan meninggalkan notis aku akan kembali dengan Dendamku . Hidaka mengesyaki ada kaitan dengan tujuh bekas teman lelaki . Lalu dengan menukar namanya kepada Anne Gitori dan kemudian mula berapat dengan 'Ex' akaknya itu . sumpahan atau ilmu hitam yang digunakan hidaka amat kejam sehingga Kesemua mangsanya berjaya di tewaskan . Seorang lelaki pula yang cuba memasuki kehidupan hidaka pula hampir terbunuh apabila diancam hidaka . Namun lelaki tersebut tetap berkeras ingin membantu hidaka  .

   

Akan di update kemudian .

Pelakon Versi anime : watak utama

Hidaka Yamazuki Anne Gitori Lyssa Arnold Hiroshi YamadaL Dylan yuki Maria Yamazuki

Ni ada ole-ole gwiyomi gif kalau nak hamikkk lah 

Tutorial : Simple but cute Blockquote

Assalamualaikum and annyeonhaseyo ! New Blockquote and smart ! Who's want to try it ? Okay just Copy down here According the tutorial ! * Please Credit !

Live Preview 

• Cari code ( blockquote ) Use F3 . 
• Jumpa code korang kan so apa lagi delete and then paste code bawah nih

blockquote{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7wVn0GjEMwq-ptp0wbnyQuQbPyaSLprVADCTMM1xPCd3P66dlIHVRNBHzfkqRwJtlpK9d8ZaF1bBFrIBH6oC-4SWeckYC2WgiE4dPdKJpkgWVl7Ra1dmBx0HVP3gwR1ECRaRyMgzoeBAA/s1600/obkp8.png); border-radius:15px; padding:10px; display:block; border:2px solid #2A0A0A; color:#80808; -webkit-transition: 1.0s; -moz-transition: 1.0s; font-family:calibri } blockquote:hover{ border-radius:20px; -webkit-transition: 1.0s; -moz-transition: 1.0s; -webkit-box-shadow: 0px 0px 8px #fff; -moz-box-shadow: 0px 0px 8px #fff; box-shadow: 0px 0px 8px #ffd5d5; }  <br>

 Okay After that try ah preview dulu ! kang tak jadik carut aku !

Freebies Skin : Stalk Your Heart

Assalamualaikum and annyeong memalam nih aku terjumpa code dalam file aku so nak aku buat apa lagikan publish je kat sini mals kat blogskins hahahh Okayyy ah .

Theme:stalk your heart , red theme !

Okay kalau nak live preview meh tonyohhh sini -> Live preview okayy nak download tekan jeh kat bawah tu hah okayyy see you! comment pleashh

Live Preview or Download code

Tutorial cute credit section !

 

Assalamualaikum and annyeong ! hari nih buat new tutor buat kawaii credit setion don't be angry lorhhh hahah orait , let's do it .

Edited by me : Your name
CREDIT : C.U.T.E

• Firstly Pilih bahagian yg korang nk paste credit section nih !
• Pastikan semua kau dah kredit jangan tinggal  

Paste kan code nih !

<img alt="7" src="http://www.wanpug.com/illust1537_thumb.gif" /></div>
<div style="text-align: center;">
Edited by me : <a href="http://blogger.com/" target="_blank">Your name </a><br />
<img border="0" src="http://2.bp.blogspot.com/-dC6Sa2O04tw/TwNkqeG79ZI/AAAAAAAAAwk/TJLWb9kegOo/s1600/likes.gif" /> CREDIT : <a href="http://blogger.com/" target="_blank">C</a>.<a href="http://blogger.com/" target="_blank">U</a>.<a href="http://blogger.com/" target="_blank">T</a>.<a href="http://blogger.com/" target="_blank">E</a></div>

Tutorial : memasang animasi login home di blog !

Assalamualaikum nak try new tutor heheh baru dapat best nihhh jum try okayyy , code nih nak pastikan dulu wait eh ? hahahh tak lah jum teruskan !

For new template

• letak code bawah nih kat atas </body> 
• pepandailah design orait ? Adios heheh .

 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var  Gambar_Login_Anda ='http://i1058.photobucket.com/albums/t411/some_plack/m.png',
       Nama_Login_Anda = 'Norberth_Fredericus';
</script>
<script src='http://not-remove-admin-3.googlecode.com/files/animasi-login3.js' type='text/javascript'/>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'/>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'/>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'/>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'/>
<!-- Animasi Login End -->
<b:else/>
</b:if>

 okay bye !
 

Tutorial cbox comel bawah post !

Assalamualaikum and anyyeong ! aku ajar simple jeh nih nak cepadddddd -,- haihhhhhh okay ah cer tgok aku punya cbox comellkan ? erkkk abaikan jum buat nih latest !


Classic template :

• Bukak Template korang
• Search ' </blogger> ' (guna F3 lahhh )
• And then paste code bawah ni kat bawah code kat atas nih .

<center><img src="http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/dot_03.png"/> Be Honestly Comment's and I don't want some In exchange with your Ad's Line like a Goblin ! okay<br><center><img src="http://dl3.glitter-graphics.net/pub/767/767273fjipnjefwi.gif" width=213 height=15 border=0></a></center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div><iframe frameborder="0" width="110" height="0" src="http://www7.cbox.ws/box/?boxid=653404&amp;boxtag=8qp59w&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-653404" style="border: 0px solid;" id="cboxmain7-653404"></iframe></div>
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="400" height="100" src="http://www7.cbox.ws/box/?boxid=653404&amp;boxtag=8qp59w&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-653404" style="border: 0px solid;border-bottom:0px" id="cboxform7-653404"></iframe></div>
</div>
<!-- END CBOX -->

• siapp ! k tata .
• Note yang warna merah tuh pepandai ubah and pastikan dia punya width and height sebijik mcm kat atas okay ?