Tricks2Blogging: HOW TO D0:- Blogger

Showing posts with label HOW TO D0:- Blogger. Show all posts

18 Sept 2012

How to Make page number in Blogger

Labels: BLOGGER TRICKS, HOW TO D0:- Blogger

How to Make page number in Blogger

Go to Design
Page Element
Click Add Gadget and select HTML/Javascript
Paste below code

<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script><a href='http://bit.ly/t2Blog'>_</a>

Live Demo

Now SAVE it...EnjoyComment If Any Problem

Awesome Floating Sharing Horizontal Bar for blogger

Labels: BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, HOW TO D0:- Blogger, PLUGINS, SCRIPTCAMP

How To Awesome Floating Sharing Horizontal Bar for blogger

Goto blogger dashboard
Template ->Backup template [Recommended]
dashboard ->Template
Edit Template -> Expand

Now find the following below codes

<b:includable id='post' var='post'>

Now add the below codes Just after/below it


<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) no-repeat !important;
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;
}

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.hb_social_floating  .stButton_gradient {
    border: none !important;
}

.hb_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.hb_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='hb_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='twitter_name'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://www.tricks2blogging.blogspot.com/' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

NOTE

REplace the Twitter Name With Your Twitter NameComment If you have any suggestion Or problem

Add awesome scrolling recent post for BLogger

Labels: BLOGGER TRICKS, HOW TO D0:- Blogger, JQUERY for Blogger

Add awesome Scrolling Recent Posts Widget For Blogger

Go to Blogger Dashboard -> Template
Click on Edit HTML
Click Proceed button
Then
Find below code in your template

</head>

Then add the below code just ABOVE / BEFORE It

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

NOW Save the Template

THEN

Go to Blogger Dashboard -> Layout
Click on Add a Gadget
Select HTML/JavaScript
and then put the following code in it

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com ======== */

#tricks2blogging-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#tricks2blogging-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#tricks2blogging-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhENPCWH2Bv07Hy380aiciJWo36FxTIi9Zw-qjq6jG68aS0rdFdqXtunDXXls2i_auxOZeUVsH3m0v5TGUW9Y4w-9WhN-nnJkySR3SDcdez_COJpmsU1IlQOrInAZ0d598vgIU_8_l8o/s1600/blogger-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#tricks2blogging-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#tricks2blogging-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#tricks2blogging-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#
tricks2blogging-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com
 ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpgg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.tricks2blogging.blogspot.com";
limitspy=4;
intervalspy=4000;
</script>
<div id="tricks2blogging-widget">
<script src='http://tricks2blogging.googlecode.com/svn/trunk/recent-posts-spy.js' type='text/javascript'></script><a href='http://www.tricks2blogging.blogspot.com'>_</a>
</div>

NOTE:- DO NOT CHANGE ANY CODES EXCEPT THE RED ONE OR THE CODES WILL NOT FUNCTION IF THE OTHER CODES ARE DISTURBED OR CHANGED >>

Place the Codes Where you want

Change the Red UrL with your URL

Customize the codes which are in fushia color

numposts = 10; Total number of posts
imitspy=4; Number of the posts to appear
intervalspy=4000; Scrolling speed of the widget

Attention:-

If you Decreased the value, speed of the widget will increases

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]

Labels: BLOGGER POST TRICKS, HOW TO D0:- Blogger, JQUERY for Blogger

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]

How to add 4 In 1 Jquery Facebook page,Twitter Follower,Google+ and Rss Subscribing Widget to your Blog

Go to Design >> Page Element.
Click Add Gadget
and select HTML/Javascript
Paste below code.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJkYPjc6MvRC4qG-hszxXK_lc_6QKt57QOfdp_HS9P_NrkMswOtxgeUPI2_iyU2IIk44yEry7wpRjsmCMJm951y0YsXiXtmjQ1Ib-WIRslGPx18Ey9gWTp1OKt2iBYM-49D51gGMTJE0/s1600/facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2FTricks2Blogging&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">  </iframe> </div> </div></div><div id="on"> <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNcJ4oaQoEAnlQ7q1IzGUlO_RhwcsKqbPJQpRFkfG3VLVqJZAh_V8-5xfd0LkcxXYCf6gEmMnJYZ0a5hkemQiSkcwEuLdOyp6V9TF_O4wrzkhyphenhyphenw8oCDgyg1hVxg-mJ984F0rP1tK_T8c/s1600/twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('Tricks2Blogging').start();</script> </div></div></div><div id="on">
 <div id="google_plus_right" style="top: 52%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFQ9yLqKMR55mXNiKazQUZEG7jKuFO8rnxdK9tWTSnBPSwOHYB6lRP44ROixACvVOqxz-5zey4Eox5sC8JJIQNTlbEDkMlo-VAcasaDUQB89xAZWhckqZcLCexlMUR9JOCT-Ybc8Cq5g/s1600/google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
  </div>
 </div>
 <div id="on">
  <div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/>
<input value="Tricks2Blogging" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><a href='www.tricks2blogging.blogspot.com'>_</a><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UO407sdHPoTCMrR3oYNwVxmpL0fgKZbwEBvVN67Jy4fGsSx1jKSyLzqwB0NEB0rdHg8TOa5tb_10i1MWFZCdCEs21_JmHAh7Kgv0ElGp8qYg1AtVDOJ-Fhy7YFxfzs38pcH6DkLlrDQ/s1600/subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>

NOTE

Replace Tricks2Blogging  With Facebook fan page.
Replace Tricks2Blogging With your Twitter Username.
Replace Tricks2Blogging With Your feedburner Username

Save And Enjoy

If any Problem comment below..Like And Follow us on Facebook and Twitter...Thanks

How to Add numbers to Blogger Comments

Labels: BLOGGER TRICKS, HOW TO D0:- Blogger, SCRIPTCAMP

How To Add Numbers To Blogger Threaded Comments?

Go to Blogger Dashboard > Template
BackUp your template
Click On Edit HTML
Then Proceed
Now search for below code,

]]></b:skin>

Now add The below code just Above it,

.comment-thread ol {
    counter-reset: countcomments;
}

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MM5VU_S3AkLcRThX4fjTNNVIgp7ZH7XilfGnbESQOXPUqDKcyUk4_xpPItv9KkWZvzt2mUavgArq8Oy_DHoRPIr-gGEe32TS-_3EiE_ZPD3LZmo77-MlQkWaQtgaCl4F-RTDIep_QlU/s1600/comment+bubble2.png) no-repeat;
    margin-top: 7px;
    margin-left: 10px;
    width: 50px;
 /*image-width size*/
    height: 48px;
 /*image-height size*/
}

.comment-thread ol ol {
    counter-reset: contrebasse;
}

.comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;
}

Now Save Your Template

To change The Comment Bubble Style Change The Green URL With the Below Link

Different Styles Of Comment Bubble

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MM5VU_S3AkLcRThX4fjTNNVIgp7ZH7XilfGnbESQOXPUqDKcyUk4_xpPItv9KkWZvzt2mUavgArq8Oy_DHoRPIr-gGEe32TS-_3EiE_ZPD3LZmo77-MlQkWaQtgaCl4F-RTDIep_QlU/s1600/comment+bubble2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-fNKBESs98K8vHZAM7GDSnam1oSPOFMTcF-5CDwSiksdq8pX83WN2Fn0-kYSaQPCR2RNpZ_-Td8Dl1wkMLgkzH897-NS1GUR8N2o6VwNF49l46cfmh937Qxylw-nnXbETROANKWGDWpk/s1600/cloud.png

http://2.bp.blogspot.com/-2psafDYuhAY/UFbiEJ300EI/AAAAAAAABiE/

0t8KHfBU8rs/s1600/round.png

How to Add RSS And Email Subscription Widget For Blogger

Labels: BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, FEATURED, HOW TO D0:- Blogger, PLUGINS, SCRIPTCAMP

How to Add RSS And Email Subscription Widget For Blogger

Go To Blogger - Design
In Page Elements choose Add a gadget
Choose HTML/JAVASCRIPT option

And add the following code,

<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_XrkW_RD7x4Aaj_WKLDeqigsHTc3Fbx9uYcuR_hODCRO0h_6FaWNqQ8NHaqMeZJEtJ0Zsixhs097z1q8FgJQAkLDUZHxyGIklKFqJAzDpXSvl7fRmpA01ze2CcYmRduEC5ZgRMWfoNyf/) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}

.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PxGDkUyFaTKthdGdApciaWIrJoIKt5qR-9BAG0YXjDiQ35eKdlTfyezADWTiYmJVQDGWxUZTyq2RIkIaOWXBXvzeEEkS2orTLOuJ2NhLUjv28TeogaKBO4_IeY6jlosi0Wnf4iJivDY/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIeyeHw-gk1KuThyEl8eFNa9ScvAhsKjhgULLUpk-v8Dt7OGpFOEu0jJ_5h8jPCsR4iyLc1gP0U_BJCH3MyVXeuyHsVxEKoyWlXqGPvC1FML4MnGAvmsEG4H5dV0NsrkoD3O2Z11Unk0/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>

<h2>Get Updates!</h2>
<p class='first'>Subscribe to Tricks2Blogging title by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='
Tricks2Blogging'/><input name='loc' type='hidden' value='en_US'/></form>

<p>Be informed of new posts by <a href='http://feeds.feedburner.com/Tricks2Blogging'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/Tricks2Blogging'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&loc=en_U'>Email</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='right'><a href='http://feeds.feedburner.com/Tricks2Blogging
'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Tricks2Blogging
?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>

*Replace Tricks2Blogging with your feedburner title.

*Replace Tricks2Blogging title by your site title.

Now Save It

How to Add Awesome Demo And Download Button With Mouse Hover Effects

Labels: BLOGGER HACKS, BLOGGER POST TRICKS, BLOGGER TRICKS, BLOGGER WIDGETS, CSS, FEATURED, HOW TO D0:- Blogger, SCRIPTCAMP

bg

The LIVe Demo Is below
Move your cursor on the button for hover effects:

Live Demo Download

Go To Blogger - Design- Edit HTML
Backup your template
Click the "Expand Widgets Template" box
Search for this,

]]></b:skin>



.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhyphenhyphenvepNVILHvPqXhbUncBPzH3T7WSBVUE0cC4HVYeqt9Xs2F6nEvF6KAAl9oaNMlC7IVX4h_LAVLkwMsUHEl2b_f9Pkcv_ET4dLi11uhsrrjPQTj5kKKRt9VLAmc4ZqI9zY2U-Cjxl6Sz/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));
}

Save your template.

Now add the below code where ever you want the Demo and Download Link to appear in you posts

<a class="button big blue" href=" http://www.blogger.com/YOUR%20DEMO%20URL%20HERE " target="_blank">Live Demo</a>&nbsp;&nbsp;<a class="button big blue" href="http://www.blogger.com/YOUR%20DOWNLOAD%20URL%20HERE" rel="nofollow" target="_blank">Download</a>

Tricks2Blogging

18 Sept 2012

How to Make page number in Blogger

How to Make page number in Blogger

Awesome Floating Sharing Horizontal Bar for blogger

How To Awesome Floating Sharing Horizontal Bar for blogger

Add awesome scrolling recent post for BLogger

Add awesome Scrolling Recent Posts Widget For Blogger

17 Sept 2012

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]

How to Add numbers to Blogger Comments

How To Add Numbers To Blogger Threaded Comments?

15 Sept 2012

How to Add RSS And Email Subscription Widget For Blogger

How to Add RSS And Email Subscription Widget For Blogger

How to Add Awesome Demo And Download Button With Mouse Hover Effects

bg

Labels

email updates

Popular Posts

Like us on facebook