Saturday, December 17, 2011

5 Template Adsense Terbaik untuk Blogger

5 Template Adsense Terbaik untuk Blogger

Untuk meningkatkan pendapatan Adsense, para blogger biasanya menggunakan template yang cocok untuk penempatan adsense mereka. Berikut ini adalah 5 Template dengan posisi adsense yang strategis sehingga lebih meningkatkan pendapat Adsense. By: geeksdesk




Klik Gambar untuk lebih detail:
1. Pro Sense:

2. Ads Minded:

Demo | Download



3. Ads Theme Template:



4. Adsense Tech Blogger:

Demo | Download




5. Blue Floral:

Demo | Download

Rating: 4

Thursday, December 8, 2011

How To Create Sitemap For Blogger / Blogspot

How To Create Sitemap For Blogger / Blogspot.
After you submit blogger blog to Google Webmaster Tools, then you need to create sitemap for your blogger blog and submit to Google Webmaster Tools to tell Google about pages might not otherwise discover.
In Google Webmasters Tools, simply clicks Site Configuration, then Sitemaps, clicks Subkit a Sitemap.

In the box below Submit a Sitemap, add the following code after your blogger blog URL,
atom.xml?orderby=updated

or

atom.xml?redirect=false&start-index=1&max-results=500
then click Submit Sitemap button.

Sunday, December 4, 2011

How To Create Floating Ads On Blogger/Blogspot

How To Create Floating Ads On Blogger/Blogspot
Floating top bar ads is an ads in the box that will be always on the top of your blog post until it is closed. For implementation with adsense, I suppose you toread Google policy about Adsense implementation policy.
1. Login to Blogger. Got to your blog --> Design --> Edit HTML.
2. Place the script below at position after <head> dan before </head>. Don't forget to escape this html code so it can be implemented in blogger.


&lt;style type=&quot;text/css&quot;&gt;
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 338px;
visibility: hidden;
z-index: 100;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
/***********************************************
* Floating Top Bar script- &#65533; Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 320 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos=&quot;fromtop&quot; //enter &quot;fromtop&quot; or &quot;frombottom&quot;
function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(&quot;;&quot;, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie=&quot;remainclosed=1&quot;
document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;
}
function staticbar(){
barheight=document.getElementById(&quot;topbar&quot;).offsetHeight
var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)
el.style.visibility=&quot;visible&quot;
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};
el.x = startX;
if (verticalpos==&quot;fromtop&quot;)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==&quot;fromtop&quot;){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(&quot;stayTopLeft()&quot;, 10);
}
ftlObj = ml(&quot;topbar&quot;);
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener(&quot;load&quot;, staticbar, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, staticbar)
else if (document.getElementById)
window.onload=staticbar
&lt;/script&gt;


3. Save Template
4. Click Layout
5. Click Add Gadget
6. Choose HTML/JavaScript
7. Place script below


<div id="topbar">
<a href="" onClick="closebar(); return false"><img src=" http://i729.photobucket.com/albums/ww298/trimulyawan/close.gif " border="0" /></a>
---- Paste your adsense here ----
</div>


8. Save

Source: http://www.dynamicdrive.com/

Friday, December 2, 2011

Animated Recent posts Blogger/Blogspot with thumbnails

Animated Recent posts Blogger/Blogspot with thumbnails

STEP #1 Log in to Blogger, go to Layout

- Add a Gadget of HTML/JavaScript type.

- Then add this code in to it:



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5MuseH1mljYhlNE8wA7l5snfm3gDIqnQfwgmJ2SRhdfgRBTn0zz-4jnkAkHvkyfnEjbV9VBPWdFE_FpSmEqSSJObgdolCuJH_IMnKAuUnJRW2BABFEMYKmT-VxVrzwN879KsPLlBQ2P_/s1600/bdlab-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://imbloggernusantara.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


- Now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :
1. homepage address
home_page = “http://name-your-blog.blogspot.com/”;
2. Style


- from above style/css, you can change :
width:

width : 220px;
width:208px:

- customize base on your template
and
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
or
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5MuseH1mljYhlNE8wA7l5snfm3gDIqnQfwgmJ2SRhdfgRBTn0zz-4jnkAkHvkyfnEjbV9VBPWdFE_FpSmEqSSJObgdolCuJH_IMnKAuUnJRW2BABFEMYKmT-VxVrzwN879KsPLlBQ2P_/s1600/bdlab-blogspot-com.jpg) repeat-x;
Customize the colors of backuground

3. image size

thumbwidth = 70;
thumbheight = 70;

Match your needs

4. How many post you will show
numposts = 10;
Base on what you need to show

Tuesday, November 29, 2011

Random Posts Widget For Blogger/Blogspot

Random Posts Widget For Blogger/Blogspot
This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog's sidebar.

Adding a Random posts widget is very easy...
Simply log in to Blogger, go to Layout, click on "Add a Gadget", and select it as "HTML/JavaScript" type.

And finally paste this code in to it:

<script type="text/javascript">

var randarray = new Array();var l=0;var flag;

var numofpost=8;function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>


- Edit the code numofpost=8;function to change the number of posts being displayed in the widget.

- NOW CLICK SAVE TEMPLATE

Monday, November 28, 2011

How To Add Yahoo Smiley Emoticons Blogger/BlogSpot Comment Form

How To Add Yahoo Smiley Emoticons Blogger/BlogSpot Comment Form

STEP #1
First log in to Blogger
Then go to Layout -> click on "Edit HTML" tab, and click on "Expand Widget Templates" tick-box.





Now find this code :
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>


Now right IN-BETWEEN those two lines, add all these lines:
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>

<b>

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))

</b>

</div>


STEP #2

Now find this code in the template:
</body>


And just BEFORE it, add this line:

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js' type='text/javascript'/><noscript><a href="http://bdlab.blogspot.com" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>


Now click Save Template


Sunday, November 27, 2011

How To Improve SEO Friendly For Blogger/Blogspot

How To Improve SEO Friendly For Blogger/Blogspot


SEO can be started by choosing a SEO friendly template. Basic blogger templates are usually have no SEO friendly. Beside Wordpress, Blogger is a free blog platform that majority used by world blogger. It has simple template, and easy to modify. Basically, to make it more SEO friendly, a blogger template must have title tags that match with title post, meta description that describe post content, and H1 for title to make it more relevant with search engine. Most of basic blogger template have no SEO friendly setting, and need to modify it to have SEO friendly.

SEO friendly setting need to be modify in blogger template are:

1. Title tags

Some of blogger template have title tags like this:

Blog Title - Post Title

This setting makes post title less significant than blog title, so the title tags can be irrelevant with post content in the view of search engine. Blogger template need to be modified to change title tags using post title.

2. Add meta description tags
By default, basic blogger template setting have no meta tags setting. We need to modify template so it have meta tags for main homepage, and add different meta tags automatically for every post. Different meta tags for every post can be generated from post title. Meta description give a description about the content of your blog. Most of search engine use meta description to find relevant content.

3. Post tag
Use H1 for post title to make your posting more relevant with search engine, and SEO friendly.