WANASEOBY: HTML & Design

Showing posts with label HTML & Design. Show all posts

3/01/2014

How to disable right click on your blog

3/01/2014

Assalamualaikum and hi. This tutorial was requested. This tutorial is on how to not let people right click on your blog. This action will prevent copycat from opening your page source. Talking about page source...why don't we just let them be because actually there are many other ways to open page source even if you disable the right click.

However, if you still intended to disable right click, follow the following steps. Oh! I want to tell you that both Classic Template and Blogger Template Designer can use this method.

1. For Classic template, go to Home > Template > Edit Template HTML
1. For Template Designer, go to Home > Template
2. Search for <body> in your HTML context box
3. Now, replace the codes you have found earlier to this:

<body oncontextmenu='return false;'/>

4. Save and try to right click on your blog! :)

1/08/2014

Image style by using various border-radius trick!

1/08/2014

gambar contoh asal - not mine

	<img src="IMAGE URL" width="200" style="-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; " />
	<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;" />
	<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 50%; -moz-border-radius-bottomright: 0;border-radius: 50%; border-bottom-right-radius: 0;" />
	<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-top-right-radius: 0; -moz-border-radius: 50%; -moz-border-radius-topright: 0; border-radius: 50%; border-top-right-radius: 0;" />
	<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-top-left-radius: 0; -moz-border-radius: 50%; -moz-border-radius-topleft: 0; border-radius: 50%; border-top-left-radius: 0;" />

1/04/2014

Comment box Styling for Denim Template

1/04/2014

Assalamualaikum,

Haritu den buat yang simple template kan? Harini untuk denim pulak, tak berapa reti denim tapi akhirnya jadi jugak. Tapi lain sikit lah. Ekceli taknak buat tuto denim tapi ramai jugak yang tanya so saya buatlah :)

Pergi ke Blogger Dashboard > Template > Edit HTML
Cari code /* Footer
Paste codes yang saya bagi ni dekat ATAS /* Footer tadi.

.comment-body p{
background:#FFE2E2;
padding:13px;
border-radius:30px;
color:#666;}

h4{
background:#D1F4FE;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;}


@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}

.comment-body{
background:#FEF3F3; 
padding:10px;
border-radius:30px;
border:3px dashed #FEE8E8;
margin-bottom:40px;}

.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;}


.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}

.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}


.comment-timestamp{
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:-50px;
border:2px solid #FEE8E8;}

Warna text, background semua pandai-pandai lah ubah eh ^-^
Kalau dah siap, Preview . Save

Masa saya buat ni, saya pilih setting comment pop out window, so kalau yang lain tak jadi bagitau lah ye.

Wasalam.

12/31/2013

Everything about border for newbies

12/31/2013

Assalamualaikum,

So yea saya buat benda ni sebab saya selalu post code tanpa terangkan apa yang boleh diubah. Perangai seperti ni tak ubah seperti ~~cikgu akaun~~ saya pada tahun lepas, hampeh tak faham. Mungkin ada yang tak tahu kan? Tapi takpe, meh belajar. Ni ikut apa yang saya tau jelah, banyak sangat yang saya tak tau , maaf T_T (so den buat research sikit)

property border:

ketebalan :

jenis border:

Jenis dia ada banyak, boleh rujuk bawah ni :

dotted

dashed

solid

double ( 3px keatas )

groove ( 3px keatas )

ridge ( 3px keatas )

inset

outset

warna border :

Code warna, boleh ambik dari sini -> http://hexcolorgenerator.com/

border-width, border-style dan border-color

Property Border:1px solid #000000; dekat atas ni sebenarnya combinasi code border-width, border-style dan border-color. Kalau nak guna property border-width, border-style dan border-color dalam css pun boleh, tapi ketiga-tiga property kena letak.

contoh :

border-width:10px;
border-color:#FFBBBB;
border-style:solid;

Yang bestnye guna property border-style ni, kita boleh guna sampai empat style !

border-style: solid dotted;

border-style: (atas dan bawah) (kiri dan kanan);

border-style: solid dotted dashed;

border-style: (atas) (kiri dan kanan) (bawah);

border-style: solid dotted dashed groove ;

border-style: (atas) (kanan) (bawah) (kiri) ;

Border-color pun, boleh guna sampai empat warna.

border-color:#FFBBBB #DACBEF;

border-color: (atas dan bawah) (kiri dan kanan);

border-color:#FFBBBB #DACBEF #F1EBC8;

border-color: (atas) (kiri dan kanan)(bawah) ;

border-color:#FFBBBB #DACBEF #F1EBC8 #C8E9F1;

border-color: (atas) (kanan) (bawah) (kiri) ;

Sorry kalau tak faham sebab saya selalu syok sendiri. Hihi. Sebarang soalan, boleh komen :) Wasalam

Mohon jangan repost tanpa kebenaran.

rujukan rujukan

12/30/2013

How to have tutorial list like mine! - Style 2

12/30/2013

Click here to see the live preview.

Please click the Live Preview because this tutorial list have a special hover effect.

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>
a.yejuny{
background:url(http://media.tumblr.com/63ac3bd73106fb137241a615541a45e5/tumblr_inline_mjs1cjx50n1qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
background-position:left;
padding-left:25px;
color:#444;
margin-bottom:2px;
font:12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
display:block;
line-height:18px;
}


a.yejuny:hover{
background:url(http://media.tumblr.com/tumblr_m46ltvcl341qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
}

.tuto-title{
background:url(http://i.imgur.com/5OiU9JI.png);
text-align:right;
padding:5px;
padding-right:20px;
margin-bottom:10px;
color:#888;
text-transform:uppercase;
font:12px arial;
border:1px solid #eee;
}

</style>
<table style="width:700">
<tr><td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
</td>


<td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
</td>
</tr>
</table>

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.

12/28/2013

How to add navigate-able box to your blog - Style 4

12/28/2013

Click here to see live preview. 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.

<style>

a.mid{
background:#A2C898;
width:55px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #A2C898;
cursor:pointer;
}

a.mid:hover{
background:#FFffff;
border:1px solid #A2C898;
color:#A2C898;
}

 </style>
<div style="width:250px;">


<center>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div id="wnsb" style="margin-top:5px;width:230px; padding:10px; border:1px dashed #ddd;">
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;">
This navigation no.3
</div>
<div id="4" style="display: none;">
This navigation no.4
</div>
</div>

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.

12/25/2013

Add blogger Archive For Classic Template /Blogskins - Style 2

12/25/2013

Assalamualaikum, thank you for requesting this tutorial. I am currently using this blog archive style. If you touch the title, you will see a special hover effect! I am sorry that I don't provide live preview this time.

1. Go to Dashboard > Template > Template HTML

2. Paste this code before/above </style>

.archive{
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background:url(http://media.tumblr.com/42b2c7e69bebab576f091f5f3bc48841/tumblr_inline_mmzqosgOj11qz4rgp.gif);  
border-bottom:1px solid #efefef; 
background-size:15px; 
background-repeat:no-repeat;
padding:5px; 
padding-left:20px; 
background-position:left;

}

.archive:hover{ background:url(http://media.tumblr.com/3fcccb540252361088d42c65c504499d/tumblr_inline_mmzqorHMLi1qz4rgp.gif);
background-size:12px; 
background-repeat:no-repeat; 
padding-left:37px; 
background-position:left;
}

3. Then, paste this code in your sidebar section code.

<div style="text-align:left; padding:10px; border-radius:0px; height:200px; overflow-x:hidden; overflow-y:Scroll; border:1px dashed #ddd;margin-top:20px;">
<bloggerpreviousitems>
<a  href="<$BlogItemPermalinkURL$>">
<div class="archive">
<$BlogPreviousItemTitle$></div>
</a></BloggerPreviousItems></div>

4. Now you are done! :)

12/23/2013

How to download and Install fonts to your windows.

12/23/2013

Assalamualaikum, someone asked me where did I get all the fancy fonts in my laptop. You can install various fonts but make sure that you are aware of the font owner's regulation. Some allow you to use the font for personal use only, it means that you will need to pay or buy the font if you want to use it for commercial purposes. Some allow you to use for personal and also commercial use. Just a simple reminder from me.

Okay, let's start downloading the font!

1. The first step, click this link - Dafont and browse your favorite fonts in here. I am very sure you will favor a lot of fonts here.
2. Once you have chosen the font, click Download. Downloading will only take 1-5 seconds depending on your connection. One thing for sure, font files are not really big so you don't have to worry.

3. Once you have done downloading, click on the download file arrow and click "Show in folder" to be redirected to it file location.

4. Now right click the font zip file and extract the file by clicking "extract files"

5. Once you have done extract the file, you will see the direct font file. If you can't find it, try to find a folder with related font name. It must be there!

6. Now right-click the font file, click Install.

7. You will see a pop out window stating "Installing font" and the process will take about 3-5 seconds only. Now you have your favorite font in your windows!

12/22/2013

How to style your sidebar or post title - Style 2

12/22/2013

Hi. Today I'm gonna update the second version of "How to style your sidebar or post title"! This time I added a hover effect to the title. I use kawaii polkadot background but you can always change the bakground to suit your blog style!

Click here to see the live preview.

To apply this style to your post and sidebar title, follow the following steps. The steps seem complicated but trust me, it is easy. Just follow the steps carefully so that you won't messed up your blog!

For Post title

1. Go to Dashboard > Template >Edit HTML

2. Click in the HTML box > and press CTRL + F to search code.
3. Paste this code under <head>

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"/>

4. Then, search for h3.post-title.

4. You will immediately directed to this code: Don't worry if the codes inside the { and } look different than yours because you might have followed other styling tutorial before. I am using the original and untouched white simple template from Blogger.

5. Remove the codes I highlighted, and replace them with this:

h3.post-title, .comments h4 {
background:url(http://i.imgur.com/5OiU9JI.png); 
padding:10px;
font-family: 'Josefin Sans', sans-serif;
color:#888888;
line-height:20px;
font-size:20px;
text-align:center;
font-weight:normal;
border:1px solid  #E7F1F9;
border-bottom:5px solid #E7F1F9;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
letter-spacing:1px;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; 
}


h3.post-title a{
color:#888888;
}

h3.post-title a:hover,.comments h4:hover{
letter-spacing:10px;}

6. You are done!

For Sidebar Title

1. Search for div.widget > h2 and you will find something like this.

2. Just as the Post title, remove the whole codes that I have highlighted and replace the codes with this:

.widget h2{
background:url(http://i.imgur.com/5OiU9JI.png); 
padding:10px;
font-family: 'Josefin Sans', sans-serif;
color:#888888;
line-height:20px;
font-size:20px;
text-align:center;
font-weight:normal;
border:1px solid  #E7F1F9;
border-bottom:5px solid #E7F1F9;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
letter-spacing:1px;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
}

.widget h2:hover{
letter-spacing:10px;
}

3.Now you are done!

Thank you for reading :)

12/16/2013

Add grain background to your blog main body

12/16/2013

This is also a quick update. This tutorial was requested by a person on my Ask.fm. Thank you for asking!

To get this grain background on your blog's main body, follow this simple steps!

1. Go to Dashboard> Template> Edit HTML

2. Search for ]]></b:skin> and paste this code ABOVE/BEFORE it.

.post-body,.content-inner {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBnTl-3vzPqWE_R_OxB2686MRB74ALO2Yc4jBZYiKvcStSX9wUgnTxPBw_DvMr2SIIwGX4VskSCS_8G2Cy8eoArVaFqgy4oGQGBcMCvkF3-XSjKf8bmHKXYSxDDJeHqRNpuJXdCJoAvE_/s1600/bodybg.gif);}

3. Save template and you are done!

10/03/2013

How to make your blog archive in a scrollbox

10/03/2013

Assalamualaikum, this is a tutorial for Template designer. This is how your blog archive will look like in a scroll box.

1. You need to make sure that you have a blog archive gadget on your blog! To add blog archive gadget, go to Dashboard > Layout > Add A Gadget > Blog Archive
2. After that make sure you have refreshed the page and go to Template.
3. Click on the HTML box and press CTRL+F to search,

4. Search for <div id='ArchiveList'> and paste this code UNDER/BEFORE it.

<div class="widget-content" style="background-size: 360px; background: #fff; border-radius: 10px; border: 1px dashed #ccc; color: #777777; height: 190px; opacity: 0.9; overflow-x: hidden; overflow-y: scroll; padding: 5px; text-align: left; width: 100%;">

8. Now search for </b:includable> , and put a </div> don the TOP of it.

Now your template code will be like this:

9. Now you are done!

9/27/2013

Free Ask.fm Button

9/27/2013

This tutorial was requested by someone on Ask.fm. This is a quick update as the steps are really easy. To get this button, change "LINK ASK.FM" to your Ask.fm profile link - here is the example of the link http://ask.fm/wnsby

<a href="LINK ASK.FM"> <img src="http://i.imgur.com/ViZLyNx.png" style="width:200"></a>

<a href="LINK ASK.FM"> <img src="http://i.imgur.com/eognNeV.png" style="width:200"></a>

<a href="LINK ASK.FM"> <img src="http://i.imgur.com/Z4Zt93i.png" style="width:200"></a>

<a href="LINK ASK.FM"> <img src="http://i.imgur.com/zTIcq0f.png" style="width:200"></a>

<a href="LINK ASK.FM"> <img src="http://i.imgur.com/9iHDDTf.png" style="width:200"></a>

Thank you for reading! :)

8/03/2013

How to add Navigation Menu - Style 7

8/03/2013

To see the live preview of this button, click here!

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 type="text/css">
.nav9{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
width:70px;
padding:8px;
margin:2px;
font:10px arial; 
letter-spacing:1px;
text-align:center;
Text-decoration:none;
background:#f7f7f7;
color:#444444;
text-transform:uppercase;
display:inline-block;
border:4px solid #fff;
box-shadow:0px 0px 0px 1px #eee;
}

.nav9:hover{transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;-webkit-transform: rotate(360deg) scale(0.2);
-moz-transform: rotate(360deg) scale(0.2);
-o-transform: rotate(360deg) scale(0.2)
}</style>

<a class="nav9"  href="LINK HERE">title here</a>
<a class="nav9" href="LINK HERE">title here</a>
<a class="nav9"  href="LINK HERE">title here</a>
<a class="nav9" href="LINK HERE">title here</a>
<a class="nav9"  href="LINK HERE">title here</a>
<a class="nav9" href="LINK HERE">title here</a>

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 :)

6/21/2013

How to style your sidebar or post title - Style 1

6/21/2013

Hi guys, starting from today I will update one by one post or sidebar title just for you guys! You can send a request to me on what style you want me to make for the next tutorial. As for Style 1, I make a very simple post and sidebar title style which will suit those with a minimalist theme! You may edit them to your own style too.

Click here to see the live preview.

For Post title

1. Go to Dashboard > Template >Edit HTML

2. Click in the HTML box > and press CTRL + F to search code.
3. Paste this code under <head>

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"/>

4. Then, search for h3.post-title.

5. Remove the codes I highlighted, and replace them with this:

h3.post-title, .comments h4 {
font-family: 'Josefin Sans', sans-serif;
font-size:20px;
color:#888888;
border-bottom:1px dashed #DFDAFC;
letter-spacing:2px;
font-family: 'Josefin Sans', sans-serif;
padding:5px;
font-weight:normal;
text-align:center;}
}


h3.post-title a{
color:#888888;
}

6. You are done!

For Sidebar Title

1. Search for div.widget > h2 and you will find something like this.

2. Just as the Post title, remove the whole codes that I have highlighted and replace the codes with this:

.widget h2{
font-family: 'Josefin Sans', sans-serif;
font-size:20px;
color:#888888;
border-bottom:1px dashed #DFDAFC;
letter-spacing:2px;
font-family: 'Josefin Sans', sans-serif;
padding:5px;
font-weight:normal;
text-align:center;}

3.Now you are done!

Thank you for reading :)

6/02/2013

How to remove attribution (Powered by Blogger) on your template designer

6/02/2013

Assalamualaikum and hi, this tutorial is to remove the attribution. Blogger refrains people from remove "Powered by Blogger" because this widget is locked. You can either unlock the widget or just remove the attribution codes. As I think removing the code would be better and easier, I'll only show you how to remove the code.

Dashboard > Template > Edit HTML

Click "Jump To Widget"

Click Attribution1

You will be redirected to this code:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
</b:section>

Delete all of them and save.

5/31/2013

How to add Sticky Navigation Bar to your Blog - Style 3

5/31/2013

Straight to the point, click this link to see the live preview of the navigation bar -> Click here.

For classic template, paste the code below under </style>

For blogger template designer, paste the code in add HTML/Javascript area.

<style type="text/css">
.floating-navi{
width:100%;
background:#dddddd;
position:fixed;
top:0px;
left:0px;
height:20px;
}

.floating-navi-box{width:100%;
position:fixed;
text-align:center;
top:20px;
left:0px;
height:20px;
}

a.floating-navi-menu{
background:#f3e1e1;
text-decoration:none;
color:#777777;border-top:none;
padding:5px;
font:11px arial;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:60px;
}

a.floating-navi-menu:hover{
background:#dcdcf2;
color:#000;
}
</style>

<div class="floating-navi-box">
<a class="floating-navi-menu" href="LINK">ABOUT</a>
<a class="floating-navi-menu" href="LINK">TUTO</a>
<a class="floating-navi-menu" href="LINK">LINKIES</a>
<a class="floating-navi-menu" href="LINK">FREEBIES</a>
<a class="floating-navi-menu" href="http://www.blogger.com/follow-blog.g?blogID=YOURBLOGID">FOLLOW</a></div>
<div class="floating-navi">
</div>

4/23/2013

How to add Floating Navigation to your blog - Style 5

4/23/2013

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>

4/21/2013

How to have tutorial list like mine!

4/21/2013

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>

1/05/2013

How to add Navigation Menu to your blog - Style 7

1/05/2013

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 :)

link 1 link 2 link 3 link 4
To get this menu button, follow the instruction given below.

1. Edit the codes

<style>
.kevo{
background:#A2C898;
width:50px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #A2C898;
text-decoration:none;
}

.kevo:hover{
background:#FFffff;
border:1px solid #A2C898;
color:#A2C898;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>

<a class="kevo" href="YOURLINKURL">titlehere</a>
<a class="kevo" href="YOURLINKURL">titlehere</a>
<a class="kevo" href="YOURLINKURL">titlehere</a>
<a class="kevo" href="YOURLINKURL">titlehere</a>

2. Apply the codes

12/23/2012

Add Image border to your blog post image

12/23/2012

This tutorial was requested by someone. This is the live preview of the image. Not all images in your blog will have border, just images in your entry.

Go to Home > Template > Edit HTML > Search for ]]></b:skin>
Paste the codes given above/before ]]></b:skin>

.post-body img{
padding:4px;
border:1px solid #ddd}

Thank you for reading :)