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 SCRIPTCAMP. Show all posts
Showing posts with label SCRIPTCAMP. Show all posts

18 Sept 2012

Awesome Floating Sharing Horizontal Bar for blogger

Labels: , , , , ,

How To Awesome Floating Sharing Horizontal Bar for blogger

  1. Goto blogger dashboard 
  2. Template ->Backup template [Recommended]
  3. dashboard ->Template
  4. 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
Read More

17 Sept 2012

How to build a nice-looking sliding photo gallery using JavaScript and jQuery.

Labels: , , ,

how to build a nice-looking sliding photo gallery using JavaScript and jQuery. Full code download included.


Live Demo  Download


There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I've yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one!
Change the Height and width according to your necessities...This is for wordpress but can be used for any other website just change the codes according to your website..

Read More

How to Add numbers to Blogger Comments

Labels: , ,

How To Add Numbers To Blogger Threaded Comments?



  1. Go to Blogger Dashboard > Template
  2. BackUp your template
  3. Click On Edit HTML
  4. Then Proceed
  5. 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



Read More

15 Sept 2012

SUBSCRIPTION BOX WITH SOCIAL NETWORKING ICONS FOR BLOGGER

Labels: , , , ,

Subscription Box With Social Networking Icons For Blogger



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


And add the following code,

<div class='widget-content'>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/tricks2Blogging"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/
gLqbjiBuBfc/s1600/
woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/tricks2Blogging/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpAHmkzuxEuQJKZHbxmqndwYVfshLcZRy5XGywgn14VMrkNL4j0hOfWB713wOqGF_mciV_wYB9P6iwfOlGxvDMec9LI4IEZHHkyCDK95Mvk96CH8ZWtNLx7hGfBhlBYigm6Aw8m4Hbuk/s1600/
woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/tricks2Blogging" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_koi-pUv1P14go_jKHhn9rFGbz3aUnExQo-Y1MHT9w_ZGWgnbTytIy38P2Zb-tRn6yJt72Ix8vYP_7RlbopUI3xGtVwuaL3Fk-tq0hZpQ7ZI7dKtFdNdbv_xT6hoCG7FQNo8z9F5CEQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<style type="text/css">
img.beintouch:hover{
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsMkeZopSKLSpliAGh0uooMvBRQP-0C7N2W_ZrbVtEnss2kafQV6FIcMjHcsiSirRoVCT1XV5jtC4X4R3JGdb3uXWQHK7CRUeaK07n3TBGKzIWCWfxqnGL_eKvQN_uowWdp9ZzykOdFc/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
width:176px;
margin-left:2px;
}
.ebutton {
   background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0pt 0pt transparent;
background: -webkit-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background: -o-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background-color:#abab12;
     border-radius: 4px 4px 4px 4px;
     border: 1px solid #D3D3D3;
     color: #444444;
     cursor: pointer;
     font-weight: bold;
     margin-left: -18px;
     margin-top: 5px;
     padding: 6px 15px;
     text-decoration: none;
}
</style>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeclassifiedsAndSeoSites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="FreeclassifiedsAndSeoSites" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>
</div>



Save your changes.

 Before that make some changes to the code,
Replace The Red Green Blue Codes with your Facebook, Twitter, feed burner codes
x
Read More

How to Add RSS And Email Subscription Widget For Blogger

Labels: , , , , , ,

How to Add RSS And Email  Subscription Widget For Blogger

  1. Go To Blogger - Design
  2.  In Page Elements choose Add a gadget
  3.  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
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 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)