WANASEOBY: July 2012

7/28/2012

How to have your own custom cursor on link hover

7/28/2012

1.Template designer;paste the codes in HTML/GADGET

<style type="text/css"> a:hover {cursor: url(URL CURSOR), progress;} </style>

2.Blogskin; paste the codes under a:hover { , don't forget to remove any cursor codes there.

cursor: url(URL CURSOR), progress;

How to add cute sliding box to your blog

[View Demo Here ]

<style text="css">
.da {
position:absolute;
top:100px;
width:200px;
left:-230;background: url("http://i122.photobucket.com/albums/o260/mhilka/minigifs/balaozinho40.gif") no-repeat scroll right top transparent ;
padding: 10px 60px 10px 10px;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
}
.da:hover {
position:absolute;
top:100px;
left:0;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
}
.ba {
border:1px solid #eee;
width:100%;
padding:5px;}
</style>
<div class="da">
<div class="ba">
Your cbox codes / anything</div>
</div>
</div>
</div>

blogskin : paste the codes anywhere after <body>
Template designer : paste into HTML/GADGET

How to use transparent header on simple template

In this entry, I will teach you on how to edit your Simple Template until you are able to get a clear transparent background in order to use a transparent header.

This is the original style of Simple Template, now what we want to do is remove the white background behind the header (only) so that the header is see-through.

1. Before starting, I recommend you guys to backup your template first so that any mistakes can be recovered.

2.Search for .content-inner {

3. Now look at this codes under/after .content-inner { and delete them.

$(content.background.color.selector) {
background-color: $(content.background.color);

Upon saving, your blog will look like this, now we gonna add background on the body of the blog.

4. Now search for .main-inner {.
5. Copy this codes and paste it under/after .main-inner {.

Background: #ffffff;

Save and tadaaaaaaaa. Now you can have the transparent header look. Goodluck in trying and I will update on how to make your header center. Thank you for reading.

How to style link hover - Style 3 & 4

Assalamualaikum,
Harini nak bagi code untuk link hover. Cara guna :

Semua template boleh guna, cari code yang berkaitan dengan link, padam code tu dan gantikan dengan code bawah ni. (Code berkaitan dengan link: a:hover,a:visited , a:hover , a:link)

Type 1

I feel like I'm under a spell

a:link,a:visited{
text-decoration:none;
color:#aaa;-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;
}
a:hover{
color:#fff;
background:#111;
}

Type 2

I feel like I'm under a spell

a:link,a:visited{
text-decoration:none;'
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
border-bottom:2px solid transparent;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#aaa;
}
a:hover{
border-bottom:2px solid #FF6C6C;
}

How to remove your blog link on header

Hi, this tutorial is requested as she hate having the link hover style affected her blog's header. I don't recommend this as I think the header is the best way for readers to back to "Home"but it's fine as long as you have the "Home" button in your blog to ease your user to click around.

This is the setting of the blog header.

1. The first step is go to Template and then click Edit HTML.

2. Search for this codes:

<a expr:href='data:blog.homepageUrl' style='display: block'>

3. Once you have found that codes, delete it.

4. Now look for </a> two lines under the previous codes, delete it too.

the location of </a>

5. Save.

Goodluck :)

How to remove Subscribe to: Posts (Atom)'

Template designer/ Simple Template

Assalamualaikum,

tutorial ini adalah untuk buang/hilangkan/ghaibkan Subscribe to: posts (Atom) yang agak mengganggu mata.

Blogger dashboard > Template > Edit HTML
Klik didalam kotak HTML tu dulu, kemudian tekan CTRL+F untuk cari code ini :
<b:include data='feedLinks' name='feedLinksBody'/>
padam code tersebut dan save.

wasalam :)

7/11/2012

How to add Floating Navigation to your blog - Style 4

7/11/2012

Assalamualaikum and hi! In this entry I would like to post another style of floating navigation on the side of your blog. Floating mean sticking navigation and I added special effect to this cutie. Click the Live Preview to see how it works!

Live preview

To apply this thing to your blog, edit the code in http://htmledit.squarefree.com/ - To customize the colors, link, and purpose. Then paste the codes in your HTML/Javascript gadget. For classic template, paste the code under </style>

<style>
a.you{
width:13px;
display:inline-block;
color:#fff;
text-align:left;
padding:2px;
overflow:hidden;
height:18px;
text-decoration:none;
padding-left:7px;
-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;
font-family:calibri;
margin:5px;
font-size:12px;
border-radius:333px;
}

a.you:hover{
width:80px;
{
</style><br />
<br />
<div style="position:fixed; top:200px;left:20px;">
<br />
<a class="you" style="background:#FF8888;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>facebook</a><br />
<br />
<a class="you" style="background:#FFBBBB;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>twitter</a><br />
<br />
<a class="you" style="background:#9BF1D2;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>fanfiction</a><br />
<br />
<a class="you" style="background:#5EDFC9;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>tumblr</a><br />
<br />
</div>

Thanks for reading :)