How To Show Social Media Sharing Button?

Actually, Blogger has default social media sharing feature, but it doesn't show sharing count. Sharing count help us as author, knowing about popular post or reader preferences.

Another way to show social media sharing button is using horizontal social button. I like this social button because not too large to put on my post. Usefull and simple enough.

How to put horizontal social button on blog?

• Go to Template, then click Edit HTML. 
• Tick mark Expand Widget Template, then find (ctrl+f) 

<div class='post-header-line-1'> if you want to put it above post, or
<div class='post-footer-line post-footer-line-1'> if you want to put it under post

• Paste these code below that code on second step

<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='float:right;padding:10px 0 10px;'>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

• Click Save button

How To Add Comment Reply/Threaded Comment On Customized Template?

Some of my old templates were created when Blogger has no comment reply or threaded comment feature. It won't show reply comment button automatically because it have been customized or tweaked. So, you need a few tweak to show this reply comment link or Blogger's threaded comment feature.

I assume that you've applied new Blogger Dashboard. Follow this step "How to add comment reply button on Blogger/Blogspot":

- Go to Template menu

- Click on Edit HTML button, then HTML frame will appear

- Tick mark on Expand Widget Template to show complete HTML code

- Find this code below

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

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

      </b:if>

- Replace the red code with these code below

   

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

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

        <b:else/>

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

      </b:if>

- Click Save Template button

How to Add Pinterest Button To Blogger Post

Yesterday, I accepted Pinterest invitation. Pinterest is the new way of socializing where you can share any interest thing you find on internet, including blog post, twitter, or facebook.

Then I want to put Pinterest button on my blog post so it easier for sharing to Pinterest board. Thanks to LetMeClear for How to Add Pinterest Button To Blogger Post tutorial.

Since, Pinning a pin by a “Pin it” button A description and original link location are added to the pinned image on the board. That gives you more chance to visit the source directly. Pin It button allows visitor to share your posts without leaving your blog.

If you're using Wordpress blog, there's many Pinterest button plugin similar with another bookmarks button plugin. If you're using Blogspot/Blogger blog, this is step to add Pin It button to your each and every blog post.

Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.

<data:post.body/>

Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before  tag.

Step#6. Hit Save and check your blog Button appears or not on your post page.

How to Convert Bitmap to Vector Graphics (for Free)

If you're a web designer, there's a good chance that you already know the difference between a bitmap image and a vector one. The former is made up of pixels and so will only appear correct at a certain resolution. The latter however can be scaled up or down as necessary to create an image of any size. In the world of web design, vector graphics can be incredibly useful - not only because they're more flexible, but also because they can be relied upon to look their best on the biggest or smallest screens. So whether you're creating a website that calls for some sharp engraving style graphics, or a simple collection of block shapes, vectored images can be hugely useful.

There are times when a web designer will be provided with graphical assets by a client before they start work on a site. In a perfect world, all of the graphics they provide will be in vectored PDF or EPS - but unfortunately this isn't always the case. A client may in fact provide you with low res JPGs and then ask you to create a high res design with them. This is next to impossible, however there is actually a technique you can use to make a useable vector graphic file from a bitmap one. You might have to sacrifice a bit of detail, but you may be surprised at the results. Best of all, it's free - all you'll need is Adobe Illustrator and a little bit of design ability (as a web designer, this shouldn't be a problem). Plus, it's completely free, unlike many of the bitmap to vector services on the web.

Step one: open your bitmap graphic in Illustrator

Go ahead and open Illustrator (you need to have at least CS2 installed, otherwise the option you need won't be available). You should place the bitmap image into Illustrator by clicking File then Place. You can use any bitmap image you like: PDF, jpeg, and so on.

Step two: perform the Live Trace

Next, click Object > Live Trace > Tracing Options. Here you can change various parameters and try to create a trace that is as true to the original as possible. The options on this screen will give you various details about the image and let you choose how you want the trace to be carried out. Once you're ready, click the Trace button to finish this step.

Step three: turn the image into a vector

Your adapted image is now ready to be converted into
a vector version. To do this, go back to the image and select Object > Live Trace > Expand. If your original image was colour, there's a chance that distortion may have occurred that makes the image unusable or less visually appealing. This is an unavoidable side effect of creating vectors this way; you're essentially creating a 'skeleton' version of an image, without the finer details. However, there is a way to use such images if you really need to, as black and white 'stencil' style objects.

Step four: create your final black and white vector image

To go monochrome and make the final image, click Object > Live Trace > Tracing Options. Here you can select Black and White to complete your vector image. Now all that's left is to save the vectored image in a suitable file type. This could be PDF or EPS. Your image can then be scaled up or down as necessary and used in all sorts of designs.

So there you have it, a quick and easy way to turn a bitmap image into a vector one in just a few minutes. Remember that this method works best for images that aren't too complex. If there are lots of different coloured elements, or too much going on in terms of detail, you may want to find another way to secure the image in vector form. Your client should always be able to provide you with high res original imaging, but if that's not possible, the above procedure will at the very least give you something workable. You never know - your client may end up preferring the version that you create in black and white!

How to Use Template on Blogger New Templates Format?

How to Use/Upload Template on Blogger New Templates Format? Yesterday, my friend ask me about it. She lil bit confuse with new Blogger format, and can't find an ordinary upload XML file button.

 Actually, I still like and use the old format. Simple and user friendly, IMHO.

Before you upload XML template file, ensure you have downloaded it. You can check my all cute template on this blog, then click on download link to get XML file.

Now I will show you the step how to upload XML file on new Blogger format.

Step 1: Login to your Blogger dashboard, and choose the blog you will edit. Click on Blog Title. For example, see on picture below, the orange color, Gadgetholic blog.

Step 2: Click on Left Menu, Template. Then, click on Backup/Restore button, on the right top window.

Step 3 : There's popup window, then click on Choose File button, and select XML file you want to upload. Now you get a new look design.

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

I have ever posted about how to put social bookmark sharer button, that's sharing is sexy button. I also have posted about how to put our social media icon to help your reader close and know more about you. A hour ago, I was looking for simple sharer button, I only need Facebook sharer, Tweet button, and the new one +1 button from Google. Fortunately, I find a easy tutorial about how to add floating social bookmark button next to post in Blogger from MyBloggerTricks. Really thanks to you, the author.

You can see this sticky widget to left of my blog, both on homepage and postpage. The installation process is so easy. Here I share how to add floating Facebook Share,Tweet, +1 Button in Blogger.

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it

<style>
/*-------MBT Floating Sharing Widget------------*/

#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;

}

#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}

.fb_share_count_top {width:52px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

 


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">


    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>

    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.mybloggertricks.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

 

4. Save your widget and drag it just below the post body as shown below

5. Finally click the save button at the top right corner and done

Any question or complete customization, you can go to author website.

Customize Favicon Blogger Feature

I have ever posted about how to create favicon on your blog. It's long time ago, when we did it manually. A litle bit hack on your blog code. For most blogger, having favicon is like blog identity. It reprensent your blog talking about.

A good news come from Blogger. Now you can add a custom favicon from the Design | Page Elements tab (or, from the Layout tab if you're using the new user interface), by clicking Edit on the new “Favicon” setting above the navbar element. This is still draft/beta testing feature so you have to access your blog from http://draft.blogger.com





A new window will then open where you can select an image from your hard drive to replace the default favicon image. This initial launch only supports .ico files, but you can easily convert your JPEG, PNG, or other non-ico image file using your own image software. There are also many conversion tools online, and a quick Google Search brings up a handful of options such as http://www.icoconverter.com/. Wish for the final version, it will be available on blogger dashboard and support all image file type.





When you save your template changes, you’ll see your newly-added favicon image displayed in your browser window or tab.





That’s it your blog favicon

How To Put Facebook,Twitter,YouTube,Flickr Icon on Blog?

As my previous post about cute facebook and twitter icon, now I will give a tutorial how to put this cute facebook and twitter icon on your blog. Usually we put icons on sidebar.

Facebook and Twitter icon linked to facebook and twitter account. It will help your reader to add your facebook account and to follow your twitter account. I will use cute facebook and twitter icon from Pigtails.com

It's simply to put social media icon on your blog. Copy this code below, then go to your dashboard. Go to Design>Page Element, add HTML gadget, and paste the code. If you're using Wordpress or Typepad blogging platform, it is the same way, copy HTML code and paste to your sidebar widget.

Dont forget to change the account link, for example , http://www.facebook.com/username , change to your own account name.

<a href="http://www.facebook.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHIfyy23tNJ1brOD49A5JuzEwrwOiejTxssBJ__nIBbtBatvWhuGz57UkI5MZxCHe_kUXG_sdX5HncWNUG6k9h-iMRcMYGQCAkIxROYb0R3AdLcF3TJ1ymxtEzqatHXYIt2FYR0wvBRNY/s400/pigtails_facebook.png"/></a>

<a href="http://www.facebook.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsbn1SPKyNAJIjSLFwWIQp1xMvzW_gJUZWWPgFGjf8ekMuQmkHOVjFJTCcCu3InKWo3MJ__kgsvIxtmZO8O7l7cPruoWDPomiZYxxDS0w77nOM5jDgyeITRnaNXRMnyTKWQ9UhEqjUZE/s1600/pigtails_facebook_64.png"/></a>

<a href="http://www.twitter.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kfGmjAVMOeyvM7RJKICgyYdhERXAuDhV6f9QKOuGs5uJptm1qLYqUPLQJEmOBMY9yuLX0DhoG6mlXnIlAQWhAo1X9g9JRM1UCYe3bnFQQbgu48UuVjcTQY37XB_1ApYNJEcKq7aYlIo/s400/pigtails_twitter.png"/></a>

<a href="http://www.twitter.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtff8dWIrAYJ8NGJ6Li_DBMX4vPpK3T6DAAu1yNFEGSN_vm6eoWzYN_qGz9pcL_Kz3l2rGnit2-EnTTs2uP7tC6iE_TKh2GOcl1cP07VenDD1ClMUSZMPLkzS90ex7TOpaPyjJs3HfHs/s400/pigtails_twitter_64.png"/></a>

<a href="http://www.flickr.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7N88Z1-Lk7ibp2s5dyWIuoBxRw8Qk4StUGmkzsmBl5bfgkjuXgnDKePEESqp_QjOulv1FaU7mobTIs_xX0uuvjYujrvg2l62FGc1yAYDiZtVJPj7sp9QUIC9tEN9byEuwiCFkFGfeTo/s400/pigtails_flickr.png"/></a>

<a href="http://www.flickr.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ZLopzQ7d2gwwuI7XKEPN3nfa1WnBddCKv8UvCF9u9HkptdHFQIxgPCOqntj8rMN-RbuX09DdGPpqUMK8rh0Z7zULWO5_-VYkXzaTYZLHZ-zDOt3pQ17GkvecsHrqdUv_-rLt2wh9spg/s400/pigtails_flickr_64.png"/></a>

<a href="http://www.youtube.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnHItia0YbMJzxDjrsmlc6NmiH4VzaCTkn89LpJrEtnV0pHiSiwUZbeSz6V7is9JnlIIXJ0LAPqijfUlfowWn4xGTgtrnQFgMSZkpl5Y0XeybG5GvKM_0D89KYFfMP5uetzgJG1Uy8MQ/s400/pigtails_youtube_64.png"/></a>

<a href="http://www.youtube.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuZuJ6xFcpa1l55cDrWmmEIv7mLdo3wwZWGfg-P0FSUKGBFcFa5PsJPMMvnID2xDnnfZVCMf3NLYclsp-2eMFW0Yx-oiF3ouYqKOE7E68gO4KM99OjhCeb8Chug17utXtk-oo14w_TGE/s400/pigtails_youtube.png"/></a>

How to Add Lilypie, Pregnancy and Baby Parenting Widget?

Looking for pregnancy, baby parenting, and birthday widget for your blog? There are so many ways to express mother's love to children. Most of them, by creating kids and parenting blog to share about baby photo, kids story, and all about children's activity.

You can create a baby and kids blog, and use suitable baby and kids template. You also can put cute baby and parenting widget on sidebar blog.

Lilypie Baby Days are free custom ticker graphics or you can mean it as blog widget that update each day to display your child's age, or how far along your pregnancy is. There are Pregnancy, Birthday, Adoption, Premature Baby, Trying to Conceive, Memorial and Breastfeeding tickers widget. Not only put it on blog, you can add the ticker widget to your forum posts, email signature, mobile phone or desktop.

How to create Lilypie tickers widget?

1. Go to Lilypie site the click Create menu.
2. Choose the widget type, for example Kids Birthday counter widget
3. Choose a scene. You can choose from many various cute graphic.
4. Choose a slider.
5. Add details. You can add your kids photos, personal text message,edit the background widget
6. To get the code, click in the code box  to select the code snippet, then right click and choose Copy to copy the code snippet to your clipboard.
7. Start using it on your blog. Go to your blog dashboard, click on Design>Page Element. Add HTML widget on sidebar, or wherever you want to place it, then paste the Lilypie copied code on it.
   

Here's the Lilypie widget tickers result

How To Fix Auto Readmore On Post Pages?

"Hi, my blog template use automatic readmore script. It cut post and show thumbnail image automatically. The problem show after Blogger launched Pages Gadget. The script also cut on Pages Post. It's not looks good. How to fix this problem?"

It could be happened to you too. You want to use an automatic thumbnail but you also want to show full post Pages. Follow this step to fix the problem.

Open Design>Edit HTML , tick mark on Expand Widget Templates. Usually there is basic automatic readmore script like this.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>

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

Insert some codes on bold type as follows

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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'> read more <data:post.title/> </a></span>

</b:if>
</b:if>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Be careful to insert the code. Ensure to put closed tag.

How To Set DNS and Nameserver Blogger Custom Domain From GoDaddy

Today, I'm transfering my domain from another registrar to Godaddy. How to transfer domain from another registrar to Godaddy? Use this link to transfer it.

I face a little problem when I have to set up DNS and Nameserver on Godaddy. Fortunately, Godaddy provide complete step How To Set DNS and Nameserver Blogger Custom Domain.

Follow these step below.

To point your Blogger blog to your domain name, you set up domain name mapping, which configures your blog settings and domain name. You update your settings in your Blogger account and our Domain Manager:

1. Park the domain name you want to use with your Blogger account on our parked nameservers.
2. Edit the www CNAME record for the domain name you want to use with your Blogger account. This update tells the Web browser to open your Blogger blog when visitors enter your domain name's URL in the browser address bar.
3. Forward your domain name to use www. This step ensures your Blogger blog displays for visitors who go to your domain name with or without the www prefix. For example, it displays for visitors who entered both www.coolexample.com and coolexample.com
4. Configure your Blogger account to use your domain name.
   

To Park Your Domain Name

1. Log in to your Account Manager.
2. In the My Products section, click Domain Manager.
3. Select the domain name you want to use with your Blogger account, and then from the Nameservers, select Set Nameservers.
4. Select I want to park my domains.
5. Click OK.
6. Click OK again.
   

To Edit Your CNAME Record

1. Log in to your Account Manager.
2. In the My Products section, click Domain Manager.
3. From the Tools menu, select DNS Manager. The DNS Dashboard displays.
4. For the domain name you want to use with your Blogger account, click Edit Zone. The Zone File Editor displays.
5. In the CNAME (Alias) section, click the www record.
6. In the Points To field, type ghs.google.com.
7. Click Save Zone File, and then click OK.
   

To Forward Your Domain Name

1. Log in to your Account Manager.
2. In the My Products section, click Domain Manager.
3. Select the domain name you want to forward to your Blogger blog.
4. From the Forward list, select Forward Domain.
5. Select http:// or https://, depending on your server settings. For more information on HTTP and HTTPS, see HTTP vs. HTTPS.
6. In the Forward to field, enter the complete URL, with the www, you want to forward your domain name to. For example, enter www.coolexample.com.
7. To automatically update your nameservers to accommodate your forwarding changes, select Update my DNS setting to support this change.
8. Click OK.
   

To Configure Your Blogger Account

1. Log in to your Blogger account.
2. From the Settings tab, select Publishing.
3. Click Custom Domain.
4. In the Buy a domain for your blog section, click Switch to advanced settings.
5. In the Your Domain field, enter your domain name. For example, enter www.coolexample.com.
6. To specify another location in which to look for files, in the Use a missing files host? section, select Yes and enter the path. If not, select No.
7. In the Word Verification field, enter the characters as they display in the image above the field.
8. Click Save Settings.
   

Any DNS changes you make can take up to 48 hours to reflect on the Internet.

Source : Godaddy Help

How To Use Custom Google Font on Customized Blogger Template?

On my previous post about More Fonts for Blogger Template, we can use this various fonts directly ONLY IF we use default template from Blogger Template Designer feature.

But most of Blogger user, use customized template so can not use this font directly. I'm sure you don't want to mess up your current blog design, but really want to change my fonts. This is step how to change fonts with Google fonts.

1. Go to Google Font Directory, choose the font you may interested in. For this example, I choose Crafty Girls Font Family.
2. Click on Use this font menu. To embed font into your web page copy the following code under every font. IMPORTANT NOTE : On Google font directory, the original code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'> , remember to add "/" character before closed tag, so the result code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'/>
3. Open Dashboard > Design > Edit HTML, then paste copied modified code put before <b:skin><![CDATA[/* on EDIT HTML template menu.
4. Simply use the font in your CSS font stack like any other font, for example, if you want to use it on Post Title, find h3 css code then insert the font family. For example : .post h3 { 'Crafty Girls', Arial, Verdana;} . Remember you can use this wherever you want, on sidebar title (find .h2) , on post body (find .post-body) etc
5. Click Save template button
   

How to Show Popular Post Using Blogspot Popular Post Widget/Gadget?

As a blogger or writer, of course we want visitors read our writing or posting. To facilitate the visitors looking the most popular posts, we can install popular post widget.

Long ago, Blogspot does not yet provide blogspot widget popular posts so that the user uses javascript. In this way a bit inconvenient because it requires javascript hosting.

Fortunately now been providing widgets popular bloggers post. Blogspot users simply add this widget in the sidebar and most popular postings will automatically appear.

How to install popular post widget/gadget on blog? Simply, go to Page Element, click add Gadget whenever you want. Choose Popular Gadegt and automatically displays a list of popular posts on your blog.



There's some options for this gadget :

• Choose time range All time, last 30 days, last 7 days
• Show post title and image thumbnail and also snippet or post summary

More Fonts for Blogger Template

A couple months ago, Blogger has announced some new fonts for template designer. Yes, a couple months ago it only can be accessed from Draft Blogger. Yesterday, Blogger not only launched Web Fonts to ALL Blogger users, but also announce that they have added an additional 35 fonts to the mix, for a grand total of 77 fonts!

Ready to get experience with this new fonts choice? Simply go into the Advanced tab of the Blogger Template Designer for your blog, select the type of text you’d like to change (Post Title, Blog Title, etc.) and click on any of the new Web Fonts for a preview. Don’t worry, nothing will change on your blog until you select “Apply to Blog”, and this means you can play around with all of the fonts and only make the switch when you’re ready.



If you use customized template, you can use this various font from Google fonts directory. Read the installation setting.

How to Fix Double Post Problem on My Blog?

I have received so many question about double post issue/problem. Why I get double post on my blog homepage? Why I get double post after changing template? How to fix this double post problem?

Note to all, this problem not because of template. Do you remember, when you change the template, there's an option feature from Blogger, Do you want to delete these widget? If you choose keep widget, all your blog widget keep there. This feature is usefull for keeping widget so you don't need to add it one by one.

But the problem is, when your new template has Blog1 widget, and your current blog has Blog2 widget, it will make a double post. Note that Blog1 or Blog2 is post widget, so it will appear double.

So how to fix this double post problem?

Open Edit HTML, then find this code

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

or

<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>

Just delete one of them.

How to Use Google Font API on Blog CSS?

What is Google Font API? The Google Font API helps you add web fonts to any web page. It means you dont need to install font family on your desktop computer to see custom font on any web.
Benefits of the Google Font API include:

• A choice of high quality open source fonts.
• Works in most browsers.
• Extremely easy to use.

For example, the following text uses a web font called Tangerine:


We can apply this font on web without install it on our PC, even our visitor can see it because we use font and script from Google Directory.

Yes, Google have created Google Font Directory. There we can browse this catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on our web page. The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.



Now, we can use this unique font on our website or blog. How to use Google Font API ? For reference, you can read this Quick Start example or follow this example.

Step 1
Open Layout>Edit HTML. Add a stylesheet link to request the desired web font(s). Copy these code and paste after <head> code

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Note : Change Font name as your desire or you can pick this code from Google Font Directory. For exampale if you want to use Yanone Kaffeesatz font, go to Google font directory, click on font type, then click on Get Code.

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css"/>

Step 2
Insert CSS code
font-family: 'Yanone Kaffeesatz', arial, serif;

You can insert it wherever you want. For example you want use that font for Post title, so insert it after
.post h3 {

or you want to use it as global font so insert it after
body{

etc.

I try to use custom font for my post title as you can see it. I think this is a great idea especially for everyone who concern on blog design and appearance. Thanks Google.

How to Create Floating Twitter Follow Image?

I have ever posted about how to put twitter follow icon on blog. This is simple way because we don't need to host image and edit any CSS code. Wanna try another way to put Twitter icon on your blog?

We can put Twitter icon as floating image with fixed position, so it will attract your visitor to click it. You can check demo on Emocutez , and see on right bottom position, there's floating Twitter icon.

How to? Follow this step below
1. Go to Layout > Edit HTML
2. Copy these code

#floatingimage {
bottom:10px;
right:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}

3. Paste before

]]></b:skin>

4. Copy these code

<div id='floatingimage'>
<a href='http://twitter.com/emocutez'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGD9OBFJfRzFL9tbZWrb4_4vIkd-igEuM6DwTOaVNhfTbAqqZmDuSKcImUDgWyoaCFZpGDSaWpv0Y9jVnLngu87qMXNgjFKkisBxu1OO_TfcDYxmcnEUcjCAfvSuNh5_jR0Q5YpemFnHA/s1600/follow+us.png'/></a></div>

5. Paste before

</body>

6. Save

Note : change the red text to your Twitter username

How to Fix Newer Older Post Navigation?

Yesterday, Im shocked by hidden older and newer post navigation. Actually I dont know why it's happened because my template (also on this blog) display properly since I create it.

Why my newer and older post navigation is hidden or display unproperly? How to solve this? I have tried to edit CSS code. Fortunately, it works.

Follow this step.
1. Open edit HTML
2. Check this section code
#blog-pager {
text-align: center;
}
3. Insert clear:both; code so the code will be look like this
#blog-pager {
text-align: center;
clear:both;
}
4. Save

Hope this work on your template too.

Guaranteed VCP-310 exam preparation at your ease now! Download HP0-Y25 dumps to practice and pass 000-378 exam on first attempt.

Blogger Feature : Keep Widget when Change Template

Last year I have ever posted about How to change blogger template without deleting widget?. Blogger didn't provide yet feature to keep widget so the most annoying problem when changing blogger template is deleted widget.

But now, Blogger.com has made so many improvement and the good news is Blogger added new feature to keep widget when changing template. So do not ever worry about all disappeared widget.

How to? Just upload new xml file as usual through Edit HTML. And there will be notification do you want to keep or delete widget. Choose keep widget.

How to Set New Blogger Feature : Static Page

Finally Blogger / Blogspot announced the static page feature. But this new feature under development, can be accessed through http://draft.blogger.com

I've tried on my personal blog, when we publish the page, it will appear automatically as the navigation menu. Formerly navigation menu tricked his way into the URL link to a blog posting or our other, now we can fill in directly on the static content page. Suppose you want to write about the About Me, could direct the static page, without making a posting and picking the URL.

How do I set static page feature on Blogger / Blogspot?

Login to http://draft.blogger.com, use our login as usual. Then click Posting> Edit Pages, then click the New Page



Form will appear and then type the contents of the New Page. Suppose we make a Page "About Me", just type in these forms. After clicking Publish. Placement options will appear, in the Navigation Menu, on the Sidebar, or will we put the manual. To edit the order, click Layout, then click the Pages Widget.



From there we can edit its link structure.

Maybe you will find the bug or error on customized template. When publish new page, choose the third option. You can place it manually by adding pages gadget, as usual. Another problem, if your blog use automatic readmore, you should remove it to make this feature working properly.

Source: Bloggerindraft