How To Add Textarea HTML Code In Blogger

On the previous post we had learned so many things about blog tutorial, hope you can definitely get many benefit. By the way, at the time you are visiting any blog tutorial, you will notice some of them may use the box which called “Textarea”. It is very useful to place any HTML code like a script inside the box. The benefit is of course you can save space as many as possible. Moreover, do you know that if you are putting so many codes or have a long sentence, sometimes it will take much space so that the article looks very long. This way is not good for your article beside that people may lazy to read because too long. That is why I would like to help you in order to make it simple and efficient. By using textarea around your post area, you will be able to save space as many as possible. Basically, textarea is used by webmaster to put some HTML code and it will look more professional.

Ok, let start now by following my instruction below:

1. Firstly, Log in to your blogger Account
2. Choose New Post
3. By the time you want to insert the code just choose edit HTML, paste the code around your post 
4. Generally, there have many type of making textarea, let me show you one by one

Textarea Wrapping

<textarea cols=”20 row=”5” wrap=”hard”>

Type Your text area in here

</textarea>

<br /> <br /> Type Your text area in here<br /> <br />

Textarea No Wrapping

<textarea cols=”20 row=”5” wrap=”off”>

Type Your text area in here

</textarea>

<br /> <br /> Type Your text area in here<br /> <br />

If you want to add color as well just add the following code below

<textarea name="code" rows="2" cols="42" style="background:#A9F5A9;  color:#295F00; border:2px #295F00 dashed; line-height:1.5em;  padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>

TYPE YOUR TEXT AREA IN HERE


The red color above you can change it according to what you like. And the blue color is where you write your text or insert your HTML code. The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings such as soft, hard, off

• Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

• Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

• Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

5. Choose one of script HTML code above, Copy and Paste the code into your post (you can place the code anywhere around your post)

6. Then save it, to look a preview just view Blog. If nothing is wrong you will see the textarea appear together with script code inside the box. All are easy right, optimize your Blog now and “NEVER STOP TO LEARN” guys. See you on the next post. Good luck

How To Add Subscribe Button In Blogger

Long time ago I ever post an article relating about how to connect Facebook and twitter into your Blog. As we know that two popular social network and have a huge amount of member are both “Facebook” and “Twitter”, it means that by adding these two social network you will be able to increase your Blog significantly. Today, I would like to share another article about how to make cool subscribe button include Rss, Email subscribe, facebook and twitter. Actually, there have many thousand of site teach you to make subscribe button, creating Social network of your Blog is a must, this is definitely helping you to stay connect with people around the world. Moreover, some of you may want to create subscribe button like below:

The subscribe button above which include 4 buttons looks nice right, let me tell you an easy way to make it the same like above subscribe button. All you have to do is just follow my instruction:

1. Log in into your Blogger account

2. click Design > Edit HTML

3. Don’t forget to download your full backup template (this is very important to avoid any mistake while you are changing or adding script)
4. Now, find the code: ]]></b:skin> , use Ctrl+F to find it.
5. place the following code below just immediately BEFORE code above

ul#soc{width:200px;margin:10px 0px;list-style:none;}

ul#soc li{display:inline;}

ul#soc li a{display:block;float:left;height:

32px;background-image:url('http://3.bp.blogspot.com/

-otikS-yCcLM/Tb6JxgyjKxI/AAAAAAAAACk/_90ZpjXNZCk/s1600/

sprite.png');

text-indent:-9999px;}

ul#soc li a.facebook{width:35px;background-position:0 0;}

ul#soc li a.twitter{width:45px;background-position:-35px 0;}

ul#soc li a.rss{width:40px;background-position:-80px 0;}

ul#soc li a.email{width:30px;background-position:-120px 0;}

ul#soc li a.facebook:hover, ul#soc li a.facebook:

focus{background-position:0 -32px;}

ul#soc li a.twitter:hover, ul#soc li a.twitter:

focus{background-position:-35px -32px;}

ul#soc li a.rss:hover, ul#soc li a.rss:

focus{background-position:-80px -32px;}

ul#soc li a.email:hover, ul#soc li a.email:

focus{background-position:-120px -32px;}

]]></b:skin>

6. then save the template
7. Next is to go to dashboard and choose Design > Add a gadget >  choose HTML/javascript

8. Copy and Paste the following code below into your HTML gadget

<ul id="soc">

<li><a class="facebook" title="Be my facebook fan" href=

"http://www.facebook.com/pages/How-To-In-Blogger/

166729273361572">

Facebook</a></li>

<li><a class="twitter" title="Folow me on Twitter" href=

"http://twitter.com/howtoinblogger">Twitter</a></li>

<li><a class="rss" title="Subscribe via RSS" href=

"http://feeds.feedburner.com/howtoinblogger">rss</a></li>

<li><a class="email" title="Subscribe via Email" href=

"http://feedburner.google.com/fb/a/mailverify?uri=

howtoinblogger">

email</a></li>

</ul>

9. Now, customize subscribe link that you must to change the red color above code with your own subscribe code. Save it. If anything goes right, you will see your subscribe button on your Blog.

Ok, I hope you can do it guys and keep trying to make your Blog become more beautiful and professional. If you like it this article just subscribe and comment it. Good Luck

Add Digg Button On Blogger post

On the previous articles that i have been posted, we learn many way in how to add “retweet” and “Google buzz”. Today, another popular social bookmarking is Digg button, this will definitely help you to count how many people who like your article about. If you are surfing through any blog, many webmaster add Digg button into their post. In the official page of Digg Smart Buttons, you can find the script code. But, in this tutorial, i would like to teach you how to add Digg button within Blogger posts.

There are 3 types of buttons with counter that Digg provide like Wide, Medium and Compact.

 

Actually, I have two difference ways in how to add Digg button, it all depend on where you are gonna used it, let us begin:

1. Log in into your blogger account
2. before change something, it is better you to verify or enable post pages which means each post will have a unique URL, this is required by Digg for the individual posts to be submitted. Now, go to Dashboard, under setting > Archiving, set the “Enable post pages”, “yes” and save it.
3. Choose “Design” >  “Edit HTML” > check the box “Expand Widget templates” (important: download the template before change or add script)
4. Find the code by Ctrl+F, try to find something like below code

             <data:post.body/>

5. If you want to add Digg button appear on the top of your post, just add this script immediately BEFORE code above

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

6. If you would like the button to appear at the end of your post, just AFTER post body replace with this following code instead.

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

7. you can also add another type Digg like compact button. If you insert this code:

          <div style='float:right; margin-left:10px;'>
          <script type='text/javascript'>
          digg_url=&quot;<data:post.url/>&quot;;
          digg_skin=&quot;compact&quot;;
         </script>
         <script src='http://digg.com/tools/diggthis.js' 
         type='text/javascript'/>
        </div>

8. The position of placing Digg button can be on the “Right” or “Left” by changing the alignment that change a red color on the script.

The second way of adding Digg button by applying code below:

1. Ctrl+F, find out the code like below:

              </body>

2. Copy and paste the script below and immediately place just AFTER body code something like below

          </body>

         <script type="text/javascript">
         (function() {
         var s = document.createElement('SCRIPT'), s1 =                

         document.getElementsByTagName('SCRIPT')[0];
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'http://widgets.digg.com/buttons.js';
         s1.parentNode.insertBefore(s, s1);
         })();
         </script>

3. Find <data:post.body/> and immediately before it add the div section

         <b:if cond='data:blog.pageType == "item"'>
        <div style='float: right; padding: 4px;'>
        <a class="DiggThisButton DiggMedium"></a>
        </div>
        </b:if>

4. Change the red color with any type of Digg button like below code

          For wide

  

          <a class="DiggThisButton DiggWide"></a>

          For compact

          <a class="DiggThisButton DiggCompact"></a>

Well, enough for today tutorial, if you have any question relating about Digg button just drop me your comment or email me. Good Luck

How To Add Google Buzz Button In Blogger

Make your blog to looks more beautiful by adding social network button like Google buzz is also popular button among blog. This blog attribute is much similar with previous article about how to add retweet button and the others social network button. The benefit is the same which help you to count how many people like the article about. Refer to here as an example

Officially Google buzz has three different styles, you can choose one of them you like it such as Button + Counter, Button only, link. Moreover, you can apply only two type of Google buzz whether you want to use “on the top” or “on the side” see below screenshoot:

I will explain both adding to sidebar widget as well as add Google buzz into post body. Now, let me show you how to add Google buzz into your Blog as a widget first:

ADD GOOGLE BUZZ ON WIDGET

• Firstly, come visit http://www.google.com/buzz/stuff?hl=en

• Choose Post to Google buzz, here you can choose type, style as well as language you want to use. In the bottom line there have a script code like below

<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

• Log in into your blogger account

• Go to Design > Add gadget > Choose HTML > copy and paste script above then save it, the Google buzz button will appear on sidebar depend on where you place the widget.

ADD GOOGLE BUZZ IN POST BODY

• Second way is how to add Google buzz button on post body:

• Go to layout > Edit HTML > check “Expand widget template” box (remember always backup your template before add or change anything)

• Find this code, Ctrl+F <div class=’post-header-line-1′/> if you do not find it try to find another code <data:post.body/>

• For Button style Copy and paste this code below just BEFORE <data:post.body/>

<div style=”float:right;padding:4px;”>
<a expr:href=’&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ‘ rel=’nofolloW’ style=’text-decoration:none;’ target=’_blank’>
<img alt=’Buzz It’ src=’http://i48.tinypic.com/idyc04.png’ style=’border:0px;’/></a>
</div>

• For compact style just copy and paste code below the same BEFORE <data:post.body/>

<div style=”float:right;padding:4px;”> <script type=’text/javascript’> njuice_buzz_url = ‘<data:post.title/>’; njuice_buzz_title = ‘<data:post.url/>’; njuice_buzz_share = ‘reader’; </script> <script type=’text/javascript’ src=’http://button.njuice.com/buzz.js’/> </div>

The red color that I bold code on the script is showing, you can change where you want to place it right or left side. If nothing is wrong you can be able to see your Google buzz button appear on your Blog. I try to guide you step by step so that you can do it without any problem, but if you still difficult to make it, just drop me an email I will definitely help you guys. Good Luck

Add Retweet Button On Blogger Post

Connect to social network is the best way to share your article, so that people will know what have you wrote recently. At this time, there have a way to get to know how popular your article about by adding social network button. One of popular social network button is “Retweet”, this button has been used by webmaster to help them count how popular the article is. The more visitor tweet, the more popular the article is. Bacially, retweet button can be vary depend on what style you want to use it. Today, I would teach you how to add retweet button into your blog.

• First think first, some of styles of retweet button can be found on http://tweetmeme.com/about/retweet_button. It is easy way to do that and of course we must to add script inside HTML code. But do not worry, as long as you follow my instruction, everything is done correctly. Ok, let’s begin

• Here you can choose two style of retweet button like button or compact style something like below:

                                                                 Compact             Button 

• Now, you must Log in to your Blogger account

• Choose Design> Edit Html element>Expand widget> Press Ctrl+F > Search for code below (Note: always backup your template before add or change anything).

           <data:post.body/>

• Copy and paste code below, just immediately place code before that something like below:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>
<data:post.body/>

If you want to place button at the end of post just simple Add below codes after this <data:post.body/>

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

If you wanna use compact button code use below one, the same above way whether you want to place in the beginning or at the end of post.

<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

The red color above code that I bold one for float and margin can be changed. For example float:: right (will be displayed retweet on the right side) or float: left (will be displayed retweet on the left side). Once you have added the code above then save it. Good Luck

Create Each Of Widget Box Separately

If we are visiting one Blog or website into another one, we may notice that some of Blog appearance looks nice by creating box separately both main post and widget. Some of webmaster will do it to get more professional compare with just a normal blog. Mostly, when visitor is coming into your Blog, the first impression is how to design your Blog, this can interact visitor to stay along time to your Blog. That is why, i recommend you to apply this way in order to optimize your Blog appearance. The example like showing below screenshot:

The question is how we do that, of course we must to add CSS code inside our template. Normally, there have two parts which are sidebar widget ( All widgets that you have will be customized into box separately from another widget ) and main widget (this is where the area you usually post the article ), but don’t worry that all are easy as long as you follow some simple steps below:

1. first in first, Log in to your blogger account
2. Choose Design> Edit HTML element (important: always backup your template before add code inside)
3. Now, you must find the script like below, looks the CSS code combines to become one.

            

            sidebar widget, .main .widget { 

            border-bottom:1px dotted $bordercolor;

            margin:0 0 1.5em;padding:0 0 1.5em;

             }

4. It is better if you divide into two parts like below

.sidebar .widget{

border-bottom:1px dotted $bordercolor; 

margin:0 0 1.5em;

padding:0 0 1.5em; 

}

.main .widget {
  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;
  padding:0 0 1.5em;

}

5. After you divide, then you must add the code for background color (please refer to this site for getting color code), change red color with color code whatever you like

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}

.main .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}

6. Copy and paste above code into your template, if you use new blogger, you can add under widget code. Then “Save” it.
7. The CSS code can be changed. You can change the border, margin, padding to adjust your blog. Furthermore, you also can change background with any picture, or anything with your creativity.
8. In addition, the box on your widget can also be modified to be more bended, just add this below CSS code.

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}