How to have this cute scroll box to your blog

Hi guys! In this entry, I will tell you on how to get this cute textbox on your blog. You can put anything in here such as text, pictures and many more! You may put the textbox in your sidebar section or in an entry just like I did below.

Title of textbox

Bonbon biscuit cake chocolate bar candy danish. Fruitcake oat cake donut marzipan chocolate halvah. Lollipop jujubes candy halvah cookie jelly beans cake muffin chocolate cake. Lollipop dragée halvah bear claw wafer cookie lemon drops cake toffee. Sugar plum oat cake icing marshmallow. Chocolate cake jujubes bonbon lemon drops lollipop cookie. Powder soufflé cake. Chocolate cake jujubes chocolate bar tiramisu oat cake icing. Cookie cake candy apple pie gummi bears. Pastry candy canes powder danish tart pudding tootsie roll. Caramels lemon drops jujubes jujubes tart toffee ice cream halvah caramels. Jelly bear claw gummies brownie lollipop oat cake. Bonbon pudding gingerbread.

To use this scroll box, copy and paste this codes to http://htmledit.squarefree.com/ to edit while viewing the live preview. Then you may place them anywhere you wanted them to be.

<div style="border:3px solid #eee;background:#E5DDDA; width:260px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;"> Title</div>
<div style="border:3px solid #eee;background:#fff; width:250px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:100px; text-align:justify;"> Content here</div>

How to create scrollbox - Basic style

Dragée cookie halvah cookie chocolate bar fruitcake brownie. Sesame snaps lollipop soufflé dragée donut topping bear claw. Macaroon pudding danish pastry fruitcake cotton candy. Marshmallow cotton candy macaroon ice cream apple pie danish gummi bears. Marzipan soufflé sugar plum candy chupa chups halvah sweet roll chocolate cake oat cake. Danish carrot cake icing.

To have this scrollbox to your blog, get this codes, edit the content and paste them anywhere you wanted it to appear.

<div style="background:#ffffff; width:400px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:100px; ">Content here</div>

For any questions, you may comment down below :)

How to add navigation menu to your blog - Style 4

Hi guys! As requested, I will teach you on how to get the menu button of this style. This is the live preview of the button, you may hover your cursor over these menus to see the hover effect :)

1 2 3 4

To get this menu button, follow the instruction given below.

1. Edit the codes

To edit the codes, I recommend you to use http://htmledit.squarefree.com/ to edit while viewing the Live Preview immediately. The main codes that you need to change are - YOURLINKURL (Change this to your link url) & titlehere (Change this to your own menu title)

<style> a.jeonjin1 { letter-spacing:1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; cursor:pointer; display:inline-block; font:8px tt; text-align:center; width:30px; height:10px; color:#888 !important; padding:5px; padding-top:15px; background:#eee; text-decoration:none; -webkit-border-top-left-radius: 33px; -webkit-border-top-right-radius: 33px; -moz-border-radius-topleft: 33px; -moz-border-radius-topright: 33px; border-top-left-radius: 33px; border-top-right-radius: 33px; border:2px solid #ddd; border-bottom:none; } a.jeonjin1:hover{ background: #fff; color:#333 !important; } @font-face { font-family:tt; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf'); } </style><center> <a class="jeonjin1" href="YOURLINKURL" title="titlehere">1</a> <a class="jeonjin1" href="YOURLINKURL" title="titlehere">2</a> <a class="jeonjin1" href="YOURLINKURL" title="titlehere">3</a> <a class="jeonjin1" href="YOURLINKURL" title="titlehere">4</a> <div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUU-JXRp79DQjbnlE3jroE_ifCNmKxywGE-t4vumc1zQrO8IRt9RH_Y2xjpF7mYAFWKgcnJz5LdKY87HCZiDb-RJO9PNstOYFkD7SpnFaUuRgZa2djuEw7uhpfsThOmbXtbljmHlO_s4h/s1600/tumblr_m0g3ybPmqj1r6uwfxo7_400.png);width:200px;height:5px;"> </div> </center>  

2. Apply the codes

For Blogger Template Designer user, you may put this navigation on your gadget section. Go to Home > Layout > Add a gadget > Choose HTML/Javascript > and paste the codes.  For blogskins/ Classic Template user, you may put the codes anywhere you wanted the navigation to be. Thank you :)

How to add navigation menu to your blog - Style 3

Hi guys! As requested, I will teach you on how to get the menu button of this style. This is the live preview of the button, you may hover your cursor over these menus to see the hover effect :)

option1
option2
option3
option4
To get this menu button, follow the instruction given below.

1. Edit the codes

To edit the codes, I recommend you to use http://htmledit.squarefree.com/ to edit while viewing the Live Preview immediately. The main codes that you need to change are - YOURLINKURL (Change this to your link url) & Option (Change this to your own menu title)

a.jeonjin1 { letter-spacing:1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; margin:1px; cursor:pointer; text-transform:uppercase; display:inline-block; text-align:center; background: #fff; width:95px; color:#888; padding:5px; border-left:20px solid #FFC6C6; border-right:20px solid #AFCCFF; text-decoration:none; } a.jeonjin1:hover{ border-left:20px solid #FF9393; border-right:20px solid #6BA2FF; } </style><center> <a class="jeonjin1" href="YOURLINKURL">option</a><br /> <a class="jeonjin1" href="YOURLINKURL">option</a><br /> <a class="jeonjin1" href="YOURLINKURL">option</a><br /> <a class="jeonjin1" href="YOURLINKURL">option</a></center>  

2. Apply the codes

For Blogger Template Designer user, you may put this navigation on your gadget section. Go to Home > Layout > Add a gadget > Choose HTML/Javascript > and paste the codes. 
For blogskins/ Classic Template user, you may put the codes anywhere you wanted the navigation to be.
Thank you :)

Add bias list to your blog - Style 2

Hi! Im back with the second version of bias list! Click here to view the live preview of this bias list. Don't forget to mouse-over the icon to see the fancy hover effect.

1. You will need to edit the codes first. For time saving and less effort, copy and paste the codes below to this website http://htmledit.squarefree.com/ and edit the codes there. You may edit the colors, and size. Don't forget to change YOURIMAGEURL to your own square images and change "Bias name" to your idol name.
<style> .icon2{ width:90px; border:5px solid #FFD7D7; box-shadow:2px 2px 5px #ccc;margin:5px;} #bias{position:absolute; margin-top:-60px;opacity:0; -webkit-transition:All 0.4s ease; -moz-transition:All 0.4s ease; -o-transition:All 0.4s ease; background:#fff; width:90px; text-align:center; color:#888; font-size:12px; letter-spacing:1px;} .icon2:hover #bias{margin-top:-40px;opacity:1} </style><table border="0" bordercolor="" style="background-color:" width="520" cellpadding="3" cellspacing="0"> <tr> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> </tr> <tr> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> <td><div class="icon2"> <img src="YOURIMAGEURL" width="90px"><div id="bias"> Bias Name</div> </div> </td> </tr> </table>

2. Once you have done editing, copy the whole edited code.
 3. For classic template, you may paste the codes anywhere in your blogskin codes. Specifically anywhere you wanted the bias list to appear.
 4. For Template designer, go to Home > Pages > New Pages > click HTML > and paste the codes > Save the page immediately, don't click Compose as it will corrupt your bias list.

How to add floating navigation to your blog - Style 3

Assalamualaikum and hi! Today I would like to teach you on how to add this cute floating navigation to your blog. Click here to view the live preview of the navigation. To get this navigation to your blog, simply follow these instructions.

1. If you are using classic template, paste the codes below under/before the codes </style>

2. If you are using template designer. paste the codes below into HTML/ Javascript (Home> Layout > Add a gadget)

<style> .raejun{ width:60px; padding:15px; margin-top:15px; box-shadow:2px 2px 4px #DFDFDF; background:#eee; font:8px tt; text-align:center; Text-decoration:none; color:#888; text-transform:uppercase; display:block; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; border-left:0px solid #000; -webkit-border-top-right-radius: 333px; -webkit-border-bottom-right-radius: 333px; -moz-border-radius-topright: 333px; -moz-border-radius-bottomright: 333px; border-top-right-radius: 333px; border-bottom-right-radius: 333px; } .raejun:hover{ width:66px; border-left:10px solid #aaa; } @font-face { font-family:tt !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } </style> <div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;"> <a class="raejun" href="LINK HERE">link 1</a> <a class="raejun" href="LINK HERE">link 2</a> <a class="raejun" href="LINK HERE">link 3</a> <a class="raejun" href="LINK HERE">link 4</a> </div>

How to add floating navigation to your blog - Style 2

Assalamualaikum and hi! Today I would like to teach you on how to add this cute floating navigation to your blog. Click here to view the live preview of the navigation. To get this navigation to your blog, simply follow these instructions.

1. If you are using classic template, paste the codes below under/before the codes </style>

2. If you are using template designer. paste the codes below into HTML/ Javascript (Home> Layout > Add a gadget)

<style> .raejun{ width:96px; padding:2px; margin-top:5px; box-shadow:2px 2px 4px #DFDFDF; background:#eee; font:8px tt; text-align:center; Text-decoration:none; color:#FF8888; text-transform:uppercase; display:block; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; border-left:0px solid #FF8888; } .raejun:hover{ width:66px; border-left:30px solid #FFBBBB; } @font-face { font-family:tt !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } </style> <div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"> </div> <div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"> </div> <div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;"> <div style="background:#FFBBBB;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;"> Navi</div> <img src="http://i.imgur.com/jninm.png" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" > <a class="raejun" href="LINK HERE">link 1</a> <a class="raejun" href="LINK HERE">link 2</a> <a class="raejun" href="LINK HERE">link 3</a> <a class="raejun" href="LINK HERE">link 4</a> </div>

How to style your post blockquote - Style 7

This is the live preview of blockquote style 7. Please hover this blockquote to see the hover effect. To use blockquote, highlight the text and click . To have this kind of blockquote in your blog, simply follow the instruction below.

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin> 

blockquote{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbgLk6PRZ3Kgp4LB71bhgxMuNbHF3VYl6akxv54SIsV7iyYHbqfaG5uemdTMb-RSswdoBt3rz_UI05cidNZ8tRLIjtUbSBXJpSP0u-A28f9ToXk0dcAoaLUDXPT-VJW-LU_ljooM3jhDl/s1600/tumblr_lxwynw0Pdg1r9g6hvo5_250.png); padding:20px; color:#808080; font:12 quote; letter-spacing:1px; margin-left:30px; margin-right:30px; border:3px solid #eee; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } blockquote:hover{ margin-left:0px; margin-right:60px; }

How to add Navigate-able box to your blog - Style 3

Assalamualaikum,coding ini khasnya dibuat untuk Simple Template, denim dan lain-lain template Designer. Navigate dia macam classic template/blogskins tapi untuk diletakkan di sidebar template designer ^^

Click here to see live preview

<center> <style> .babo{background:url(http://i.imgur.com/idEbA.png);padding:10px;border:3px solid #F2F4F2;text-align:center;color:#555} a.tablo{ -webkit-transition: all 0.3s ease-in-out; -moz-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; cursor:pointer;background:#F2F4F2; width:20px; text-decoration:none; border:3px solid #fff; color:#fff; box-shadow:1px 1px 3px #eee; border-radius:33px; display:inline-block; text-align:center; margin-left:5px; margin-right:5px; font:16px calibri; } a.tablo:hover{background:#F7E8DE;color:#fff;} #wnsb img{max-width:100%;} </style> <div class="babo"> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div> <div id="wnsb" style="color:#ccc; padding:15px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px; text-align:justify;"> Navigate around. Replace this with anything/your own words. </div> <div id="1" style="display: none;"> This navigation no.1 , remove this and replace with anything you want to be here. </div> <div id="2" style="display: none;"> You can also put cbox codes here. Just anything without messing the codes. </div> <div id="3" style="display: none;"> The third page </div> <div id="4" style="display: none;"> This forth page </div> </center>  

To have this kind of tab simply follow instructions below.

1. Copy and paste these codes to http://htmledit.squarefree.com/. In this website you may edit this tab the way you want, you may change the colors, the style, and the content of this tab box.
2. Once done, go to Home > Layout > Add a gadget > Pick HTML/Javascript
3. Paste the codes you have edited and save immediately. Do not click 'Rich Text' or else the codes will automatically corrupted. Goodluck! Any questions and problem you may comment down below or ask me on my Ask.fm.