How to create a Facebook Fan Page for your Blog

Posted by Unknown Jumat, 09 Maret 2012 0 komentar
What is a Facebook Page?

Sometimes referred to as a "Fan Page," a Facebook page is a single page where you can share & talk about any particular subject you want: a celebrity, a blog or whatever your heart desires. Think of it as a one-page meeting place, with information, links, a message forum box, RSS and anything else you want.

make money online, facebook, how to

Want to promote your blog? Then Facebook is one of the best choices when it comes about Social Networking Sites. To see how a Facebook Fan Page looks like, please visit my Facebook Fan Page.

Create a Facebook Fan Page for your blog.


Step 1. Go to the Create Fan Page Link on Facebook and select Brand or Product

facebook popular, facebook friends

Search for "Website" in the drop down list and provide the Page name (e.g., name of your blog) in the next box. Check the "I agree to Facebook Pages Terms" box, then click on the "Get Started" button.


Step 2. You will be transferred to the next page - here you can "Upload an Image" for your Fan Page or Skip to upload it later. Browse for your image clicking on the "Upload from computer" link:


Step 3. Enter your site/blog description and the url address. These informations will appear on your Facebook page. After you have finished, click "Save info".


Step 4. Now you are transferred to your new Facebook Fan Page. To "Manage" your information, click on the "Manage" Button at top right corner of the page.

Get a Shorter Facebook Fan Page URL

Your Fan Page URL will look something like:
http://www.facebook.com/pages/Helplogger/120574614736021

Now, if you have minimum 25 fans, you the possibility to shorten your facebook URL, to look something like this: http://www.facebook.com/helplogger

For this, go to http://www.facebook.com/username/ and click on set a username for your pages.


There you can select the username for your fan page. Be careful when you choose your Facebook Fan Page Username because you can't change it back afterwards.

Use RSS Graffiti Application to share your most recent blog posts

If you want to automatically add your blog posts to Facebook, then use the RSS Graffiti Application.
Steps:

1. go to http://apps.facebook.com/rssgraffiti/ and authorize RSS Graffiti: click on the "Click here to authorize RSS Graffiti" button.
2. once authorized, you will see a list of your fan pages on the left: click on the Fan Page Name
3. authorize RSS Graffiti to access your fan page: click on "Click to authorize" button.
4. Click on the Add Feed Button, and enter your feed url.

For example, if your blog is http://yourblog.blogspot.com, then your feed URL will be http://yourblog.blogspot.com/rss.xml

Click the link which says "click here to fetch and preview" and see if its grabbing your blog feed. (if it's not grabbing your feed, then check if you have enabled the blog feeds. If your blog is not hosted on blogger, then your feed url will be different.)

5. After you have added your blog feed, go to the Filter Tab and click on the Change link next to the "Cut-off date/time". Choose the latest posts of your blog from the drop down and click on the Save button.

You don't need to worry if your posts don't appear immediately on your Facebook Fan Page Wall, there might be some delay in the wall getting updated, as RSS Graffiti checks the feed for new entries at regular time intervals.

Baca Selengkapnya ....

How to remove/hide or add a Peek A Boo Effect to your Blogger Navbar

Posted by Unknown 0 komentar
What is Blogger Navbar?
Frist time somebody creates a blog in blogger.com, a bar will show up at the very top of a blog page. This bar is known as the Blogger Navbar (Blogger Navigation Bar) and it usually appears by default at the top of every hosted Blogspot blog.

Blogger navbar functions include:
  • [B] (blogger logo): takes you back to blogger's homepage
  • Search Blog: you can make searches on the blog and results will appear directly on the page.
  • Follow: you can follow the blog you're currently viewing (blog updates will appear on your Blogger dashboard at Reading List - if you're not logged, you'll see a Share link, which allows you to share you favorite blogs on social networks like Twitter, Facebook, Google buzz, and Google Reader)
  • Report abuse: you can report a blog if you consider its content objectionable (e.g., pornography);
  • NextBlog: takes you to a random, recently-updated Blogger blog.
  • email address@: If you are logged in to your account, you'll see your own address here. Other viewers will see their own email addresses, or none at all if they aren't logged in.
  • Post: Direct link to the post editor
  • Design: this link takes you to Page Elements, where you can add gadgets/widgets for your blog
  • Sign In/Out: This displays the appropriate option, depending on whether you're logged in or not.

Blogger navbar is available in several colors, and is configured in the Template tab in Blogger's interface.

It can be useful but the only real disadvantage is visual. If you have customized design, Navbar usually doesn't fit in.

In this tutorial, I'll show you how to remove it or add a peek-a-boo effect.

Removing/Hiding the Blogger Navbar
blogger, what is blogger, blogger tutorials

Step 1. Go to: Dashboard > Template > Edit HTML:


 ... select the "expand widget templates" box



Step 2. Find (CTRL + F) the following line:

]]></b:skin>

Step 3. Just above it, paste this code:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

Step 4. Save your Template.

blogger blogspot, remove navbar, peek a boo, designThere's another way of showing a Navbar. It is called
"Hover Peek-a-boo Blogger Navbar":

The navbar will only appear when you hover around the area on the top. To see it in action, take a look at this demo

Add a Peek-a-Boo Effect to Blogger/Blogspot Navbar


Step 1. Login to your Blogger Dashboard, then go to Design >> Edit HTML > check "expand widget templates"

Step 2. Search for the following piece of code:

]]></b:skin>

Step 3. Add the following code just above it:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)

Step 4. Save the template... and you're done!

If you have any questions, leave a comment below.

Baca Selengkapnya ....

Awesome Slide Open Heart Bookmarking Gadget For Blogger

Posted by Unknown 0 komentar
This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This gadget/widget comes with a fixed position and stays in the corner of the page, so it will grab your readers attention and make them share your posts easily.

I'm sure you will love it after seeing the demo of this gadget:


Adding The Open Heart Bookmarking Gadget to Blogger

Step 1. Go to your Blogger Dashboard, select Template and click the Edit Html button:


 ....select the "Expand Widget Templates" box (it is recommended to make a backup first)


Step 2. Find the following tag (Ctrl + F):

</head>


Step 3. Paste above/before the </head> tag, the following code:

<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

Step 4: Now find (CTRL + F) this tag:

</body>

Step 5: Paste above/before </body> tag... the following code:

<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->


How To Move The Position Of The Gadget

To move the position of this widget from the bottom right corner of your blog to any location you want, change the percentages of the red code from Step 5.

Step 6. Now preview and Save Template.

Done!

Baca Selengkapnya ....

Add Css/Jquery fixed horizontal menu to blogger blog

Posted by Unknown Selasa, 06 Maret 2012 0 komentar
This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.


Let's start adding it...

1. Go To Blogger - Template - Edit HTML


 ....and select the "expand widget templated" box:



2. Search (using CTRL + F) for this piece of code:

</head> 

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
 <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else   
                        $('#nav').stop().animate({'opacity':'1'},400);
                });
               
                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>

4) Now search for this tag:

<body>  

If you can't find it, search for this one:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

6) Now click on the Save Template button and you're done ;)

Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.

Baca Selengkapnya ....

What is blogger and how you can create a blogger blog?

Posted by Unknown 0 komentar
What is Blogger?

According to the Computer Desktop Encyclopedia, Blogger is:
"A Web site launched in 1999 from Pyra Labs, San Francisco, CA (www.blogger.com) that provides the tools for creating blogs (Weblogs). After users select a pre-designed template or create one with their look and feel, every posting entered on Blogger is published to the Blogger page on their Web site automatically. In early 2003, Blogger was acquired by Google. "


So, in simple terms, Blogger is a free site where you can make blogs (a kind of sites) where you can write about everything you want - from personal life to discussing about your political views, or relating your experience in a topic of interest.

How to create a blogger blog?

Go to Blogger.com homepage and click on the "Get Started" button

blogger tricks, tips, create a blog

Enter your Gmail acount details (your gmail address and pasword) and then press "Sign in"

blogger, create blog, web design

Enter the name you want to appear on your blog - check the "Agree to Terms and Conditions"
Click on the "New Blog" button

web hosting, forum, design, blogger blogspot

Enter your blog title and the address of your new blog, choose a template (Simple Template is more easily to customize, so i recommend you to choose this one) then click on "Create Blog!"

Now that your blog has been created, you can start blogging. That's all :)

Baca Selengkapnya ....

Google adsense optimization tips

Posted by Unknown 0 komentar
adsense, what is google adsense, earn with adsenseWhat is Google AdSense? 

Google AdSense is a free program run by Google that allows you to display Google adverts on your blog/website and pays you everytime someone clicks on one of these ads. Just submit your blog to Google for approval and after your content has been approved, you are ready to place AdSense ads on your website.  But beware, Google AdSense doesn't approve any sites! According to AdSense policy you are not allowed to do the following things:

1) Do not click on your own AdSense ads by any way.
2) Do not increase AdSense ad impressions with some automating tools.
3) Don’t ask others to click on your ads.
4) Don’t alter the AdSense code other than fonts and colors.
5) Don’t put AdSense code on adult or prohibited content.

Some basic optimization tips can double your AdSense revenue, so i've added a list of some of the best Google Adsense Tips and Tricks for making more money from the Google Adsense program.

Tips to Increase Google AdSense Earnings

1) Place the Adsense ads above the main fold that user can see your ad units without scrolling down on your site. This will increase your Ads Click Through Rate (CTR)

Because browsers and screen sizes vary, Google has created a nice tool that allows you to enter any URL, and check whether you've implemented your ads above the fold.

2) The best performing ad units for AdSense are:

250×250 Square
160×600 wide skyscraper
336×280 large rectangle
300×250 medium rectangle

Use them wisely. I suggest you to place 250 x 250 size ad units at the top of every post and align it at the right or left side of the post content. The 160×600 ad format can easily fit in the sidebar of your blogger blog.

3) You can use the following “heat map” provided by Google to analyze other top performing ad placement slots. You should concentrate on the areas with darker orange color which represents the hot spots of the ads slots. (see in the image below)

blogger blog, what is adsense, google analytics

4) Text ads are good for the first Google Ad unit. I also recommend you to place a 300×250 unit in the sidebar (or somewhere below the fold) – these generally serve CPM based ads and will help you monetize visits from places like Digg and StumbleUpon.

5) Ads placed in-between the content can also perform well. If you have small posts then put ads at the top of the page content. If you have big post then ad units placed at the bottom or middle of the post.

6) Do not use borders to your text ads or use them wisely.

7) To blend, choose the colors that match with the colors of your website: for example if your site background is black, you will put the same background for your Adsense ads. If your links are blue, then select the color blue for Adsense links. If your titles are red, then make your Adsense block titles red.

8) To complement, use colors that already exist on your site, but don't match the background and borders exactly where the ads are placed.

9) To contrast, choose colors that stand out against the background of your site. Contrasting is recommended only for sites with dark background, so we suggest using an ad style with white background, white borders, and blue titles. (google hints)

10) Use link units near the site navigation bar. The main advantages of this placement, are that they can perform well and you don't need too much Ad space on your site. This way, your site looks clean and also, your visitors will be annoyed.

11) Study your keywords and the target ads to these keywords. Usually, Google Adsense crawler searches for the first or second paragraph to target ads to that page so don't forget to add your page-targeted keywords at the beginning of your post.

12) MFA (made for AdSense) sites are websites created around AdSense keywords, and often, these are poor quality sites with little or no original content. Use Allow and block ads feature to block low paying or irrelevant ads showing on your site. And be careful when you're doing this, sometimes one ad unit can give you $0.01 in one country and $1 in other country.

13) Use Google Adsense ad preview tool to view what ads are showing on your site.

14) Many times you can earn you more AdSense revenue from Image search engines than with the regular web traffic. Upload good quality images and use text captions with alt tags to make sure that blog images rank good in Image Search results.

15) Add a search box at the top left region of your blog and use the word "search" in the submit button otherwise visitors might be confused and might not notice it. If you use a second search box, put it at the bottom of your pages.

If you have any other suggestions, write a comment below.
Good luck!

Baca Selengkapnya ....

Add Social Bookmarking Buttons near Adsense Ads

Posted by Unknown Minggu, 04 Maret 2012 0 komentar
The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive.

Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg.


How to add this widget:

1. Firstly, login to your Blogger Dashboard and go to Template and then click on the Edit HTML button
 (don't forget to make a backup of your template)

2. Search (CTRL + F) for the following tag:

]]></b:skin>

3. Paste the following CSS code just above it:

.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisjdteWwGIBJji_yC-ugCoYXasmRqSYgVLuul5vCNXvnIgjJUACFlE2yr7ct0_b57lddu_O1bbhL7KC4JLNYylrNm50AN8aUIg4NJIROX3QxQRIF3lgYocyVY0CLpLaNV68sIvX8bQ2Nyd/s1600/technorati.gif) no-repeat;}
.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3W-3we0buMxiqALNHAnAMtuRfjE6EB959Di7ZTc9gBKCi8TZw65iFBQYbSLw0nZN01km3mTEGcnBUKybnGrQJ2zYWR7cFZyZbjVzV9Q99PpeN2aFQAFQupBCi-5ubwXPNrybaK5JyG6r/s1600/facebook.gif) no-repeat;}
.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwc_gia5058jB03wp05zgd_fzuHajckjQQh7Rtu1tIjmAU-2drPwGjTKhsaSLz1W4h6VOMqehs2CyYjvzuUOQoflZ7yiAjtOcpHSA4qvhDdMB80JutjAKbP_nQZ-pNcEYN8KbqCykntO0v/s1600/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJV0gT3iBJitTo4lXgt3LfMnzLfTGU230nL-tw1RA8BzBGJ_w4PxjHfpX7SDS3ZJHNWlE0pjQW7P5ZMp3ySEJuEoU_CYQVAzUPMayFdMpLXpF1NlgMR2cViEgHujBNrVXdN3ROl0aXN9a/s1600/delicious.jpg) no-repeat;}
.mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAf7SuFOoC86mJGG_mQRMYIFGbfFJcO0964BAZWLmWsRrQC41xXJObXgHHmKhn6L-McfQSZCXqNK7spelArvx9mAM5zbp9Xp_7WJrqgaY-qF329B9lqqhYNEcZSsgxQY48oWAP724AGxS7/s1600/stumbleupon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlyxXKtMJcp7xA8Z4z5gKvSfhiRj-HA0EHlvYTubk_MG5ijKXEVgb40cZkdr1OBBsH339jn6H0TtAuLVwgboUpQ385728cssiEoQsYFCAUneNxrtSL0JlQxKNn-wzBzSLA35Fs7bBkuFpO/s1600/Digg.png) no-repeat;}

4) Now search - using "CTRL+F" - for the following line:

<div class='post-body entry-content'>

 If you can't find it, search for this one:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

5) Add the following code directly below it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client=&quot;pub-YOUR PUBLISHER ID&quot;;
google_ad_host=&quot;pub-1556223355139109&quot;;
google_ad_width=300;
google_ad_height=250;
google_ad_format=&quot;300x250_as&quot;;
google_ad_type=&quot;text_image&quot;;
google_ad_host_channel=&quot;0001&quot;;
google_color_border=&quot;FFFFFF&quot;;
google_color_bg=&quot;FFFFFF&quot;;
google_color_link=&quot;0000FF&quot;;
google_color_url=&quot;008000&quot;;
google_color_text=&quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</div>
</b:if>

Replace YOUR PUBLISHER ID with your AdSense account ID. You'll find it with the Home tab, on your "Account settings" page. It should look something like this:

pub-5623269265862168 (copy only the numbers and then paste them)

6) Save template... and just go to one of your post to see the changes!

Baca Selengkapnya ....
Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of Android rush.