How To Create Transparent Images For Blog Posts

Blogging and creating a powerful blog post is impossible without images. Images makes a blog post more interesting and easy to understand. Two things which grab interest of visitors are title and images. Other things are also important to create a powerful post like good content, colorful post and frank behavior. As images are important for a good post therefore images should be created in such a way that suits your post. For example some bloggers add effects to images. Sometimes transparent images are needed in post but most of blogger don't know how to create transparent images, so in this post I will show you how to create transparent images using online tools. So in this post you will learn two things:

(1). How to create a new transparent image for blog post.
(2). How to make an existing image transparent.

How to create a new transparent image for blog post:

Step 1: Go to http://apps.pixlr.com/editor/

Step 2: Click on create new image.

Step 3: Give a title to your image, choose a size or set a custom size of image and check the transparent option.

Now you will have a transparent background, just create your image and move to step 4.

Step 4: Use Ctrl+S to save your image.

Choose "PNG(Transparent, full quality)" as image format and click on save.

Congratulations! you are done successfully.

How to make an existing image transparent:

Step 1: Go to http://apps.pixlr.com/editor and click on create a new image, choose a size for your image and mark the transparent option.

Step 2: Open your image from computer or url.

Step 3: Use Ctrl+A to select your image and then use Ctrl+X to cut it.

Step 4: Now close the new image tab(which is opened because you have opened an image to change its background with transparent) and paste your image which you have grabbed in step 3 on the transparent background. 

Step 5: Remove all the unwanted background which you want to make transparent by using eraser tool.

After creating your image just save it as you saved the previous one and you are done! You can change the mouse cursor by choosing other cursor just above the editor.

Now if the images aren't transparent after upload then you need to make some changes in your blog template so follow below steps to make these changes.

Step 1: Go to template and click on customize.

Step 2: Click on Advanced and then on Images.

Step 3: Click on Background color and mark the transparent option as shown in below image:

Step 4: Click on Apply to blog button on the top-right corner of the page.

Congratulations! you are done successfully. You can make further customizations too like removing border of images and caption text color.

Hope you like this post and it helped you out, follow 101Helper by E-mail to get instant updates. Share this post with others.

Read More

How To Customize Blogger Static Pages With CSS

Static pages are those pages of a blog which are created as posts are created for example Contact page, About page, Sitemap Page, Advertise Page etc. Blogger static pages look like posts except if you have used CSS or Javascript to make it different then post pages. And all the static pages should be different then post pages to make them look like they are apart of posts. So in this post I will show you how to customize static pages in blogger with CSS.

Follow below mentioned steps to customize your static pages:

Step 1: Go to blogger dashboard and navigate to Pages.

Step 2: Edit your page.

Step 3: Switch to Html editor of the page.

Step 4: Now you have to add your css codes, so copy your desired code and paste it in your page's html editor:

Before copying code add the below piece of codes in the html editor in the top or bottom of the editor:

<style>

</style>


Now all you have to do is to copy code for desired functions and paste it in between:

<style>

</style>

(1). To Remove Footer:

To remove footer add the below code between <style>---------</style>

.post-footer {
  display: none;
}

(2). To Remove Blog Pager:

To remove pager from static page, copy below code and paste it between <style>---------</style>

#blog-pager {
display:none;
}

(3). To Change Background Color Of Your Static Page:

.content{
background:#eee;
}

Replace #eee with your desired color code. Use our color picker tool to get code of a color.

(4). To Customize Page Title:

To customize page title you have to add the following code:

h1.post-title.entry-title {
  border-bottom: 2px solid #93C47D;
  color: #93C47D;
  letter-spacing: 2px;
  font-family: Gruppo;
  font-size: 35px;
} 

If this code is not working use this one:

h2.post-title.entry-title {
  border-bottom: 2px solid #93C47D;
  color: #93C47D;
  letter-spacing: 2px;
  font-family: Gruppo;
  font-size: 35px;
}

To change color replace #93C47D with your desired color code. Use color picker to get code of color.

To change font replace Gruppo with font-family name.


(5). To Customize Content Container Width:

Content container means the box which contains your content. Normally the content container has a small width but if you want to have a full width use below code for it.

.post.hentry {

width:102%;

}

To increase or decrease width replace 102% with the your desired width.

(6). Hide Comments And Comment Box:

To hide comments and comment box read this post.

Step 5: Publish your page and you are done.

Hope you like this post and you found it helpful. If this post help you out please read more posts and share them with others.

Search Tags: Static pages blogger,blogger tips and tricks 101helper,blogger customization tricks css,javascript,remove footer,Static pages full width blogger,blogger remove comments from static pages,customize static pages blogger,edit static pages blogger

Read More

How To Show Ads In Blogger Feed

Do you have a feed for your blog and you have many readers, if yes then you can get benefit of it by enabling ads in your blog feed. It will help you to increase your earnings. You can add something else instead of ads also like your sitelinks, images, social profile buttons or comments. But it is good only if you have alot of blog readers. So In this post I will show you how to show ads or something else below every post in your blog feed. If you haven't set-up an RSS feed for your blog click here to set it up now.

Before we start, let me tell you that it will show all kinds of ads in live feed but in E-mails that are sent to your subscribers will contain only the ads you create on your own(promotions) or image banners(affiliate marketing). I am not sure about Google ads but banner ads are shown in E-mails, so if you are promoting on of your blog post or someone's blog through E-mails then use the following code:

<a href='Url Of Affiliate/Advertiser's site url/promotion link' rel='nofollow' ><img src='Your Image Url' /></a>

One more thing that if you are using infolinks or chitika ads, they will be shown only in live feed. But if you want to promote your referral link then its the best way to promote it though E-mails

Tip: Promote your adf.ly link or tiny links though your E-mails.

Follow below mentioned steps to show your ads in your blog feed:

Step 1: Go to blogger dashboard and navigate to Settings > Other > Site feed:

Step 2: Click on Add beside Post Feed Footer, it will open a window as shown in below image:

Step 3: Paste the code of your ad, social media buttons or something else which you want to show in your feed.

Step 4: Click on Save Settings button shown on top-right corner of the page.

Step 5: Now allow blog feed to full as shown in below image and click on save and you are done.

Hope this post was helpful to you. If you have any questions or suggestions please help me know by leaving a comment below.

Read More

How To Optimize Blogger Blog For Mobile Phones

Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site. 

Initially all blogger mobile sites have simple or default templates which allow only specific gadgets such as: 

• Header(logo)
• Footer(powered by blogger)
• Page list
• Blog(posts)
• Adsense
• Profile

So you can't get full benefit of your mobile site until you have optimized it. So in this post I will help you to optimize your blog for mobiles so that you could get benefit from your mobile visitors.

In this post you will learn following things:

• How to optimize mobile template(basics).
• How to hide all useless things in mobile site which shouldn't appear on mobile site.
• How to show essential gadgets in mobile template(Related posts, Ads, Follow/Share buttons, Search box).

So lets begin, we will start from optimizing mobile template.

Optimizing Mobile Template In Blogger:

Blogger has many mobile templates e.g simple, dynamic, picture view, Awesome inc, Water mark tec.

And all the templates have different views, all blogger templates have an awesome look but they do not give you full benefit as they don't allow ads and other custom gadgets. So you can't add related posts widget(which is essential to increase page-views). 

So you need to use custom template and optimize it. Follow below steps to switch on your custom mobile template.

Step 1: Go to template and click on the icon shown below mobile template.

Step 2: Choose the custom template and click on save.

Congratulations! you have successfully switched on custom template for your blogger mobile site.

Hiding Things In Blogger Mobile Site:

Every blog has something that should be only on desktop such as a gadget. But when a blogger mobile template is switched to custom every thing you have added in your blog template will start appearing in mobile view too. Here I have to mention that only those things appear in mobile sites also if you have added it in template, but if you have added something in layout as a new gadget, it won't appear in mobile site until you have enabled it. So here I am going to show you how to hide something in mobile view of blogger by using xml.

Step 1: Go to template and click on edit html.

Step 2: Click inside the code and search for something which you want to show only in desktop and hide it in mobile site.

OR

Add something to your template for example a gadget or a comment or a picture.

Step 3: Now just before the code which you want to hide in mobile site paste the following piece of code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

and after the code(which you want to hide in mobile site) type </b:if>

Explanation:

For example you have following code and you want to hide it in your mobile site:

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

Then according to above method your code should look like below code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>

</html> 

</b:if>

Gadgets For Blogger Mobile Site:

Blogger gadgets created by blogger or other websites aren't compatible with mobile sites so you have to use special gadgets for blogger mobile site you can find some mobile site gadgets here.

Showing Things Only In Blogger Mobile Site:

If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>

and after it just add this piece of code:

</b:if>

For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
I am fahim, you can call me FK
</b:if>

Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.

Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!

Hope you like this post. If you have any question please help me know by leaving a comment below.

Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper

Read More

Search Box For Blogger Mobile Site

Like other blogging networks blogger also has mobile view for mobile users. It loads very quickly as it is in kilo-bites so mobile users can also read blogs by wifi connections or by mobile data. Blogger provides mobile view and also templates for it, but you have to optimize it in your way to get benefit of it e.g enabling ads, enabling essential gadgets(follow button, search box, related posts etc). It will help you to get more traffic as after optimizing your blog for mobile phones, you will be able to get mobile views too instead of loosing it. The default gadgets aren't optimized for mobile view so you need to use optimized gadgets for mobile view, One of the most essential gadgets(search box) which is powered by blogger doesn't work in all mobiles, it works only in smartphones like Iphone, Android, Htc, Nokia lumia phone etc but the phones which don't have android or ios aren't optimized for the common search box so you have to optimize search box to make it work in all mobile phones whether it is smart or not. Although the default search box works in smartphones but if it is used to search something, it works very slowly and the pages take too much time to load because the page is first searched for desktop fist and then converted to mobile view. So in this post I will share a well optimized search box for blogger mobile view which will work in all mobile phones.

How to add search box in blogger mobile view:

Step 1: Go to blogger dashboard and navigate to layout:

Step 2: Click on Add a gadget > Html/javascript.

Step 3: Copy below code and paste it into Html//javascript window:

<!-- Search box for blogger mobile by 101helper.blogspot.com -->

<form id="searchbox" method="get" action="/search">

<input name="q" type="text" id="search-in" size="19" required />

<input name="m" type="hidden" value="1" />

<button type="submit"  class="_54k8 _56bs _56b_ _56bw _56bu"  id="u_0_1" data-sigil="touchable"><span class="_55sr">Go!</span></button>

</form>

<style>

form#searchbox {

  position: relative;

  left: -40px;

  right: 0px;

  margin-left: 24%;

  margin-right: 24%;

width: 85%;

}

button#u_0_1 {

  position: relative;

  width: 45px;

  height: 25px;

color:white;

background:#4491f0;

border-color:#4491f0;

}

input#search-in {

  height: 20px;

}

</style>

<!-- Search box for blogger mobile by 101helper.blogspot.com -->

Step 4: Click on save and you are almost done but it will show up in desktop so you have to hide it from desktop and show it only in mobile view, follow next step to move ahead!

Related post: How to show a widget in mobile view only in blogger?

Step 5: Edit the mobile search box gadget which you added now and search for the widget id, see below image for instance.

Related post: How to find widget id of gadgets in blogger?

Step 6: Note the widget ID and go to template > Edit Html:

Step 7: Click on Jump to widget and click on the widget ID of search box gadget which you found in step 5.

Step 8: After finding the widget type mobile='only' beside locked='false'.

Step 9: Click on save template and you are done.

If the search box still fails to appear in mobile view of your blog then go to template > Click on Customize mobile template icon > Switch default template to custom and click on save.

Open your blog by using this link http://myblog.blogspot.com/?m=1 to see your search box. This search box will work in all mobile phones and will work fast.

Hope you like this article and it was helpful to you, if you have any question please help me know by leaving a comment below.

Read More

How To Optimize Post Links In Blogger For Higher Search Results

For higher search results seo optimization is very important and for that you have to keep all things in mind like description, title and links. As description and title optimization is discussed before so in this post we will talk about link optimization only. So in this post I will tell you how to optimize your blogger blog post links for higher results and also how does it help in search results.

How It Works?

It works in a very simple way for example if you search "101helper" on Google you will find following results:

In above search results "101helper" is shown in bold style(highlighted) which we searched on Google. You can see that "101helper" is highlighted two times one in description and other in link so in this way link optimization is good for seo.

How To Optimize Post Links In Blogger: 

Follow below steps to optimize your blog post's links for seo. You have to follow it whenever you are going to publish a post:

Step 1: Go to blogger dashboard > Posts > New post.

Step 2: write title of your post and click on save:

Step 3: Click on Permalink on right side of the editor below Schedule:

Step 4: Switch to Custom Permalink from Automatic Permalink.

Step 5: Type keywords of your post which are searched on Google more frequently and click on Done.

Note: Use a hyphen(-) after each keyword you write. For example if your link is http://myblog.blogspot.com/2015/05/this-is-my-link and you want to optimize it by adding some keywords to it then you have to type a hyphen after each word e.g http://myblog.blogspot.com/2015/05/this-is-my-link-fully-optimized. 

If you use dots(.) or blank space blogger won't accept it.

http://myblog.blogspot.com/2015/05/this-is-my-link-fully-optimized ✔

http://myblog.blogspot.com/2015/05/this is my link and its not optimized ✖

http://myblog.blogspot.com/2015/05/this.is.my.link.and.its.not.optimized ✖

Step 6: Publish your post and you are done.

Don't try to use underscores(_) in your links its not good for seo. 

Hope you like this post and it was helpful to you. Follow and subscribe to get more seo tutorials in your inbox. Share this post with others and visit 101Helper again for new posts.

Read More

How To Show Ads Below/Above Post Footer And Header In Blogger

Making money through a blog is not easy if you don't know tricks to get more clicks on your ads. Its a common problem with everyone that they get enough views but ad click rate is very low, some reasons for this are low traffic, wrong position of ads or use of text ads only etc. Position of ads has major effect on clicks rate so to get more clicks on your ads you have to show your ads in such positions which are clear to users e.g below post header, in sidebar and above footer. Since blogger has no option to show ads below post titles and above footer so you have to do it manually. In this post I will show you how to show your ads below post titles and above footer.

How To Show Ads Below Post Titles In Blogger:

Follow below steps to show your ads below post titles:

Step 1: Go to Blogger Dashboard > Template > Search for <div class='post-header'> by using Ctrl+F.

Note: Search <div class='post-header'> two times.

Step 2: Copy below code and paste it below the above code which you have searched:

<b:if cond='data:blog.pageType == "item"'>Your ad code</b:if>

Note: Remember to add the code below the second one.

Step 3: Replace "Your ad code" with your ad code.

Step 4: Click on save template and you are done.

How To Show Ads Above Post Footer In Blogger:

Follow below steps to show your ads above post footer:

Step 1: Navigate to Blogger Dashboard > Template > Search <div class='post-footer'> by using Ctrl+F.

Note: Search <div class='post-footer'> two times.

Step 2: Copy below code and paste it above <div class='post-footer'>:

<b:if cond='data:blog.pageType == "item"'>Your ad code</b:if>

Note: Remember to add the code below the second one.

Step 3: Replace "Your ad code" with your ad code.

Step 4: Click on save template and you are done.

Hope you like this post and you founf it helpful. Follow and subscribe to get instant updates about blogger tricks. Share this post with others and spread my voice. Thank you for visiting 101Helper.

Search tags: Show ads below post titles in blogger, Show ads above post footer in blogger, 101Helper blogging tricks, Get clicks on ads, Increase Adsense earnings.

Read More