How To Add Fanciest Author Box Below Posts In Blogger

Author box is among the trending widgets now a days because people who have blogs or websites want to get more followers and stay in touch with their fans. My recent post was also about "Author boxes with different styles for blogger" and once again I am about to share a new author box which will be added below every post in your blog. It is called fancy author box. It is designed with javascript and css and doesn't effect your blog's load time.

If you liked this gadget and want to add it in your blog below every post then follow below mentioned steps:

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

Step 2: Click inside the code and search for below code by using Ctrl+F on your keyboard:

<div class='post-footer'>

Step 3: You will find the above code two times if you are using simple template but if you are using a custom or other template then you will find it many times. Now copy the below code and paste it after the second code in simple template and in other template paste it after third code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.css">
<link rel="stylesheet" href="https://rawgit.com/101Helper/docs/master/fanciest.css">
<div id="tabs">
<ul>
<li><a href='#fragment-1'><i class="fa fa-user" aria-hidden="true"></i> Bio</a></li>
<li><a href='#fragment-2'><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
<li><a href='#fragment-3'><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
<li><a href='#fragment-4'><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
<li><a href='#fragment-5'><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google+</a></li>
</ul>
  <div id="fragment-1">
<img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/>
<h4>Fahim Raza</h4>
<p>I am fahim Raza and this fancy author box is designed by me. Its free for blogger. Do not Remove copyright tag. </p>
<a id="bout" href="https://101helper.blogspot.com/2015/06/how-to-add-fanciest-author-box-below-post-blogger.html">101Helper</a>
  </div>
  <div id="fragment-2">
<iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2F101helperblogspot&width=64&height=65&layout=box_count&size=small&show_faces=false&appId" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
  <div id="fragment-3">
<a href="https://twitter.com/the101helper" class="twitter-follow-button" data-show-count="false">Follow @the101helper</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div id="fragment-4">
<span class="ig-follow" data-id="5479dee" data-handle="USERNAME" data-count="true" data-size="medium" data-username="false"></span>
<script>(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//rawgit.com/101Helper/docs/master/instagram.js";s.parentNode.insertBefore(g,s);}(document,"script"));</script>
  </div>
  <div id="fragment-5">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="//plus.google.com/u/0/109303537659462705427" data-rel="publisher"></div>
  </div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</b:if>

Step 4: Make changes in the above code according to your choices. I have highlighted my name and links all you have to do is to replace them with your name and social profile links.

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

Replace links and usernames with your own usernames. 

Note: Don't remove the 101Helper tag from widget, it will be our copyright violation and you will be reported to Google if tag removed widget was found on your site.

I hope you like this gadget and its working in your blog, if not please let me know by leaving a comment below. 

Try more blogger gadgets and widgets here.

Follow and subscribe below to get latest blogger gadgets news.

Share this post with other bloggers around you!

Search tags: How To Add Fanciest Author Box Below Posts In Blogger, Fancy author box for blogger, Fancy author box blogger, Author boxes for blogger with different styles, all in one author box blogger,101Helper gadgets for blogger.

How To Add Youtube And Dailymotion Videos In Blogger Posts

Video tutorials are the best way to help users how to do something. For instance a blog about doing something like blogging or a tutorial blog becomes best one when it has step by step text tutorials as well as video tutorials. Now a days tutorial blogs are trending so every blogger is trying his best to make his blog better than other by improving its user experience. User experience improves when users are satisfied and video tutorials are the best tutorials to help and satisfy users because users can see how to do something. So if you have a blog and you have already setup a Youtube or Dailymotion channel and you want to embedded your videos in your blogger blog posts in order to get more views or to improve your visitors experience then you have reached to right place. In this post I will show you how to embedded videos in blogger posts. In the end of this post you can watch video tutorial also. Hope you like it.

How To Add Youtube Videos In Blogger Posts:

Step 1: Create a video and upload it.

Step 2: Open your video and below it click on share, make sure to allow embedding while uploading your video.

Step 3: Click on Embed and copy the code shown, The default code is for 560X315 size but if you want to change the size of the video and make other customizations then click on Show more.

Choose desired size for your video or click on custom size to set your own size

After size make other changes like show suggested videos, show player settings etc.  

Step 4: Copy the final code and go to blogger and edit post in which you want to add video.

Step 5: Switch to Html compose box and paste the code where you want the video to show up.

Step 6: Now click on publish and you are done.

If you want to add a video to your blog from a link(youtube) or computer then follow below steps:

Step 1: Go to blogger and edit your post or create a new one.

Step 2: Click on the video icon beside image adding tool.

Step 3: Now if you want to add video from your computer then just click on "Choose a video to upload" select the video and wait for upload.

but if you want to add video from a youtube link then click on from youtube and paste the link of the video.

Step 4: Click on "select" and you are done. 

How To Add Dailymotion Videos In Blogger:

Step 1: Open the video which you want to add in your blog post.

Step 2: Click on "Export" below the video.

Step 3: Customize your video.

You can re-size your video and turn on "auto-play". A preview of your video player is shown below the code. 

Step 4: Copy the code of your video and go to your blog.

Step 5: Edit or create a post and switch to Html compose box.

Step 6: Paste the copied code and you are done.

I hope you like this post and you found it helpful.

Try more posts if you liked this post. Follow and subscribe for more blogging tutorials.

Search tags: Dailymotion videos blogger,Youtube videos in blogger,How to add videos in blogger posts,Increase youtube views,Video tutorials blogger,101helper blogging tutorials.

Infolinks - The Best Ad Network For Bloggers

Most of the blogs are created to monetize them by ads and earn money but it is a confusing step to choose a good ad network for a blog. Everybody wish to monetize his blog with a network which pays the highest rates. But most of the ad networks becomes a reason of disappointment because even if you have a high traffic and unique visitors they don't pay enough rates. Now a days the most popular and highest paying ad network is Google Adsense but Google Adsense is not approved easily so you can use alternative ad network of Google Adsense which is Infolinks. Infolinks could also be called all in one and the best ad network for bloggers because it has following features:

(1). In-Text Ads:

If you are desired to monetize your blog by in-text ads then infolinks is the best ad network for you because it lets you to enable in-text ads for your content, you can choose colors for your ads as well as choose a custom color for them, moreover you can choose whether the ads should be of double border style of dotted and also quantity of in text ads. 

(2). Infold Ads:

Infold ads are the slide-up ads which slides up when the page is loaded. You can choose the color for your infold ad.

(3). Intag Ads:

Infolinks provides two types of intag ads. 

• Ads below posts.
• Revenue booster.

(1). Ads below posts:

These are the text ads below posts you can change their color, location as well as number of rows.

You can also position ads by pasting the provided code where ever you want to display the codes on your blog. 

(2). Revenue Booster:

This option is allowed for those users only who enable the intag ads by choosing automatic option. If manual option is chosen then revenue booster can not be enabled. How revenue booster looks? see it in below image:

Revenue booster is like sponsored content, it displays the content from other websites which are very interesting. Revenue booster is displayed below every page.

(4). InFrame Ads:

Inframe ads are the ads which slides out from left and right sides of blog/webpage. But it works only in those blogs which have small width as well as there is no rendering javascript code in the blog.

(5). Inscreen Ads:

In-screen ads are those ads which appear as a pop-up but in light box. Infolinks in-screen ads have some special qualities like it appears only once to a user in a day and also you can add triggers for these ads which are added in links so whenever a user clicks on links or some text the in-screen ad will open. It doesn't affects your blog's navigation and your users won't be troubled of these ads because it opens only once.

(6). Inarticle Ads:

This is a new ad type introduced by infolinks. It is a smart ad. You are given a code which is to be paste it an article. Once the code is pasted, the users will see an ad when they scroll down your page to the position where you have pasted the given code. If you want to see a live example play the above video!

(7). Referral Program:

Infolinks has now started a referral program so now you can double your earnings through your referrals. You can use banners as well as direct links to referral others. 

Get Started Here!

Hope you like this post and it helped you in taking decision to choose a good ad network for monetizing your blog. Please use my referral link to sign-up. It won't affect your earnings but it would be a reward for me by infolinks for becoming a referral.

Follow and subscribe for more blogging reviews and blogging tutorial. 

Search tags: Infolinks - The Best Ad Network For Bloggers,Revenue booster,Increase website earnings,Earn money by blog,best ad networks for blogger.

Grabable Responsive Promotion Bubble Gadget For Blogger

After creating a blog the most important thing is to promote it. A blog can be promoted by two means one is promotion though social networks while other is to promote it by making efforts in right way. By right way I mean to use some gadgets and internal linking. Everybody is aware of off-page seo so if you read about it then you must know the importance of internal linking and gadgets like related posts, popular post etc. Internal linking is also beneficial in promoting a specific post because it helps your visitors to reach to that post. Similarly now you can promote a specific post or page of your blog is an advance way by using "Promotion bubble gadget" you can see a live demo of this gadget on this page(Seo tools bubble).

Features:

• Its free!
• Easy to install.
• Good look!
• Visitors can grab and move this bubble.
• It grabs the interest of visitors so it increases your chances to get more traffic to that post or page. 
• Clean coding, it isn't made to slow down your blog.
• It doesn't effect your blog's navigation.

See Live Demo Here

How to add "promotion bubble gadget" in blogger:

You can add this gadget in your blog by following some simple steps mentioned below:

Step 1: Go to your blog and navigate to template.

Step 2: Click inside the code and search </header> by using Ctrl+F.

Step 3: Just below the </header> paste the below code.

If you don't paste the code below </header> then it will not be grabable.



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

Customization:

You can change the icon(bubble) as I used seo tools bubble because I wanted to tell visitors that they can use seo tools in my blog similarly you can use other bubbles but try to use transparent images only. To change the icon replace the highlighted image link in the above code.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZlPjRo8_KKMICcfT1w-1tkUjg5_0XfH-fy9ox5UUddo_wnCaruBqH2R4zAS9J2gb4ZnCYlcNZTTgKNAJupHj4pV7XhoBwSadHopneW2cd_aoRh6_M3o09fwxfcSqZrVEhIccpTLJnXI/s320/seo-icon-101helper.png

Further you can change the position of your bubble Just make changes in the below line of code:

<div class='flip-container' ontouchstart='this.classList.toggle(&apos;hover&apos;);' style='position: fixed; top: 80%; left: 57%;'>

To add link in the text(click here) replace it with my page link:

<a href='http://101helper.blogspot.com/p/seo-tools-for-blogger.html' rel='dofollow' target='_blank'>Click Here</a>

You can also change the text(click here) with your own text, just type your text and save it. You can also replace To Use Seo Tools with your own text.


<a style="position: absolute;top: 37px;left: 0px;text-align: center;color: #444;font-size: 14px;">To Use Seo Tools</a>

I have designed the above text as a link because if you are using infolinks it will grab the bubble text and change it to ad.

You can Use below icons:

I have brought you some icons you can see them at below links:

(1). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCcIk1Vr_75Oc6kpFtvy9tgQv639Y6gBE4yaJCrW5hZYfS6_kPT7HaiR83Ycv6F6M_Hs9ly4YGr1Ybe3xgJtlBtEx7unvwAXxMYB_geYMQZbvnRcVIwVWyiTdEQbJf52NK826X7ngP48/s1600/0B-3SIKm-BBF_bGZzNkFGV09BazQ.png 

(2). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xHUeLvl70O22YUx5CpHxPRQf2rg4stut4Jolvh2r5zWDX8kxL5D3DenTf5-Vf6OQ2vLmK-VypxJFqZQeUU4G2ThQUeZjXPS8DrnNu6KwFJTdVkXi3cIVehjtGtYNg3MIwaWdD7D5Fic/s1600/0B-3SIKm-BBF_M0xheUVjOFRUZVU.png

(3). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI8eoQUbLbLBie-DqfMGQUeu5Sd-8bYanXVQitIQ9YmTMVNa8A3txoZKw5EFtQpur73fw9noHHKkQIUKh1uOrqavAxfL-1xNCzeBIPypGHhI34bwc83deIExO5fvFjson0qRZJi5apjw/s1600/0B-3SIKm-BBF_NHgyQkZMMk9UcVU.png

(4). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZRwyGAbxqjWo4Ztv57RE1LnyHdReEUqv7CuDiqYMSxX2-RwYn5GVy6lWPrlkvHfGrNCikly6YWZtcEvi0tEZc6CSqlaDroBZ-fkn9c3NzRUtGBdZ9A7WVpRezVEhVbc3G3FFLEw-zQE/s1600/0B-3SIKm-BBF_RWRGYzY2WXVRQzg.png

(5). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXhIHAJUvgdzgJe0rCcpdOn8CW4V35AFN4oePWY5OPO-PVkbOcV0_FgBc0qpQ3I48-AafnXc72bvQBDks3WUxG8dPDCpEzyZELF0ytw-oR5lv-XljzPSX-RfDifiPyuRhywMvFr7xFPo/s1600/analytics_img_a.png

Hope you like this post and this gadget is working properly in your blog. Follow and subscribe for more blogger gadgets. If this gadget is not working in your blog or you need any help please help me know by leaving a comment below.

Search tags: How to promote blogger blog,How to promote blog articles,How to increase blog page-views,How to Promote blog posts,Blog promotion gadget for blogger,Promotion Bubble Gadget For Blogger

Related Posts Widget For Blogger Mobile

A very important factor of off page seo is internal linking, it means to inter link other posts with the post you write. Internal linking is good for seo as well as it increases your page views because it is the way by which visitors reach to your posts. Internal linking is of two types one is to mention links of older posts in new post and the second is to add a related, recent, recommendation or featured posts widget in your blog. It helps visitors to reach to more posts and read them. Related post widget is most popular in desktop sites but now you can add related posts widget in your blogger mobile site to engage your mobile visitors to your blog. So in this post I will show you how to add related posts widget in blogger mobile site. 

You can see a live demo of this widget in my blog either in your smartphone or on desktop. Just visit my blog's mobile site by this link 101helper.blogspot.com/?m=1 

Before we start, first optimize your blog's mobile site by reading this post. After optimizing your blog for mobiles just follow below steps to add related posts widget in your blog(mobile site).

Also Read: Text Only/Links Only Related Posts Widget For Blogger Mobile Site.

Step 1: Go to blogger dashboard and navigate to layout > add a gadget > Html/javascript.

Step 2: Copy code of mobile related posts widget from below:



Step 3: Paste the copied code into Html/javascript and click on save.

Step 4: Grab the newly added gadget(related post mobile widget) and drop it at the bottom in the layout page. As shown in below image.

Widget Not Appearing In Mobile Site?

If the related post widget fails to show in your blog's mobile site then follow below steps.

Step 1: Go to blogger dashboard, navigate to template and click on Edit Html.

Step 2: Jump to the widget(related posts mobile) by its id or find it by using Ctrl+F

Step 3: Search for a line similar to this:

<b:widget id='HTML7' locked='false' title='' type='HTML'>

Step 4: Add this piece of code mobile='only' before locked='false' like this:

<b:widget id='HTML7' mobile='only' locked='false' title='' type='HTML'>

Step 5: Click on save template and you are done. Open your template and scroll to the end to see your related posts widget!

I hope this widget is working fine on your blog, if you are facing any problem tell me by leaving a comment below. Follow and subscribe to get latest news about blogger widgets. 

Search Tags: Related Posts Widget For Blogger Mobile,blogger widgets and gadget,related posts widget,random posts,featured posts,thumbnails,text only,blogger widgets

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.

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

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.