Hot Gadget: Marquee BLogroll

Today Tutorial blog and blogger hack. After Finishing my job now i can writing for my blog, i miss it. Ok, last tutorial blog we have learned about Marquee. Now we can implementation it to make a blogroll. Let’s start it with a simple steps:

• Go to Your Layout
• Add a gadget adn Choose HTML/Javascript
• Copy this code below

 

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" width="300" height="250" scrollamount="2" align="center">

http://linkhere

http;//linkhere

………
</marque>

• If you want to change the direction of link just change the green code with “up” or “down” 
• Change the blue code with your link.
• Save and Done

   

  It’s easy and you can save some space in your template for this blogroll. Don’t miss another tutorial blog and blogger hack here.

   

  If you don’t mind please subscribe this blog and you will get the latest tutorial blog to your e-mail.

Read More.... »»

How To Change Your BackGround Image (I)

Today Tutorial blog and blogger hack. Tonight i will give some blogger hack for you, some blogger never satisfied with their template and always tend to change it frequenly. One think from template part that i always see like background and header had be some problem. But now we will start blogger hack with Background changing. Lets make it go through.

• Find your image at google or else, you can also use tile image here
• I use this image taken from image site( dont forget to host your image at image hosting such as Photobucket, or  flicker)

 

• To make this image as your background Go to Layout and Choose Edit HTML and look for  code from your body template, look like this example:

 

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

• Ok, now to focus at the bold line, we will modify this line to adding our background. we just simply add the following code ( with green code):

body {
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

• Where you can change the green code with your image URL, Save and done
• Please look the part of image below (taken from testing blog):

• The image has repeated acroos the whole page.

You can try it by yourself, it’s easy to change background of your blog. Ok that’s Blogger hack today, i will see you at the next posting about another blogger  hack. Don’t forget to get update this blog free via your e-mail below. thanks

Read More.... »»

Add 3 Coloumn Footer in Your Blog

Today Tutorial blog and blogger hack.  I still have no mood about continue my project, some problem still holding in my head. But, writing in blog is get my self relax  a bit. Ok, just ignore my problem and we will have a schedule today for post a new content. how about make some Blogger hack in our template? Like adding 3 coloumn in footer?i see, you all agree about it. let’s begin this hack.

• Log in your blogger account
• Move to Layout and Choose Edit HTML
• Back up your blog first, and click on expand widget template
• Copy this code and paste before the tag </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

• save the template
• Now, find this code

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

 

• Change the red code with code below

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

 

• Save and done

Now you can check your Layout, if you follow the instruction you will see three footer have added. Congratulate

That’s blogger hack today, please enjoy this blog and i will give more tutorial blog and blogger hack for you.

Read More.... »»

Learn About Marquee (Chapter I)

Today Tutorial Blog and Blogger Hack. My mind come to think what will i write today, maybe some HTML tips for you. Ok, without wasting time let’s we share about Marquee.

You may be familiar with Marquee cause all around the world site actually use it for some teks in theier site.

 

The Marquee code is actually simple, we just put tag like this <marquee> Your Text Here </marquee>. and  the result your text will moving from left side to right side. You can also modify this code for some purpose. See example below :

 

 

Master Blog

 

 

Let’s use some backgorund for it, look at this code:

 

<marquee bgcolor="#FFEFF0">Your Text with Background</marquee>

 

and the result is below:

Master Blog With Background

 

 

 

Let’schange the  direction of this text  ( “left”, “right”, “/top”, “/down”) , here the code:

 

<marquee direction="right" bgcolor="#99CCFF">Your Text here</marquee>

 

For example text from Right:

 

Text From right Side

 

 

That’s simple, You can change the direction with your own, Ok we will continue the tutorial blog and blogger hack tommorow cause i’m getting tired from my office. Just keep your spirit to blogging.

keep follow this Tutorial blog for the next series of Marquee. Bye

Read More.... »»

How To Make a Searching Box

Today Tutorial blog and blogger hack. Some of visitor maybe  difficult to find article in your blog and they need help. Maybe your template has no searching box install there, and it’s maybe important for some of your visitor to find something they like. So in tutorial blog today we will make a Standar Searching box  for your blog.

 

Now let’s begin with some of step here:

• Go to Layout and add a gadget
• Choose HTML/Javascript
• Copy and Paste code below

<form id="searchthis"

action="http://yourblog.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>

 

• Now change the red code with your URL blog. and save.

 

Please look the searching box display

 

 

If you want to change with icon like this

 

 

Just copy and paste code below on your on layout

 

<form id="searchthis" action=”http://yourblog.blogspot.com/search” style="display: inline;" method="get">
<tr>
<td nowrap="nowrap" valign="top" height="16" align="left">
<input id="b-query" maxlength="255" class="textinputsearch" value="" name="q" size="22" type="text"/>
<input id="b-searchbtn" alt="Search"

width="18" src=”http://www.geocities.com/fabisnis/master.ico” height="19" align="top" type="image"/>
</form>

 

Dont forget to change the red code with your URL blog and your image.

 

Well that’s enough for today, just keep your visitor comfort with your service.

Don’t forget to look for the next day in tutorial blog and blogger hack here

 

See ya

Read More.... »»

Hot Gadget: Google Friend Connect

Today Tutorial Blog and Blogger Hack. You know that blogspot has a widget called follower where you can get the update from blog that you follow. Now Google also has a similar gadget  where we can connect to another blogger via google account and we can call it Google Friends Connect.

 

It’s really look  like Follower gadget where our photo show up to anyone, Interact with other visitors by making friends, sharing media, posting comments, playing games, and more, Invite friends from other social networks and contact lists to join your site or blog. Maybe you will get interest with this gadget and now our tutorial blog today is installing Google Friend Connect.

Let’s move on to the tutorial blog below

• Open google friend connect
• Click on Setup  a new site
• Fiil in your data with your site name and URL. see at below

 

 

• Just ignore the second step where you direct to add 2 files to your site (just click continue until you are in set up the member gadget)

• In set up the member gadget you can choose your gadget style, if you done with it just click on Generate Code
• Now Copy and Paste the code to your blog in sidebar or footer
• Just go to layout and add gadget choose HTML/javascript, paste the code
• Save and done

Now you have get the gadget from google, just enjoy the connection and grow your traffic from this gadget.

It’s really nice to share with you all about tutorial blog and blogger hack. just give me a feedback and we will make it really great experience for both of us.

Keep blogging and see for the next tutorial blog and blogger hack.

Best Regard

Read More.... »»

Add Star Rating To Your Blog

Today Tutorial blog and Blogger Hack. We know that relationship between blogger and reader/visitor, interaction between both of them maybe can be seen at comment or GuestBox. Now we will give some interaction tools for reader to your blog inside your post.

Star Rating is out tutorial blog today. It will show the expresision from reader about your article, And if you are the reader you will show your like or dislike about your favorite blog article. You can see the star rating below this post.

 

Just like we have done before, this tutorial blog will be easy for you:

• Go to your Layout and Choose Edit HTML
• Back up your blog and click on Expand widget Tempalte
• find this code <p><data:post body/></p>
• Now put this below that code

<script language='JavaScript'>
var OutbrainPermaLink=&#39;Your-Post-Permalink-Here&#39;;
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

 

• Save and Done

Now check your article and you will find the star rating embedded below it. Congratulation now the reader can give you a feedback and they will get fun with it.

That’s our Tutorial blog today.

Feel free  to subscribe our RSS or E-mail

 

 

Best Regard from me.

Read More.... »»

Hot Gadget : Related Post

Today Tutorial Blog and Blogger Hack. We all know that making visitor comfortable in our blog is the priority. They will feel like a someone special if we serve the best for them. For example if they want to find your old article that related to they want, your blog will give it an easily link to them. So it call related post widget. All you have to do is give them related post and they satisfied with your blog service.

 

Now our blogger hack today is making a related post below your post, so we will make it simple:

• Now Download This script here
• Open that file and copy the code
• Go to your Layout and Choose Edit HTML
• Click on Expand Widget Template (back up your blog first)
• Now paste the code below <data:post body/>
• Save and done

 

If you want to change the word “ Related Post by categories” by yourself just find this word on the code.

 

It’s enough for today and if you like our tutorial blog and blogger hack just subscribe our RSS or E-mail

 

See you at next Tutorial blog

Read More.... »»

Embedded Emoticons In Your Shoutmix

Today Tutorial blog and Blogger Hack. Do you see at my Shoutmix?if you haven’t see, just check on it and you will find that  some new  emoticon has appears. like this maybe

 

or this

and many more emoticons like that where you can find it at myem0.com. Now our tutorial blog today is installing that funny emoticons in our shoutmix.We will embedded emoticons as like we embedded comment box or Installling Yahoo in comment box  before. If you haven’t use Shoutmix in your blog just sign up here.

 

Let’s make it just a simple Tutorial blog:

 

• Go to your account in shoutmix
• In dashboard, Choose Smileys
• Copy-paste emoticons code that you get it from myem0.com
• Just add code begin on http:// and end with .gif
• for example : add http://i269.photobucket.com/albums/jj72/myem0/01/yoyo-emoticon-1-014.gif in the box and click add.
• Dont forget to choose initial for your emoticons eg: :)) or :O or like this :))
• Save your setting and done

Now check at yoor shoutmix and it’s has added. But, you just can add 10 emoticons besides your standar smileys. If you want more 500 smileys, upgrade your account and it’s not free, it costs $2 /month

 

Well i think i just use free account until get some money. That’s tutorial blog today, we will see you next post.

 

If you want some update of this blog, feel free to Subscribe our RSS or E-mail.

 

See you at next Tutorial blog here

Read More.... »»

Hot Gadget : Making A Tab View

Today Tutorial blog and Blogger hack  TabView is a easy ways to give information to the readers especially for the blog with limited space. You can fill TabView with shoutmix, twitter, recent comment, or else.

 

With this Tutorial blog we will make TabView easy, so please keep your focus, now we begins:

• Go to Layout, choose Edit HTML
• Backup your blog and Expand widget Template
• Copy-Paste code below and put above the

  ]]></b:skin>

  div.TabView div.Tabs
  {
  height: 24px;
  overflow: hidden;
  }
  div.TabView div.Tabs a
  {
  float: left;
  display: block;
  width: 90px; /*width of main menu*/ text-align: center;
  height: 24px; /* height of main menu */
  padding-top: 3px;
  vertical-align: middle;
  border: 1px solid #F4F4F4; /* border colour from above */
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Times New Roman", Serif; /* Type of Fonts */
  font-weight: 900;
  color: #F4F4F4; /* Colour of fonts*/
  }
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
  {
  background-color: #FFFFFF;/* background colour*/
  }
  div.TabView div.Pages
  {
  clear: both;
  border: 1px solid #F4F4F4; /* line colour menu*/
  overflow: hidden;
  background-color: #FFFFFF; /* backgorund colour */
  }
  div.TabView div.Pages div.Page
  {
  height: 100%;
  padding: 0px;
  overflow: hidden;
  }
  div.TabView div.Pages div.Page div.Pad
  {
  padding: 3px 5px;

   

  • Noe put this code before tag </head>

  <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>

   

  • Then Save
  • Now back to Layout and add a gadget
  • Choose HTML/Javascript and COpy-Paste code below

  <form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
  <div class="Tabs" style="width: 350px;">

  <a>Tab 1</a>

  <a>Tab 2</a>

  </div>
  <div class="Pages" style="width: 350px; height: 250px;">
  <div class="Page">
  <div class="Pad">

  Code Here 1.1 <br />

  Code Here 1.2<br />

  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Code Here 2.1 <br />
  Code Here 2.2<br />
  </div>
  </div>
  </div></div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>

   

  Then Save, Now please look this explanation :

  • You can change this width: 350px and  height: 250px
  • Change the blue code with your Text or title
  • Change the red code with your Javascript eg: shoutmix code, image, or else

  That’s tutorial blog today, hope you enjoy this, if there’s any error just tell me and i will give you a hand.

  Thanks for coming in tutorial blog and blogger hack

Read More.... »»

How to Install Yahoo Emoticon in Comment Box

Today Tutorial blog and blogger hack. At last Tutorial Blog, we have learned how to embedded Comment below post. If you havent read it just click here. It will more interesting if we put some emoticon like Yahoo emoticon above the comment box. SO, the reader can keep they ekspression when give comment. (thanks to o-om for Yahoo emoticon javasript)

Just like before at tutorial blog here, we will keep this simple and easy to do:

Go to Layout and choose Edit HTML (Back up your blog)

Copy and paste code below at above tag </body>

<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>

 

Now find this code with red colour

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/>

</a> </b:if> </b:if> </p>

 

Copy-paste  code yahoo emoticon below and put it under

           <p class='comment-footer'> (just look the code at step 3)

<b><img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:|

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

 

Save and done

Now, check your blog and comment box, is the emoticon appears or not? i hope it’s work well.

That’s tutorial blog today

Have a nice try

 

Read More.... »»

How to Make Recent Comment

Today Tutorial Blog dan Blogger Hack. Comment always make blogger happy , when your blog full of comment from visitor your will get full spirit to get more inspiration to getting better.

We needs to know when a new comment added, so recent comment is important for our blog. Every single comment will appears in tthe recent comment. You know that to adding recent comment can be make by twio ways first by RSS Feeds and another one by Javascript code.

In Tutorial blog today we will make Recent comment with Javascript code,

Let’s make it simple and quick step only:

1. Go to your Layout
2. Add a Gadget
3. Choose HTML/Javascript
4. Copy-paste code below 

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75&percnt;;text-align:center"><a href="http://blogtutormaster.blogspot.com/2009/02/How-to-make-recent-comment.html">Get this Widget</a></div>');
}
</script>
<script src="http://Yourblogname.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

 

  5. Save and done

 

Note:

Change URL http://YourBlogname.blogspot.com with your blog URL

 

Now, you have a recent comment widget on your blog, everysingle comment update will show on it.

Thats Tutorial blog today,see you next time

Have a nice try

Read More.... »»

Easy Way To Make Float Image Or Float Ads

Today Tutorial blog and blogger hack. We will make a float image that can be located in our blog. You can use it for advertising, Image, RSS, Link or else. You can see this example for float image at the right bottom with blue square.

It’s easy to make float image like that. Blogger  who want to make space for advertise for her/him blog just follow this simple step:

1. Go to your Layout
2. Choose Edit HTML and Click on Expand widget Template (back up your blog first)
3. Copy this code below ( you can choose the placement)

Up-Left Foat Image

<a href='http://yourlink' style='display:scroll;position: fixed; top:5px;left:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Up-Right Float image

<a href='http://yourlink' style='display:scroll;position: fixed; top:5px;right:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Bottom-Right Float Image

<a href='http://yourlink' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Bottom-Left Float Image

<a href='http://yourlink' style='display:scroll;position: fixed; bottom:5px;left:5px;' title=’change with your title’><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

   4.  Put code above <body> tag .

   5. Save your Template and done

 

Change The red code with your link and title, the orange code with your own image or banner.

 

Well now you can make a space of your blog for advertise or just put an image of your photo there. It's just a simple and interesting Tutorial blog 

Have a nice try..

Read More.... »»

How to Embedded Comment Below Post

Today tutorial blog and blogger hack. We will talk about embedded comment below the post.  it’s usually  can be done with an easy ways. Upps i say maybe two ways to embedded comment below the post.

Let’s try the first one:

1. Go to Setting and Choose Formatting
2. Choose Comments  and look at comment form placement
3. Then  choose embedded below post

Now Check your blog, is it the comment form is below post yet? If it is, now we done to do it. congratulate for your success. Now enjoy the comment below post in your blog

But, if it is fail. Now we move to the next step.

1. Go to your Layout
2. Choose Edit HTML and click on Expand Widget Template
3. Backup your blog first
4. Now find this code, especially focusing at red code

<p class='comment-footer'>

        <b:if cond='data:post.allowComments'>

        <a expr:href='data:post.addCommentUrl'            

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

</p>

5. Change these code with this code below

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>


</b:if>

6. Then save your template and it’s done

 

Well, it’s very useful if we have embedded comment below post cause visitor can easy to give a  comment .

Have a nice try 

 

Technorati Tags: Tutorial BLog,Blogger Hack

Read More.... »»

Put Digg Button Please !!!

Digg.com is a social networking site where we can find content from another site/blog and we can also share with another person. The site that appears in digg homepage is  from digg member who submit the content they like. So more people submit your content it’s likely your site/blog will jump to digg homepage and the result your will get more traffic for it. So interesting for us.

Let’s go put digg button in our blog and get the traffic. Just follow this simple steps :

1. Go to Layout then choose edit HTMl and click on Expand widget template
2. find this code  <p><data:post.body/></p>
3. Change the code above with this code below

<p>
<!– DIGG –>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

 

       4.    Save template and done

its’ easy and you will get this button at your blog

Have a try it.

 

Technorati Tags: Tutorial blog,gadget

Read More.... »»

How to Make Favicon for Your Blog

Did you use favicon besides icon standard Blogger?Favicon is found on icon our bar address at web browser. The example for blogger defauls icon  like this.

we can change it with style our own like this:

 

Let's make it with easy step

1. Make  picture/image size  32x32 with format type jpg, gif, png, or bmp
2. Then open the online favicon maker like dynamics drive or favicon generator.
3. Click on browse and add an image that will be our icon
4. Then click on Generate or create icon
5. Download icon and upload at image hosting like geocities or Photobucket.
6. After then,  You will have an image URL from image hosting eg:    http://www.geocities.com/masterblog/favicon.ico    
7. Open Template and Edit HTML , copy this code and paste above <b:skin><![CDATA[/*  script

<link href=' http://yourimageURL ' rel='shortcut icon' type='image/x-icon'/>

 

      8.    Dont forget to change the code red with your URL image/icon.

      9.    Then Save

 

Congratule, now you have a new favicon with your own style..

 

Technorati Tags: tutorial Blog,blogger Hack

Read More.... »»

How to Show Post Title Without Full Content for Label

When performing a search or a content  label (category) on our blog. it’s always display full content for example if we choose label “tutorial” it will be display all post on tutorial label with full content. How if the post in tutorial has 100 post? It will be difficult for us and for our reader to wait our blog loading to display it.

So we will make it short, from Full content display to short display with only display the title and posting date. Of course, loading page will be faster 50x  than normal when opening page label. Great yeah….

Let’s move on, simply follow this Steps:

1. Open Template, Backup your Template and click on Expand Templates widget.
2. Then See the code below
   
   

<!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:adStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2>

</b:if><b:include data='post' name='post'/>

     3.   Then look for code red above, change the code red with this code below

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <data:post.title/></a><br/><br/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/>

<b:include data='post' name='post'/> </b:if>

 

      4.  Finally save your setting.

Congratulate, now your blog will only display post tile and post date withour full content when reader click on label/category.

Thanks’ for coming

Technorati Tags: Tutotrial Blog,Blog Hack

,

Read More.... »»

Join To Technorati

Technorati is a blog directory that is quite popular. Technorati is still a favorite for blogger today. The advantage of this services in addition to the blog is will be recognize at once broad increase traffic on our blog. Technorati will works as a blog search, tag aggregator, and online boorkmark. In addition, when we register our blog to this directory, we wiil know a blog that link back to our blog.

To register technorati simply follow the easy steps below:

1. Open technorati here.
2. click on Join

 

3. Look at image above, in the member name enter your name at least 4 character

4.  Enter your Password, and check on “i agree to  technorati”

5. Click on Join

Now you have Register to technorati, we will continue with claim your blog.But not today, i will post it. So, if you don’t wanna lose it from your sight just subscribe my feeds or RSS. Thanks’

Technorati Tags: technorati,Blog Directory,Tutorial Blog

Read More.... »»

Installing Neo Template ( The Lightning Fast Template)

Welcome to The new template with lightning speed for your blog. It’s called NEO Templates.

Let’s look at this features:

1. A visitor can navigate through your blog much faster because the entire pages won’t be reloaded while vieweing every post.
2. Newer comment are shown before older ones instead of the usual oldest to newest order.
3. Rounded corners box and pleasant colors add to the visual impact.

Do you interested?just look at blog that using neo templates here.

Now, we will begin to install neo templates without losing widget from your previous templates.

Disclaimer: I will not take the responsibility for your losing widget if you not follow the instruction. if you follow these instruction it will be smooth. So, read these intructions twice before you start

Step 1: Back up your blog (its very important!!)

Step 2: Go to Template tan and click on Edit HTML, Copy all the lines after <body> tag that start with <b:widget (except the widget with id “BLog1” which is the main obody widget) and paste them all to a file (notepad, word,etc)

Step 3: Download xml file here and save the template code. Open the neo.xml and find this portion of code shown below . copy paste all your widget to the place indicated below (between </b:widget> and </b:section>). Save the file

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
</div>
</div>
</b:includable>
</b:widget>
Add all your widgets here...
</b:section>
</div>

 

Step 4: in Edit HTML , browse and upload this file to blogger. When you do this, you should not get the error shown the image

if you get it, DO NOT click  on confirm and save. If you do so, you will lose those widgets permanently.

Step 5: Now if you go to the page element. you will see 3 colomn as shown below . Leftmost colomn has the label widget and the second colomn has the posts Widget at the top. These two widget come with neo by default. Though they  are better placed at the top, you could move them  wherever you want  but NOT DELETE THEM. If you delete them, you will lose the functionality (asynchronous loading of Posts).

Step 6: Some final setting to be in place for Neo work properly. Go to Setting / site feed and if you are in basic mode switch to the advance mode and save. Go to the formatting and set it to 1 post in main page (Neo will just replace this post whenever you click on another post title. if you have many posts in main page, it will be weird if only the topmost one changes).

It’s done and congratule you have the lightning  fast blog.

Thanks to Hackosphere for this tutorial and neo templates. Great idea ..

Read More.... »»

How to Make a Link Field

Do you know about link field? Link field is a title on your post that can click on to get full post besides read more. It’s like the title of article wordpress blog. just point your mouse at the title of content, a link of the title wiil show.

Instead the reader click on “read more” in every single content on your blog, they can also direct click on the title content  if they want to read all your article.

Let’s Begin

1. Log on your blog
2. Choose Formatting and choose “show link field” setting to “yes” the then save

If you want to posting a new post, a link will show under the title like this

just fill it with your URL content/article. for example:

this content have a title “how to make a link field” . so the link for the empty box above is http://blogtutormaster.blogspot.com/2009/01/How-to-Make-a-Link-Field.html

the link must match with your content title.

Some of Templates have a link of title already

 

See ya..thanks’ for coming

Read More.... »»

How to Make Random Post

Random Post is a widget that showing  a random post from our blog. It’s will assist visitor to find another post that (maybe) have not read before.

I’ll give you an easy and quick tips for making it:

1. Choose Edit HTML
2. Back up your blog first
3. Then copy-paste this code below, put above </head>

 

&lt;script type="text/javascript"&gt;

//&lt;![CDATA[

var _yourBlogUrl = "http://blogtutormaster.blogspot.com";

function randomPost() {

var script = document.createElement("script");

script.setAttribute("type", "text/javascript");

var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";

script.setAttribute("src", theUrl);

document.documentElement.firstChild.appendChild(script);

};

function getTotalPostsCallback(json) {

var totalResults = json.feed.openSearch$totalResults.$t;

if (totalResults &gt; 0) {

getRandomPostNumber(totalResults);

}

};

function getRandomPostNumber(totalResults) {

var randomNumber = Math.floor((Math.random() * totalResults) + 1);

getRandomUrl(randomNumber);

};

function getRandomUrl(randomNumber) {

var script = document.createElement("script");

script.setAttribute("type", "text/javascript");

var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";

script.setAttribute("src", theUrl);

document.documentElement.firstChild.appendChild(script);

};

function getTheUrlCallback(json) {

var theUrl = json.feed.entry[0].link[0].href;

window.location.href = theUrl;

}

//]]&gt;

&lt;/script&gt;

 

Change the red code with your blog URL

 

4. Add a gadget, Choose HTML/Javascript Then copy this code:

 

&lt;a href="javascript:randomPost();"&gt;View Random Post&lt;/a&gt;

 

Save and See the Result. Happy Editing

Read More.... »»

How to Change “Post a Comment” With Own Style

Blogger default display usually link called “Post a Comment”  Under the Post colomn.Although the blog language is sets to indonesian language. If you want to change it with your own style like “Blogger Says”, “People Talking”, or else. Please take a look this tutorial below.

Follow thi tips#

1. Choose Edit HTML
2. Click on Expand Widget Templates
3. Now find this code below :

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b> <font color='#444'>

<img alt='Post a Comment' border='0' height='47' src='http://oom.blog.googlepages.com/comments.gif' width='61'/>

<data:postCommentMsg/> </ font> </ b> </ a>

</ p>

 

Change the red code with your own word/style

Then Save your setting.

It’s done. see ya

Read More.... »»

Follower Widget Modification

Now we will make a modification for Follower widget. I found this tutorial from o-om (thanks for it). Let's continue here

Look this image below, standar follower widget withour border.

So we will make it more neatly or easy looking with the additional border like this.

When you're in the area mode login, the link will remain on the Manage position replaces Link View All. so do not worry the changes of coding.

To add a border (margin) on the image, Choose Edit HTML, and copy-paste all the CSS code below should put the code under the code <b:skin> <! [CDATA [

/* Follower (Modified by o-om.com)

----------------------------------

*/

.follower-grid {width:150px;}

.follower {width:32px; height:32px; float:left; margin:2px;}

.follower-img {float: left; border:1px solid #222; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px;}

.follow-this {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}

.followers-canvas {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}

Now the next steps is :

Choose Edit HTML and check on Expand Widget Templates. now find this code below

<b:widget id='Followers1' locked='false' title='Your title write here' type='Followers'>

<b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>

</b:if>

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>

<b:if cond='data:followingLinkPresent'>

<div class='follow-this profile-link item-control following-follow-this'>

<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>

<data:followThisMessage/>

</a>

</div>

<div class='follow-this profile-link item-control following-stop-following-this'>

<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>

<data:stopFollowingMessage/>

</a>

</div>

</b:if>

<div class='followers-grid'>

<b:if cond='data:totalFollowerCount == 0'>

<div class='profile-link item-control following-follow-this'>

<data:emptyFollowersMessage/>

</div>

</b:if>

<!--

Relies on the js written out in navbar.gxp

-->

<b:loop values='data:followers' var='follower'>

<div class='follower'>

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>

</a>

</div>

</b:loop>

<div class='clear'/>

</div>

<div class='followers-canvas profile-link'>

<data:followersFooterMessage/>

<span class='item-control following-not-admin'>

<a expr:href='data:followersUri'>

<data:viewAllMessage/>

</a>

</span>

<span class='item-control blog-admin'>

<a expr:href='data:manageFollowersUri'>

<data:manageFollowersMessage/>

</a>

</span>

</div>

Now change the red code with this code below:

<div class='followers-grid'>

<b:if cond='data:totalFollowerCount == 0'>

<div class='profile-link item-control following-follow-this'>

<data:emptyFollowersMessage/>

</div>

</b:if>

<!--

Relies on the js written out in navbar.gxp

-->

<b:loop values='data:followers' var='follower'>

<div class='follower'>

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>

</a>

</div>

</b:loop>

<div class='clear'/>

</div>

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>

<b:if cond='data:followingLinkPresent'>

<div class='follow-this profile-link item-control following-follow-this'>

<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>

<data:followThisMessage/>

</a> -

<span class='item-control following-not-admin'>

<a expr:href='data:followersUri'>

<data:viewAllMessage/>

</a>

</span>

<span class='item-control blog-admin'>

<a expr:href='data:manageFollowersUri'>

<data:manageFollowersMessage/>

</a>

</span> - <data:followersFooterMessage/>

</div>

<div class='follow-this profile-link item-control following-stop-following-this'>

<a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'>

<data:stopFollowingMessage/>

</a>

</div>

</b:if>

Then save, now you have modifi your follower widget.

Don’t forget to follow this blog. Have a nice day

Read More.... »»

Change the Footer Blog Link

I usually check my blog and i found that in the footer of my single post are link called Newest Post-Home-Old post. i think It will be good if we can change with our style

we may want to change the default any posts Newer Post - Home - Old post with your own style or you can also change any posts with the icon. 

Just follow this simply step: 

1. Enter the Edit HTML and then check the Expand Widget Templates, find this cpde below and just change the red word with your's word

2.  for changing own style of any posts you can write directly or if you want to change the living style icon with the code  <img src = "http://your-image-url.com/example.jpg" />

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/&gt;</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/&gt;</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

it’s done,,happy editing

Read More.... »»