Beautiful Page Navigation Widget for Blogger/Blogspot

Page numbered navigation widget for blogger is very beautiful widget to navigate blogspot pages very easely and looking feel good. All navigation widgets are based on JavaScript (this also). you can use this widget very easily and simple installation then others.

Preview:

Manual Installation:-

1. Login To Your Blogger And Go To Design Section
2. Then Click On Edit/Html
3. Now search for </body> and place the below codes before it.

<style type="text/css">
    .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
    .showpage a {float:left;background:url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs1bVJh2xzDmnCPh2Xd1D-fSdpP61hWCtFvOcQe_WhruZSUhwQYyiHp-BWjCiGnM3OJB_wIpPoYciSlrpjNu_RdZMnFUxX0S7hTtuUG0N2zIGT4KBVXGX0urdUiWcgTYujzd2s2x7Vv_S_/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
    .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
    .showpageOf{float:left;padding-top : 6px;}
    .showpageNum a {background:url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9J6hP4orG9-We4Sccka0mQW2K9Wcod9eq72RQdVc01AXbvk3ESskVI-wWaVfWSfruh30975Ip8wGfCLhTvBawNIIvUmVIMl2vaDaJSU9k-oy93lNDsmE6YzHOcl91BMR7CMvLkFnuhVA/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
    .showpageNum a:hover {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9J6hP4orG9-We4Sccka0mQW2K9Wcod9eq72RQdVc01AXbvk3ESskVI-wWaVfWSfruh30975Ip8wGfCLhTvBawNIIvUmVIMl2vaDaJSU9k-oy93lNDsmE6YzHOcl91BMR7CMvLkFnuhVA/) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9J6hP4orG9-We4Sccka0mQW2K9Wcod9eq72RQdVc01AXbvk3ESskVI-wWaVfWSfruh30975Ip8wGfCLhTvBawNIIvUmVIMl2vaDaJSU9k-oy93lNDsmE6YzHOcl91BMR7CMvLkFnuhVA/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
    .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script type='text/javascript' src="http://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>

#var pageCount=5; ~ Number of posts per page

1. Save template and Check your Blog

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And just above it, paste the following code:

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

    <div class='post-footer'>

Step 5. Just above it, paste the code below:

<!-- Related Posts Code Start-->
<!--Remove-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!

How to add a gadget/widget inside your Blogger Blog header

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit.
 But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize blogger header

Step 1: Go to Blogger Dashboard >> Design >> Edit HTML and backup your template

Step 2: Check the "Expand widget templates" box

Step 3: Find (CTRL + F) this piece of code:

/* Header
----------------------------------------------- */

Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Find the following code:

    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>

Step 8. Just above it, paste this:

<div style='clear:both;'/>

Note: if you can't find the code from step 7, search for this instead:

      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>

... and paste the code from step 8 just below it.

Step 9. Save Template.

B. Add extra gadget/widget section to Blogger Header

Let's go one step forward and add an extra gadget section within Blogger header in new template designers.

Step 1: Go to Dashboard >> Design >> Edit HTML and backup your template.
Step 2: Find for the below code which you have implemented in previous step:

<div style='clear:both;'/>

Step 3. Paste before/above it, the following code:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 4. Now find:

]]></b:skin>

Step 5. Paste just above it, this CSS code:

.header-right {
display:inline-block;
float:right;
width:400px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 6. Save Template.

Now all you have to do is to go to Design >> Page Elements tab and add a new gadget to the newly created extra header section in Blogger. You may find that the extra gadget section is created just under your Blogger header as shown in the image below.

Don't worry about its position, the widget now should appear side by side.

If you have any questions or need some help, leave a comment below.

Add Google Adsense to Blogger Header (Above the Title)

In the past tutorials ( See: Social Media Buttons beside Adsense ads & Adsense inside Blogger Header ) i've shared several tricks for Adsense ads placement that may help you to increase your adsense earnings. Now, i will show you how to add Google Adsense above your header, for instance just above the title of your Blogger blog. This can be done by adjusting your template to give you the option of adding more than one widget to the header area.




Add a new element to Blogger header

1. If you are using the old Blogger interface: 

• Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template 

If you are using the new Blogger interface: 

• Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template 

2. Next try to find (CTRL + F) this piece of code:

<div id='header-wrapper'>

...if you can't find that one, search for this one:

<div class='region-inner header-inner'>

3. Immediately after one of these lines, you'll see this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

4. Replace the values in red like in this example below:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

5. Save the Template.

Adding the Adsense ad unit above the Blogger header

1. Navigate to Design > Page Elements and view the new option to add a gadget to the header area

2. Click on Add a Gadget link and select the Google Adsense gadget.

Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an AdSense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template.

3. Click Save

Now View your Blog to see your new Google Adsense unit. If all is going well, your new AdSense ad unit should appear something like in the image below:

This is a very good Adsense placement, i'm sure you're gonna like it

If you have a any questions, please feel free to ask below.

Insert HTML-CSS-Javascript Codes in Blogger Posts As Plain Text

If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.

How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts?This is one of a most common question which arrives in users minds. It has been a biggest headache for many Blogger (Blogspot) users. Still many Blogspot users are unable to discover why they cannot display HTML coding as plain text in there posts.

So today I will show you how you can easily insert any HTML coding in you Blogger Posts. We will insert all of our HTML codes in a Stylish Box which will make our coding look different from the all other text present in our post.

I know, you would love to preview how your coding would look  a like after applying this tutorial.Here it is see the live demo here

Insert CSS Style Sheet in Blogger Template:

First we will insert the CSS style Sheet to stylize our quote box.

• Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed 

• And now Search For ]]></b:skin> With (CTRL+F)

• After you find ]]></b:skin> just above it paste the following coding

.post blockquote {

background: #C8EFFF url(https://lh4.googleusercontent.com/-A-bHiDpJJDQ/UOUZM15D_OI/AAAAAAAAAhQ/DfDswKeB_Kc/w497-h373/1.png);

background-position:top left;

background-repeat:repeat-y;

margin: 0 20px;

padding: 10px 20px 10px 45px;

border-top: 2px solid #DDD;

border-right: 5px solid #666;

border-left: 2px solid #DDD;

border-bottom: 5px solid #666;

font-size: 0.9em;

}

.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 After pasting the above code save your template by pressing Save Template Button

Inserting HTML, CSS or JavaScript Coding in Blogger Post as Plain Text:

Now in order to display the HTML, CSS or JavaScript coding in your Blogger post we'll use a blogger tool called "QUOTE". This tool is available in your Blogger Post Editor which will make your HTML Coding appear as plain text,

• First Go To Blogger >> Your Blog >> Create a New Post >>

• Now Just paste the HTML, CSS or JavaScript coding in the Blogger Post editor 

• Now Select the HTML, CSS or JavaScript coding which you pasted previously.

• Now After Selecting the HTML, CSS, or JavaScript coding just Press the "QUOTE" button Which is at the "Top Right" of you "Blogger Post Editor Tool Bar" Remember: Press the Button only once.

• Publish your Post

Tip:If you want to Quote any text You can also select text to quote by adding the “<blockquote>” tag around the text. For Example <blockquote>Hey I am On Sahi Soft<blockquote>. But Remember This will work only if you are working on HTML TAB in Blogger Post Editor

And Now go to your blog post and it will give a picture perfect finish. So that's how you can Display HTML, CSS or JavaScript coding in Blogger Posts. You can also use this "QUOTE" Tools to highlight important quotations.If you Feel any Difficulties feel free to ask.Till then Peace, Blessing and happy Quoting.

Add a Facebook Like Box without the Branding

Learn how to customize the layout of the Facebook Like Box with simple CSS styles. You can even remove the Facebook branding from the Like Plugin.
The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page.
And the same rectangular box can even help convert casual visitors to your site into regular ones. That’s because the photo pile inside the box will show visitors pictures of their friends who are already fans and when they seen a known face, it could increase their relative interest in your site.

Customize the Facebook Like Box with CSS

Facebook offers a simple Like Box plugin that you can easily integrate into your website using either JavaScript or IFRAME. You can customize the border color, the height and the width of the Like Box but, officially, nothing more.
That said, if you would like to add a background color to the Like Box to better match your site’s color theme or if you would like to completely remove the Facebook logo and other branding from the box to make it less crowded , you can easily do that with the help of CSS.
To get started, copy the code below and paste it anywhere inside your website template. Change the URL in Line19 to point to your own Facebook page and you’re done.

<style type="text/css">
 .facebookOuter {
    background-color:#F4F4F4; 
    width:250px; 
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #CCCCCC;
  }
 .facebookInner {
    height:250px;
    overflow:hidden;
  }
</style>

<div class="facebookOuter">
 <div class="facebookInner">
  <div class="fb-like-box" 
      data-width="245" data-height="290" 
      data-href="http://www.facebook.com/SahiSoft" 
      data-border-color="#F4F4F4" data-show-faces="true" 
      data-stream="false" data-header="false">
  </div>          
 </div>
</div>
           
<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>

Now the boring technical stuff.
The default background color of our Facebook Like box is #F4F4F4 but you can use any other web color (change values in Line 03 and Line 20). Similarly, if you want to have a more wider or taller Like box for your website, you can need to change the width and height values defined in lines 4, 6, 10 and 18.
The above example uses the JavaScript version of the Facebook Like box though the same can be applied to the IFRAME version as well. In that case, you need to replace Line # 17-21 with the IFRAME tag

 This Widget is provided by SAHI SOFT

Multi Column Footer Widget For Blogger –The Hot!

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.

 

See the widget at the bottom of the following Demo blog,

How To Add Multi Column Footer Widget For Blogger?

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

1. Go To Blogger > Design > Edit HTML
2. Backup Your Template
3. Search for ]]></b:skin>
4. Just above ]]></b:skin> paste the code below,

/*----- SAHI SOFT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

       5.    Now search for </body> and paste the following code just above </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

      6.   Save your template and you are done!
Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How To Customize The Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

1.  In order to reduce or increase the overall width of the widget simply change width: 960px;
2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.
After you have added the fifth column then remember to change width: 23%; with width: 17%;
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

This Widget is provided by SAHI SOFT

Muhammad Usman Ghani

About the Author:
I am a young Entrepreneur running a number of sites from his living room. I am a certified SEO Consultant, Computer Engineer, Professional Blogger & an addicted Web Developer. I runs STC Network which offers Web Services and Online Business Solutions to clients around the globe

How To Add Stylish Border Around Selected Widget Of Blogger?

Today the question is that "How To Make Your Blog Widgets/Gadgets Stylish And Awesome Through Adding Extra CSS Borders Around Your Desired Widgets/Gadgets?"

Some time your template is so simple that it can not attract visitors, so you have to spices up your blog,     but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding.

If you want to add borders you can also use this code, There are many different type of codes given below. For All Of These Code, You Have To Do Some Thing Like This.

Features:
1.) It Will Change Your Desired Widget Background Only Not All.
2.) Simple Steps Wioth Easy Installation.
3.) Quick To Load And Awesome In Look.

4.) Pure CSS Code.

5.) 6 Different Style Is Provided Below.

6.) Fully Customizable.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) First Find That Widget ID On Which You Want To Style Up...(If You Don't Know How To Get Widget ID Just Comment Below, I Will Explain You Easily)
5.) Now Go To "Template"
6.) Click "Edit HTML" Button To Edit It.
7.) Now Press "CTRL+F" And Find ]]></b:skin>
8.) Copy The Below Code And Paste It Just Before It.

For Simple Square Color Border:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
//*Your Extra CSS Here*//
}

For Simple Square Color Border With Filled Background:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
//*Your Extra CSS Here*//
}

For Simple Square Color Border With Filled Background And Shade:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
//*Your Extra CSS Here*//
}

For Simple Rounded Color Border:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
//*Your Extra CSS Here*//
}

For Simple Rounded Color Border With Filled Background:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
//*Your Extra CSS Here*//
}

For Simple Rounded Color Border With Filled Background And Shade:-

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
//*Your Extra CSS Here*//
}

Customization:
1.) Change #YourWidgetID With Your Desired Widget ID Code.
2.) Change The Value Of Given CSS Also With Your Desire.
3.) Change //*Your Extra CSS Here*// With Your CSS Code.

4.) Save And Done.

5.)Enjoy..

This Widget is provided by SAHI SOFT

Muhammad Usman Ghani

About the Author:
I am a young Entrepreneur running a number of sites from his living room. I am a certified SEO Consultant, Computer Engineer, Professional Blogger & an addicted Web Developer. I runs STC Network which offers Web Services and Online Business Solutions to clients around the globe

3-Column HTML Footer Bar For Blogs And Websites

Now a days three column footer bar is most popular for blogger and websites.First column is for about company or author and other two column are for quick navigation links.as the screen shoot is available that how will it appear after published.So put this on your website or blog now, it's only HTML via tables.

1. Open Blogger. Go To Layout.
2. Add A HTML-JAVASCRIPT Gadget.
3. Garb Them To The Footer.
4. Copy The Below Code, Edit It With Your Data And Paste It Into That Gadget.
5. Now Save It, And Published.

<table>
<tr>
<td width="30%">
<h2>About</h2>
<p>Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please....<a href="##########">Read More...</a></p>
</td>
<td width="10%"></td>
<td width="33%">
<h2>Navigation</h2>
  <li><a href="##########">Link 1</a></li>
  <li><a href="##########">Link 2</a></li>
  <li><a href="##########">Link 3</a></li>
  <li><a href="##########">Link 4</a></li>
  <li><a href="##########">Link 5</a></li>
</td>
<td>
<h2>Navigation</h2>
  <li><a href="##########">Link 1</a></li>
  <li><a href="##########">Link 2</a></li>
  <li><a href="##########">Link 3</a></li>
  <li><a href="##########">Link 4</a></li>
  <li><a href="##########">Link 5</a></li>
</td>
</tr>
</table>

This Widget is provided by SAHI SOFT

How To Add Static Twitter Follow Box With Smooth Jquery Hover Effect In Blog And Website

Here There are 3 Simple Steps:
If you have a twitter account then it is the best animated widget for your blog and website to get more followers via your site so put this on your blog/website now and get more followers.This will increase your follower count with your real fans or friends.

Step 1: Adding Jquery JavaScript Plugin:-
(Ignore this step if your blog have already a Jquery Plugin)

a. Go to Blogger Dashboard < Design tab > Edit Html 
b. Search for </head> tag
c. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code:-

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"},"medium");}, 500);});
//-->
</script>
<style type="text/css">
.twitterboxot{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDqCo5CuUCcKAWPRwZM4GSt7Fq72ZgN9NnKcbPGT0YnmOWDjM_z59pqSkucdvkIQUMbEq0EXW4SFYYESZvE9EpfEC5dm500ig_sLHRpd-1hEDrYUVHQMLNqAc-HheOIyoo0SrbpFRf0g/s150/FollowMeOnTwitter.jpg") no-repeat scroll left centertransparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:60%;}
</style>
<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("Sahi_Soft");</script>
</div></div>

Step 3: Change Sahi_Soft to your twitter username.
Step 4: Enjoy...!!

This Widget is provided by SAHI SOFT

How To Add POP UP Facebook Like Box For Blog & Website?

This widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives. This plugin can be added to both Blogger Blogs and Wordpress. I am using here the same jQuery effect like this one can be widely seen on many blogs now. It will help you increase your Facebook Fans greatly.
This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview.
It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.
Get the more fans to your fanpage blogger by adding a popup facebook like box to your blogspot.By adding this customized widget may know the visitors to know the number of people like your website and join your site directly.To get this widget follow below procedure:-


Features:
1.) Un-Blockable POP-UP By All Browsers.
2.) POP-UP With LightBox Effect.
3.) Close Button Also Included.
4.) Quick To Load And Easy To Install.
5.) Simple And Stylish Design.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5oRBI3i439_I0f8dzDW_nf6tyd9oLEcpdXwsqzRd-5DeTsl-asLRndlxt53meqU30f4aB5D1-jty63mn4De9gngF_42hHx2X2VV9ztWzKjdY4mq2SmlE335-v66gZTWe_siTaKGlYk3E/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5oRBI3i439_I0f8dzDW_nf6tyd9oLEcpdXwsqzRd-5DeTsl-asLRndlxt53meqU30f4aB5D1-jty63mn4De9gngF_42hHx2X2VV9ztWzKjdY4mq2SmlE335-v66gZTWe_siTaKGlYk3E/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bebn_x9HPbiBzxVp-c5ImBkHRawnkuBgcfNuJBHOx_wjfnQEe06fJnWO2dSees3kTR5F3Q7Fa3qAiPNEuLQMACNH46vfMC4D7Se0E0bQssROVIej7smWYUV0PJ9bNgO8Njy4TeWwHys/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsodHjceFwY3AexZAsEmpUAluK8NmRwca8Tq38ss3Zq7hTvnbIMfK6IFy2uW21ruPiJJbTf3T8As9PrLvbkzvTogK3kgW-z-lw2vDmI83gkyhTmv1G015RF40bRzwnwLhB1j85dKWwOw/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4tewq4U738CK0vI_KzLMTPwyseOElwcEUqMvTNnOeIVuy14Wz6s4rL1_ajnEv77HA-xZZ-uxbC9R5g_pKzPaQRNyAENSDjIeDwpis9DgrwXxQAeOb2H-uhDdsq96GLZA2OiaJwgtdk/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Like SAHI SOFT on Facebook</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSahiSoft&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://sahisoft.blogspot.com/">SAHI SOFT</a></p>
</div></div>

Customization:
1.) Replace SahiSoft With Your Facebook Username.
2.) It Will Not POP Up Again And Again On Every Reload Or Every Pages. To Review The Widget Just Delete Your Browser Cookies And Refresh The Page To See It Appearing Again.
3.) If You Want To Appear This Widget On Every Reload Of Your Visitor On Every Page, Just Change true To false
4.) This Widget Will Again POPUP On Your Viewer Desktop After 30 Day If He Is Clearing His Browser Cookies, If You Want To Minimize This Time, Just Change *30 From The Above Code To Your Desire Day With 30.
5.) You Can Also Change The Text In Black Bold Text.
6.) Save And Done..

This Widget is provided by SAHI SOFT

---