How to have your own custom cursor on link hover

28 / 07 / 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;

»
«
»
«
[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
»
«
»
«
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. 

»
«
»
«

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

  1. 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;
    }

    »
    «
    »
    «

    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 🙂
    »
    «
    »
    «
    Template designer/ Simple Template
    Assalamualaikum,
    tutorial ini adalah untuk buang/hilangkan/ghaibkan Subscribe to: posts (Atom) yang agak mengganggu mata.
    1. Blogger dashboard > Template > Edit HTML
    2. Klik didalam kotak HTML tu dulu, kemudian tekan CTRL+F untuk cari code ini :

    3. padam code tersebut dan save.
    wasalam 🙂 
    »
    «
    »
    «
    WANA, TWENTY ONE
    The girl on the left telling you to have a happy reading!

    + JOIN THIS SITE

    Footsteps

    My Bloglist

    Sponsor



    © 2011-2017 WANASEOBY.COM