Tricks2Blogging: BLOGGER TIPS

Showing posts with label BLOGGER TIPS. Show all posts

18 Sept 2012

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

Latest and most Popular SiteMap ever For Blogger

Labels: BLOGGER POST TRICKS, BLOGGER TIPS, BLOGGER WIDGETS, FEATURED

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

Goto Blogger Dashboard {For Updated Blogger Interface}
Click on Pages
Create a New -> Blank Page
Then Click on HTML.
Now Copy & Paste the following Codes in it.
Change the Red URL with your website's URL
Save it
Enjoy

Goto Blogger Dashboard {For Old Blogger Interface}
Click on Posting -> Edit Pages
Create a New Page
Then Click on HTML.
Now Copy & Paste the following Codes in it.
Change the Red URL with your website's URL
Save it
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..

How To Increase Your Website PageRank

Labels: BLOGGER HACKS, BLOGGER TIPS, BLOGGER TRICKS, SEO For Blogger

HOW TO INCREASE YOUR PAGERANK- [NEWELY UPDATED]

Here are 5+ sure fire tips that help to built organic page rank to your blog.

Google PageRank is an Exclusive Term that most website holder or Blogger don't ompletely understand or ignores it. In fact there are few people who completely understands it, because google keep the secret of its page rank Algorithm.

You cannot boost your page rank in a day...

GET INCOMING LINKS FROM QUALITY RELATED WEBSITE

The best way ever to increase your google page rank might not make a difference over a Sleep, but in course of time it will make a very big difference. the key is to get incoming links to your Website from authoritative, qualified domains and well-trafficked websites and blogs that are related to your website

Example - If you owns a website that contains information about hacking, blogging, blogging tips, blogging tricks, blogging widgets, blogger templates, website hacking, then make a link make a backlink to our website .. and attract traffic from our website to increase your page rank.

TAKE PART IN LINK EXCHANGE

Many website/blogger thinks that it is important to have incoming links to boost their blog's page rank so they leave comments in many website, across everywhere and anywhere in the internet, Participating in random links.

Remember, as the first item on this list says, Google's algorithm cares about quality links, not quantity. In fact, your page rank could be downgraded if your blog is deemed to be little more than a bunch of links.

To increase your page rank copy and paste this code in your website and Mail me:-Tricks2Blogging@gmail.com

REMEMBER TO USE SEO TECHINIQUES

Search engine optimization is an important part of increasing Google page rank. Read the top 10 SEO tips, and make sure you're using them.

WRITE ORIGINAL CONTENT

Stop copying CONTENTS, Instead Use the Link to your contents, by which you can increase your page rank by that link. You Must Keep in Mind that by copying you cannot increase you page rank bacause Google's algorithm cannot tell the difference and will either give the originating site the credit and downgrade the others or downgrade all of the sites that publish the duplicated content. Google acts harshly toward any kind of content scraping, even if you're completely innocent. Once your page rank is downgraded, it can be nearly impossible to get it back up again.

ALWAYS KEEP THIS IN MIND, IF YOU WANT TO INCREASE YOUR PAGE RANK. SO STOP COPYING CONTENT....INSTEAD LINK THEM USING THE LINK CODE..START NOW AND LINK THIS CODES TO YOUR WEBSITE

SEO: Search Engine Optimization For Blogger

Labels: BLOGGER TIPS, BLOGGER TRICKS, FEATURED, SEO For Blogger

SEO Process :Blogger Is Now SEO Friendly

SEO Process :Blogger Is Now SEO Friendly

Go to Settings option from Blogger Dashboard.
Then select Search Preferences option.
Search Preference will look like this

Now SAve ItNow a new option  Search description will be activated in post editor section.Also you can add metatag description for each and every post in your blog.

5.Next in the custom page not found option.. enter the message to be appeared if  broken link is found.And  next in the redirect url you can redirect the broken link pages to another url.

6.In Crawlers and Indexing section,do not make any changes to robots.txt option.In the Custom robots header tags check yes option and click  all and noodp in Homepage,HomepageArchive and Search pages,Default for Posts and Pages

SUBSCRIPTION BOX WITH SOCIAL NETWORKING ICONS FOR BLOGGER

Labels: BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, PLUGINS, SCRIPTCAMP

Subscription Box With Social Networking Icons For Blogger

Go To Blogger - Design
In Page Elements choose Add a gadget
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>

Replace The Red Green Blue Codes with your Facebook, Twitter, feed burner codes

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

Labels: BLOGGER POST TRICKS, BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, FEATURED

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

Go To Blogger - Design- Edit HTML
Backup your template
Click the "Expand Widgets Template" box
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

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

Add Sharing Widget With Multi Colour Effects on Hover

Labels: BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS

Add Sharing Widget With Multi Colour Effects on Hover

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

And add the following code,


<style>
.box {
-moz-box-shadow: inset 10 0 5px 15px #888;
-webkit-box-shadow: inset 10 0 5px 5px#888;
box-shadow: inset 10 0 5px 5px #888;
background: #f2f2f2;
font-family: verdana;
text-shadow: 1px 1px 1px white;
height:auto;
padding-left: 10px;
}
.topbox h3{
font-family: Times new roman;
padding-top: 10px;
padding-left: 6px;
font-size: 14px;
margin-bottom: 0px;
text-transform: uppercase;
text-shadow:1px 0px 0px #2f2f2f;
box-shadow: 0 4px 2px -2px gray;
}
.myaligntop{
vertical-align:text-top;
}

.twitter {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYcFhVCRfeFNZ7rafmdvwn_uXmIveE3jlRsY5O5y0k6n3k7RLnQz6DJbS5QNjJNRU4NqkkLk5CXOK87oXm2DxIhtcIHlkPaxFINfCRZcWunqjJk2zVpkVjVGwZFaUx9lbbEVvQwSTFpHm/s1600/BannerTwitter11.png') bottom;
	text-indent: -99999px;
}
.twitter:hover {
	background-position: 0 0;
}

.google {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb7tiRCvK2vjxvaxdiQQDp5aAjFrxa4n5FXMpCdcQCQpZM7zVUbMUxSvXFXJIOChssR5uGoTDgxg_uX51s0TnPLfoqkdjEhh2v-By5kK6sssidMXKhx0gB_B7iQ8FoB6AEKu5G3ysP-Zl/s1600/BannerGooglePlus11.png') bottom;
	text-indent: -99999px;
}
.google:hover {
	background-position: 0 0;
}

.facebook {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd49gnAo1WWTOcIAXHxTXL9LBMlLptpCwrAxu21TlwMVb6FYmWXHEt-dwAeStOZfCUu8gClMf_aFQuULq_rt0kTPVwMHCNA9oX6eR0RbEhyK7NJCBNvA5ZFkBvc55FoBqac79IVIqd-b4-/s1600/BannerFacebook11.png') bottom;
	text-indent: -99999px;
}
.facebook:hover {
	background-position: 0 0;
}

.stumbleupon {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaUMHCXKunyi1co-GSJVMe1eqwZWwB9cgNtxDxth7SCLLjl53CgOB4KxJH__BL-zReT0wY4wbmAeZqmCKZWjS_NCuwZsFJtobPmWrh-9bOdd4ccPSXGeavKTED0rCO8QFYW3_dJTxqUD5/s1600/
BannerStumbleUpon11.png') bottom;
	text-indent: -99999px;
}
.stumbleupon:hover {
	background-position: 0 0;
}
</style>
<td class="box">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>
<a class="twitter" href="https://twitter.com/tricks2Blogging" rel="nofollow">Twitter</a>
<a class="google" href="https://plus.google.com/u/0/108636145831102184488
" rel="nofollow">Google Plus</a>
<a class="facebook" href="http://www.facebook.com/tricks2blogging" rel="nofollow">Facebook</a>
<a class="stumbleupon" href="http://www.stumbleupon.com/" rel="nofollow">StumbleUpon</a>
</td>

Or Click This

.twitter {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYcFhVCRfeFNZ7rafmdvwn_uXmIveE3jlRsY5O5y0k6n3k7RLnQz6DJbS5QNjJNRU4NqkkLk5CXOK87oXm2DxIhtcIHlkPaxFINfCRZcWunqjJk2zVpkVjVGwZFaUx9lbbEVvQwSTFpHm/s1600/BannerTwitter11.png') bottom;
	text-indent: -99999px;
}
.twitter:hover {
	background-position: 0 0;
}

.google {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb7tiRCvK2vjxvaxdiQQDp5aAjFrxa4n5FXMpCdcQCQpZM7zVUbMUxSvXFXJIOChssR5uGoTDgxg_uX51s0TnPLfoqkdjEhh2v-By5kK6sssidMXKhx0gB_B7iQ8FoB6AEKu5G3ysP-Zl/s1600/BannerGooglePlus11.png') bottom;
	text-indent: -99999px;
}
.google:hover {
	background-position: 0 0;
}

.facebook {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd49gnAo1WWTOcIAXHxTXL9LBMlLptpCwrAxu21TlwMVb6FYmWXHEt-dwAeStOZfCUu8gClMf_aFQuULq_rt0kTPVwMHCNA9oX6eR0RbEhyK7NJCBNvA5ZFkBvc55FoBqac79IVIqd-b4-/s1600/BannerFacebook11.png') bottom;
	text-indent: -99999px;
}
.facebook:hover {
	background-position: 0 0;
}

.stumbleupon {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaUMHCXKunyi1co-GSJVMe1eqwZWwB9cgNtxDxth7SCLLjl53CgOB4KxJH__BL-zReT0wY4wbmAeZqmCKZWjS_NCuwZsFJtobPmWrh-9bOdd4ccPSXGeavKTED0rCO8QFYW3_dJTxqUD5/s1600/
BannerStumbleUpon11.png') bottom;
	text-indent: -99999px;
}
.stumbleupon:hover {
	background-position: 0 0;
}
</style>
<td class="box">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>
<a class="twitter" href="https://twitter.com/#!/freeclassified6" rel="nofollow">Twitter</a>
<a class="google" href="https://plus.google.com/116484357335441652801" rel="nofollow">Google Plus</a>
<a class="facebook" href="http://www.facebook.com/forblog809" rel="nofollow">Facebook</a>
<a class="stumbleupon" href="http://www.stumbleupon.com/stumbler/dajmwt" rel="nofollow">StumbleUpon</a>
</td>

/*]]>*/ </style> <a href="http://www.tricks2blogging.blogspot.in/" title="Tricks2Blogging" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

Replace The RED Codes with your URl

How to Change Default Avatar in Blogger Comments

Labels: BLOGGER HACKS, BLOGGER POST TRICKS, BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, FEATURED, HOW TO D0, PLUGINS, SCRIPTCAMP

How to Change Default Avatar in Blogger Comments

If you are using the old Blogger interface:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmeA86zkkBeBsDbBDJJyS_gHcpJZXZIQ6M7UnJDIw99k0z51bnoU2bGjwmIAP9Qio2zzbfowjkRHTYSc-Zdu6BajQbHOGopGd5xSdK2LcCSDOG_UK1i51zXAAuSe0yR5ta9I6vcvbqFA/s1600/default_avatar.gif&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaihJ-D4zYXxr3t4CHVq_GgNCZjGTgz7t2YsdHqt-2dPKzQJrSkwe9Cy8UwipG1ushqkDVSBusbuPZXQC9oweOQWHQZiOXbADb8BiEXqJK4J7g9hzcMe17NV5wdXaoZ1RynH-FCxbzk2g/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>

Save the Template

For Anonymous users: Replace the code in red with the url address of the image you like below
For Blogger users: Replace the URL in blue with the image you like below

STYLE-1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmeA86zkkBeBsDbBDJJyS_gHcpJZXZIQ6M7UnJDIw99k0z51bnoU2bGjwmIAP9Qio2zzbfowjkRHTYSc-Zdu6BajQbHOGopGd5xSdK2LcCSDOG_UK1i51zXAAuSe0yR5ta9I6vcvbqFA/s200/default_avatar.gif

STYLE-2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1pd-Lm92e5l56Egyw_KEBAf5T21Rgs158FwNSC9lWhH4ZHZxUM9sM888CrMNKuqVj134nsm5tnTN0Ho9YGbEAHIQxLyXwK8lH_Z9yb4hyphenhyphenqWt6v3A8X65a3prnKt2ysXSefCOUxumi_A/s1600/facebook.gif

STYLE-3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNz6v5lNmhlwMQ5tX1aMeNfX7yJORA71zNOjFXxseKlkWghuCZX6y8MNbK6-uFBbeh7OCG7toCWbQfw76-Vl3IA1EJnaxx9CWIm8D434sbVqICDjzd53mqz1wx3rZZTs-s6_mZ_nBSYzo/s1600/anonymous3.png

STYLE-4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7eEmSROy-Hcjub35ygBS15j281QfKw3hdW1gD-5oafXdve2v8J-Yskg-bGq_LlBuC0lOA4XMs1a0e4K1RUVbMOK9N0pHCDLX3E1ZTNhSQWCpfE7WOVrNAVjyocoqhHYyR42ct0Gba-M0/s1600/blogger-user.png

BreadCrumb Design CSS ~ FastArrow

Labels: BLOGGER HACKS, BLOGGER TIPS, BLOGGER TRICKS, BLOGGER WIDGETS, SCRIPTCAMP

Design 3 ~ FastArrow
Lots Of website today use Breadcrumb in their website, It help audience to navigate easily through your website. Not only it help you audience to navigate quickly, but also make your blog|website look better. and all we know that beautiful website attract traffic.

.breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}

Tricks2Blogging

18 Sept 2012

Awesome Floating Sharing Horizontal Bar for blogger

How To Awesome Floating Sharing Horizontal Bar for blogger

17 Sept 2012

Latest and most Popular SiteMap ever For Blogger

Latest And most popular sitemap ever- 2012

16 Sept 2012

How To Increase Your Website PageRank

HOW TO INCREASE YOUR PAGERANK- [NEWELY UPDATED]

GET INCOMING LINKS FROM QUALITY RELATED WEBSITE

Example - If you owns a website that contains information about hacking, blogging, blogging tips, blogging tricks, blogging widgets, blogger templates, website hacking, then make a link make a backlink to our website .. and attract traffic from our website to increase your page rank.

TAKE PART IN LINK EXCHANGE

REMEMBER TO USE SEO TECHINIQUES

WRITE ORIGINAL CONTENT

ALWAYS KEEP THIS IN MIND, IF YOU WANT TO INCREASE YOUR PAGE RANK. SO STOP COPYING CONTENT....INSTEAD LINK THEM USING THE LINK CODE..START NOW AND LINK THIS CODES TO YOUR WEBSITE

SEO: Search Engine Optimization For Blogger

SEO Process :Blogger Is Now SEO Friendly

15 Sept 2012

SUBSCRIPTION BOX WITH SOCIAL NETWORKING ICONS FOR BLOGGER

Subscription Box With Social Networking Icons For Blogger

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

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

How to Add RSS And Email Subscription Widget For Blogger

How to Add RSS And Email Subscription Widget For Blogger

Add Sharing Widget With Multi Colour Effects on Hover

Add Sharing Widget With Multi Colour Effects on Hover

5 Sept 2012

How to Change Default Avatar in Blogger Comments

How to Change Default Avatar in Blogger Comments

3 Sept 2012

BreadCrumb Design CSS ~ FastArrow

Labels

email updates

Popular Posts

Like us on facebook