How to Add a Widget Below First Post in Blogger

This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post.

First, you must understand that the usual gadgets provided by Blogger can be added only in the areas where the design section permits. Still, we can show any element, for example, an AdSense ad, an image, a flash file, a video etc.

So what we will do in this tutorial is to display an item under the first post, this means that it will not be visible below the other entries. This is great when you use any automatic summary, although it is not a requirement.

Well, this is easy to do and we will use the isFirstPost conditional tag for that element to show it under the first entry.

Adding An Element Below First Post

Step 1. First, go to your Blogger Template and click on the Edit HTML button:

Step 2. Check the "Expand Widget Templates" box:

Step 3. And find this line:

<b:include data='post' name='post'/> 

Step 4. Just below it add this code:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin-top:0px; margin-bottom:10px;">
Here goes the code of the element you want to show
</div>
</b:if>

Note:

- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget). 

- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc..

Step 5. Preview to make sure everything is okay, then Save your Template.

More about → How to Add a Widget Below First Post in Blogger

How to Customize Blogger's Lightbox

Now, for those of you who have chosen to use the Blogger's Lightbox View to display the images, you have the option to change its style in a whole different way. We'll be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background as well. We can customize the Blogger Lightbox entirely on your taste.

Demo

Take a look at the screenshots below:

Before:

After:

After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the edge of images (border), the text that appears in it, transparency and the close button.

All we have to do is to overwrite the default styles and change them for ours.

How to Change the Blogger's Lightbox Background and Style

Step 1. Go to Template, click on the Edit HTML button (also click on the Proceed button if needed)

Step 2. Search using CTRL + F the following code snippet:

]]></b:skin>

Step 3. Copy and paste the following code just above it:

/* Blogger Lightbox
----------------------------------------------- */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Note:

- The text in green explains to which part the code belongs (it doesn't need to be modified)

For example, the / * Background Color * / part can change the background color or even the LightBox background color to an image. If you want to do that, then change this line by replacing the red text with the url address of your image:

background-image: url(image-url-address) !important;

- The opacity is just below, if you add a lower value ( 0.8 ) the background will become more transparent.

- To change the icon for close button, you have to replace the text in red from /* Close Button */ with the url of your image. (you can host image at tinypic or upload it into a blogger draft and then Copy the Link Location)

- To change the text color of images, replace the #555555 value from /* Index Info (number of images) */

- The border of the images can be changed as much as we want: you can change the borders' roundedness, shadow, etc... but remember this is CSS3 so older versions of Internet Explorer will not see it.

Step 4. Click on Save Template and you're done!

More about → How to Customize Blogger's Lightbox

Missing for a while

It’s been pretty silent for a long while, isn’t it? So, I'm finally back, after a very long break. Life’s been really busy and hectic in the last time. New home, new job, new projects and a whole new environment.

I apologize everyone for not replying to your messages/comments. Because I have gotten too many spams comments lately, many of the comments are not yet approved, so now all of them are put in moderation. (there are over 2000 comments, wow... there's a lot of hard work to do)

And most important, I want to thank everyone for your support and for keeping this blog alive! Your presence really encourages me to write more and produce more content and I'll try to make more time from now on.

Now, getting back into the swing of blogging, I will post more tutorials from time to time and also, have to share lots of goodies for your blog, so keep an eye out for them :>

Any suggestions for future tutorials are welcome!

More about → Missing for a while

Link Nudge using css3 and jquery blogger widget

This is a Simple Link nudge Effect tutorial.You can add this to links in your Blog.While Mouse over the link a simple animation works.This can be done through two methods.You can use any one of these.

1. Through CSS3 .
2. With jQuery Effect.

Live Demo of Link nudge is following

Live Demo of Link nudge is following

• Blogger Widgets
• Blogger Tips
• Increase Traffic
• Page Navigation
• SEO
• Blogger Hack
• Widget Generators

Link Nudge Using CSS3

• Go to Blogger Account
• Design -> Edit HTML
• Find ]]></b:skin>  and copy the below code BEFORE it

a.noopln {
-moz-transition: all 0.1s ease-in 0s ;
transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

a.noopln:hover {
margin-left: 12px;
}

• Save it.
• If you want link nudge effect to a link add class noopln to each link

Eg: <a class="noopln" href="http://blogger.com">Blogger</a>

If you want this Link Nudge Effect to labels follow the steps below

• Go to Design->Edit HTML
• Find ]]></b:skin> and copy the following code BEFORE it

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

• That's all the Link Nudge with CSS3

Link Nudge using jQuery

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Go to Template->Edit HTML
• Copy and paste the below code <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

 Step 2 :Adding jQuery script for Link Nudge

• Sign In to your Blogger Account
• Go to Design->Edit HTML
• Find </head> and copy below code snippet BEFORE it

<!--Netoops Link Nudge Start-->
<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
$(this).animate({paddingLeft: &#39;13px&#39;}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://fe-blogger.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End-->

• Save it

You can put link nudge effect to a link by adding a class noopln

Eg: <a class="noopln" href=" ">Your Link</a>

If your link already have a class then add this class after a space.

Eg: <a class="anotherclass noopln" href=" ">Your Link</a>

The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.

And Save the Template

Its almost finished,If you enjoyed this article share and like us.
Check out more Blogger Tips and Spice your blog tips

More about → Link Nudge using css3 and jquery blogger widget

Christmas snowfalls with breeze for Blogger 2012

Christmas is one of the largest festival celebrate all over the world. Christmas is the much awaited festival that knock the door of all Bloggers. And all are thinking about decorating their blog. How to decorate the blog with snowfalls and clouds ? Do you like to decorate your blog with beautiful snowflakes and clouds? Then here there is a article about how to add snowflakes with breeze to your blogger blog.

If your Blog has a dark interface then this widget serves better.The Snow flakes and the breeze are  in white color so dark background will be better to get a good look.


If you want to get dark Christmas background ,set the following picture or search darker Christmas backgrounds.
Do you want to know how this work
Click below to view the demo

View Demo

• Sign in to your Blogger Account
• Go to Template > Edit HTML
• Find ]]></b:skin> (Find using ctrl + F)
• Copy the following CSS code above it [Alternate Way to copy css code]

/*-- Breeze for Snow flakes --*/
#mbl_snowflakes {
position: absolute;
height: 950px;
width: 966px;
overflow: hidden;

}
#snowContainer > div
{
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#snowContainer > div > img {
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade
{
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}

@-webkit-keyframes drop
{
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin
{
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}


@-webkit-keyframes counterclockwiseSpinAndFlip
{
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

•  Search <body and copy the following below it

<script charset="utf-8" src="https://netoopscodes.googlecode.com/svn/branches/Js files/snowfall.js" type="text/javascript"></script>

<div id="mbl_snowflakes">

<div id="snowContainer">

</div>

</div>

• You are done... Save the Template

More about → Christmas snowfalls with breeze for Blogger 2012

Free Mobile Recharge using Amulyam,Embeepay,Way2sms,ULtoo

Here i am going to say about free recharging sites in internet.Are you wasting money by making recharges,Then here is the time for changing that. There are many sites provides Free Recharge and many of that are fake and some them are good and we can trust.
One of the site is

• Amulyam.in

Update [19-06-2013]:  I noticed another site providing FREE Recharge its Laaptu. We can trust this site. It providing QUIZes, REFERALS for earning free recharge. A new feature Laaptu providing is it gives 2Rs. for each referal.
Update [8-1-2013]: I noticed that I couldn't get any recharge amount from Embeepay and mcent so I have removed it from the following list. The following sites are real and we can trust because I am earning free recharge from these sites.

 There are many other sites for online recharge, some of them that i used are listed follows

• Amulyam

• ULtoo

• Way2sms

• Laaptu

Amulyam gains popularity in India in recent two years and very popular service among Indian mobile users. Amulyam has many ways to get talktime in our wallet. They provides emails of advertisers that sends to us and each opening of the mail will get .25ps in the wallet. They provide 2-3 advertisement mails every day. When the wallet reaches Rs.10 you can make recharge. Another way for increase the earnings in the wallet is to play and create contest or quiz. Playing contest will give .25ps and creating contests make you to earn high. Create a quiz with 10 questions will get you Rs.5. For Approved questions will get 50ps per question.
Another way is to purchase air tickets and buying things it will offer you Rs. 500 instantly. Also you can refer friends and make money. Each referral will get you Rs. 1.
Embeepay is a Facebook Application it provides points  and when we sign up it gives 100 points. 30 points will give you 10Rs top up and 150 points will give you 50Rs Recharge.300 points will give you 100Rs
ULtoo provides free sms and get talktime to your account by sending sms.

Click here to get Rs.2 on your wallet instantly in amulyam

Click here to get 100points on Embeepay instantly

Click here to get Rs.2 on your wallet of ULtoo

Click here to get Rs.1 on your wallet of Way2sms

I hope this article will help you better.

More about → Free Mobile Recharge using Amulyam,Embeepay,Way2sms,ULtoo

How to Change comments style on Blogger?

First of all i'm saying sorry to all for the delay of posting.
This is a tutorial about how to style your comments block with effective designs.
This is done using Simple css Scripts.
The demo of a styled comments block is as follows.

Click the link below to see demo
Demo page
What's inside this article?

• Comments Style version 1.0
• Comments Style version 2.0

• Sign in to the Blogger Account
• Select Template and click Edit HTML (Click on Proceed)
• Find ]]></b:skin> (Find using ctrl + F) [Alternate Wayt to copy css code]
• Copy any of  the type of below css code  just above it.
• Click on Save
  

Comments Style version 1.0

.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 3px 9px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;

}

.comments .comment-block {

background: none repeat scroll 0 0 #E2E2E2;
border: 4px solid #ABABAB;
border-radius: 3px 3px 3px 3px;
padding: 3px 10px;

}

.continue a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 3px 8px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}
.comment-block:hover > .comment-header {
border-bottom: 2px solid #000;
-moz-transition: border-color .5s ease;

}

.comment-header a {

color: #000000 !important;

}

#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;

}

.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}

Comments Style version 2.0

.comments .comment-block {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6l27xpNVqixROGMH5W3r8VQ1K8lClwJ7jg3Qj7X8wLo8cDhxNJcAaV4ZhJPty17iH9ThLGpoCIRXyaHShQkETSvkWzDxIRrgKSKgqaqME7b2kLtTDJnasw3aVBaF1HGCMoma-C-t-Vm8/s1600/bg.png") repeat scroll 0 0 transparent;
border: 4px solid #EAEAEA;
border-radius: 3px 3px 3px 3px;
box-shadow: 3px 3px 0 #D6D6D6;
margin-left: 48px;
padding: 3px 10px;
position: relative;
}
#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
.comment-header {
border-bottom: 2px solid #F1F1F1;
}
.comment-block:hover > .comment-header {
-moz-transition: border-color 0.5s ease 0s;
border-bottom: 2px solid #000000;
}
.comments .comment .comment-actions a {
background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
border: 2px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 4px 11px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}

More about → How to Change comments style on Blogger?

How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always an very easy task to add this. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style date for your Blogger posts.

DEMO

How to create calendar style dates in Blogger

Step 1. Go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below (put day first, then the month and finally the year)
 

Step 2. Then go to Template > Edit HTML

Step 3. Select the "Expand Widget Templates" checkbox

Step 4. And search (CTRL + F) the following line:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 5. In case you find it twice, then you should replace it twice with this code:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 6. Now search for this tag (CTRL + F to find it)

</head>

Step 7. And paste the code from below just ABOVE the </head> tag:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8upN29wP_JxnM1LiGzp5E1FHUqU4XMrWEOtCNHIckLRi-bWC0hcb7BuRGopObciLhVZhJFRDDGCaFhGz1OYwNCQ6GIc8Rgku3Ctc4tztIWLNXhHviL1wW5LNgtPfaKe7CiYf5wy_UkfaQ/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

Before saving your Template, we can make some changes:

• To change the calendar style, replace the url in blue with yours;
• If the calendar doesn't appear correctly, change -108 with 0;
• With green are marked the areas where you can change the color of the dates

Step 8. Now Preview your Template and if everything is ok, click on the Save button. Enjoy!

More about → How to Make the Blogger Posts Have a Calendar for the Date in

Protect all images in your Blog jquery trick

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about How to protect images? .This article about to protect all images.

Related Articles
How to protect images in your blog?
Do you want to see demo? Try to save picture in this blog.
----------------------------------------------------------
What's inside this article

• 1. Protect only First image in every Post
• 2. Protect all images in every post

 Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Go to Template->Edit HTML [A dialog box appears click Proceed]
• Copy and paste the below code <head> and save it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

• Go to Blogger Account
• Template->Edit HTML [Click Proceed]
• Copy the code above </head>

Protect only First image in every Post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"fe-blogger protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

Protect all images in every post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"fe-blogger protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

I think you liked this article...please like and share..

More about → Protect all images in your Blog jquery trick

New Features and Tools in Bing Webmaster Tool

With merger of Bing and Yahoo we lost very good link analysis tool (Yahoo! Site Explorer). Now with new look and user experience Bing has reintroduced that tool in its webmaster tool. Go and explore new tools under diagnostics & tools section of bing webmaster tool. Bing has introduced these new tools which are useful for any SEO:

Link Explorer (beta): Just like yahoo site explorer you can check backlinks of any website.

SEO Analyzer (beta): This tool generates SEO reports for websites which are verified by the account you are currently logged in with.

Fetch as Bingbot (beta): See your website as seen by the crawler of bing (Bingbot).

More information can be found at Bing Webmaster Community Blog

More about → New Features and Tools in Bing Webmaster Tool