How To Add Map In Blogger Contact Or About Page

Bloggers are advancing day after day and making their blogs professional by adding pages like privacy policy, contact page, about page, terms and conditions page etc which are seen in professional websites so they are trying to make their blogs look more professional to impress visitors because such things improve blogs reputation. One more thing which can improve a blogs reputation and make it look more professional is a map which shows the location of the blog. So if you have a business website converted to dot com then you can add a map in your website or blog's about or contact page and your location to your visitors as well as make your website or blog more professional. So this post is all about adding Google map in contact or about page of your blog. Follow below steps to add a map in your blog's page.

How To Add A Map To Contact Or About Page In Blogger?

Step 1: Go to Google Maps and search your location.

Step 2: Click on Share below directions:

Step 3: Click on Embed Map.

Step 4: Set your location by clicking inside map and moving it, change the size of your map by clicking on selector beside code. Available sizes are small, large, medium and custom. Choose custom if you want to create a custom size map.

Step 5: Copy code of your map and go to blogger dashboard.

Step 6: Click on pages and edit your about or contact page in which you want to add map.

Step 7: Switch to the Html editor of your page:

Step 8: Paste the code copied from map page.

Step 9: Click on Publish and you are done!

You can add the map in a gadget too at the bottom of your blog. All you have to do for this is to add the map code in the layout. So if you want to add a map at the bottom of your blog then go to blogger > layout > Add a gadget > Html/Javascript, Paste code of map and click on save!

I hope you like this post and you found it helpful. Share it with others. Thanks for visiting 101Helper.

Search Tags: Map for blogger,add a map in blogger,add a map to website,Google maps gadget for blogger,embed map in blogger blog,Add map in contact page,101Helper blogger tutorials.

Read More

Related Posts Slide Out gadget For Blogger

"Slide out related posts gadget" is a gadget powered by addthis which works on jquery. It is one of the most important gadget that is very beneficial for those who have a very low traffic. This gadget slides up when a page is scrolled down and on every page it shows a different recommendation so every post is shown one by one which boosts your traffic stats. One more special thing about this gadget is that it doesn't affect your blogs speed. Moreover you can see analytics of  your slide out gadget which shows you "how many click you have got" on your recommendations. So you have a full information about your traffic stats. This gadget is available for both mobile sites and desktop sites. So now you can add this gadget in your mobile site as well as desktop site and start boosting your traffic.

In this post I will show you how to install slide out related posts widget  in blogger. Let us start adding it desktop first.

How To Add Related Posts Slide Out Gadget In Blogger Desktop Site?

This gadget is very easy to install. You can do it in just a few minutes. All you need is anAddthis account. So first signup for an Addthis account and after that follow below steps.

Step 1: Sign up for an Addthis account and sign in to your account.

Step 2: Click on TOOLS.

Step 3: Scroll down to Recommended Content section and click on What's Next on the right side.

Step 4: Give a title to your slide out gadget that will appear above the post name and select theme of your slide out gadget.

<------------ Optional Part Of Post-------------->

Your gadget is almost ready but if you want you can make some customizations like:

(1). Hiding this gadget on specific pages of your blog.
(2). Position of gadget(left or right).
(3). Responsive width(width after which the gadget should slide up when page is scrolled).

So to make such customizations click on "Show more options"

To hide the slide out on Homepage select No option below it. And if you want to hide this slide out in certain pages then move to Hide On These Pages and add the links of these pages between * if you want to hide it on multiple pages then separate the links by come(,).

Below it there is an option to promote a specific page into the first slot but you can use this feature only if you have Pro(Premium) account.

The next option is Responsive Width which is the width in pixels after which the gadget would slide up when a user scrolls down your page. Set the desired width by typing it.

And the last option is Offset which decides whether the related post slide out will be shown on right side or left side. Choose the desired option, you can see a preview of your gadget above.

<------------ Optional Part Of Post Ends-------------->


Step 5: Copy the code and click on Activate.

Congratulations! your gadget is activated now you have to install it in your blog.

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

Step 7: Click inside your code and search for <head> by using Ctrl+F.

Step 8: Just below it paste the copied code.

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

How To Add Related Posts Slide Out Gadget In Blogger Mobile Site?


Step 1: Login to your Addthis account and navigate to tools as show above.

Step 2: Scroll to the end of the page and find What's Next Mobile.

Step 3: Click on Setup and choose the desired options for your gadget e.g theme, title etc as shown above.

Must Read: Click on activate and you are done. If you have already added this gadget in your desktop them you don't have to follow next steps because you have already added the Addthis code to your blog. But if you haven't added Addthis code in your blog them follow next step!

Step 4: Copy the code and go to blogger > template and click on Edit Html.

Step 5: Click inside the code and search for <head> by using Ctrl+F.

Step 6: Just below it paste the copied code and save your template as shown in above image.

If the gadget fails to appear in your blog's mobile site then go to template and switch your blog's mobile template from simple to custom.

If the widget still fails to appear in your mobile then optimize your blog's mobile site for phones or hire us to optimize it for you.

I hope this gadget was helpful to you and it didn't waste your time. Please share it with others and subscribe for latest blogger tutorial news. Share your views about this post in comments below. Thanks for visiting 101Helper.

Search Tags: Slide out related posts gadget for blogger, blogger mobile site gadgets, 101helper blogger tutorials, Related Posts Slide Out gadget For Blogger,New blogger widgets,Addthis tutorials for  blogger.

Read More

Link/Text Only Related Posts Widget For Blogger With 6 Different Styles

"Simple Related Posts Widget For Blogger" is the most frequently searched on search engines because it is a very important gadget for blogger. It helps visitors to reach more posts on your blog and hence it helps you to multiply your traffic. Related posts widget plays a role of internal linker as it link one post with other so it has a great impact on your traffic as well as seo. Because internal linking is a part of off-page seo. As this gadget is so important for blogger therefore some websites are also formed which provides related posts plugin for your blog but if a website's plugin is used then it may slow down your blog which is not good.
People wish to add related posts widget to multiply their traffic but without affecting there blog's speed so most of the bloggers use simple/link/text only related post widget because it doesn't slow down blog and boost traffic.

I also recommend to use simple/link only related posts widget because thumbnails loads so slow and visitors hate slow loading. I have shared many types of related posts widgets for blogger and in this post I am back with simple/link only related posts widget with 6 different styles.

I hope you will like this post. I would like to know how was this post so leave a comment below the post. To add this widget in your blog and start multiplying your traffic follow below steps:

Click Here To Add Simple Related Posts Widget In Blogger Mobile Site!

Step 1: Go to blogger dashboard.

Step 2: Navigate to template and click on edit html.

Step 3: Search for </head>.

Step 4: Copy code of desired related posts widget from below and paste it above </head>.

Style 1:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 10px 5px;}
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 10px;}
#related-posts a {font-size: 14px; color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts ul {list-style-type: none;}
#about {position: absolute;right: 1%;font-weight: bold;}
#related-posts li {padding: 12px;border-bottom: 2px solid #fff;border-left: 5px solid #BCC2B9;background-color: #F4F4F4;}
#related-posts li:hover {background: #F4F4F4;font-weight:bold;background-color: #eee;border-left: 5px solid #188DD7;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 2:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 13px 5px;background-color: #20DD71;}
#related-posts h2 {color: #FFFFFF;margin-bottom: 13px;left: 7px;top: 10px;font-family: Trebuchet ms;}
#related-posts a {font-size: 14px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#about {position: absolute;right: 1%;font-weight: bold;}
#related-posts ul {list-style-type: none;margin: 0 0 0px 0;padding: 5px;}
#related-posts li {padding: 12px;border-bottom: 3px solid #eaeaea;background-color: #FFFFFF;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;Related Posts:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>

</b:if>

Style 3:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#about {display: none;}
#related-posts {margin: 10px 0px;background-color: #eee;}
#related-posts h2 {letter-spacing: 1px;font-size: 18px;color: #222;margin-bottom: 10px;position: relative;left: 10px;top: 10px;}
#related-posts a {position: relative;bottom: 4px;font-size: 15px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NQCxQzej2kmPY3nM3EhNE24vFcuGG5JAnavywDgF8epSqDBnlxTHpk-2lZn8Ijp6xtBxOJQdjq6qSpWPw5uMy8iE_xe3kN7wm2otNR6NI-oTHz0wcYebceQt7RwuFWA28ENF6n_ziyY/s1600/rsz_1rsz_icon256.png');margin: 0 0 0px 0;padding: 5px;position: relative;left: 30px;}
#related-posts li {width: 94%;}
#related-posts li:hover {font-weight:bold;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 4:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#about {display: none;}
 #related-posts { margin: 10px 0px; background-color: #eee; }
#related-posts h2 { letter-spacing: 1px; font-size: 18px; color: #222; margin-bottom: 10px; position: relative; left: 10px; top: 10px; }
#related-posts a { position: relative; bottom: 5px; font-size: 15px; color: #666; text-transform: uppercase; }
#related-posts a:hover { text-decoration: none; color: #555; }
#related-posts ul { list-style-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTVlvebv0a2xQg2ltkYJ9QKIcz6G6YWsLUHAbbLLjvjvAv8qsQ_xPmQx6xu8nOiQwLE_JV3IZhyphenhyphenjHk99LkoZQ_VcCmPADspTB3-8D34UuGbF_-hWZnw85zrpddt9fQ9ncFC3rNMUv9EM/s1600/rsz_logo-favicon-large.png&#39;); margin: 0 0 0px 0; padding: 5px; position: relative; left: 30px; }
#related-posts li { padding: 0%; margin-bottom: 7px; width: 94%; border-bottom: 1px dashed #666; }
#related-posts li:hover { font-weight:bold; }
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 5: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 15px;}
#related-posts a {font-size: 14px; color: #fff;text-transform: capitalize;text-decoration:none;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts ul {list-style-type: none;}
#related-posts li {border-radius: 2px;padding: 10px;margin-top: 3px;background-color: #777777;    border: 1px solid #777777;}
#about {position: absolute;right: 1%;bottom: 50px;font-weight: bold;}
#related-posts li:hover {background: #F4F4F4;border: 1px solid #3079ED;background-color: #4D90F0;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>

</b:if>

Style 6:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 12px;}
#related-posts li {font-size: 15px;}
#about {position: absolute;right: 1%;bottom: 65px;font-weight: bold;}
#related-posts a,a:hover {text-decoration:none;color: #2288bb;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Step 5: Now search for below piece of code:

<div class='post-footer'>

Step 6: Copy below code and paste it just above the above code:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href="http://101helper.blogspot.com/2015/08/linktext-only-related-posts-widget-for-blogger.html" id="about" rel="nofollow" style="color: #888;">101Helper</a></div></b:if>

You may find <div class='post-footer'> several times but you have to paste above code above the second one.

Step 7: Click on save template and you are done!

Note: Make sure to label every post of your blog otherwise this widget will not work.

Customization:

Number of posts:

To change number of posts change 6 with desired number of posts in maxresults=6

Title of related posts:

To change title of your related posts widget just replace "You Might Also Like Reading" with your desired title.

How To Show Simple Related Posts Widget In Blogger Mobile Site Under Posts?

If you are wishing to show show a simple related posts widget below your posts in mobile view too then follow below steps. Don't worry it won't effect your mobile site speed! You don't need to follow all steps again, once you have installed this widget in your desktop site then you just have to use the code of step 6 with a little bit changes(I have made). So follow below steps

See Live Demo

Step 1: Optimize your blog for mobiles first (Use Custom Blogger Mobile Template).

To use blogger custom template go to Blogger Dashboard > Template > Click on Blogger Mobile Settings Icon as shown in below picture.

Now switch your mobile template to Custom.

Step 2: Copy below code:

<b:if cond='data:blog.isMobile == &quot;true&quot;'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href="http://101helper.blogspot.com/2015/08/linktext-only-related-posts-widget-for-blogger.html" id="about" rel="nofollow" style="color: #888;">101Helper</a></div></b:if></b:if>

Step 3: Go to template > Edit Html and find below piece of code in your template:

<b:if cond='data:top.showMobileShare'>

Step 4: After finding <b:if cond='data:top.showMobileShare'> scroll a little bit up and find below code:

<div class='post-footer'>

Step 5: Just above paste the copied code(step 2).

Step 6: Click on save and you are done!

I hope you like this post and it was helpful to you. If you have any question ask me in comments. Share this post and help others. Follow and subscribe for latest blogging tutorials, gadgets, widgets, tips and tricks. Thanks for visiting 101Helper.

Search tags: Simple related posts widget blogger,Related posts widget for blogger,stylish related posts widget,links,text only related posts widget,101helper blogger gadgets

Read More

How To Add Smart Search Box In Blogger

Swiftype smart search box for blogger blogs

Search box could be called the fuel of a blog because it runs your blog. People find their desired content through search box. As it is a very useful widget so it is available in many styles in different blogs because everybody is trying to make his blog unique from other. Although blogger has a built-in search box in the navbar as well as in widgets list but most of the blogger prefer to use customized search boxes because they look good.

Most of the search boxes are customized by CSS and some are designed by using some javascript also to enable some great features like auto-complete. 

But its not easy to use the search boxes having auto-complete feature because it needs alot of work and you have to add each suggestion manually. So advance bloggers are using advance search box like Google custom search engine. Because it has suggestion feature but it slows down your blog as well as need manual work for auto-complete suggestions. 

So this time I brought you a smart search box which has some great features. You can read these features below:

(1). It is free of cost and floats on the bottom corner of your blog.
(2). It is easily customizable.
(3). It crawls your blog automatically and show suggestions based on keywords.
(4). Easy to setup.
(5). You can use a single account for a single blog with free account. But you can upgrade to a premium account.

Don't Miss:

• How To Setup Google Custom Search Box In Two Pages In Blogger
• Search Boxes With Different Styles For Blogger
• Search Box For Blogger Mobile Site
• 10 Stylish Search Boxes For Blogger

Demo:

You can see a live version of this search box at http://trickme1.blogspot.com

How To Install Smart Search Box In Blogger:


Step 1: Go to https://swiftype.com/users/sign_up and register a free account by typing your full name, E-mail, Password and Phone number.

Step 2: Now log-in to your account here.

Step 3: Click on Create A Search Engine And 

Step 4: Enter your blog address and click on verify.

Step 5: Enter name of your search engine and click on Create Engine to proceed away.

Swiftype will start crawling and indexing your posts immediately.

Step 6: Scroll down the page and click on Install Search Engine.

Step 7: Click on Start Installation

Step 8: Customize your search engine's appearance e.g search results, number of search results etc and then click on next.

Step 9: Customize auto-complete appearance and click on next.

If you want to disable auto-complete check the Disable auto-complete option.

Step 10: Make color Customizations e.g Primary Links color and Text Highlighting color and click on save and preview. 

You can use color picker but if you want to choose a specific color and get its code then use 101Helper color picker.

Step 11: See preview of your search box and click on save.

Step 12: Its almost done now just scroll down the page and click on Activate Swiftype.

Step 13: Copy the code of your Swiftype search engine.

Step 14: Go to blogger dashboard and navigate to template > edit html.

Step 15: Click inside the code and hit Ctrl+F.

Step 16: Type </head> and hit enter.

Step 17: Just above it paste the copied code as shown in above image.

Step 18: Click on save template and finally you are done!

How is this post? Is this gadget working in your blog properly? Please give me your feedback by leaving a comment below. If you have any problem in above steps feel free to ask me. 

Follow and subscribe to our news letter for latest updates. Share this post with others and help us spread our voice.

Search Tags: How To Add Smart Search Box In Blogger, Aut-complete search box, Smart blogger gadgets and widgets, 101Helper blogger gadgets tutorials, Smart search box blogger.

Read More