Search Results for: label/Blogger Templates

Add Attractive Animated CSS Buttons For Blogger

Today i m gonna explain how to add css3 stylish animated buttons for your blogger. you can use this buttons as download buttons, demo buttons, redirect to other page and etc.I m using CSS and HTML for this. you can use this button code in to your blogger post too.Check my earlier post about Button
codes here.

1. Log in to blogger account and Click drop down.

2. Now select “Template” Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button”

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

7. Go to blogger and click Layout

8. Click Add Gadget and select ‘HTML/Javascript

9. Paste below code.

(You can use this code anywhere in your post.)

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

Replace with your links.

10. Now save your HTML/Javascript‘.you are done…
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

How To Create Drop Caps (Big First Letters) In Blogger/Blogspot

Here’s another way you can customize your Blog. In this case, your Posts and Comment’s first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let’s start adding it!

Read Also : A Simple Related Posts Widget For Blogger

Big First Letter for your Blogger / Blogspot Posts

DEMO BELOW

Step 1.

If you are using the old Blogger interface:

Go to Dashboard – Design – Edit HTML – Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard – Template – Edit HTML – Proceed – Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3. Just above it, add the following:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Customize:

Color – change the color highlighted in blue with the value of your desired color
Size – to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

<div class=’capital’><data:post.body/></div>

Step 6. Save your template.

Important! If the above code is not working, add one of following codes from this example:

<p class=”capital”><data:post.body/></p>

<span class=”capital”><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

DEMO BELOW

Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the “Expand Widget Templates” box

Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class=”capital”><data:comment.body/></p>

Step 6. Save your Template.

That’s it! Now you have a cool drop cap first letter on your blog.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Why I Love Blogger | New Dynamic View Launched

The first good thing about Blogger it’s free, it’s easy to use, It’s secure then any other service, and you no need to think about new ideas and gadgets. Google always work on them. After i started on blogger they released template designer, recent post gadget, popular post, and total visits gadget. After some days the awesome feature stats released. Comment moderation and Mobile view, and now blogger has released dynamic view.

Although these views are not available for HackTheWorld without pawan’s permission but as soon as he will be free , we will try to try…..

Blogger currently offers five dynamic views for its public blogs. These views are only accessible if allowed for by the blog author.
Flipcard: available at [blogURL]/view/flipcard
Mosaic: available at [blogURL]/view/mosaic
Sidebar: available at [blogURL]/view/sidebar
Snapshot: available at [blogURL]/view/snapshot
Timeslide: available at [blogURL]/view/timeslide

As an example, the URL for accessing the Sidebar view for Blogger Buzz would be http://buzz.blogspot.com/view/sidebar.

These views require modern browsers such as Internet Explorer 8+, Firefox 3.5+, Chrome or Safari. Many elements of these views will not work should you have an older browser.

In all views, search is available in the upper right hand corner. Clicking on the “>” arrow in the very top left of the header bar will slide the header bar across and allow you to choose different views for the current blog as well as type in a new blog URL.

Flipcard

Mouse over any of the cards to see the post title and comment count. As you scroll down, additional posts will continue to load.

Click on a card to see the post in full view. You can navigate through the posts using J (older post) and K (newer post) or the arrow keys. Hit escape or click Back to all posts to return to the Flipcard view.
In the upper left, click to sort by Date, Author and Category.

Mosaic

Clicking on an individual tile will expand that post to the full width of the view, and clicking again will collapse the post back into its original position.
The exact position of the tiles is randomly determined each time the blog loads, but they will appear chronologically from top left to bottom right.
Once a tile is expanded, you can page down by using the “up” and “down” arrow keys as well as J and K.
This view is optimized for the tablet viewing, and supports screen rotation.

Sidebar

Optimized for quick reading and browsing.
Left sidebar is list of chronological posts, with comment counts and thumbnails for individual posts.
J and K arrow keys will navigate through the posts, and comments can be displayed on the same page by clicking the Show link.

Snapshot

This view will display only the posts which have images.
Clicking through any photo will display the full post page, with naviagtion links at the bottom for Newer and Older posts
Mousing over any photo will display a post snippet

Timeslide

This view breaks the blog content down into three different areas:
- Left column: Enlarged picture with a post snippet, title, and snipppet displayed in chronological order
- Middle column: Displays just the post title and snippet
- Right column: Displays just the individual post titles
When searching for posts in this view, the results will be highlighted

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

Costom Fonts For Blogger

Hi friends as this is my first tutorial on MyTricksTime.com from a long time, as i have been giving you a lot of templates for your blog from past few months.And thanx to you all for appreciating and using my templates.But From now i would be making tutorials for you as well with templates.So tutorial for you today is about adding the custom fonts to your blogger blog, for its post titles or for post body.As before also it was possible to add custom fonts to blogger using cufon, but it was bit complicated and difficult to do so in blogger and it also increased the loading time for our blog.

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.

<link href=’http://fonts.googleapis.com/css?family=FontName‘ rel=’stylesheet’ type=’text/css’>

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.

#header h1 {font-family:FontName;} */ This css style for Header Title /*
.description {font-family:FontName;} */ This css style for Header description /*
.sidebar h2 {font-family:FontName;} */ This css style for Sidebar Title /*
.post h3 {font-family:FontName;} */ This css style for post Title /*
.post {font-family:FontName;} */ This css style for post body /*
#footer h2 {font-family:FontName;} */ This css style for footer Title /*
body {font-family:FontName;} */ This css style for whole template /*

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.

<link href=”http://www.kernest.com/fonts/riordon-fancy.css” media=”screen” rel=”stylesheet” type=”text/css” /><!–//
HOW TO USE THESE FONTS FROM KERNEST
1. Paste this embed code into your website
2. Add the fonts to your CSS tags. Example:
p {
font-family: ‘Riordon Fancy’;
line-height: 140%;
}
3. Add this link in your website’s footer
&lt;a href=”http://kernest.com”&gt;Fonts by Kernest&lt;/a&gt;
4. Refresh
———–
———–
//–>

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

Google Provide New Interface To Blogger In 2011

We all know that 2010 is great year for blogger and we all know that blogger is one of the best platform which is used by all over the world.Blogger users published more than half a billion blog posts with more than 400 million active readers which shows about the popularity of blogger.Blogger provide the choice of 50 different language by using which users can write article in according to their desired language.

Now blogger has also introduced template designer, real-time stats, comments spam filtering , mobile templates , web fonts , and more.But in 2011 Google has decided to give new interface to blogger which is cool step by blogger to attract more users to be a part of blogger.

Today Blogger provide officially new look to interface of blogger let we have look at some of the snapshots of this interface shown below:

Blogger Arrangement

Blogger Dashboard

Blogger Article

Blogger Stats

Blogger Interface

Blogger Overview

Blogger Post

Blogger Location

You can also have look at view of video showing review of new in blogger shown below:

But till this interface is not ready for all the user but soon it will be available for all of us

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