thn google
+13,700
twitter big logo icone 5336 48
1,755
Advertisers Tag Here
Join over 45,931 Daily Readers, Users, Subscribers
..who get notifications via Emails !
Jobs
Showing posts with label BLOGGER POST TRICKS. Show all posts
Showing posts with label BLOGGER POST TRICKS. Show all posts

17 Sept 2012

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

Labels: , ,

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

  1. Go to  Design >> Page Element.
  2. Click Add Gadget 
  3. and select HTML/Javascript
  4. 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
Read More

Latest and most Popular SiteMap ever For Blogger

Labels: , , ,

Latest And most popular sitemap ever- 2012

To Show Your All and every post.
sitemap is very useful...
It is almost used by every website , forum , blog, etc
Your visitor gets all your post in a single page by link

  • Here is a Demo Picture


  • Or you can have a live preview of the SiteMap in our website


Live Demo  Download The script

Step to Install this script for Blogger
  1. Goto Blogger Dashboard {For Updated Blogger Interface}
  2. Click on Pages
  3. Create a New -> Blank Page
  4. Then Click on HTML.
  5. Now Copy & Paste the following Codes in it.
  6. Change the Red URL with your website's URL
  7. Save it
  8. Enjoy
  1. Goto Blogger Dashboard {For Old Blogger Interface}
  2. Click on Posting -> Edit Pages
  3. Create a New  Page
  4. Then Click on HTML.
  5. Now Copy & Paste the following Codes in it.
  6. Change the Red URL with your website's URL
  7. Save it
  8. Enjoy
  • Here Is
  • Here Is the codes
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
<link href="http://tricks2blogging.my-style.in/Sitemapv3CSS.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://tricks2blogging.googlecode.com/svn/trunk/Sitemapv3.js">
</script>
<script src="http://{YOUR WEBSITE URL HERE}/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
NOTE:-
Do Not Change anyother URL otherwise it will not work..
Read More

15 Sept 2012

How To Add Subscribe Box And Social Sharing Button Below Blogger Posts

Labels: , , , ,

How To Add Subscribe Box And Social Sharing Button Below Blogger Posts

  1. Go To Blogger - Design- Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Template" box
  4. Search for this,
<data:post.body/>
paste the following code below it


<body>
       <div class='widget-content'>
<div style='background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk_UpZMybwdLn9LlaxwqI5LafMN1OOmeaA9YD3h78h6LJSPrmUPu2UlaojqvDMmIAs5XM6ariANOREEP741OodtfaUQoOQLkefl_b7zi6bdAhBbNQowDluHDkKtZcRJsQ81jTrOEy8lw/s1600/subscribe.jpg&apos;); height: 161px;'>
<div style='padding:70px 210px 0 75px;float:left;'>
<div style='float:left; margin-right:5px; margin-top:2px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div><iframe frameborder='0' height='240' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTricks2Blogging&amp;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90' style='overflow: hidden; width: 60px; height: 90px;' width='320'/></div><div style='padding: 70px 0 0 80px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ChangeIt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p><input gtbfieldid='2' maxlength='100' name='email' onfocus='this.value = &apos;&apos;;' size='25' style='width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);' type='text' valign='middle' value='Enter your email address'/>
<input name='uri' type='hidden' value='
ChangeIt'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submit' type='submit' value='             Subscribe             '/>
</p>
</form></div></div></div>
    </body>

Save your template.


  • Replace the green highlighted script with your own plus one badge script available at google plus site.
  • Replace for  Tricks2Blogging with your facebook username.
  • Replace  ChangeIt with your feedburner title.


Now you check your post.You can see the cute subscription box along with facebook like and google plus button
Read More

Sharing Widgets Below Posts That Rotates On Hover

Labels: , , , ,

Sharing Widgets Below Posts That Rotates On Hover

WIDGETS ARE LIKE THIS AS SHOWN BELOW


  1. Go To Blogger - Template- Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Template" box
  4. Search for this,


  ]]></b:skin>
just above it paste the following code

/*------------ Social Media Buttons Style --------------*/

.cas{
 width: 800px;
 margin: 0 auto;
}

.cas img {
 margin: 10px;
 border: 5px solid #eee;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}

.cas img:hover {
 -webkit-transform: rotate(-7deg);
 -moz-transform: rotate(-7deg);
 -o-transform: rotate(-7deg);
}
5. Next search for this code,

<data:post.body/>
6. Below that paste the following code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Kindly Share This Post And Stay Connected .</b></span><br/><br/>

<a class='cas' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='facebook' height='125px' src='http://2.bp.blogspot.com/-5j3t_fvH21U/T5wiy3ViPuI/AAAAAAAAAMo/
J0cXAqgKaAw/s1600/facebook.png ' width='125px'/></a>
<a class='cas' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qnn1l0bsRj75Dx_9YH22kXQkfOAWEQtR5nnoosdcpC1ECNKfsVr7W643juXWBXTbE2MGGvhgaxSsjS9LuglVtoDY37HavY51LMoWpktNRQKcMkuaXtpWlGIoi2cDqCCU_3dDRx0xxhkp/s1600/twitter.png ' width='125px'/></a>
<a class='cas' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Linkedin' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4RFytsBN-4OP1P2cBfabCmET7bZ90kl78oiOKYWnscPvuFAuUkLiC497KHn1bS61nXiiZst_ZbMb8NReEiTyTRbCO0fSx_Jn0gV8El6Hj3StrycxKuZ-FZT5aC4CqyBKyd53GT8gJAw4/s1600/linked+in.png ' width='125px'/></a>
</center>
</b:if>
Save your template.

Read More

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

Labels: , , , , , , ,

bg

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



  1. Go To Blogger - Design- Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Template" box
  4. Search for this,
]]></b:skin>
Below that paste the following code


.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>


  1. Replace http://www.blogger.com/YOUR%20DEMO%20URL%20HERE with your DEMO LINK
  2. Replace  http://www.blogger.com/YOUR%20DOWNLOAD%20URL%20HERE  with your DOWNLOAD LINK 

  • Note:-
  • By default the demo and download buttons will be in Blue colour.It can be changed to orange colour and green colour by simplying replacing blue by green for green colour button and orange for orange colour buttons.

Read More

8 Sept 2012

How to Add Label Name next to Blogger Post Title

Labels: , , , ,

How to Add Label Name next to Blogger Post Title

If you are using the old Blogger interface:
  1. Go to Dashboard - 
  2. Design - 
  3. Edit HTML -
  4. Expand Widget Template (make a backup)

If you are using the new Blogger interface:
  1. Go to Dashboard - 
  2. Template - 
  3. Edit HTML - 
  4. Proceed - 
  5. Expand Widget Template (make a backup)
Find and delete the following lines 

<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
Now Paste the following lines in place of the deleted lines
<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
        <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
          <script type='text/javascript'>
            var SS = &#39;<data:label.name/>&#39;;
            var PrintSS = SS + &quot; | &quot;;
          </script>
         </b:loop>
        <b:else/>
         <script type='text/javascript'>
         var PrintSS = &quot;&quot;;
         </script>        
        </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/></a>
          <b:else/>
           <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
          </b:if>
        <b:else/>
         <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>


Read More

How To Add an Image Next to Blogger Post Title

Labels: , , , ,

How To Add an Image Next to Blogger Post Title

If you are using the old Blogger interface:
  1. Go to Dashboard - 
  2. Design - 
  3. Edit HTML -
  4. Expand Widget Template (make a backup)

If you are using the new Blogger interface:

  1. Go to Dashboard - 
  2. Template - 
  3. Edit HTML - 
  4. Proceed - 
  5. Expand Widget Template (make a backup)

Find this and delete the following lines
  • </body>

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
The Code To be deleted

Paste this lines in place of the deleted line

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



  <div class='post hentry'>



    <a expr:name='data:post.id'/>



    <b:if cond='data:post.title'>



    <table><tr>



     <td class='ssybyposttitle'>



      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Qm-D-LQ8V0wxv0kEPNgJIsxoYiwLBa_S9pS6D7PHMENlqqkTpDJeQm442_RvA41agNk1FL42AHAKhOSTmvMXRNMCXRY38r6HqJXxFnBO-geSzYjrcY0olu-d85t0aD9_fhkaE_ZWt9c/s1600/autobot.png
'/></td>



     <td><h3 class='post-title entry-title'>



      <b:if cond='data:post.link'>



        <a expr:href='data:post.link'><data:post.title/></a>



      <b:else/>



        <b:if cond='data:post.url'>



          <b:if cond='data:blog.url != data:post.url'>



            <a expr:href='data:post.url'><data:post.title/></a>



          <b:else/>



            <data:post.title/>



          </b:if>



        <b:else/>



          <data:post.title/>



        </b:if>



      </b:if>



      </h3>



     </td>



    </tr></table>



     <style>



       h3.post-title {



       margin: 0px !important;



       }



     </style>



    </b:if>


You can change the image by changing the highlighted link above .Currently we have used this image.shown Below

Read More
Subscribe to: Posts (Atom)