How to earn and make money by Bloggiing

This post I dedicated for you who are a begginer in Blogging. Well, a few months ago I remember the day since I started to build a blog I have asked my self with a question "Will I get money by doing blogging?". Anyway, I heard some of people has done well and they got an earnings from their blogs. Even though at the first time I wasn't quite sure I could do the same things to be successful in blogging like them, I have thought my english is not really good (English is not my common language) I even can't write well an article post..hehe :D, but I keep blogging because I know I have passion and spirit to build a blog and I love it! 

For me and maybe many others bloggers has thoughts that to build and to be a successful blogger isn't something that we can get instantly just in one night or in a few days. A blog is to build with focus-mind, effort and energy, it the same as like you build a high-building. But you have to be fun and love with it and enjoy it. Because when you love on what you are doing, you will also attract everything you like. You will see there's many visitors will comes to you, then the money will follows :)

Well, there's so many ways you can find to make and earn money by blogging. Some of them are becoming an ads publisher by using Google Adsense (or another adsense services), affiliate programs, sell E-books, Amazon, and many others. However the most common way used by many bloggers in the world are using Google Adsense to monotize their blog to earn money, as you can see in this blog (Custom Built Technology Blog) that until now this post is written almost 100% earnings comes from Google Adsense. If you haven't already Google Adsense account yet, you can easy to register yourself here for free and start earning from blogging. All the payment will be transfered by Google to your account.

Please note that above all, it's better for you to focus on your content rather than earnings. Because Blogging is about to attract/help visitors or readers and make them enjoy to read your blog. Keep posting regulary and be patient, as long as you do Blogging with passion and loving it, you'll be succeed in the future. It is only a matter with time. 

How to Make / Create Facebook Like Button in post to Blogger

Today, everyone is on facebook. The biggest social network, someone said if Facebook is a country it has to be the 3rd largerst population in the world after China and India, That's Amazing right? and now, we are about going to learn how to make/create Facebook Like button in your post. This is very important for your Blog because social network is vey powerful today to promote your Blog.

Okay, just Follow the steps below:

1. Go to Dashborad > Design/Layout > Edit HTML
2. Download Full template first before you create this trick to back up
3. Tick the Expand Widget Templates check box
4. Find the following code in your HTML, this is the code for your post content:

5. Paste the Facebook button code immediately below (after) it.

!-- Facebook Like button Start --><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <div style='float:left;padding:5px 5px 5px 0;'><br /> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/><br /> </div><br /> </b:if><br /> <!-- Facebook Like button End -->

6. Save templateif you like what you see. 

7. Enjoy!   Now you have create facebook like button on your Blog's post.If you Enjoy this post. Please Share or give it

comment. 

Thanks,

How to Make [Auto] Read More Blogspot | Blogger

Hello Blogger, I bet You always see "read more button"  in every post, or Auto Blogger read more link. when you're make an article that you wanna post into your Blog and you wanna make that simple so, you should create read more button or [auto] Blogger Read More Link  that make your blog easy to load in the search engine Google. that's means your potencial to ranked by Google in the first page. But now we'll gonna make auto Blogger Read More Link to your post. This is different from the conventional read more button because you gonna make it simple with the first image thumbnail on your Blog. I call it Auto read more blogger link.

take a look the pic below:

Conventional read More VS Auto Read More

Follow, these Steps:
1. Login to your Blogger account
2. Go to Dashboard > Design > Edit HTML
3. Back up the template with full download template
4. Check the  Expand Widget Templates check box on top right of the HTML window
5. In the code window, look for </head> line.

6. Add the Read More button code below right after that line

<!-- Auto read more script Start --><br /> <script type='text/javascript'><br /> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail<br /> summary_noimg = 430; //summary length when no image<br /> summary_img = 340; //summary length when with image<br /> img_thumb_height = 200;<br /> img_thumb_width = 200;<br /> </script><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> function removeHtmlTag(strx,chop){ <br /> if(strx.indexOf("<")!=-1)<br /> {<br /> var s = strx.split("<"); <br /> for(var i=0;i<s.length;i++){ <br /> if(s[i].indexOf(">")!=-1){ <br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); <br /> } <br /> } <br /> strx = s.join(""); <br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2; <br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; <br /> strx = strx.substring(0,chop-1); <br /> return strx+'...'; <br /> }<br /> <br /> function createSummaryAndThumb(pID){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = summary_noimg;<br /> if(thumbnail_mode == "yes") {<br /> if(img.length>=1) { <br /> imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';<br /> summ = summary_img;<br /> }<br /> }<br /> var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br /> div.innerHTML = summary;<br /> }<br /> //]]><br /> </script><br /> <!-- Auto read more script End -->

7. After that, find this line: <data:post.body/>

8. Replace the line with this code: 

!-- Auto read more Start --><br /> <!-- http://www.custombuilttech.blogspot.com --><br /> <b:if cond='data:blog.pageType == "item"'><br /> <data:post.body/><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "static_page"'><br /> <data:post.body/><br /> <b:else/><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><br /> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");<br /> </script><br /> <a class='more' expr:href='data:post.url'>Read more ...</a><br /> </b:if><br /> </b:if><br /> <!-- Auto read more End --><br /> <br /> <br />

9. Preview, if it works then save template
10. Enjoy! 

Now you have auto read more button or I call it [Auto] Blogger Read More Link
If you love this post. Please share this read more button post or give it comment below, thanks! :)

Display (Floating) Pop Up Ads Widget for Blogger

For you who are an adsense publisher then you want to display pop up ads format, you are in the right place now. Because this tutorial will show you how to create keeping getting pop ads on your blog. Having pop up ads is very useful because these ads will appear several times, then this is very potential to clicked by a readers.





Anyway, here's the tutorial:

1. Login to your Blogger account
2. From Dashboard > Design > Page Elements
3. Click 'Add a Gadget'
4. Choose 'HTML/Java Script'
5. Copy Paste the code below to the box Widget



<style>
#topbar {
height:30px;
width:auto;
background: #005094 
background-repeat:repeat-x;
text-align:left;
padding-top:0px;
}
#adsground {
height:auto;
margin:0 auto;
width: 300px;
background:#fff;
border-bottom:0px #005094 solid;
border-right:0px #005094 solid;
border-left:0px #005094 solid;
text-align:Center;
padding:0px;
}




#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:250px;
left:180px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="topbar">
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Custom Built Technolgy</span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://custombuilttech.blogspot.com" target="_blank" onclick="getValue()">close</a></span>
</div>
<div id="adsground">
<h3>Sponsor Ads </h3>
<p align="left"><h3></h3></p>
<p>

<script src="http://custombuilttech.com" type="text/javascript"></script>

<br/></p></div></div>




6. Save Widget

Replace the Adsense Script with yours (on the red line)