Monday, June 18, 2012

Add Social Media Share Widget With Search Box For Blogger

Social bookmaking is the easy way to get traffic to your
blog.Earlier I gave lot of of social Bookmaking gadget.In this
tutorial Im helping you to add the Search box and link with Rss,
twitter and Facebook.Earlier i gave Add Sleek Search Box With
Social Buttons For Blogger. I also same widget with different style.
This gadget will helps you to grow up your Rss follower,
Twitter follower and Facebook fans.follow these steps.

Add Social Media Share Widget With Search Box For Blogger

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

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

3. Paste below code.

<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SBX3fh5OiR7txLhi6iGefYMS6oYZ1JoPHG7L0pr9jyWret3gJGCE_OlANA1QZ-7dGfgDUtIQN5e_lNgEU3lio2FuTfKY3THHFirC9ZHAlY2MZROCdN7SPwOTRZncokox6SrKsVucLPQ/s1600/search-bgg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
</style>   
<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGjiGjl7AXM1jnmy1-Rb1SmoGYb7GhiaSUoXbJNQdDwCcRqeMHIYFLXaRNgrc9jxj1Axdtu3tDY6B0PIXWQz63PVB4-sWTHvy3ERPr1NlqUIIOPtCOaUZINj4hWqbQacE9imvgYkeP_w/s1600/searchico.png' title='Search' type='image'/> 
</form> </div> </div> <div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'> 
<img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm7LVgyjmqOxbUpOx2l7JhIlL8ju1np7bDr-J0V4bbwSuSTE_P6UmdLLu0D0vbG-_67YV3stiPiQsSYeqd3ik_A-d40cy64mZ0K_kTXlR1Wxf_LF8yTSymq9crZCKoFn2ZGYjsV_XTFg/s1600/social-rss-box-orange-icon.png' title='RSS Feed'/><div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'> 
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> </div> 
</div> <div class='social-connect-widget' style='margin-bottom:10px;'> 
<img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCMhd3PTL-seDi_e8IlJhbBQ3XK19y01EuhjdepK1lN2xPG2nuwYLrf1UKdA55f7cmWoeSuwKXdNu-QUgbLCs8O_LnZcJGUbg7MbxI0gXNqKsuxorpSP3sLzuqBVubjFyX4GYln6vADJs/s1600/social-twitter-box-blue-icon.png' title='Follow Us on Twitter!'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'> 
<a href='http://twitter.com/USERNAME'>
Follow Us on Twitter!</a> 
</div></div>
<div class='social-connect-widget' style='margin-bottom:10px;'> 
<img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzmIAEl_jVKSoYF9Y3OTqsSboi_C_fyMIXX8OqyRGtgtYM19v-zZFLPGS2gEbop8GgqKV_EdffJVO1pu2r2HRFA0pWYp6fs7tqQi5s32ePes4LwRZTOBJ34_R_7IU-FrN3G6TXQrHqXNg/s1600/social-facebook-box-blue-icon.png' title='Be Our Fan'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:-10px;'> 
<a href='http://facebook.com/USERNAME'> Follow us on Facebook! </a></div><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a></div></div>

Replace UserName with your twitter Username
Replace UserName with your Facebook fan page Id

4. Save HTML/Javascript. you are done.

How To Show HTML,Css,Java Script And Other Code in Blogger Post

File Under: CSS , HTML , Java Script No comments

This is useful for bloggers who posting about codes.
When we posting code, that mean we are providing
codes for users.So, if we can put our codes in specific
place like text box. it will easy to grab the code.
This tutorial will helps to make some attractive to your
code ares background.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

/*--Code View www.bloggertrix.com--------------*/
.post blockquote {
background: #C8EFFF url();
background-position:top left;
background-repeat:repeat-y;
margin: 0 0px;
padding: 10px 20px 10px 5px;
border-top: 2px solid #666;
border-right: 2px solid #666;
border-left: 2px solid #666;
border-bottom: 5px solid #666;
font-size: 1em;
color:#000000;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;

}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;

Now when you make new post you can add like below in Edit HTML

* You have start with <blockquote> here your code </blockquote> end.

<blockquote> This is my code </blockquote>

Done, Cheers.

How To Add Google Plus Profile / Page Tab To Facebook Fan Page

File Under: Facebook No comments

This is new tricks you can add Google Plus stream
to your Facebook fan page.So it will helps to increase
Google+ followers.There is Facebook Application called
"Google Plus Tab for Pages" So it will helps to add Google+
Stream Button easily. Follow these steps.

1. Go to Google Plus Tab for Pages

2. Now click Go to App Like below. after you clicked it
It will ask permission to access your Facebook
Basic Information.

3. Now you Will get window. Click Add Google+To your page.

4. Now it will show fan pages which you are running. So, you can add your fan page.

Now Adding Part is done. Now you have to configure it. Follow these steps to configure it.

How to Configure Google+To your page.

1. Fist go to your fan page. Go to this Edit Page >> Update Info.
Now click Apps On left side bar. Now you will get Google Plus Tab for Pages on page. So, click it.

2. Now you will get this window like below. now click configure button.

3. You will get Admin setting like below.

Select the correct page and add Google+ Profile ID Number. You can change "Number of Activities to Show" as your like. After that done. Click Change for save setting. Now configurations also done.

4. you can see the Google plus profile by clicking this Google+ icon

5. Now you are done, cheers

How To Add "ShareThis" Social Bookmark Buttons To Blogger Post

File Under: Bookmark , Java Script , Social Media No comments

This is also Nice social Bookmark buttons.it include
with hover effect.So this buttons helps you to get
more visitors by sharing your post. Earlier i posted
about How to add "Add This" Social Bookmark Buttons.
This is more attractive than it. So, in this tutorial also
helps you to add this social bookmark button to
below post title and end of the post.Follow these
steps to add it to your blog.

Add Button Just below to Post Title

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

3. Add check mark in Expand Widget Templates.

4. Find this tag by using Ctrl+F <data:post.body/>

5. Paste below code before <data:post.body/> code

<!-- AddThis Button bloggertrix.com -->
<span id="st_finder"></span>
<script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js">
</script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",
 {"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"googleplus":["hcount","Google +",""],"sharethis":
["hcount","ShareThis",""]} );var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for 
(i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

Add Button To End of the Post

6. Now Find this tag also by using Ctrl+F

<div class='post-footer-line post-footer-line-1'>
If cant find above tag try to find below tag

<p class='post-footer-line post-footer-line-1'>

7. After found one of above code, paste below code after it

<!-- AddThis Button bloggertrix.com -->
<span id="st_finder"></span>
<script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js">
</script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",
 {"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"googleplus":["hcount","Google +",""],"sharethis":
["hcount","ShareThis",""]} );var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for 
(i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

8. Now click Save Template.
Cheers you are done.

How To Add 3 Column Footer To Blogger

File Under: Widget 10 comments

When we searching blogger template, actually we
cant find whats we want.So, we have to customize
template by own.Sometime we cant find 3 column footer
blogger template. In this tutorial will explain how to adding
3 column footer to blogger.adding three column feature is easy.
its not hard like you think. Follow These steps to
add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this code by using Ctrl + F   <b:section class='footer' id='footer'/>

4. Replace   <b:section class='footer' id='footer'/>    With below code

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/></div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div><div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'><b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section></div><div style='clear:both;'/></div>

5. Now Find this code by using Ctrl + F ]]></b:skin>

6. Paste below Before ]]></b:skin> code

/* Footer by www.bloggertrix.com */
#footer-column-container {clear:both;}
#footer-column-container h2{font-size:18px;text-align:left;color:#ddd;Times New Roman&quot;,Times,serif;
font:normal bold 18px Arial,Georgia,&quot;text-transform:none}
.footer-column {padding: 10px;}

7. Now save your template.After go back page element and add widgets as your like.
Cheers

How To Add Twitter Follower Box To Blogger

File Under: Social Media , Twitter , Widget 1 comment

Twitter also great way to increase your blog traffic.
But Its depend how many followers you have got.So,
This is a great widget for bloggers.because this widget
allow your visitors to follow you without leaving your site.
This is also similar to facebook fan box. you can see
few follower from this widget. This is also simple widget
That you can add it to your blog within few steps.Follow
these few 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.

<!-- Twitter Follower Box www.bloggertrix.com -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("bloggertrix");</script
type="text>
<!-- End Twitter Follower Box -->

*Replace bloggertrix With your twitter username

4. Save HTML/Javascript. you are done.