How to add Floating Navigation to your blog - Style 5

     

Hi! Assalamualaikum. Today I will teach you on how to get this floating navigation. This is the fifth idea of the floating navigation. To browse other version of floating navigation that I have posted, please find the link on my tutorial list.

For classic template, copy and paste this code under/after the </style> in your blog theme code. For Blogger Template Designer users, copy this code and go to home > Layout > Add a gadget> HTML/Javascript > Paste the code on the HTML area.

<style> .kev{ width:15px; display:inline-block; position:fixed; color:#000; text-align:center; text-decoration:none; padding-top:70px; font-family:tt; -webkit-border-bottom-right-radius: 55px; -webkit-border-bottom-left-radius: 55px; -moz-border-radius-bottomright: 55px; -moz-border-radius-bottomleft: 55px; border-bottom-right-radius: 55px; border-bottom-left-radius: 55px; font-size:8px; } #ones{ background:#FFD8D6; height:200px; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; top:0px; left:20px;} #ones:hover{ height:250px;} #twos{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background:#FF8585; height:250px; top:0px; left:46px;} #twos:hover{ height:300px;} #tris{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background:#CCC2C2; height:100px; top:0px; left:71px;} #tris:hover{ height:150px;} @font-face { font-family:tt; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf'); } </style> <a class="kev" id="ones" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>1<br/></a> <a class="kev" id="twos" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>2<br/></a> <a class="kev" id="tris" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>3<br/></a>

As requested, this is the horizontal version of the navigation.

<style> .kev{ height:11px; display:inline-block; position:fixed; color:#000; text-align:center; text-decoration:none; padding-left:70px; padding-top:3px; font-family:tt;-webkit-border-top-right-radius: 55px; -webkit-border-bottom-right-radius: 55px; -moz-border-radius-topright: 55px; -moz-border-radius-bottomright: 55px; border-top-right-radius: 55px; border-bottom-right-radius: 55px; font-size:8px; } #ones{ background:#FFD8D6; width:200px; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; left:0px; top:20px;} #ones:hover{ width:250px;} #twos{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background:#FF8585; width:250px; left:0px; top:46px;} #twos:hover{ width:300px;} #tris{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background:#CCC2C2; width:100px; left:0px; top:71px;} #tris:hover{ width:150px;} @font-face { font-family:tt; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf'); } </style> <a class="kev" id="ones" href="LINK">LINK 1</a> <a class="kev" id="twos" href="LINK">LINK 2</a> <a class="kev" id="tris" href="LINK">LINK3</a>

How to have tutorial list like mine!

Assalamualaikum and hi everyone! Today I will like to give you my Tutorial List codes that I am currently using right now. Click here to see the live preview of the tutorial list. The Live Preview is not a real one because I didn't provide the real text and real link. However, you will get the idea of the list by seeing the Live Preview.

To get this list codes, copy the codes down here and paste it on http://htmledit.squarefree.com/ and edit it there! Honestly I need to remind you this is the easiest way to edit codes.

<style type="text/css"> a.listeu{ text-align:left; color:#000; background:url(http://media.tumblr.com/63ac3bd73106fb137241a615541a45e5/tumblr_inline_mjs1cjx50n1qdlkyg.gif); background-position:0px 4px; background-repeat:no-repeat; background-size:13px; padding-left:18px; line-height:22px; text-decoration:none; width:46%; margin:0.1%; margin-right:0.1%px; display:inline-block; } </style> <div style="width:100%;"> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> <a href="LINK" class="listeu">Tutorial: </a> </div>
Replace LINK with your tutorial link and replace Tutorial: with your own tutorial titles. 
To apply this codes, go to your tutorial page, and paste the codes on the HTML side, preview it and save! For Classic Template just paste the codes to where you wanted the tutorial list to be.

Unprivate + New Look