2009 ~ Bloggers Corner

How to Add Social Bookmark Buttons

4:18 AM Emely 9 comments

Adding social bookmark buttons every after your post give higher chances to increase visitors to your blog. Here's how you gonna add those buttons below your post:1. Log in to Blogger.2. Go to Dashboard> Click Lay out3. Click Edit HTML4. Check mark the box "Expand Widget Templates"5. Find the <head> of your template.6. Just add the following code next to the above code:<script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>7. Now it looks like this:<head><script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>8. Next, find the following code:<p class='post-footer-line post-footer-line-3'>9. Add these code:<style type='text/css'>.bookmark img { border: 0;padding:0px; }.bookmark...

How to Make a Horizontal Menu for Blogger

3:10 AM Emely 1 comment

Creating horizontal menu will give advantage to link to your other blogs or sites. Link back to one blog to other has advantage.Here's a simple steps to add your horizontal menu:1. Log in to Blogger.2. Go to Dashboard, click Layout> Edit HTML.3. Check the "Expand Widget Templates" box.4. Find the code: /*Header*/.5. Add this code below /*Header*/.#menu ul li{font-size:100%;list-style-type: none;display:inline;padding:0px;margin:10px;border:0px solid;}#menu li a{color:#dfffed;}#menu li a:visited {color: #57E964;}#menu li a:hover {color: #F88017;background: #ffff66;}6. Find b:section class='header' id='header' maxwidgets='1' showaddelement='no'7. Change to b:section class='header' id='header' maxwidgets='4' showaddelement='yes'8. Click Save Template.Next, we have to add some...

How to Create Expandable "Read More" on Blog

8:09 AM Emely No comments

Creating expandable "read more" on blog has advantage over longer post. This can save space and let readers only read the initial content about the post and if the content interest them, they only click the "read more" in order to read the entire content of the post.Here's the very easy steps to create the tweak:1. Log in to Blogger account.2. Go to Dashboard and click Layout.3. Click Edit HTML4. Check mark the "Expand Widget Templates"6. Press CTRL+F and find the code below:<p><data:post.body/></p>7. Replace the above code with the following code:<b:if cond='data:blog.pageType == "item"'><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style><p><data:post.body/><a...

How Pictures on Blog Optimize your Search Engine?

10:47 PM Emely 3 comments

Web crawlers and search engines cannot determine the actual image we posted on our blog or site. The pictures can be recognize through the code. Thus, if you want that the image or picture you post in your blog can help increase visibility and traffic, you need to do simple tweaks.I will explain how we gonna do the simple steps:When you upload the image to blogger, the title of the image is not actually included in the code. I try to emphasize the ALTERNATIVE TEXT "alt" and the image title. Once you uploaded the image, try to view the HTML code. Switch from "compose" mode to "Edit HTML".Sample:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd761W81MLAzP1UO9qMGtbs_2q5hmI87PgXkdUc5FxO-4lUnB-LwuoHP-UbBM72IZXEYXqEOd8N1hVv-4IWE9bO2CTduRouvfdi28KOG6AQ9hT4_9d7OZUQ8b34OGmacdgDgOe2nnEbJM/s1600-h/lion_king_ver1.jpg"><img...

How to Remove Borders on Pictures on Your Blog

9:27 AM Emely 1 comment

Once you insert pictures on your blog, you will notice the border line around the picture. If you want to remove this eye catching thin line as to give attraction to the blog, you have to delete some HTML codes.Here's how we gonna do the tweak on your blog:1. Log in to your blogger account2. Click Layout>Edit HTML and check the box "expand widget templates".3. Find the following code:.post img { padding:4px; border:1px solid $bordercolor; }4. Delete the code colored in red.5. It's done. Click save.But if you don't want to delete the border but rather change to something colorful lines, you only need to add some HTML color codes..post img { padding:4px; border:1px solid FF9900; }You can change anytime the color of your border and its border thickness and...

How to Add META TAG to Blog or Site

8:36 AM Emely No comments

Adding META TAG to blogs or web pages will determine its ownership or authenticity. When you submit sitemaps to search engines like yahoo, google, MSN or other SEO, adding META TAG is required for authentication purpose.The following are the steps for adding META TAG to blog or website:1. Log in to Blogger2. Click Lay-out>Edit HTML3. Click the box expand widget.4. Look for the code <head> and insert the META TAG right next to the code. NOTE: Do not delete the meta tag after the authentication.5. On your SEO, click authentication button to validate ownership on your blog or si...

Submit Blog to Index to Yahoo

7:58 AM Emely No comments

One way to increase traffic and visitors to your site or blog is to submit a sitemap to index to yahoo. Submitting blogs to search engines like yahoo helps exposure of the site. Higher tendency for web browser to land on your blog. Here's how you submit your site to yahoo:First: Go to Yahoo Site ExplorerSecond: Click Log In (NOTE: Make sure that you have yahoo account. Otherwise make one for you to log in.)Third: Once Log in, type your blog URL or Site URL on the box provided (Before the button ADD MY SITE)Fourth: After adding your site, you need to verify ownership or authenticate your blog.Fifth: Add the META TAG to your site or blog and after adding the tag, click "ready to authenticat...

How to Make a 2 Column Header

2:49 AM Emely No comments

Below is a short tutorial on how you make your blog header into 2 columns. We notice that some bloggers are able to add page element beside the header. It is possible by splitting your header into two columns.First, click Layout>Edit HTML. Check the box Expand Widget.Find the code below:/* Header===================================*/#header-wrapper {width:900px;margin:0 auto 0px;background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;height:190px;}#header-inner {width:900px;background-position: center;margin-$startSide: auto;margin-$endSide: auto;}#header {margin: 0px;text-align: left;color:$pagetitlecolor;}Second, replace the above code with the code below:/* Header===================================*/#header-wrapper {width:900px;margin:0 auto...

Title Tags Modification on your Blog

7:52 PM Emely No comments

By default on blogger, the display would be BLOG TITLE + POST TITLE. What we are trying to do is to interchange the two, POST TITLE first then followed by the BLOG TITLE in order to increase traffic.For customize templates, we need to change the tag <data:blog.pageTitle/> to <data:blog.pageName/> so that the changes will take effect.Step 1:Go to Lay out then click edit HTML in your dashboard.Step 2:Search the tag <data:blog.pageTitle/>Step 3:Replace it with the following code:<b:if cond='data:blog.pageType == "index"'><title><data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if>Click save template.It's Done. Cheers! It will improve your Traff...

Hide your Blogger Navbar

7:03 PM Emely No comments

Some bloggers ask on how to delete the navbar on blogger. If fact, it can be done but the downside is it might violet the TOS of blogger. To be safe, it might be best to only hide the navbar rather to delete. Here's a very easy steps:Step 1:Login to BloggerStep 2:Go to Lay-out then click edit HTML.Step 3:Back-up your template. Click "donwload full template". (Very Important)Step 4:Find the code below. Just focus on the body {. body {background: #8F8E8E;width: 100%;color: #000000;font-size: 12px;font-family: Arial, Tahoma, Verdana;margin: 0px auto 0px;padding: 0px;}Step 5:Copy the following code above the body {. #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}Click save template. View your blog...

How to make a 3 Column Footer

6:13 PM Emely No comments

Making your blog footer into 3 columns is very easy in just few minutes. Maybe you wonder how bloggers made such tweak to their blogs. Here's the simple steps to follow:Step 1:If you have already added widgets on your footer, temporarily transfer it to the sidebar.Step 2:Go to Edit HTML. Check the box "expand widget templates". Press CTRL+F and search the code below: <div id=’footer-wrap’><b:section class=’footer’ id=’footer’/></div>Step 3:Replace the above code with the following: <div id=’footer-wrapper-container’><div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’> <b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/> </div> <div id=’footer2′ style=’width: 32%; float: left; margin:0;...

How to add HTML codes to Blog Post?

11:48 PM Emely 1 comment

Here's a short discussion on how HTML codes will appear on your blog post. As you notice that if you directly write HTML codes on your blog post, it will not appear on your post.You need to replace some special characters. Here's how we gonna do some tweak:< replace with < > replace with >& replace with &" replace with "space replace with  Another important thing you should not forget is to add <pre><p> from the beginning of codes in order to determine that you are writing an HTML code. Add also </p></pre> at the end of your HTML codes.In order to move to the next line add <br/> before each line of the codes. And lastly, you make sure to select EDIT HTML mode and not COMPOSE MODE.Still Confuse? To...

Adsense Section Targeting for Bloggers

10:51 PM Emely 1 comment

The purpose of adsense section targeting is to suggest sections of your text and HTML content that you'd like Adsense to emphasize what matching ads to your site's content. It will direct to the relevant ads to be displayed on your website or blog.You need to add a set of special HTML comment tags to your code in order to take effect. These tags will mark the beginning and end of whichever section you'd like to emphasize or de-emphasize for ad targeting.You need to insert the code before and after post titles and post content to get relevant ads. See sample below and take note the inserted code mark in red:ADD THE CODE TO POST TITLE<b:includable id='post' var='post'><div class='post uncustomized-post-template'><a expr:name='data:post.id'/><b:if cond='data:post.title'><h3...