How to Remove Image Borders in the Blogger Template

Category : Blogspot

Blog is one of the famous things in this world. It is because blog is one of the media from internet that gives many advantages. You can show your talent in writing. It is because blog is a place for you who has hobby in writing. However, sometimes there are some things that are really disturbing your blogs such as image borders. Many people do not know how to remove image borders in the Blogger Template. However, now, you do not need to worry if you want to remove it. It is because there are some ways that help you to remove it.

First way to remove image borders in the Blogger Template is by using Template Designer.

1. You can reach Template Designer by starting on the Blogger Dashboard. please open the Blogger Dashboard, and then you can go to Design that has Template Designer therein.

2. After you find Template Designer in the Design folder, then you can select Advanced. Next, you can select Images.

3. There are so many things that can be changed. For example if you want to change the color, then you can change it by clicking Under Border Color. After that, you can change the Setting by checking the small bow that exists on the bottom right hand side. There is written transparent. Then, don’t forget to click apply in order that the changes that we have done can be saved by the computer.

Another way to remove image borders in the Blogger Template.

1. Here, you will use New Default Blogger Templates. You have to still start from the Blogger Dashboard. Then, you have to select design and go to Edit HTML.

2. After that, you need to back up your Blogger templates.

3. And then please find this code at the top of your template

<Variable name=”image.border.color” description=”Border Color” type=”color” default=”transparent” value=”#cccccc“/>

4. After it, you can change to the value of the border color to transparent like so

<Variable name=”image.border.color” description=”Border Color” type=”color” default=”transparent” value=”transparent“/>

 5. After you do that, then don’t forget to save the changes in order that you can apply you’re the new image border or the blog without image border.

I have written article about how to remove or delete the border around images in Blogger posts for the newest generation of default Blogger templates, if you have any question you can ask me via comment box, Thanks!

Tag:

How to Create Categories in Blogger

Category : Blogspot

Internet is one of the media that is needed by many people. It is because you can do many things through internet. You can promote your products or services; publish your works, and many things. One of activity that you can do on the internet is blogging. It is easy to create blog. You can choose the domain first. After that, you can create categories in Blogger. It has a function to manage some blogs in the same categories in order that people who visit your blog can be easy to read all of your articles on your blog. If there is some categorizations, then people will be very easy to find out the article that they are looking for.

The first thing that you have to do in creating categories is that you have to select on the article that will be categorized. After you select some of them, you are in the combo box. It is place of label action. Select it and then select new label for giving name of you categories. Then, your selected blogs will go into the categorization label that has been made. You can create categories in Blogger again to categorized another blogs in order that you can manage your blogs

If you want to change the old label of the categorizations become new label, then you can change it and create the new one. It is very easy. You can go to template and click it. After that, you will see page elements. Therein, you can add page elements and select label. Here, you can manage your categorization depends on your ideas. You can make it very interesting in order to invite some people to see your blog. So, you can create categories in Blogger. Enjoy it and make your blogs more interesting.

Tag:

How to Delete a Blogger Blogspot Blog

Category : Blogspot

Blog is one of media that can be used for actualizing people. it is because by blogging you can show your creativity in words and several pictures and images. it can be shown to the whole world. besides that you can share your information or you only share your story in in some blogs in one Blogspot. However, some people feel happy and upset when they know that their Blogspot have had so many blogs. So, it has to be deleted in order that it is not full. Now, you do not have to worry about that. It is because there are some ways to delete a Blogger Blogspot Blog.

First of all you have to login in the right user in BLOGGER.COM. After that, you can select your blog. It is valid for you who have several blogs. For you who still have blog in the small amounts. Then it is not very useful to delete a Blogger Blogspot Blog. It is because your blog will be empty if you often to delete some of them. After selecting a blog, then you can go to Edit Posts. Next, you can select Settings on the Edit Posts. Then, you can select Layout and Monetize after doing the previous. After you are in the Monetize, you have to select Setting.

When you are in the Setting of Monetize, then you can choose Backup or Delete. The Backup exists if you need to save the interesting and amazing blogs. You can read it again sometimes if you select Backup. Besides that, if you think it is unnecessary blogs or old blogs, than you can just delete it. it is very easy to delete a Blogger Blogspot Blog. Those ways can be used for managing your blogs in order that it is full and not messy.

Add PayPal Donate Button to Blogger

Category : Blogspot

As matter of fact, there are some readers of your blog who want to say thank you by giving you a donation. Although some readers cannot afford to give you as much as you expect, the sum of money given can buy you a cup of coffee to start the day. If you want to make the option available, consider adding a PayPal donate button to your Blogspot blog. Somehow, the donation button encourages good people who see your pages to give you some amount of money. It is one of the good ways to deliver their gratitude to you.

This article is only one of a series that discuss plenty of tips and tricks concerning blogging activities. Especially for this article, there will be some explanations about creating a PayPal donate button to the Blogger sidebar or alternatively to the footer of your Blogger template. This article suggests you to use a widget in order to avoid messing up the Blogger template. However, there is also an option to put the PayPal donate button to the Blogger posts as well. Keep on reading to understand the procedures on the options. Either way, the skill level is considered as easy so beginners can also try.

Add a PayPal Donate Button to Blogger (Sidebar or Footer Gadget)

The steps provided below are made as systematic as possible to avoid confusion. There will be 24 steps to follow in order. Here they are:

  1. Make sure you have a PayPal account. If you have not have one, get the account
  2. Login to your PayPal account and save your button
  3. Click on the Merchant Services tab and customize the checkout page to allow donors to give comments
  4. On the right sidebar of PayPal Website Payments Standard Option, there is a list of key features including Donations. Choose this option
  5. Choose Donation from the PayPal Create a Payment Button screen
  6. Leave the button un-customized (for beginners), unless you want to change it
  7. Choose currency
  8. Chose Donors Enter Their Own Contribution Amount unless you want to set the minimum
  9. Ensure the Secure Merchant ID radio button is selected to avoid spammers
  10. Select the No radio button for Customer’s Shipping Address
  11. Select the Create Button
  12. Once PayPal creates the donate button code, copy it
  13. Logout PayPal
  14. Login Blogger
  15. Go to Design > Page Elements
  16. Click on the Add a Gadget link in the sidebar
  17. Choose HTML/Javascript widget from the list provided
  18. Paste the button code into the Content box that shows up
  19. Write a title or leave it blank
  20. Click Save
  21. Drag and drop the donation gadget into the desired spot
  22. Click Save
  23. Click View Blog to see the button
  24. Click on the donate button and you will be taken to the PayPal Checkout screen

Add a Paypal Donate Button to Individual Blogger Posts

  1. Follow step 1 to step 14 as above
  2. Go to the post where you want to display the button
  3. Insert the button code and change all instances of double quotes to single quotes
  4. Save post and publish as normal (editing HTML may necessary)

Add a PayPal Donate Button to Blogger Posts

  1. Follow step 1 to step 14 as above
  2. Go to Setting > Formatting
  3. Paste the PayPal Donate Button code into the Post Template box
  4. Save changes
  5. Click on New Post to see that the code will be automatically inserted. (you will need to be in Edit Html mode to see the code)

This Blogger tutorial has walked you through the steps needed to add a PayPal donate button to your Blogger blog. The article has covered adding the button as a sidebar or footer gadget or alternatively added to Blogger posts.

Tag:

Add Affiliate Banner to Blogger Sidebar

Category : Blogspot

It is a fact that people create blogs with different purposes from sharing information, advertisements, business, and many others. One of the most common purposes is to make money from their blogs. Inserting affiliate banners is a given feature and an example of a good appearance customization for the pages. Since affiliate banners are the ones to deliver money, Bloggers are willingly to learn the tricks and tips to create them.

This article is the first of a series that will discuss plenty of tips and tricks to customize and make the most benefits of blog pages. Even if the readers are new bloggers, the information are designed to be understandable by everyone. Each of the procedures is given comprehensively in order to avoid misinterpretation and mistake during the process. This time, the discussion will be about creating affiliate banners to Blogspot blog.

How to Add an Affiliate Banner to the Sidebar of Your Blog

It is very easy to create or add an affiliate banner to the sidebar of the blog. The following steps will guide you through the entire processes. The steps are very easy that even those with little knowledge and technical ability about blogging can understand instantly.

  1. First of all, you will need to sign up with an affiliate marketing program such as Commission Junction and select the merchant
  2. Consider the size of the merchant banner. Please consider a suitable yet comfortable size. You will want to make a banner that fits perfectly to the sidebar yet maintains the visibility aspect. Therefore, it should be big and clear enough. However, the spaces left on the page result in a difficulty to create a banner. A banner that is too big is not going to be displayed properly, while a banner that is too small is not visible enough. Typical sizes you can choose are including:

  • small rectangular banners 125×90 or 125×125
  • square banners 200×200 (if space allows)
  • short vertical banners 120×200
  • long column style skyscraper banners 120×600 or 160×600

  1. Choose your banner and you will see the merchant code to display the banner. Copy the complete code to the clipboard of your computer
  2. Navigate to a new window login to Blogger and go to Design > Page Elements
  3. Click on Add a Gadget in the sidebar. If you use a customized template, there may be two sidebars to choose. Please make your choice where the affiliate banner should be displayed
  4. Another option on Add a Gadget is adding HTML/Javascript widget. Select this option
  5. Place your cursor inside the box and paste the merchant code you have copied before
  6. On the content box, there is place to add a title. You can write anything like Sponsored Ad or even leave it blank if you want to
  7. Click on Save
  8. The next step is using the drag and drop feature to bring the new HTML/Javascript widget to the sidebar. Choose the desired position as you want
  9. Save the new layout
  10. Click on View Blog to see your new banner ad in action.

Troubleshooting

  1. The banner does not show up

When it comes to this matter, the most possible cause is the problems with the merchant code. You should select the entire code and paste it to the content box. If you do not think that the code is wrong, please repeat the entire procedures in order

  1. Only Placeholder displayed

If you only see the placeholder instead of the ad banner, perhaps the website is offline. There is also a possibility that the code is not correctly inserted to the content box.

You have learned to put an affiliate banner to the blog. The steps are provided as comprehensive as possible. There are twelve sequences should be followed in order for making everything easier.

Tag:

How to Align and Justify Blogger Posts

Category : Blogspot

Although blogging has been widely known since ever, many features on the pages are still unknown. Bloggers often ask questions about how to customize the appearance of many features inside their Blogger templates (Blogspot templates). There are many custom Blogger templates available to download to change or enhance the appearance of the pages instantly. However, simple CSS styling tricks and tips can also bring good customization to some features on the blog. A little learning of CSS can enrich your skills and beautify the appearance of the blogs. Therefore, before you decide to download the ready-to-use templates, it is good to try customizing the existing ones.

The tutorial provided below is only a part of a series of articles discussing about tricks to customize Blogger templates using CSS styling. The explanations are provided as comprehensive as possible allowing beginners and newbie to understand the simple steps. Keep on reading to know some good and easy procedures to enhance the appearance of your Blogger templates.

Justifying Blogger Posts (Blogspot Posts) Using CSS

The default settings only allow you to choose one from two text alignments, which are left and right. Either way, your texts will be aligned to one side while the other side is ragged. Actually, it is easy to change this to justified alignment. CSS styling section of the Blogger template brings the options to add another line to the text. It is the secret to create justified alignment to the Blogger templates.

There is also another way to change this alignment setting. As shown in MS word and many other word processing programs, justified alignment means that the text will be stretched from the center. Therefore, each of the edges of the text (left and right) will be in a straight line from up to bottom. Such appearance is common in newspapers and magazines. Although it sounds like a real simple feature and option, you can see that there will be huge differences in the overall designs of the page. Smart Bloggers aware of this feature and most of them choose to make a justified alignment for better Blogspot posts. The following explanations will list systematic procedures to create a justified alignment to the Blogspot templates.

  1. Before you begin any customization, please make sure that the text is not already in justified alignment. The following procedures can only be done if the text is left aligned. If it is already in justified alignment, you will not need to follow the next steps
  2. Make sure you are logged in
  3. From the Dashboard, click the Layout link for your blog and choose Edit HTML
  4. In order to avoid any mistake, please back up your template by downloading it in a full
  5. Press CTRL + F to find a code block beginning with .post in the CSS styling section of Blogger template. Most code blocks are made in typical format. Although there is a great diversity in templates, the code blocks are mostly the same. Example:

 

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

  1. Add the following line and it will turn like this:

 

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

text-align:justify;

}

  1. Click on Save Template
  2. Click View Blog to see the alignment of all your posts has now changed to justified

Tips and Troubleshooting

If the Blogger template is already aligned in justified order, you can also change/align it left. Repeat the above procedures, find the code block and modify it. Add the following code:

text-align:left;

The new code block will be:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align:left;
}

Anytime you need to make it right-aligned, simply replaces the word ‘left’ with ‘right’.

The entire steps provided above only take approximately a minute. They are easy, simple and useful to enhance the appearance of your blog.

Tag:

How To Create Automatic Category With Only Thumbnail

Category : Blogspot

In this article, I will write tutorial about How to make automatic category with Only Thumbnail. If you want to learn about how to make automatic category with thumbnail, you are lucky because you are on the right page. If you want to do it, you have to do it while you read it.

1. First time you need to do is logging in to your blogger with your ID.

2. After you are in, you need to search Design so that you can choose and click Edit HTML in its menu.

3. Before you go on the next step, you will need to back up your template first by Download Full Template.

4. After downloading the full template, you need to find the code]]></b:skin> in your template. Copy and paste the code above ]]></b:skin>

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

5. And after that you need to find the code </head> and copy this script

<script type=’text/javascript’>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’replies’&&entry.link[k].type==’text/html’){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf(“<img”);b=s.indexOf(“src=\”",a);c=s.indexOf(“\”",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=”")){thumburl=d;}
else thumburl=”;}
document.write(‘<a href=”‘+posturl+’” title=”‘+posttitle+’”><img class=”label_thumb” src=”‘+thumburl+’”/></a>’);
if(i!=(numposts-1))
document.write(”);}
document.write(‘</div>’);}
//]]>

</script>

And save your template. If you are done with this step, you finish the first step and ready for the next.

Second Step

1. The second step of thumbnail category is started with Page Element.

2. There, you need to Add a Gadget. There will be a new window which appears and you can click on the (+) sign for HTML/Java Script. You have to copy below script and paste it on the available area. You need to give title after you change the red-printed text into your category.

<script type=’text/javascript’>var numposts = 6;</script>
<script type=”text/javascript” src=”/feeds/posts/default/-/labelname?orderby=updated&alt=json-in-script&callback=labelthumbs”></script>

You can save it as that is the second step. If you like to add more widgets, you can repeat the step 2. If you like to have your own custom, you can set it on the CSS setting to meet your characteristics.

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

To set up the number of thumbnail to show, you only need to change the value 6 into another value.

<script type=’text/javascript’>var numposts = 6;</script>

Note: Being an expert in information technology may be something difficult if you are not studying it and just think that you cannot do it. However, if you try to learn it, you will probably find it not difficult. And since technology will always be used, you will always need it. There are many ways if you like to learn it. You can learn in either autodidact or join a computer course. If you need the certificate, you can join a course. However, if you just want to understand, you can learn it autodidact.

Tag:

Add Facebook Share Button with Counter For Blogspot

Category : Blogspot

If you are able to add Facebook share button with counter, you will be able to make it easier to share blog post while checking out how many shares that the blog post has made. Facebook has added so many applications to make it more enjoyable for you to explore and find many advantages. The facebook share button is only one of those applications that you can explore through the Facebook Share Button page.

At the official page, you will be able to find various styles of share buttons and pick the one that suits your website best. They are the Facebook Share Button with Big Counter and Facebook Share Inline Button with Counter which can be added by inserting the HTML code into your website as additional gadget. To add Facebook share button with counter in your blogger site, you just need to access your layout page, click the edit HTML option and check the “Expand widget templates” box so you can insert the code above the <data:post.body/>.

There is also an option of adding the share buttons on the post pages only by using the conditional tags. Find the code below and find the most suitable option to add Facebook share button with counter for your personal blog or website.

Code for the conditional tags:

Facebook Share Button with Big Counter

    <b:if cond=’data:blog.pageType == “item”‘>

    <div style=”float: right; padding: 4px;”>

    <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>

    </div>

    </b:if>

Facebook Share Inline Button with Counter

<div style=”float: right; padding: 4px;”>
<a name=”fb_share” type=”button_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>
</div>

Tag:

How To Add Twitter Button to Blogger

Category : Blogspot

Twitter has become a part of many people lives nowadays including bloggers. So if you want to make sure that your readers are able to keep up with your latest updates though your Twitter account, make sure you add a Twitter button to blogger. Adding this button into your blog is quite easy. You can apply the button in certain place of your home page or consider the fixed floating option to make it more interesting.

For the first option, the regular one, you only need to access your design/layout page, click the page elements, and pick “add gadget”. Scroll down until you find the “HTML/JavaScript” gadget option and add the twitter button code below:

<a href=’http://twitter.com/YOURUSERNAME‘ title=’Follow me on Twitter’><img alt=’Follow me on Twitter’ src=’your twitter image URL’ /></a>

For a more creative option, you can also change the twitter image source and personalize it with your own icon.

The second method to add a Twitter button to blogger will be the Fixed Floating Twitter Icon. The method is exactly like the regular one, but you need to replace the code with the one below:

    <div style=’position: fixed; top: 45%; right: 0;’/> <a href=’http://twitter.com/YOURUSERNAME‘ title=’Follow me on Twitter’><img alt=’Follow me on Twitter’ src=’http://lh3.ggpht.com/_dzq0x75P67s/S6HVKZGE4mI/AAAAAAAABdg/6B4dj8YcO0Y/s800/follow-on-twitter.png’ /></a></div>

You can also change the position of the floating button by changing the properties as you like. To placing floating fixed type twitter button in Blogspot, you can do some step

1. Login to your account and then go to Design

2. And then you choose Edit HTML. The script code will be placed before </body>.

You can replacing  the position of the button twitter icon by replacing the some properties like top and right to any position, or you can replace the placement values that you want. For example: you want change it to top: 48%; and left: 0; this code will make your twitter button display at left position.

Good luck to add a Twitter button to blogger.

Tag:

How to Add Facebook Like Button to Blogger – Blogspot

Category : Blogspot

Liking an article with a thumb up is the easiest way to appreciate the content without you need to be bothered with proper comment to post. This is why, this feature is potentially able to improve your blog quality by enabling the reader to choose their favorite way to appreciate your article; by commenting below the post or simply just clicking on the thumb button. If you think it is a brilliant idea, you just need to learn on how to add facebook like button to blogger and enjoy the result.

First thing you need to do is find a code to be installed into your blog. The code for facebook like button can be copied below:

STANDAR FACEBOOK LIKE BUTTON

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

    <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:35px;’/>

    </b:if>

Or you can also consider the one with extra Box Count below:

FACEBOOK LIKE BUTTON WITH BOX COUNT

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

    <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:55px; height:65px;’/>

    </b:if>

For those who would rather Facebook Like Button with Button Count, here is the code:

FACEBOOK LIKE BUTTON WITH BUTTON COUNT

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

    <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:100px; height:21px;’/>

    </b:if>

Once you have made your choice, you can then go on the method of on how to add facebook like button to blogger by accessing your layout page in blogger. Find the Edit HTML option and check “Expand Widget Templates”. Next, find <data:post.body/> and add the code you have copied at the available box. Now you are done with the method on how to add facebook like button to blogger which considerably quite practical and very advantageous that you shouldn’t miss.

Note: You can modify the font of facebook like button, for the example you can change the font with this example code:

font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana

You can replace the color of your facebook like button by replacing “colorscheme=light” to “colorscheme=dark”, you can also replace the width and height too. You can also replace the “Like” word to “Recommended”, you can do it by replacing “action=like” to “action= recommend”. If you want display your facebook Like button in right-top-corner,  you can add this code  before <data:post.body/>:
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=”padding:4px; float: right;“>
<iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:100px; height:21px;‘/>
</div>
</b:if>
Tag:
32