Template: 5 Stars Premium

This great template was created by SAER. And I am using it now for my blog. Classified as a PREMIUM template, it has many functions:

1. PROFESSIONAL LOOKING BLOGGER TEMPLATE
2. FULLY WIDGETS
3. ADSENSE ADS OPTIMIZED TOP
4. ADSENSE ADS OPTIMIZED BELOW POST
5. HIGH QUALITY GRAPGHIC PICKED
6. AUTO READ MORE FUNCTION
7. RELATED POST WIDGET
8. THREE COLUMNS UPPER SECTION
9. THREE COLUMNS BOTTOM SECTION
10. RSS FEEDS COSTUMIZED WIDGET
11. SEARCH BAR

DEMO | DOWNLOAD | INSTALLATION

**UPDATED**

To remove the adsense under the post, delete this code:

<div class='subscribe'>
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-1746391924704316&quot;;
google_ad_host = &quot;pub-1599271086004685&quot;;
/* 250x250, created 9/24/08 */
google_ad_slot = &quot;9000122036&quot;;
google_ad_width = 250;
google_ad_height = 250;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt; </div>

Ads banner under the post, find this code:

<div class='ad'><a href='http://blogger-dashboard.blogspot.com/' target='_blank'><img src='http://lh4.ggpht.com/_9b1traaMESE/SpfdyI2EiOI/AAAAAAAAAzk/OEgjMBD4OcQ/ADS BANNER.png'/></a></div>

Ads banner on the top right, find this code:

<div class='ad'>
<a href='http://blogger-dashboard.blogspot.com/' target='_blank'><img src='http://lh4.ggpht.com/_9b1traaMESE/SpfdyI2EiOI/AAAAAAAAAzk/OEgjMBD4OcQ/ADS BANNER.png'/></a>
</div>

For both of ads banner, I used my own banner. Delete or replace it with your own banner image, it's your call.

How To Add Auto Read More With Thumbnails

"Read More" is very important. This trick will automatically create post summaries and guess what? With thumbnails too. Extra code in your blog post? No need anymore. I bet you will love it.

Let see how to do this.

Go to Blogger Dashboard >> Layout >> Edit HTML, and click on "Expand Widget Templates"
Expand Widget Templates

and find this tag: </head>.

Then copy and paste the below code BEFORE </head> tag

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
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>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Now find this tag: <data:post.body/> dan REPLACE with the below code:-

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

 Save your template and done!

**NOTE** You can replace http://i37.tinypic.com/351icqx.jpg with one of the below urls:-


http://img15.imageshack.us/img15/1821/black1q.gif


http://img15.imageshack.us/img15/4785/blackfc.png


http://img27.imageshack.us/img27/6199/black1l.gif


http://img27.imageshack.us/img27/8146/bluedark.gif


http://img27.imageshack.us/img27/3691/pinkua.png


http://img27.imageshack.us/img27/5526/lightorange.gif


http://img27.imageshack.us/img27/7469/red1.gif


http://img20.imageshack.us/img20/4997/grey1.gif

Or you can  DOWNLOAD Read More buttons and upload it using your own hosting to get the url.

How To Put Blogger Dashboard Log In Form

Ok, how to put a Blogger Dashboard Log In Form in your blog? Just a trick that can make your blog look more professional. I'll tell you how in this tutorial. Very simple and easy:-

1. Go to Blogger Dashboard >> Layout. Click Add A Gadget >> HTML/Javascript.

2. Copy the below code and paste it into HTML/Javascript box.

Enter your username and password to enter your Blogger Dashboard<br /><br /><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden" /><input value="blogger" name="service" type="hidden" /><input value="8" name="nui" type="hidden" /><input value="8" name="naui" type="hidden" /><input value="2" name="fpui" type="hidden" /><input value="3" name="uilel" type="hidden" /><input value="true" name="skipvpage" type="hidden" /><input value="false" name="rm" type="hidden" /><input value="true" name="alwf" type="hidden" /><input value="http://www.blogger.com/login.g" name="roeu" type="hidden" /><input value="0" name="alinsu" type="hidden" /><input value="WbQ8QiJfUvA" name="GA3T" type="hidden" /><div><label for="Email"> Username: <br /><input id="Email" tabindex="1" value="" name="Email" size="20" type="text" /></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br /></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password" /></div><br /><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit" /></form>

3. Click "Save" and done! Easy huh?
See it for yourself:-

Enter your username and password to enter your Blogger Dashboard

Username:

Password: (?)

How To Disable Right Click

As we can see today, browsers such as Opera do not allow the right-mouse button to be disabled.many of the code examples used to disable the right-click no longer work in most browsers. In addition to this issue disabling the right-click can cause serious accessibility issues and often only angers users.

But, we can still try, right? Let me show you 2 or 3 tricks about this thing.

First Way: Disable Right Click Or Drag Picture

Go to Blogger Dashboard >> Layout >> Edit HTML and find this tag: <body>.
Replace the tag with this code:-

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

Second Way: Disable Right Click Or Drag Picture II

Go to Blogger Dashboard >> Layout >> Add A Gadget >> HTML/Javascript. Copy the code below and paste it into the HTML/Javascript box.

<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;

if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);

function mischandler(){
return false;
}

function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

</script>

Click "Save".

Third Way: Copyright Notice When Clicking On Image

Go to Blogger Dashboard >> Layout >> Add A Gadget >> HTML/Javascript. Then copy the code below and paste it into HTML/Javascript box.

<script language="JavaScript" type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
//-->
</script>

Click "Save". Wait! It's not finish yet. When adding an image into your post, you will see the image tag similar to the below example:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQqWsXz-5vpKQX_jch_d5n_MnZcBCrYKRpfnM7wZ1cfngbakL9dQLLQ99Kv5iWuwQRU1Q3hucEf0qGzQ-bBrblee9gz22Ljess5rrxrmFqOVsb4cT_yCNGP1W9IHA50Q8BaDAgnfrV-O2/s1600-h/love.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQqWsXz-5vpKQX_jch_d5n_MnZcBCrYKRpfnM7wZ1cfngbakL9dQLLQ99Kv5iWuwQRU1Q3hucEf0qGzQ-bBrblee9gz22Ljess5rrxrmFqOVsb4cT_yCNGP1W9IHA50Q8BaDAgnfrV-O2/s320/love.jpg" /></a></div>

Add this:

onMouseDown="popupMsg('Copyrighted -- TycoBlogger 2010')"

after the highlighted image tag above and you image tag will be like below example:-

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQqWsXz-5vpKQX_jch_d5n_MnZcBCrYKRpfnM7wZ1cfngbakL9dQLLQ99Kv5iWuwQRU1Q3hucEf0qGzQ-bBrblee9gz22Ljess5rrxrmFqOVsb4cT_yCNGP1W9IHA50Q8BaDAgnfrV-O2/s1600-h/love.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQqWsXz-5vpKQX_jch_d5n_MnZcBCrYKRpfnM7wZ1cfngbakL9dQLLQ99Kv5iWuwQRU1Q3hucEf0qGzQ-bBrblee9gz22Ljess5rrxrmFqOVsb4cT_yCNGP1W9IHA50Q8BaDAgnfrV-O2/s320/love.jpg" onMouseDown="popupMsg('Copyrighted -- TycoBlogger 2010')"/></a></div>

**NOTE** Just change the words (in blue color) with you own words or notice. Click the below image to see the effect:-

Click HERE to see more demos.
So, lets try!.