Search Results for: label/Blog Tricks

Enjoy 🙂
Guys! and don’t forget to post your comments. � MyTricksTime.com

So now its very easy to add custom fonts to your blogger blog and it doesn’t effect the loading time of your blog too.I will tell you two API to add custom fonts.Use the one where you like the font style to be used in your blog.

1.Google API (Best method to add fonts but as now font styles are very limited here will be more added soon by google.)

2.Kernest API (Its also an good API but with good collection of fonts.You also can use it for sure.)

Installation Steps For Custom Fonts From Google API

1. Go To Google API.You will see Fonts Written Like Below.

2.Just Hover your mouse over the font you like and you will see link click to embed font name.Just click the link or font only you liked.

3.Now you will be shown the get the code button and the the demo of how your font looks in different sizes.

4.Now just click the get the code button and you will be given the code like below.

5.Just copy the code from there.
Codes are like below.

6.Now Just go to blogger Layout > Edit Html > Press CTRL+F and find for </head> tag.

7.Now Just place the codes you just copied from google api before this </head> tag.And now you are done to place the font codes succesfully.

Now comes the part to define font in your css to which titles or post body you want to show that font.As to define font you need to know some css codes about your templates, to know which css property defining your particular font style.

Like you want to define this font for your header title, now you need to know in which css part of your template, the font -family for your header has been defined.As now most bloggers are using custom templates, so css for each of you is different.Its difficult for me to tell for each, which css you use for header title and which for sidebar titles.So i will just tell you the basic css style you need to add in your template considering the default codes the blogger template use.

Please dont forget to change the FontName with your custom font name,you using in the script,that you placed in blogger html. 

Now just important thing to implement is :-
1.To which place in your template you want to use custom font.
2.After it,just need to find the css property defining that part in your template.
3.After finding it,just define the font-family in its css like i have shown above.

And here i complete an easy installation with custom fonts from google api.

If you want to use multiple fonts or wanna style them with bold or italic.You can go furher here to read on how to do that.Just you have to make small changes in codes you get.As you will come to know after reading.

Installation Steps For Custom Fonts From Kernest API

1.Just Go To Kernest.com

2.Now you will see page like below.You will get an option to search for fonts.Either you can do by writting font and hit enter or by browsing them with tags like popular fonts or latest fonts or from any designers.

3.After selecting font you like, will see domain embed url.Just click it.

4.Pop up window will open like below and just type your blog url and hit add.

6.Now below the font you will see the codes to be placed in blogger i.e to left of domain embed url.Just copy those codes to your notepad.The codes look like below.

You just need to took the red codes and place them before the </head> tag as you did for google api fonts.

7.Now again you need to define the font style css.Its all same way you have to do as i told above for Google API Fonts in step 7.

I hope now you would have no problem in installing custom fonts for blogger.If you still feel any problem, just leave your comment below i will see over it and will try to solve your problems.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven’t such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Just below that add the following group of codes:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’spinning_icons’>
<a class=’twitter’ expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’http://twitter.com/share’ rel=’nofollow’ target=’_blank’ title=’Twitter’>Twitter</a>
<a class=’delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Delicious’>Delicious</a>
<a class=’digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Digg’>Digg</a>
<a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Facebook’>Facebook</a>
<a class=’stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Stumbleupon’>Stumbleupon</a>
<a class=’rss’ href=’http://feeds.feedburner.com/hacktutors‘ target=’_blank’ title=’RSS’>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url(‘http://4.bp.blogspot.com/-KxcARTmAlQI/TwCDycGOXVI/AAAAAAAABis/rBrMzmoyN6c/s1600/twitter_32.png’); }
.delicious{ background:url(‘http://4.bp.blogspot.com/-82J7zeYp1s8/TwCEN_HoAhI/AAAAAAAABkQ/t1wtld8lNA4/s1600/delicious_32.png’); }
.digg{ background:url(‘http://1.bp.blogspot.com/-MtS4dU0fY4A/TwCENEQUQvI/AAAAAAAABkE/glAaVSTKJDM/s1600/digg_32.png’); }
.facebook{ background:url(‘http://4.bp.blogspot.com/-Sxhuf0CW8OY/TwCEMpoaq0I/AAAAAAAABkA/PfhoKDMBcBQ/s1600/facebook_32.png’); }
.rss{ background:url(‘http://4.bp.blogspot.com/-Q5bYfx3dD2g/TwCEKQfYMQI/AAAAAAAABjw/XrXOvdFeZZs/s1600/rss_32.png’); }
.stumbleupon{ background:url(‘http://3.bp.blogspot.com/-hwn17i1SLNU/TwCEJNfyIWI/AAAAAAAABjo/TBb8oc2KHGs/s1600/stumbleupon_32.png’); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com