Sunday, January 16, 2011

How To Setup/Create Facebook Fan Page For Blogger

0 comments
In this article I hope to explain how to create a facebook fan page for your blog,and after that how to setup it to publish your blog post/articles.After you doing this, your facebook friends can read your blog post from your facebook fan page and can become fans of your blog.This is very helpful to become your blog more popular.To do this follow the steps below.


1.First login to your Facebook Account.

2.Now go to this link:

http://www.facebook.com/pages/create.php

3.You can see a screen like below.Fill the information and click on "Create Page".



4.Now you have created a facebook fan page.You can see a screen like this:



Now we must import your blog post to this fan page.Click on "Edit Page".



5.In next window click on "Edit" link under "Notes" section.



You can see a screen like this:



6.Now click on "Import a blog".



7.Give your website URL and click on "Start Importing".



8.Now you can see a confirmation window:



Click on "Confirm Import".



9.You are done.Now when you publish a blog post,it will automatically publish your facebook fan page.



You can add a picture for your fan page,configure settings,... as you like.

You can see my facebook fan pages from here:

http://www.facebook.com/pages/Auto-Trader-Zone/418057363974

http://www.facebook.com/pages/Premium-Blogger-Templates/10150130448820134

http://www.facebook.com/pages/Blogger-Tips/172150707452

How To Add You Tube embed code tool to blogger

0 comments
This tools is very important to every blogger.When you put the video address and click Ok, embed code will appears in text box.

1.Log in to your dashboard--> layout- -> Page elements

2.Click on "Add a Gadget"

3.Select 'HTML/Javascript' and add the code given below and click save.

<script>function go(){var x=document.theform.url.value;var YT=(function(){return {getId:function(u){var a=u.match(/(\/vi\/|v=)([^&]+)/);return (a&&a[a.length-1]);}};})();document.theform.thelink.value=('<object width="'+document.theform.width.value+'" height="'+document.theform.height.value+'"><param value="http://www.youtube.com/v/'+YT.getId(document.theform.url.value)+'&searchbar=0&iv_load_policy=3&ap=%2526fmt%3D18" name="movie"></param><param value="true" name="allowFullScreen"></param><param value="always" name="allowscriptaccess"></param><embed allowscriptaccess="always" width="'+document.theform.width.value+'" src="http://www.youtube.com/v/'+YT.getId(document.theform.url.value)+'&searchbar=0&iv_load_policy=3&ap=%2526fmt%3D18" allowfullscreen="true" height="'+document.theform.height.value+'" type="application/x-shockwave-flash"></embed></object>');}</script><form action="#" name="theform" onsubmit="return go();"><input onfocus="this.value='';this.style.color='#72a8d2'" style="font-size:110%;color:#aaa" value="" name="url" size="50" type="text"/> <input style="font-size:110%;" value="Ok" onclick="javascript:go();document.theform.thelink.select()" type="button"/><br/>Width: <input onfocus="this.value='';this.style.color='#db0000'" style="color:#444;" value="660" name="width" size="3" type="text"/> &nbsp; Height: <input onfocus="this.value='';this.style.color='#db0000'" style="color:#444;" value="544" name="height" size="3" type="text"/><br/><div class="code-block-corner"></div><br/><div class="code-block"><div class="code"><br/><div style="background:#f3f6f7;padding:5px;"><textarea style="width:80%;height:100px;overflow:hidden" name="thelink"></textarea><br/><div style="text-align:center;color:#000;font-style:italic;font-size:130%;"></div></div></div></div></form>


Now you are done.Look at the picture below.




I found this tip from this site.

How to Post HTML,CSS,JavaScript,... Codes As Plain Text In Blogger

0 comments
1.First install Greasemonkey script for your Firefox browser.





2.Now click here to install 'Blogger - HTML encode on post edit' to blogger.



This adds a new button at the bottom of your new post area.It encodes the selected text so it can be posted as plain text in Blogger.It will look like this.



When you want to encode some code select it and cick on 'HTML ENCODE SELECTION' button.



Your code will look like this after being encoded:



Now publish your post and see the result.

How To Add Round Image Corners Generator to blogger

0 comments
This is a very useful and simple tool.Try it if you want to create Round Image Corners to your images.

1.Login to blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.



<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>


Now you are done.Look at the below.


Image:
or URL:


How To Display Posts as Headlines in blogger 2 0

0 comments
1.Login to blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.



<script style="" src="http://www.hotlinkfiles.com/files/2681944_ihtfn/RecentPostsScrollerv2.js"> </script><script style=""> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»"; </script> <script style="" src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>


Note : You must replace YOURBLOG with your real blog name.

You can Customize other values as your choice ;

var nMaxPosts = 15; - This code sets the number of posts in this widget.

var sBgColor; - If you want to set background color then change this code to var sBgColor= grey;

var nWidth; - Modify this code to change the width to var nWidth= 100px;

var nScrollDelay = 175; - This code is used to set the speed of scrolling. Lesser the no, higher the speed of scrolling.

var sDirection="left"; - This code sets the direction of scroll. left = Right to left; Right = Left to right; Up = Down to up; Down = Up to down

var sBulletChar="»»"; - This bullet appears before each post link in this widget. You can replace this to any other bullet.

Now you are done.

How To Add Eco safe: email, download PDF Badge To Blogger

0 comments
This toolis very helpful to blogger.

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to till you see this :

<data:post.body/>


4.Now copy below code and paste it just after <data:post.body/> .

<script type="text/javascript">
var ecov = "sh2";
document.write(unescape("%3Cscript src='http://eco-safe.com/js/eco.js' type='text/javascript'%3E%3C/script%3E"));
</script>


Now save your template and you are done.It will look like this.

How To Add Status Bar Text with Blink Effect

1 comments
1.Login to your blogger dashboard and go to Layout --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var as = 1;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";
var msg1  = "* * * * * * * * * * * * ";
var msg2  = "                                    ";
if(as == 2 )
 as = 1;
else
 as = 2;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var ss = "    "+sds+"  "+msg+"  "+sds;
window.status = ss;
}
statusbar(100);
</script>


Now you are done.

How To Add Status Bar Text with Nice Effect

0 comments
1.Login to your blogger dashboard and go to Layout --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var as = 1;
var bs = 3;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";

var msg1  = "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\";
var msg2  = "||||||||||||||||||";
var msg3  = "//////////////////";
var msg4  = "------------------";
if(as > 4)
as = 1;
if(bs < 1)
bs = 4;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var sds2 = eval("msg"+bs);
var ss =sds+"  "+msg+"  "+sds2;
window.status = ss;
as = as+1;
bs = bs-1;
}
statusbar(100);
</script>


Now you are done.

How To Add Scrolling Text to Status Bar

0 comments
1.Login to your blogger dashboard and go to Layout --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
function statusbar(val)
{
var msg  = "TYPE-YOUR-MESSAGE-HERE";
var res = " ";
var speed = 100;
var pos = val;

if (pos > 0) {
for (var position=0 ; position< pos; position++) {
 res += " ";
}
res+=msg;
pos--;
window.status = res;
timer = window.setTimeout("statusbar("+pos+")",speed);
}
else{
if( -pos < msg.length) {
 res += msg.substring(-pos,msg.length);
 pos--;
 window.status=res;
 timer = window.setTimeout("statusbar("+pos+")",speed);
}
else
{
 window.status= " ";
 timer = window.setTimeout("statusbar(100)",speed);
}
}
}
statusbar(100);
</script>


Now you are done.

Free Premium Business Blogger Templates Collection

6 comments
In this article I have listed below premium quality free blogger templates collection for business purposes.All of the templates listed here have premium look and features like Horizontal Navigation Menus,Auto Read More Feature with Thumbnails, Header Ads banner, Search Box, Featured content sliders,Favicon support, Numbered Page Navigation Hack Installed and more...

You can download all of these blogger templates for free.These free Blogger templates are licensed under the Creative Commons Attribution 3.0 License,which permits both personal and commercial use.However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/

1. Business Company

Business Company Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Header Banner, Magazine, Business, Right Sidebar, Rounded corners, Top Navigation Bar, Web 2.0, White


2. Incorporate

Incorporate Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Magazine, Premium, Right Sidebar, Rounded corners, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White


3. Business Style

Business Style Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Green, Magazine, Right Sidebar, Premium, Rounded corners, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White


4. Dominate

Dominate Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Grey, Header Banner, Magazine, Premium, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, Web 2.0, White


5. BusinessCorp

Business Corp Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Gradients, Grey, Magazine, Right Sidebar, Orange, Top Navigation Bar, White


6. Business View

Business View Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Brown, Elegant, Featured Section, Fixed width, Left Sidebar, Magazine, Rounded corners, Top Navigation Bar, White, Yellow


7. Business Top

Business Top Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Black, Blue, Elegant, Featured Section, Fixed width, Magazine, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, White


8. iBusiness

iBusiness Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Gradients, Grey, Magazine, Right Sidebar, Rounded corners, Top Navigation Bar, White


9. Company Style

Company Style Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Brown, Featured Section, Fixed width, Magazine, Orange, Right Sidebar, Rounded corners, Top Navigation Bar, White


10. Company Style Blue

Company Style Blue Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Blue, Elegant, Featured Section, Fixed width, Gradients, Magazine, Right Sidebar, Rounded corners, Top Navigation Bar, Web 2.0, White


11. Lion Press

Lion Press Blogger Template
 Properties : 2 Sidebar, 3 Column, Adapted from Wordpress, Featured Section, Fixed width, Gradients, Grey, Header Banner, Magazine, Red, Right Sidebar, Slider, Top Navigation Bar, White


12. iFinance

iFinance Blogger Template
 Properties : 2 Sidebar, 3 Column, Adapted from Wordpress, Featured Section, Fixed width, Green, Header Banner, Magazine, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, Web 2.0, White


13. Glorius

Glorius Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Brown, Elegant, Featured Section, Fixed width, Gradients, Header Banner, Magazine, Right Sidebar, Slider, Top Navigation Bar, Web 2.0, White


14. Side Blog

Side Blog Blogger Template
 Properties : 1 Sidebar, 2 Column, Adapted from Wordpress, Elegant, Fixed width, Fresh, Grey, Magazine, Premium, Right Sidebar, Rounded corners, Top Navigation Bar, Web 2.0, White


15. Supras

Supras Blogger Template
 Properties : 2 Sidebar, 3 Column, Adapted from Wordpress, Blue, Elegant, Featured Section, Fixed width, Header Banner, Left Sidebar, Magazine, Blogger Pages Ready, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White

How To Add 3D CSS Horizontal Menu to Blogger

0 comments



Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:



<style type='text/css'>
#tabs22 {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabs22 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs22 li {
display:inline;
margin:0;
padding:0;
}
#tabs22 a {
float:left;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhoQb8EDOzwgf9e6oMUDTHdu-SSh5CfPDHtC44o_VZVv35Mq15cBcj-afqOznkkNSy_tMAO7fV0FqGWUzlMpdcqTGa4HcOUwmxaucOR6B2AAUxRCXgY3I8JeP01aZMF0UxFIuvJXHUHied/&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs22 a span {
float:left;
display:block;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlP_zIa8APVa6dE8XZGxhYcjlVAvPtGiic01r4UdGGcTi9ZEmV6mCos4jvdoTtind9wgqEKSHG-xpYYuMsjbks-LWMQppTlKzXKoLYOEiMQPFO-wjGi9Z9XP7r9avk7Us167NwmvEKTf0/&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
#tabs22 a span {float:none;}

#tabsF a:hover span {
color:#FFF;
}
#tabs22 a:hover {
background-position:0% -42px;
}
#tabs22 a:hover span {
background-position:100% -42px;
}
</style>

Note : Please Host above 2 images yourself.


NOW CLICK SAVE TEMPLATE






STEP #1 Log in to Blogger, go to Layout




page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:.

<div id="tabs22">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>


NOW CLICK SAVE

Scroll or Back to Top Button Using jQuery For Blogger Blogs

0 comments




Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/scrolltopcontrol.js' type='text/javascript'>
</script>



NOW CLICK SAVE TEMPLATE

How to Auto Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.

0 comments



Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste this code:

#screenshot{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }

STEP #3
Now find (CTRL+F) this code in the template:
]]></b:skin>
And immediately after it, paste this code:


<script src='http://files-teckzest.bravehost.com/jquery.js' type='text/javascript'/><script src='http://files-teckzest.bravehost.com/main.js' type='text/javascript'/>


Now click Save Template 







STEP #4 Log in to Blogger, go to Layout




page-elements

Add a Gadget of HTML/JavaScript type.



image
Then add this code in to it:.

<span class="Apple-style-span" style="font-family: Verdana, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); line-height: 16px; ">WITHOUT TITLE <a href="http://bdlab.blogspot.com" class="screenshot" rel="http://i44.tinypic.com/2ag18jq.gif" title="" style="color: rgb(51, 102, 153); ">blogspot tutorial test</a> link.</span>


Now click Save

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more