Monday, March 30, 2015

Stylish Css3 Preloader For Blogger

Stylish CSS3 preloader for blogger | 101helper

Hello there! I am back with a new gadget for your blog. It will make your blog more impressive and stylish so if you have tried many stylish and impressive themes in your blog but still couldn't reach your goal of achieving the most impressive design and still seeking for something that will rock your blog then you are absolutely at right place. I don't think its a gadget but I call it a gadget as it is added from other blog(out of your blog). Its a preloader. Don't know what a preloader is? let me tell you, like its name(pre) it loads before your blogs content, just like a loading image but it is designed with CSS3 and javascript. It makes your blog look more impressive you can see a demo of preloader here. I hope you like it. Give me your feedback by leaving a comment below.


Features:
  • Very impressive and stylish look!
  • Loads faster and doesn't affect blog speed.
  • Minified javascript and CSS codes are used.
  • Easy to install(2 minuted integration).
  • Free of cost and customizable.
How to add stylish Preloader in blogger blog: 

Its very easy to add preloader in your blog. In the beginning the java/css codes were too long and it could make your blog slow, so I have hosted these codes on Google drive and reduced the size of code so you can add this preloader in your blog in just a few steps and it won't affect your blog speed. To add this pre-loader in your blog follow below steps:


Step 1: Go to blogger dashboard and switch to template page.



How to add stylish Preloader in blogger blog | 101helper

Step 2: Click on Edit Html.



Stylish gadgets for blogger | 101helper

Step 3: Search for <head> by using Ctrl+F on your keyboard.


Step 4: Copy below codes and paste it below <head>.


  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="https://rawgit.com/fahimraza/FK/master/preloader1.css" rel='stylesheet'/>

<link href="https://rawgit.com/fahimraza/FK/master/preloader2.css" rel='stylesheet'/>
<script src="https://rawgit.com/fahimraza/FK/master/preloader1.js"/>
<script src="https://rawgit.com/fahimraza/FK/master/preloader2.js"/>
<script>$(document).ready(function() {

setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
},  7000 );

});</script>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Step 5: Search for </header>.


Step 6: Copy one of the below code,according to your needs and paste it just above </header>:



how to add codes in blogger template | 101helper

To show Preloader on every page of your blog(it will show up even if some one search something using search box):

<body class='demo'>

<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>

            <div class='loader-section section-right'/>

</div>

    </div>

    </body>

To Show Preloader only on Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To Show Preloader only in posts:

<b:if cond='data:blog.pageType == "item"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To Show Preloader only in pages(contact,about,sitemap):

<b:if cond='data:blog.pageType == "static_page"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To hide or show preloader on specific pages:

<b:if cond='data:blog.url != "Link of page"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

Replace Link of page with the link of the page on which you want to hide preloader.

Step 7: Click on save and you are done!

Read more about hiding or showing gadgets in specific pages in blogger here.

Customization:

You can customize this gadget by making changes in the css code, you can change the color of moving coils and also background color but I will show you only how to adjust time of this preloader according to your blog. The default time is 7 seconds you can increase or decrease it by making changes in highlighted part of code in step number 4( 7000 ). If you have any question about customizing this preloader you can ask me in comments.


If you have any problem related to this post or you have any suggestions feel free to contact me or ask me in comments. Follow and subscribe to get latest news about blogger gadgets.


Search Tags: Preloader for blogger,Stylish CSS3 preloader for blogger,Stylish blogger template,101helper blogger gadgets,Impressive blogger gadgets, Impressive blogger themes.

Friday, March 27, 2015

How To Get DMCA Protection For Your Blogger Blog

How to get DMCA protection for your blog | 101helper

Now a days a problem that every unique content sharer is facing is content stealing. whenever a unique article is shared and it becomes popular then not only those visits that article who gets idea/help from that post but also some of them copy your work and use it for free without any hardship. As making a unique content is not easy therefore you need to protect it from content thieves. Though you can protect your content by enabling or disabling click on your blog and you can also report someone to Google but sometimes both these ways aren't effective so you need better protection and that's what this post is about. In this post I will show you how to get DMCA protection for your blog. So whenever and whoever copy your content you can launch a takedown and DMCA will take action against him.

Recommended post: Protecting content from copy in blogger.

How to add DMCA to your blogger blog?


DMCA provides badges for every user and once a badge is added to a blog or website, DMCA bots crawl that blog or site and starts protecting content. You can read more about DMCA at wikipedia. To get DMCA protection in your blog follow below steps:

Step 1: Go to DMCA.

Step 2: Register a new account at https://www.dmca.com/Protection/signup.aspx


Protect my content from copy | 101helper blogger

Step 3: Verify your account by clicking on the link sent in the E-mail and login to your DMCA account.

Step 4: Go to https://www.dmca.com/Badges.aspx and choose a DMCA badge.


Protect my content from copy tutorials | 101helper blogger

Step 5: Copy code of the desired badge and go to blogger dashboad > layout > add a gadget > Html/javascript > paste the code and click on save.

Congratulations! you are successfully done. Now as soon as DMCA bots crawl your blog, your protection will be on. You can change your badge anytime and can add a protection bar on the top of your blogs pages also from http://copyrightbar.com/

I hope you like this post, if you have any problem ask me in comments below. Follow and subscribe to get latest blogger tutorials in your inbox.

Search tags: DMCA protection, Stop copy content,Protecting content from copy in blogger, How to protect blogger content,101helper.

Thursday, March 26, 2015

How To Add Bing Page Tanslator In Blogger

How to add Bing translator in blogger | 101helper

Translating a web page to a person's own language is very important to make him understand your articles because a blog/site without a translator has only one language and everyone can't understand that specific language. Specially if your blog is targeted by international visitors then you must have a translator in your blog to allow them to change your content language to their own language and help them understand. As English is an International language therefore first thing is to write your articles in English and after that you can add a translator widget to help others understand your post. It is very important to add translator to your blog because it is related to traffic, for example if your blog is in English language and someone visits your blog from Africa or any other country and he doesn't know your language then there must be something which help him out and that is a page translator.

Demo:


Bing page translator demo for blogger | 101helper

Related post: Google Translator and Flag translator for blogger.


Features of Bing page translator:

  • Easy to use(one minute integration).
  • A very good look!
  • Website language selector.
  • Fully customizable e.g color of button, background color etc.
  • Translator grabber(you can grab the translator and move it on your page).  
  • Once translate button is clicked the translator floats as the page scrolls.

How to add Bing page translator in blogger?

Read and follow below steps to add bing page translator in your blog.


Step 1: Go to Bing translator widget page.


Step 2: Customize your translate button, you can customize following things:


(1). Translation settings: Here you can select the language of your site/blog and also when the translator would translate your page, whether on page load or when a visitor clicks translate.


How to add Bing page translator in blogger | 101helper

(2). Pick a color: Here you can select color of your translator widget e.g light/dark backgrounds.

Bing translator for blogs

(3). Enable community translations: In this option you can allow visitors to suggest better translations for a word or sentence. 

Page translator for blogger blog | 101helper

You can further customize your translate button by reading full documentation here.

You can see a preview your translator widget on the same page above the code box.

Step 3: After customization copy your widgets code and go to your blog.

Step 4: Go to layout > add a gadget > Html/javascript > paste the copied code and click on save.

Congratulations! you are done successfully, open your blog to see your Bing translator. 

I hope you enjoyed this post. Give me your feedback by leaving a comment below.

Follow and subscribe to get latest news about blogger gadgets. Share this post with others and help me share my work with others. Keep visiting 101helper.blogspot.com. 

Search tags: Web page translator, Page translator for blogger, Bing page translator for blogger, 101helper gadgets for blogger blogs.

Monday, March 23, 2015

How To Enable Auto-complete In Google Custom Search Box

how to add suggestions to Google search | 101helper

Google webmaster tools has a very useful feature for blogger and webmaster that it lets us to create a custom search engine and add it in or blog or site, but as Google search has an auto-complete feature why our search engines aren't auto-completing our search? well! Google has enabled us to allow or disallow auto-complete in our search engines but most of us either don't know about Google search auto-complete option or are not aware of how it works and how to enable it. So this post is dedicated to those who want to enable auto-complete in their search engines. 

Related posts about Google Webmaster Tools.

To see a live demo of auto-complete, click on the above search box and type an alphabet.


Whats the reason for enabling auto-complete?


Its a very good question and the answer for it is there are two reasons for enabling auto-complete in Google search engine.


(1). It helps visitors to find it quickly what they are looking for.

(2). It helps you to promote your posts which you want to get more views.

How to enable auto-complete in Google search engine? 


Enabling auto-complete is much easier than you think but the major work starts after enabling the auto-complete, how? read more to know. To enable aut-complete in your search engine follow below steps:


Step 1: Go to Google webmaster tools > Other Resources > Custom Search.


Step 2: Edit your search engine and click on search preferences.



How to enable auto-complete in Google search engine | 101helper

Step 3: Click on auto complete and on the same page switch on auto-complete


enabling auto-complete in Google search engine | 101helper

Congratulations! you have successfully enabled auto-complete in your search engine but still you won't see any auto-complete suggestions as you have to set suggestions first. That's why I told you above that the major work starts after enabling the auto-complete in your search engine. Search engine suggestions can be added in two ways, one is to add suggestions one by one and another is to upload an xml file which contains titles of your posts. In this post I will show you both methods of adding suggestions to your search engine. Its a hard working thing but you have to do it to see auto-complete suggestions. 

Adding auto-complete suggestions one by one:

One method of adding suggestions to Google custom search engine is doing it one by one, so I am discussing it first. Follow below steps to add auto-complete suggestions one by one to your custom search engine.

Step 1:  Go to Google Webmaster Tools > Other resources > Custom search > Search preferences.

Step 2: Click on auto-complete and below find Custom Autocompletions, now find included.

Search box with auto-complete for blogger | 101helper

Step 3: Click on Add(it will open a pop-up). 

Step 4: In the above field type your suggestion and leave the below one blank.

Search box with auto-complete for blogger | 101helper blogger

Step 5: Click on ok and you and done!

Adding auto-complete suggestions at once:

To add suggestions at once, go to Google Webmaster Tools > Other resources > Custom Search > Edit Search Engine > Search Preferences > Auto-complete and at the end of the page click on upload/download XML. Upload your blog's XML file which contains all posts and you are done.

How to get XML file of your blog? Read this post for instance.

That's it. I hope you enjoyed this post and it helped you out. Follow and subscribe to get latest tutorial updates about Google webmaster tools. Share this post with others because sharing is caring. Keep visiting 101Helper.

Search Tags: How to enable auto-complete in Google custom search, Search box with auto complete, Auto complete search box gadget for blogger, Search suggestions gadget, Increase page-views of posts in blogger, 101Helper Google webmaster tools tutorials for blogger.

Saturday, March 21, 2015

How To Add Soundcloud Embedded Tracks In Blogger

How to add Soundcloud embedded tracks in blogger | 101helper

Do you have a music collection? or do you have a collection of music on sound cloud and you want to share your music with others through your blog? and you don't know how to do that, if yes then I can tell you an easiest way to share your music with you audience and increase your fans on sound cloud. You can share your music either as a gadget or in posts but both ways are easy, there is no difficulty at all. So this post is about how to share sound cloud tracks in blogger.



Related post: How to add music player in blogger.

Sharing a single Track:


In case of sharing a single track follow below steps:


Step 1: Go to soundcloud and search for the track which you want to share.


As an example I am sharing "In the end by Linkin park".


Step 2: Just below the track click on share button.



How to add Soundcloud embedded tracks in blogger | 101helper blog

A share box will be opened having some share buttons with a share and an embed section, shown in below image:

How to add music player in blogger | 101helper

Step 3: Switch to Embed tab and choose your music box, below music box click on more options to to enable auto-play or change the color of play/pause button.


How to add music player in blogger | 101helper blog

Step 4: Copy the embed code shown above the music player.


Step 5: Go to blogger dashboard and if you you want to share your music as a gadget then go to Layout > add a gadget > Html/javascript, paste the code of your player and click on save.



Or

In-case of if you are adding your music to your post go to your post, edit it, switch to Html tab and search location for your music player, now paste the code,publish your post and you are done.

See the Demo below:



Sharing a full album or all Tracks uploaded by a User:


Above I have told how to share a single track in posts or as a gadget and you can see a demo also, similarly you can share full album(more than 1 songs) or all the tracks uploaded by a user. Its similar to sharing a single track with a little difference of a list of other songs. So if you are looking for sharing a full album or all the tracks you have uploaded to your account then follow below mentioned steps:

Step 1: Go to sound cloud and search for a full album or a user profile.

As an example I am sharing a profile having title Linkin_park, you can find it here.

Step 2: Just below the profile or album click on share:


Music player for blogger | 101helper blog

A pop-up box will be opened when share button is clicked(similar to the box which had opened at the time of sharing a single track).

Step 3: Switch to Embed Tab shown in below image:


soundcloud Music player for blogger | 101helper blog

Step 4: Choose your desired music player and below the box click on more options for customization like play/pause button or auto-play.

Step 5: Copy the code given above the music player.

Step 6: Go to blogger dashboard and if you you want to share your music as a gadget then go to Layout > add a gadget > Html/javascript, paste the code of your player and click on save.


Or

In-case of if you are adding your music to your post go to your post, edit it, switch to Html tab and search location for your music player, now paste the code,publish your post and you are done.


See a demo of full album below:




That's it all is done, you have successfully added your tracks to your blog.

Adjusting width and height of player:

The customization includes only width and height of the music player. So if you have a congested blog you can adjust your music player according to your needs. To adjust widths and height make changes in the code which you copy from sound cloud. For example I have code shown below:

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/1818488&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> 

Now all I have to do is to make changes in the highlighted piece of code to adjust the player according to the width and height of my post page. Similar to me you can also adjust your players width and height.

Adding sound cloud profiles to blog not only helps you to get more views on your tracks but you can also get more followers as every player shows a follow button on mouse hover and it also helps you to entertain your visitors while reading your posts. So add your sound cloud tracks to your blog and increase your fans. 

I hope you like this post and this is helpful to you. If you like this post and you think its good then please share it with your friends. Follow and subscribe to get instant blogger tutorials in your inbox. Thanks for visiting 101Helper and keep visiting!

Search tags: Sound cloud followers, Soundcloud views, How to add Soundcloud embedded tracks in blogger, Sharing soundcloud tracks in blogger, 101Helper blogging tricks, How to add music player in blogger.

Thursday, March 19, 2015

How To Setup Google Custom Search Box In Two Pages In Blogger

How to setup Google custom search box in two pages in blogger | 101helper

Do you use Google webmaster tools? if yes then I am sure that you are aware of Google custom search engine. Google custom search engine is a feature of Google webmaster tools which lets you to create a custom search engine for your blog or site and you can add it your blog also. It works on javascript and doesn't need any experience in Html or java. All you need is to setup search engine for your blog. You can read a post in which I have shared some search box where I have mentioned Google custom search engine too. You can read that post and create a custom search engine for your blog by following it, if you haven't setup a search engine yet. Click here to read that post. In this post I will tell you how to add Google custom search in blogger(two pages). If you didn't get me that what am I talking about then read below paragraph.

What is this article about?

This post is about adding Google custom search in blogger in two pages. Let me explain it more accurately. Google provides custom search engine in 7 different styles i.e a search box whose search results are shown on the same page, a search box which shows results in a Google page, a search box which shows search results only etc. For better explanation see the below image:


How to add google custom search box in two pages | 101helper

For instance read about every type of the above search results below:

Overlay: By selecting this option you will see the search results in an overlay.

Two page: This option lets you to add search box in one pages and show the results in other page.

Full width: This option lets you to add search box and results both in one single column.

Two column: Two column refers to the idea of search box in one area of the page and results in other area.

Compact: Like its name, this option shows results and search box both in compact form.

Results only: By selecting this option you will use your own search box and show results on a page of you blog.

Google Hosted: This option allows you to add search box in your blog but the results will be shown in a Google hosted page.

Whats the reason for adding Search box to two pages of my blog?

Well, you can use anyone of the above styles shown above but a solid reason for using search box in your blog page(Two page) is it increases your page views and hence decrease your bounce rate. Another reason for using this style is to show a search box in Google search results.

How do I add search box to my blog pages(two page):

Using custom search engine in two pages of your blog is not a problem at all, but as a beginner its complicated to use this search box in such a useful way as Google hasn't made it easy. But don't worry you can add this search box in your blog two pages by following below mentioned steps. 

First of all we have to set an action page so we need a page link where you would like to see search results so first create a page named "search results" and publish it just like I have created a search page you can see it here, now after creating page copy the url of that page and follow below steps:

Step 1: Go to Google webmaster tools, click on other resources and choose custom search.

Google webmaster tools tutorials | 101helper

Step 2: Click on search edit search engine and choose your search engine. If you haven't created a search engine yet then create a search engine and after that follow this post.

Google webmaster tools tutorials for blogger | 101helper

Step 3: Click on look and feel and choose Two page.

Google webmaster tools for blogger | 101helper

Step 4: Click on Save & Get Code(it will take you to a new page).

Step 5: On the code page before copying the code you have to set an action page where your search results will be shown so click on Search results details above the search box code.

Google custom search engine tutorials for blogger | 101helper

Step 6: Paste the url of the search page in above space and below it type q just like I've done in the above image.

Step 7: Click on save(the page will be reloaded).

Step 8: Now copy the code and go to blogger dashboard > layout > add a gadget > Html/javascript > paste the code and click on save.

Step 9: Now you are almost done after a few steps. So now click on Next: Get code for search results:

Google custom search engine for blogger | 101helper

Step 10: Copy the code(code for search results).

Google custom search box Two pages

Step 11: Go to the page(search results), edit it switch to Html tab and paste the copied code.

Step 12: Publish the page and open your blog to test your search box.

I hope you like this post and it helped you. If you have any problem related to this post ask me in comments. Follow and subscribe to get latest updates about Google webmaster tools tutorials. Share this post with others and help me spread my blog.

Search tags: Search box, how to add search box in two pages, Google custom search box Two pages,How to steup Google custom search engine in blogger page, Google custom search box full tutorials, Google webmaster tools tutorials for blogger 101Helper.

5 Fastest And Seo Templates For Blogger

5 fastest templates for blogger | 101helper

Seo, money, style, content, blog is not only about all this and other things but fast loading and speed is also a very important for a blog. Fast loading plays a vital role in making more fans and audience for a blog because a blog which loads slowly like a snail isn't liked by anyone. I am sure that you also don't like slow loading blogs and for the same reason I am creating this post. In this post I will show you some fastest blogger templates because blogger templates are too simple and after a little customization they slows down automatically, so we need an upgrade. So if you want a fast loading blog, I recommend you to use any of the below fast loading template.



(1). Seo fix template for blogger:


Seo fix template for blogger | 101helper

Like its name it is not only seo optimized but also loads fast among all the below templates. It loads faster than the blink of an eye. It has clean, clear and simple design. This template could be used for all kinds of blog such as news, tutorial blog, games, magazine, ppc sites etc. Its clear design looks so decent and also provides a user friendly environment to users. You can see a live demo below. This template is available for free. Some of the features of this template are given below: 
  • It is 100% free without any cost.
  • Fast loading and clear design.
  • Simple and decent look! with eye friendly colors
  • Optimized for seo. 
  • Compatible with all browsers.
  • Simple admin layout.
  • Ads ready,Breadcrumbs and social share buttons.
  • Drop-down menu.
  • Built in gadgets(related posts).



(2). Excelencia blogger template:

Excelencia blogger template | 101helper

Excelencia is a seo optimized, fast loading, responsive and cool template. It has built-in gadgets like recent posts widget, recent comment widget. It is available for free. It is ads ready too and good for blogs using infolinks ads. There is a problem with all blogs that infolinks inframe ads aren't shown, this problem is solved in this template. This template is designed in such a way that all kinds of ads appear in this template. It has a responsive design with auto-zoom effect and much more. This theme is good for magazines, music, news, tutorials and gamming blogs. You can see a live demo of this template below. some of the features of this template are mentioned below:
  • This template is free of cost.
  • Ads ready and compatible with all ads networks such as infolinks.
  • Seo optimized.
  • Well decorated design with decent colors.
  • Built-in gadgets(recent posts and comments gadget).
  • Grid view with responsive design.

(3). GoGreen blogger template:


GoGreen blogger template | 101helper

The title "GoGreen" expresses the decent and eye friendly color of this template. It has a green color and it is a full width template. It has a grid view and all the features that every blogger want. Best for magazine blogs, news blogs and literature blogs. You can see a live demo of this template below and some more features are also mentioned below:

  • Very good and impressive look.
  • Available for free as well as you can buy a full version(without copyright tags) for $30.
  • It is one of the most fast template.
  • 100% seo friendly.
  • Ads ready and responsive design.
  • It is a Grid view template.

(4). TriVusion blogger template:

TriVusion blogger template | 101helper

TriVusion loads very fast just in milliseconds. It has a good design with clean and clear look. It is available for free. This template is good for news, education, tutorials etc. You can see a live demo of this template below. Some of the features of trivusion are given below:
  • It is free of cost.
  • 100% ready for ads.
  • Fast loading(milliseconds).
  • Seo optimized.
  • This template has two menus, one on the top of the header and the second below it.
  • Eye friendly colors are used to design this template.
  • Contract look(small images, less css and javascript, small description of posts etc).

(5). Dollar Sense template:


Dollar Sense template | 101helper

This template is similar to TriVusion with a little difference of share buttons,menu color and ad spaces. It has a good design, with user friendly interface. Such a bold use of colors that attracts users towards it. Available for free and good for all kinds of blogs specially news, education, presentation etc. Some of the features of Geo wall are mentioned below:
  • It is available for free.
  • Fast loading and clear design. 
  • Ads and seo ready.
  • Social sharing buttons.
  • Two types of menus, similar to trivusion.
  • Compatible with most of browsers.
  • Bold use of colors and simple design.


I hope you like this post and it was helpful to your. If any of the link is not working please inform me by leaving a comment below. Tell me is my template loading fast? and is it users friendly?. Share this post with others. Follow and subscribe to get instant updates about blogger templates, tips, tricks,seo etc.

Search tags: Templates for blogger, blogger templates, Fast loading blogger templates, Seo friendly blogger templates, Responsive blogger templates, Simple blogger templates, Blogger templates download.