All In One Social Media Sharing With Rss Subscribe Gadget For Blogger

Cool All In One Social Media Sharing With Rss Subscribe Gadget For Blogger

11

Actually social bookmaking is the easy way to get traffic 
to yourblog.Earlier I gave lot of  of social Bookmaking 
gadget.So, In this gadget most useful than other gadget.
because It Include Facebook fan page, Twitter follower
button, Google Plus button, Rss subscribe and other all
social networks.I think this is one of best social gadget.
You can install it to your blog with few steps. Try below
Steps to Add it to your blog.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<style> 
/* bloggertrix.com Widget  */ 
 #btrix_all-in-one-bar { 
 border: 0; 
 margin-bottom: 10px; 
 margin: 0 auto; 
 width:300px; 
 } 
.fb-likebox { 
 background: #fff; 
 padding: 10px 10px 0 10px; 
 border: 1px solid #D8E6EB; 
 margin-top: -2px; 
 height:65px; 
 } 
.googleplus { 
 background: #F5FCFE; 
 border-top: 1px solid #FFF; 
 border-bottom: 1px solid #ebebeb; 
 border-right: 1px solid #D8E6EB; 
 border-left: 1px solid #D8E6EB; 
 border-image: initial; 
 font-size: .90em; 
 font-family: "Verdana","Helvetica",sans-serif; 
 color: #000; 
 padding: 9px 15px; 
 line-height: 1px;} 
.googleplus span { 
 color: #000; 
 font-size: 11px; 
 position: absolute; 
 display:inline-block; 
 margin: 9px 70px;} 
.g-plusone {    float: left;} 
.twitter { 
 background: #EEF9FD; 
 padding: 10px; 
 border: 1px solid #C7DBE2; 
 border-top: 0;} 
#mashable { 
 background: #EBEBEB; 
 border: 1px solid #CCC; 
 border-top: 1px solid white; 
 padding: 2px 8px 2px 3px; 
 text-align: right; 
 border-image: initial;} 
#mashable .author-credit {} 
#mashable .author-credit a { 
 font-size:10px; 
 font-weight: bold; 
 text-shadow: 1px 1px white; 
 color: #1E598E; 
 text-decoration:none;} 
#email-news-subscribe .email-box{ 
 padding: 5px 10px; 
 font-family: "Verdana","Helvetica",sans-serif; 
 border-top: 0; 
 border-right: 1px solid #C7DBE2; 
 border-left: 1px solid #C7DBE2;
 border-bottom: 1px solid #C7DBE2; 
 border-image: initial; 
 height:35px;} 
#email-news-subscribe .email-box input.email{ 
 background:#FFFFFF; 
 border: 1px solid #dedede; 
 color: #999; 
 padding: 7px 10px 8px 10px; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 -o-border-radius: 3px; 
 -ms-border-radius: 3px; 
 -khtml-border-radius: 3px; 
 border-radius: 3px; 
 border-image: initial; 
 font-family: "Verdana","Helvetica",sans-serif;}    
#email-news-subscribe .email-box input.email:focus{color:#333}    
#email-news-subscribe .email-box input.subscribe{ 
 background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
 background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
 -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); 
 font-family: "Verdana","Helvetica",sans-serif; 
 border-radius:3px; 
 -moz-border-radius:3px; 
 -webkit-border-radius:3px; 
 border:1px solid #cc7c00; 
 color:white; 
 text-shadow:#d08d00 1px 1px 0; 
 padding:7px 14px; 
 margin-left:3px; 
 font-weight:bold; 
 font-size:12px; 
 cursor:pointer; 
 border-image: initial;} 
#email-news-subscribe .email-box input.subscribe:hover{ 
 background: #ff9b00; 
 background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); 
 background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); 
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
 outline:0;-moz-box-shadow:0 0 3px #999; 
 -webkit-box-shadow:0 0 3px #999; 
 box-shadow:0 0 3px #999 
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); 
 background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); 
 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); 
 border-radius:3px; 
 -moz-border-radius:3px; 
 -webkit-border-radius:3px; 
 border:1px solid #cc7c00; 
 color:#FFFFFF; 
 text-shadow:#d08d00 1px 1px 0}    
#other-social-bar { 
 background-color: #F5FCFE; 
 box-shadow: 0 1px 1px #FFFFFF inset; 
 padding: 5px; 
 font-family: "Verdana","Helvetica",sans-serif; 
 font-weight:none; 
 overflow: hidden; 
 border: 1px solid #B6D0DA; 
 border-bottom: 1px solid #B6D0DA; 
 height:45px; 
} 

#other-social-bar1 { 
 background-color: #F5FCFE; 
 box-shadow: 0 1px 1px #FFFFFF inset; 
 padding: 5px; 
 font-family: "Verdana","Helvetica",sans-serif; 
 font-weight:bold; 
 overflow: hidden; 
 border-left: 1px solid #B6D0DA; 
 border-right: 1px solid #B6D0DA;  
 border-bottom: 1px solid #B6D0DA; 
 height:10px;}
.addthis_toolbox1{margin-left:8px;margin-top:8px;text-align:center}
.addthis_toolbox1 .custom_images a{width:32px;height:32px;margin:0 2px 0 2px;padding:0}
.addthis_toolbox1 .custom_images a:hover img{opacity:6}
.addthis_toolbox1 .custom_images a img{opacity:0.65}
</style>
<style> 
#email-news-subscribe .email-box input.subscribe{ 
background: #FFCA00; 
} 
</style>
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="btrix_all-in-one-bar" >

<div id="other-social-bar">
<div class='addthis_toolbox1'>   
<div class='custom_images'>

<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3p-NMsSKAv7OJq-NOWNk4fBMlYePuxoBdpBa018D4vWmXCj0GLoCuKuLC2K6bWhdgew-QQFhSkyOVzZFE4C-12B5KwkJIMa1yvl2My77WMYnnCLQMvHuE0IHxWb8u4Crt6NRS1Bua-rs/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrA2TVNhbYf8RzWVtXrxR-rzjT5E7XIcigwO76IXL9G4ivJPX5sddji0ixiR_CB7DlZyYxYQnBCuaO9gnCrK8zZzQzBosH_GNC4wg617W8P2ifJ75FhSOnK2UX1yI7_986JwV2JkMEGd8/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8tP78nFzekkSl8uzRrrbO49NYhP9I7g5yXNZNmu5WxGX8wK0K1szhb6k6C7KafRTf2bIwiPQEHGKblU0d77O6hd_T6KPP9ShFypEA45JMRsRa9-LwYjlVB3V1IE1N75BDwYmwEeaSMZ8/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVLLNpo8rN3yUX8CkLklNDK-_tMblYfKQ2RRpJzaCaPyfD8At-oYyrXJa_Qgy4TGVqSnQiFKeSFhtGIsLo6qitrRN9837bLjg8D5fKX-wKpFDllXLA_rFDdHxMiBwQPe7bCMoyS8erL48/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-CoS0YdFntC6p8TnwSkzzeC0Otqo2crF6geqtyU0Qp7-nqCPfN8R2RjBbWuHiZUG2366XaCaAbo8DnIApAplUpl0u3OhOF961Ra3APkagUha8P2NTY4iA-QpnfJ-1n8BJx6V8fHbXxs/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-LrxEqau_zm7fNw18NBcJFw3VYqzsNxSYymIec2xotvmtrKRqPl8goA1wpMlIrz__eaN8v3yGYczPNwYxqMPBbKdgdlqzdxqeRiUbwM8fwHZYAkOazYuSLRYE7C4CgSA0QkqHgDUvQg/s1600/more.png' width='32'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVavSTrkJdPJSIdo2BhiNyUJ32Nsd-C-mKgGGrNGYGjxAtM4GlCxyU2rmlZOqr3BLq-3R4uyet3alKnP5erTd6ziYrmw1lhXEMNW_23vdBtIoA17a6nlypJi5m_-OMHP2FkNQkret4lE/s1600/image.png' target='_blank'/></a>
</div></div></div><!-- Facebook -->
<div class="fb-likebox">
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/bloggertrix" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div>
<div class="googleplus"> <!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> 
<!-- Twitter --> 
<iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=bloggertrix&amp;show_count=&amp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <!-- Email Subscribe -->
<div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
<input type="hidden" value="bloggertrix" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form></div></div><!-- Other Social Bar --><div id="other-social-bar1"><a style="margin-top:-5px; float:right; font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bloggertrix.com">Blogger Widget</a>
</div>
</div></div>

Replace bloggertrix with your Facebook fan page Id 
Replace bloggertrix with your twitter Username
Replace bloggertrix with your Feedburner Id  
                                 
4. Save HTML/Javascript. you are done.

Read moreAdd Your Opinion 0 Opinions

Create a Table of Contents or Archives Page in Blogger

Hooray! I've finally created an Archives Page and am so exhilarated with the result, especially a long-awaited one for my Blogger blogs! Some may name it Table of Contents, Index or Sitemap Page instead. Have a peek and you too may fall for one, yes? Confident that some bloggers would, I simply couldn't resist sharing this goody here. :-)

Went on a treasure hunt a couple of days ago for a Table of Contents or Sitemap widget for Blogger and after exploring for hours through various potential sites and experimented them unsuccessfully, I finally came across some awesome widgets (scripts) created by Abu Farhan that worked like a charm and were instant successes!

Just inserting his script for the Table of Contents for archived posts with only 2 lines of code in a Blogger Page, was able to automatically generate a list of the entire collection of all my posts, with titles neatly linked and sorted or archived by dates. A picture below to illustrate the impressive result!

Isn't that marvelous and it's so simple and quick to install to any Blogger blog! Thank you so much, Abu Farhan, I'm most grateful!

An Archives Page like this with the complete contents presented together in a single page will definitely make our blog posts easily accessible and navigable, providing more options not only to readers and search engines alike, but also as a reference to blog owners ourselves, to recall whatever were published and enable easy addition of internal links to new posts, when needed.

Here's how to create a Table of Contents in an Archives Page, sorted by dates :

1. Create a Page first - go to Dashboard | Edit Posts, which will then open the Posting tab in Blogger. Select Edit Pages, click on the New Page button and type in the Page title, e.g Archives, Table of Contents or Sitemap, or whatever that you fancy. Ideally, the title should be short as that will also serve as the page tab's name in your blog.
   
2. Next, select the Edit HTML mode to prepare your post. Copy and paste the following code into the post box :
   
   <script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js">
</script>
<script src="http://jacqsbloggertips.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">
</script>
   
   Then, change the code in red (jacqsbloggertips.blogspot.com) to theURL of your Blogger blog.
   
   
   
3. You can add extra content, such as an introductory/explanatory paragraph above or below the script code, if you wish. Do this while in the Edit HTML mode. Then click Publish Page and you're done. Once your Archives Page is published, its tab will appear under your blog's header.
   (Tip: the Page tabs are linked to the Pages widget (gadget) at Layouts | Page Elements where you can configure the page list).

Hope the above tutorial on creating an Archives Page on a Blogger blog had helped you to create a similar page for yourself and put smiles on your face! Enjoy! :-)

For those with Wordpress-powered website, you can learn to install the WP-Archives plugin to create an Archives Page...refer to my tutorial at jaycjayc.com, if you're interested.

Read moreAdd Your Opinion 3 Opinions

hide widget from Homepage

How to hide Addthis share button from Homepage

In the tutorial How to add social share buttons bellow Blog post,i have shown you how to add Addthis share buttons bellow blog post,now i am going to show you how it can be shown only on the post pages,i.e all the pages except the Homepage,because it is not necessary to show on homepage for the post with jump break.

Follow the following steps carefully

1) Go to Blogger------Design------Edit HTML

2) Backup your template

3) Now press Ctrl+F and search for the code bellow

<!-- AddThis Button BEGIN -->

The Addthis codes will look like this

 <!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-50068963165669d6' type='text/javascript'/>
<!-- AddThis Button END -->

4) Now add the code <b:if cond='data:blog.pageType == &quot;item&quot;'> before the above codes

5) Add the code </b:if> bellow the above codes

After the modification,the whole codes for showing Share buttons only on post pages i.e hiding the share buttons from Homepage will look like this

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-50068963165669d6' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>           

6) Now click on save

• If you get any problem in implementing the codes contact me

Read moreAdd Your Opinion 0 Opinions

Round subheading and h2 post

Customized round edged Sub heading style for blogger

 12:49 AM  Mithun pee cee

Heading is an important part of the blog post. When you are writing a new post there will be many headings. Most of the bloggers use the heading style same as the default template style. That is not a bad thing. But when you are writing a sub heading in the post, it is better to add any other different style heading i.e, a customized heading.

Actually there are different types of headings available.While writing a new post there are heading options which are Heading,Subheading and Minor Heading. But most of the blogger fail to notice this option. Nevertheless this ignorance do not create much difference apart from the size and the heading tags like h2, h3 and h4.. There is no other difference that you will see. Here I am showing two different style of subheading for blogger.

1. Rounded edge subheading

2. Rounded edge with shadow

For adding one of above customized sub heading to your blog post follow these steps.

#. Go to blogger dashboard

#. Design and select edit HTML

#. Expand widget templates.

#. Search for ]]></b:skin> 

#. And paste the code above it.

Code For Rounded Edge Sub Heading

This is what I am using. It is simple and looks very neat. Copy the code and paste it

.post h3 {
color:#3d85c6;
border:1px solid #BDBDBD;
-moz-border-radius: 10px;
border-radius: 10px;
padding:4px;
font-size: 12pt;
}

Code For Rounded Edge With Shadow 

This is another customized heading style same as mentioned above but it  comes with shadow. Copy the code and paste it.

.post h3 {
color:#3d85c6;
border:1px solid #BDBDBD;
-moz-border-radius: 10px;
border-radius: 10px;
padding:3px;
font-size: 12pt;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;}

After pasting the code in the template, in order to get the appropriate effects in the post, choose a heading and click the sub heading option from above. Preview the settings to view the effects.

You can change the color by replacing the code #3d85c6 and pasting any HTML color codes. Let the colors match your blog template.

Why using custom heading style 

Custom heading makes your blog post more attractive and readers can easily under stand what is said in the post. Including heading tag is more important for your blog SEO. So it will also help your blog in search result.

Read moreAdd Your Opinion 0 Opinions