In this tutorial i will show you, How to add any Gadget or Widget above header in Blogger. You know, You can rearranged our gadgets/widgets in the layout designer by drag-n-drop, but you can hardly drop it right above the header, so in this tutorial that I'm going to share, How to add a gadget/widget above the blog header.

Step 1

Log-in first to blogger.com and Backup your template. - It's very important to backup your template, so that if something went wrong you can easily restore your old template.

On your Blogger Dashboard click/drop-down 'more option' and Click Template then at the upper right portion click Backup/Restore, 

and Download the full template.

After downloading the backup template, click Edit Html

Step 2

Press CTRL + F to fine the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Afet finding the code, Change the value of maxwidget '1'  to  '5' and showaddelement 'no'  to  'yes'

Then Save Template.


Step 3After saving click on Blogger Dashboard. On your Blogger Dashboard Click on Layout. Now you can see Add a Gadget link in header section of Layout design.

And your Done! you can now add gadgets above Header.

Read More »

This is a most attractive gadget for your blogger blog is a Multi-Color Most Commented posts widget for your blog sidebar. Visitors see your trending posts and want to join the discussion that is happening on your blog. To do that, you will need a most commented posts widget in Blogger.

Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you are going to need a few specific things to help you out.

Add the Most Commented Posts Widget to Blogger

Step 1. 

Go to Template -- > Edit Template
Press CTRL + F key to open the blogger ‘search box’ and type the following tag and hit enter to find it:

<b:skin><![CDATA[

Step 2.

Add the following code just below it.

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

Step 3. 

Now search the following tag (CTRL + F)

]]></b:skin>

Step 4.

Add this code just above it:

.comment-count {
padding: 3px 10px;
background: #fff;
color: #000;
font-size: 10px;
float: right;
}
.most-commented ul {
padding: 0px !important;
font-family: Century Gothic, sans-serif;
}
.most-commented ul li {
list-style-type: none;
padding: 10px;
color: #555;
margin-top: -10px;
}
.most-commented ul li a {
color: #444;
font-weight: bold;
text-decoration: none;
font-size: 11px;
}
.most-commented ul li img {
float: left;
margin: 0px 5px 0px 0px;
width: 60px;
height: 60px;
}
.most-commented:nth-child(3n+0) {
background: $(most.commented.background1);
width: 100%;
}
.most-commented:nth-child(4n+0) {
background: $(most.commented.background2);
width: 95%;
}
.most-commented:nth-child(5n+0) {
background: $(most.commented.background3);
width: 90%;
}
.most-commented:nth-child(6n+0) {
background: $(most.commented.background4);
width: 85%;
}
.most-commented:nth-child(7n+0) {
background: $(most.commented.background5);
width: 80%;
}

Step 5. 

Save the Template

Now, let’s add the Most Commented Posts widget to the Layout of your blogger blog. Head over to the “Layout” section of your blogger dashboard and click on the “Add a gadget” link on the right side. From the pop-up window, Scroll down the list and select the “HTML/JavaScript” gadget.

Copy and paste this script inside the content box.

<script type="text/javascript">
function stripTags(s,n) {
return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>" + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
document.write(postList);
}
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://www.itroshni.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

Change http://www.itroshni.blogspot.com with your blog URL.
If you want to add more characters to the description modify the “10” value in red from “postDescription,10”

If you want a more simple look (without the thumbnails and post snippets), add this script instead:

<script type="text/javascript">
function stripTags(s,n)
{
return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++)
{
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>" + '</li></ul></div>';
document.write(postList);
}
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://www.itroshni.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

And replace http://www.itroshni.blogspot.com with your URL

To add the "comment" text after the comments number, Replace the line in red.

<div class="comment-count">' + postComments + "</div>"

With this code:

<div class="comment-count">' + postComments + " comments" + "</div>"

Once you have finished adding your own settings, press the “Save” button to the gadget in the sidebar of your blog. That’s it.!

To change the background colors of the most commented posts, go to “Template” > hit the “Customize” button and navigate to “Advanced” > “Most Commented” tab. Here you can pick 5 different colors by clicking on the color boxes.

Once you’ve selected your favorite color scheme, click the “Apply to blog” button to save the changes and you’re done.

Read More »

Today i will show you, How to add Floating Facebook like box widget in blogger with a beautiful view, wonderful and attractive format, where the Facebook like box is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog, follow my simple steps:

FOLLOW THESE STEPS:-

1. Go to Blogger Dashboard --> Template

2. Please! download a backup of your template

3. Now click on Edit HTML

4. Use Ctrl+F to find </head>

5. Then copy and paste just before it, this code:

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

6. Save your template.

7. Now go to Layout--> click on "Add a gadget".

8. Select "html/java script" and add the code given below and click save.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VMEUkNDg0b4lP7nzpOmOog9cdn9XKz16aBwnt9tDwx6uBwILttMX5yuBuUkjIxdw2thKkwjc1mwfXksGcLazr4c1DFy4vbrmRfiXY3RtZYDllVvjxjmzW0kIxQqjTGlVoIfTpxbF_lY/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fitroshniblog&amp;width=245&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;
connections=12&amp;stream=false&amp;header=false&amp;height=275" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow:
hidden; height: 275px;
width: 245px;
background:#fafafa;"></iframe><span>Widget by :
<a href="http://www.itroshni.blogspot.com"> IT Roshni </a></span> </div> </div>

Note: 

Replace itroshniblog with your Facebook page user name. Just copy and paste user name,
Do not copy & paste complete url of facebook page.

Example: https://www.facebook.com/itroshniblog

Now you can see the result and be happy.

Read More »

In this tutorial, I will show you how to Hide images/photos from blogger post and show or appear only in your homepage. For this purpose we will add a CSS code in template using Edit HTML.

Just follow my steps:



Step 1. Go to Dashboard -> Template -> Edit HTML

Step 2. Press CTRL + F Keys to open the search box.

Step 3. Type or paste this code inside the search box and hit enter to find it

]]></b:skin>

Step 4. Paste the code below it

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>

Step 5. Click on Save template

Now, when you create the post, First add the image that you want to hide and then jump to the HTML tab where you will see the HTML code of the photo or image that you added, it will look like this

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-f6wllP6b-fUAGU_EZk_boPgbSlxgjxFQ_5gHgGFyzTxrAGmSJcjDHNVpBeMs94PDD762_49-vc3hiQY6SBEZWUsoM626TbW0N4t4S8YLBkVLNni9bhOye1yMoBTCHBaG99MbtXQ1sA/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-f6wllP6b-fUAGU_EZk_boPgbSlxgjxFQ_5gHgGFyzTxrAGmSJcjDHNVpBeMs94PDD762_49-vc3hiQY6SBEZWUsoM626TbW0N4t4S8YLBkVLNni9bhOye1yMoBTCHBaG99MbtXQ1sA/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Step 6. Replace “separator” with “hidepic” – See the screenshot below

Important:

It should be at exact location where your image has been added
(If the image is at middle or center location in post, then the code should be found at the middle or center of the post.)

Read More »

Add Facebook Popup and increase Facebook likes for your website or blogger blog.  Add this free widget to your website and Facebook like box will be appear with the light box effect when anyone visits your site and blog. it will show up on your page about  10 seconds after the page loads (but you can be customize and change increase or decrease the time).  This is a very useful widget to increase your likes. So, let’s see the tutorial.

by IT Roshni



Add Widget Code to Your Blog

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fanback {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit {width:100%;height:100%;}#JasperRoberts {background:white;width:420px;height:270px;position:absolute;top:58%;left:63%;margin:-220px 0 0 -375px;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}#TheBlogWidgets {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMxZMZurzKHR8_OTHvlEw81SGOYaqsjDaopFOH74yHTKMXqFY2DN2Bti3W2Kh2c76q-b58oDAOFXKR__fG_CVFmtJvvj18BJfg3LVBoNPB5SfvyGxXs2YC02VsPdtEqWhcYKz-qjxz-Xg/s1600/TheBlogWidgets.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda {height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}#linkit,#linkit a.visited,#linkit a,#linkit a:hover {color:#80808B;font-size:10px;margin: 0 auto 5px auto;float:center;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, options) {// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = options.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));}// key and possibly options given, get cookie...options = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};
//]]>
</script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_user_login') != 'yes'){$('#fanback').delay(10000).fadeIn('medium');$('#TheBlogWidgets, #fan-exit').click(function(){$('#fanback').stop().fadeOut('medium');});}$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/ITRoshni/1028509180503185 &
width=402&height=255&colorscheme=light&show_faces=true&show_
border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.JasperRoberts.com - http://itroshni.blogspot.com -->-->

Customize and enter your Facebook username

Search for https://www.facebook.com/pages/ITRoshni/1028509180503185 and Replace it with your facebook page URL.

Change the Delay Time

Widget appear in 10 seconds after the page finishes loading. You can change the delay time. Search for the code below and change the value 10000 to a greater or lesser number.

1 second = 1000. 10 seconds = 10000. 60 seconds = 60000

delay(10000)

Enjoy the Facebook Popup Widget.

Read More »

Best tutorial about transfer blogger to wordpress blog without losing search engine ranking, traffic, feed subscriber and google followers. watch the tutorial and enjoy.

Read More »

Some Useful Tips for Starting a Blog. Must Read When You Want to Star a Perfect Blog

1: Cost

I hear many people statement that atmosphere occurring a energetic blog is era absorbing, hard, and most of all costly. It does not and should not cost a lot of keep to set happening a blog.

First of all you can obtain it for pardon. There are immense quantity of closely blog hosting sites just roughly.

However, if you admiring to begin a bustling blog that generates allowance or attracts a large audience subsequently a pardon blog is not the extension to go.

That physical said, a paid blog is relatively within your means and will cost you less than 70 dollars per year. Plus you own it and run it.

You obtain not need to pay someone, employ a web designer or a company to set going on a blog for you. If you have a computer and the internet moreover you are ready to go!

2: Time

Plain and easy, this is wrong. It can be ended in out cold 15 mins.

3: Skill

Learning how to begin a blog and setting one happening does not require you to have any special skills, knowledge of html coding or web revolutionize. When you set taking place a blog, you can install something that is called a 'content running system', which is a program that is forgive and utterly handy that will agree to you to have unlimited manage on summit of the see and atmosphere of your blog. Some basic computer knowledge is every single one share of you compulsion, if you can send and email or use a word running program subsequently you will be practiced to control your own blog.

4: It is a complicated process

Essentially there are four steps in the process to activate your own blog and they are all fairly available:

• Choose a domain make known - what will your site be called.
• Sign happening for some web hosting - were all the bit and parts to your site will be stored.
• Install a program to notice make known your posts - one click and it will be done for you also you obtain your hosting.
• Write your first late accrual.

The perch is up to you to write appealing, alternating blog posts that will make people nonexistence to the fore put occurring to stirring times and times anew. But first you compulsion a blog to profit going. So what are you waiting for, don't pay someone else thousands of dollars to set happening a blog, realize it yourself in no time and all and profit blogging!

Read More »

This tutorial i will show you how to add Flickr PhotoStream to Blogger blog. Its very easy & simple tutorial. Just follow the steps given below to add the Flickr gadget to your blog.

1. First login to your Flickr account.
2. Click on "You > Photostream"

Now look at the address bar of browser. it will look like this.

You can see your Flickr ID like this (37614889@N03)
But sometime Flickr show your username as ID like this

3. Now copy your Flick ID.
4. Login to your Blogger dashboard > Layout > Add a Gadget
and select the "HTML/Javascript" and add the code given below and click save.

<style type="text/css">
.flickr_badge_image { float: left; }
#flickr_badge_wrapper { width: auto; border: 1px; }
#flickr_badge_uber_wrapper { width: auto; }
</style>
<script src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=8&display=random&size=s&layout=y&source=user&user=YOUR-FLICKR-ID" type="text/javascript"></script>

5. Now replace your "Flickr ID" to your Flickr ID.


Its Done, I hope your enjoy and Learn,

Read More »