How To Post Blog Tweets to Facebok Automatically

There are many ways to automatically update your Twitter feed when you create a new post on your blog. There are two that we'll look at that will work with any content management system that outputs an RSS feed: Twitterfeed, and Feedburner.

For doing this we need a free server that may handly all the fuss. It will also give your detail analysis of the impressions made on your feed links shared on twitter. TwitterFeed is the only client which is now serving more than Four million RSS feeds

Go To  Twitterfeed  and Creat an Account  "Click Here Twitterfeed "

Next Step: Click on "New Feed"

Write your blogger Title and URL

Now Go to Next step.

Now Add your   Usernae and your E-mail Address

  Twitter
    Facebook
    Linkedin

Lastly Click On "All Done"

How To Add Live Demo, Download, Hompage Buttons To Your Blogs

This article will show you how to create Live Demo, Download, Homepage fancy buttons using simple CSS. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don't have to create an image for each button which makes your blogs take longer to load. There is a CSS style that can help you create a button like effect easily with CSS.

1. Go to your Dashboard > Edit HTML

2. Search for ]]></b:skin> before it paste the following CSS Code



.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

3. Save your Template....


STEP 4. How To Use Live Demo, Download Buttons in your Post
Go To your post, where you want to show that Buttons

To display this customized buttons to your post you only need to add the following code in the
  "EDIT HTML" section of your Blogger Editor,

For Live Demo Button

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

For Download Button

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

For Homepage Button

<a class="button homebutton" href="YOUR HOMEPAGE LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Homepage</span></a>




You just need to replace YOUR LINK HERE, with your Live Demo Link, Download Link and Homepage link. And you can also change text to display with your text.

How to Add Pages Numbered Navigation 2011 in Blogger [Blogspot]

Login to Blogger Dashboard > Design >

 Edit HTML

Don't forget to "Download Full of Template" for backup

Don't tick the "Expand Widget Template"

Find This code:  ]]></b:skin>

Add the following code above ]]></b:skin>

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd;

}

.showpageOf {

margin:0 8px 0 0;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666;

text-decoration: none;

}

The code above is one of 6 styles. But you can choose another below if you want to:

STEP 2 - Adding Java Script

Find This Code: </body>

Then replace with the code below:

&lt;script type='text/javascript'&gt;

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

&lt;/script&gt;

&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

Notes:  You can Edit based on your blog setting :

               var postperpage=7;

               var numshowpage=4;

                Postperpage : How many Post every Page for your blog

                Numshowpage : How Many number will show in Your page Navigation

STEP 3 – Label Fix (Customization)

Find this code: 'data:label.url'

And replace with:

'data:label.url + &quot;?&amp;max-results=7&quot;'

You can Edit 7 based on how many post every page you want to show on your blog

Save template.

How to Create Three Column Blogger Template

You must have seen many blogs having three columns. You may also want to make your own three column Blogger Layout Template and give your blog a new level in style. So let's do it with a simple tutorial.
You can see in Design > Page elements that you already have two column, one for the main body and the other is the sidebar. So you need to create and add an extra sidebar column.




1. Go to Design > Edit

Template and backup your template.

2. Find:

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

}

And change float to:

float: right;

3. Below it add:

#left-sidebar-wrap {

width: 120px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

This "float: left" will make the sidebar float to left. Thus you will be having a sidebar to the left of your blogger template.

4. Find and change the width of the outer-wrapper to 900px or more to avoid overlapping of sidebar over the main-wrapper.

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

5. Find #main-wrapper and replace it with:

#main-wrapper {

width: 410px;

float: left;

margin:0 20px; 

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

} 

Here a margin to left and right of 20px is added to avoid overlapping of sidebars with the main wrapper. You can change it accordingly to overcome the issue of overlapping of sidebars.

7. Find the section:

<div id='main-wrapper'>

And just before this add:

<div id='left-sidebar-wrap'> 

<b:section class='sidebar' id='left-sidebar' preferred='yes'/>

</div>

8. Save your template 

How to make a download link

To make a download link , just put a hyper link to a an other page contains download headers.
I explain it by an example:

Put a hyper link to download page:

Code:

<a href="music2_download.php">download</a></font></b></p>

If user clicks on this link , he is redirected to  "music2_download.php" page. Put the following codes in "music2_download.php" file.

code:


<?php
include "auth.inc"; // This code insure that just registered users can download our file
?>
<?php
$FileName = "/music2.swf";  // the name of the file that is downloaded
$FilePath = "my_music";  // the folder of the file that is downloaded , you can put the file in a folder on the server just for more order


$size = filesize($FilePath . $FileName) ;
header("Content-Type: application/force-download; name=\"". $FileName ."\"");
header("Content-Transfer-Encoding: binary");
header("Content-Length: ". $size ."");
header("Content-Disposition: attachment; filename=\"". $FileName ."\"");
header("Expires: 0");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
echo (readfile($FilePath . $FileName));
?>



------------------------------------------------------------------------------------------

The following is an extra part for this post :

You may want to use just one "download.php" page for all of your downloads. You can send the file name through a hidden variable , The form below allows to send the file name to "download.php" page :


code:




<FORM ACTION="download.php" METHOD=POST>




<INPUT TYPE="hidden" NAME="music_name"    VALUE= "music1.swf"  >




<BR>
To download music1: 
<INPUT TYPE="SUBMIT" NAME="download_music1"  VALUE=" download_music1 ">




</FORM>




<FORM ACTION="download.php" METHOD=POST>




<INPUT TYPE="hidden" NAME="music_name"    VALUE= "music2.swf"  >




<BR>
To download music2:  
<INPUT TYPE="SUBMIT" NAME="download_music2"  VALUE=" download_music2">




</FORM>