Recent Share

Latest Post

Showing posts with label Blogger. Show all posts

How to add colorful Total Pageviews widget?

Widget can helps you to make a wonderful blog. Total Pageview widget is a important widget for your blog. Everyone can to know about your blogs statistics. How number of visitors visit your blog. Total post & total comments are also shown through this widget. This widget is more colorful & attractive. We use some css code so don't be afraid because css code never use your memory. To add this widget just follow this post steps by steps.

How to add ?

Log in your blog

Go to Templates

Then click Edit Html

Search (ctrl+f) ]]></b:skin>

Add bellowing css code just before/above ]]></b:skin>

#Stats1 ul{margin:0px 0;border:0;padding:0}

#Stats1 li{

display:inline;

width:30%;

border:0;

color:#fff;

float:left;

text-decoration:none;

margin:0;font-size:12px;

list-style-type:none

}

#Stats1 li:hover{

opacity: 0.7;

filter:alpha(opacity=70); /* For IE8 and earlier */

}

#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}

#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}

#totalposts{

background: #0090D5;

}

#totalComments{

background: #FFB200;

}

#totalCount{

background: #FF3300;

}

Then you have to search

<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>

Replace the following code

<b:widget id='Stats1' locked='false' title='' type='Stats'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<li id='totalposts'>

<h4 id='Stats1_totalPosts'>&hellip;</h4>

<span>Posts</span>

</li>

<li id='totalComments'>

<h4 id='Stats1_totalComments'>&hellip;</h4>

<span>Comments</span>

</li>

<li id='totalCount'>

<h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4>

<span>Pageviews</span>

</li>

</ul>

<script type='text/javascript'>

//<![CDATA[

function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');

//]]>

</script>

</div>

</b:includable>

</b:widget>

Note:You should back up your template first.

Author : tech-everyday

How to add Demo and Download Button in blogger

1. Go To Blogger Dashboard > Template > Edit HTML

2. Backup your template before editing.

3. Click the "Expand Widgets Template" box

4. Search for this, ]]></b:skin> . before it paste the following CSS Code.

.button {

-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

5. Save your template.

Now whenever you want to add the demo or download button you only need to add the following code in the "EDIT HTML" section of your Blogger Editor

For DEMO Button

For DOWNLOAD Button

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Replace YOUR LINK HERE with your DEMO or DOWNLOAD LINK , That's all.

Author : Sarthak-amazing

Backup and Restore Blogger

Life have no Restore Option But Blogger has. Before doing any work or occasional on the blogger we must backup it. Because, in the event of any errors they will help us. Sometimes the most important thing to do before and after uploads a new template. So how to Backup? How do restore it again, it’s good to know that. Here we can make this work as two types. First one Backup only a template. Second one Backup whole blog.

Backup Blogger Template.

Step - 1

Click “Template” in Drop Drown Menu.

Backup and Restore Blogger template. Backup full blogger blog. Move Blogger blog one to another. step by step guide for backup and restore blogger blog.

Step - 2

Then Click “Backup/Restore” Button in Top Right Corner.

Step - 3

Now Click “Download Full Template” in Popup Box.

All Done! Now Your Template Downloading to your Hard Drive.

Restore Your Backup Template

For Restore your template, continue from Step – 3 “Template” >> “Backup/Restore” >>”Choose File”. Now Upload your Backup Template from your Hard Drive.

All Done! Now Your Template Restored. Now your Blog in Normal.

Backup whole Blogger blog.

When you need backup your blogger include your blog post and comments for some reasons (Moving Blog One to Another, Safety and Security Reasons,) follow the step for Backup you Blogger Blog.

Click “Settings”>> “Others” >> ” Export Blog” .

All Done! Now Your Blogger Blog Stored in Your Hard Drive.

Restore You Blogger blog.

For Upload your Blogger Blog follow the Steps.

Step - 1

Click “Settings”>> “Others” >> ” Import Blog”

Step - 2

Now, The New Tab opened. “Brows” and choose xml File that you have backup and Stored in your Hard Drive ” >> Fill the Captcha >> “Import Blog”.

All Done! Enjoy!

Find New Blogger Templates Here.

Author : Gooyaabi

HOW TO ADD A RECENT COMMENT IN BLOGGER

<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WUBzzoSC76WR6Q2BpHrWfuxCK2KvGMRK6zMmSgOuuVoSwvhPY6ohJayVcMpaoljdHMSY1Eeq1PlXHAg0-11_QZdtq5DgZot-2X5r0sF8DRD1-rTBL18oQE_ZS8x69zc1G89GrPyaj5Fr/s1600/default-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="http://recentshare.blogspot.in//feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html" rel="nofollow">Recent Comments Widget</a></div>

replace : http://recentshare.blogspot.in/

Author : Helplooger

Advanced Random posts widget for Blogger with image thumbnails

<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI_eBmXrhbpMx0D0t1yPUrCFpYWQm6BI4-A7CZxYEgevKPYE5K8NLF9FGdlDl0A09OkYuJmqkmC6NcCnSD8P2ZtpB28uFysMva7LLJtna3AYJJ5q4sjCGL0Exih2C1jyEemsQON9l3kIk/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Author : Helplooger

How To Add Back To Top Button

Before selecting back to top button you need to know how to add this widget or pluginto your blog. In order to know more about this check out detailed tutorial given below.

Adding Back To Top Button On Your Blog

So after checking above tutorial you can move further on to this tutorial. Instead of code given in above tutorial you can use any of the codes given below. I have added image above every code so you can know how this button will look on your blog.

Back To Top Button #1

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCKon2wSp7hFIzo-rsiBKw8wPCCA9f5D6xpCyTFiRHsRxUucAdCNvpD_Mn6ZY6JdLzsa3kJBEDBO1akwacfxdlUbXURUjHqIINWQzbZi9nuYkOzbC5BF_m6hbJWQ4EFFI3Q3JeRZ_j0iQ/s1600/back+to+top.png "/></a>

Back To Top Button #2

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Xzc2oleW2So2CL4fJRQRbzZx_x-xX-wTx3a7nOI5Kn7YLfeLCg1iJ3ex2arfvLdTwZ60Ck7WwdiQ4bgyiCgrzqFgwBSJ0zXV0WWgOglUGCAS9aGejAjGah9ZF97P7ozHde-TMsE5Fc/s1600/back+to+top+button.png "/></a>

Back To Top Button #3

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiq3RAIZV6GHE-blvr2Dqhnm-dIiiX01uRJ8PjF1LSO3DyQevqZrTu1kDcZZFqU_0k7wV5hBQUdM8BMYLGB9NnkCZFX97QOrcAGJfEaULkdLf74pg1fUGQxRDNQ-gMNFtKBP0ggUoVeI/s1600/back-to-top-button.png "/></a>

Back To Top Button #4

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2nLzMbco2tDta9ePg5hu37BnYigoFaU4j0EWHzALMB4oyjaEOD7RrFQXelKFrCxMu4dDfOUCWYJB1IwCoRkD2DSiAVzGr94AtHJgeFZ6ktV-AKV3SQvlT1CQuF5_TraSdyQgfujC_DU/s1600/back+to+top.png "/></a>

Back To Top Button #5

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_NvkDYh1RskaHP3mNAc0pqNMbIwmB6h_vjxKP4ezrIC60GSL8foPoZSUAfUpruXKlADyGUrrCiO3ixWvUK7vMINNCurLUKNx3nHMxK-S-1KgH7iFCFijykFhI8OUIrV7Lr9zY8Z5E10/s1600/back_to_top_button.png "/></a>

Back To Top Button #6

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhnNtRJxsr5pDt41dqYR0qVnHuCmhAq0IpAuKIQ1QTHM3hAxmKMIdoUXIR5z2JblMLf4kDLik2CTKc9MTjNiOEIn-VX9u6i9Pc9oK-KZbyFW1xJNJIjFBso19uTaclbrNyfza0Xz6pq4/s1600/back-to-top-button.png "/></a>

Back To Top Button #7

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRU6XuFe1fuHa445qy_U5hwBklaXJiUOZGtSOYO-Z2tWq3MYEc1SEeAIgws4OcVLsIj49OPol7VJbHUGPU0xqCESnwAz6z8YgTRcsLdi_6dTGSBgwJJbREFDIdxhjEP9eXrLc6kWlfeNo/s1600/back+to+top.png "/></a>

Back To Top Button #8

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOQ2qwnAkr6PgcnrYOjlAqiIBTw1gwbCYUXZkXnFgtxDpHv6jeR8hmiPF2fXopSgUIZJnSBHXbt0nRtwjWO6zonqhQmVfEiZrdwpeVtw6_Dsr6KCD8JFAaCZWluIFICFWWvvc8KDg-C20/s1600/back-to-top-button.png "/></a>

Back To Top Button #9

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SqDCsm6CcDgtbhbpbIoed0g558DI82WH-7JrGz_eeLV9h8Ag0rAdI9olbixzDFjTH_EO3_mZkNhB2hop33jGNd8ZcW_zGkJQCZOvZl7QnY86S5dZxftcx95PqxVZtG26OSACk2HL2es/s1600/Back-To-Top.png "/></a>

Back To Top Button #10

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhptrJspTnJ5OUJurzDmi0EpAnSLWqB8lcxwC_Z5zz7GYVR_l78ktxm9q9r094nIxpHkmPc86HZ6u2UJa_CXQsDpT1PYylYu5xOg2oNCGnRJCFfS8FcBWq39093ASBBLIB6vVgG5DdHet4/s1600/back+to+top.png "/></a>

Back To Top Button #11

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMXuJtjRWaSdrTIF1A458SclDzktuoe-W-8JhIhR9G2fE0mZ9M24SU2XmeTRtTbT__e-BsKy9bTRLqFBr5cAPBNaVtRSJdp3V2z7CvlubNHy9FxVVe-1EAauIzLcv9Tx4xqrN030aqNMY/s1600/back+to+top+button.png "/></a>

Back To Top Button #12

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSF1z-02xOA3pcMkVaJ4yAZaBBLjvhZEVknCHdGE040nyZCI15nH3K8sAZL8ArH_JSP7Ta6a-J2c-YIWD49-xtvUY8DhpzY3lIAk_p0ZVAOrLhsL6jojSRO4i8waaMP2aMTRSk6UGXRs/s1600/Back-to-top.png "/></a>

Back To Top Button #13

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigecYrJkg2chDtMc48gE0PIet76kRrYWc3K1zGA1w2vPrGfcGH2DPUz93S0nrS4Q2L3_uLdo0Hl57se-G_DBjtberoZwqAsiT6Uel7j4jVqeOrN1KH8ohA5BgqEKPnxDpg4PikAEq8pfw/s1600/back+to+top+button.gif "/></a>

Back To Top Button #14

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsqdDdahZhRP3N1Q6V3V4sb8TNWybmaoPHylnlSwYD2yx-u6GqUqjxrEyzOEQ3wATZirl0TiW7cZHefpsB5TUzNlWkwWQiyTqP11MzXN8Whk6iAQ-o3HfAnTWn4JNlIlN-Ez994p9tn0/s1600/back+to+top.png "/></a>

Back To Top Button #15

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIAR0VQKlFfySjXjuXTlldRGKK8TIIT7-HaR-Xg9L5S69JfMSLJhKYjkfwgT8rqMeaDe9wTgmvoJy1mINMeTQnNgh2rF25HGzagFKvbA3Tw8SWNonWfc5k-D2PntyQSHBfzyyCVmm8MQ/s1600/Back-To-Top.png "/></a>

Back To Top Button #16

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiigwdxfo2_9M5SigAh5lZaImcH8272sk5nUIwNRS6sZEba8drXUVEUPHmNXxHkQ9Val5nHKJCI_nTQPgKl7N7i8MhFP2McDLZvJhPJpdyomQk9f3b79erIwjUKTxrCEuKAGrslepO4Tuk/s1600/back+to+top+button.gif "/></a>

1. Please Copy The Url image only

Adding Back To Top Button On Your Blog

Author : Mybloggersworld

Recent Share

Flickr

Labels

ADS

Popular Posts

Latest Post

How to add colorful Total Pageviews widget

How to add colorful Total Pageviews widget?

How to add ?

Note:You should back up your template first.

How to add Demo and Download Button in blogger

How to add Demo and Download Button in blogger

Backup and Restore Blogger

Backup and Restore Blogger

Backup Blogger Template.

Restore Your Backup Template

Backup whole Blogger blog.

Restore You Blogger blog.

HOW TO ADD A RECENT COMMENT IN BLOGGER

Advanced Random posts widget for Blogger with image thumbnails

16+ Awesome Back To Top Button For Blogger

How To Add Back To Top Button

Join The Team

Popular Posts

Labels

Sponsor

Text Widget

About us

Like This Theme

Blog Archive

Author Info

Video Of Day

Labels

JOIN THE TEAM