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.
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/AVvXsEhsz47HL5bR_opvR_0QOJCb1DXez9xXJuuoOl68_9B6mECTWJgkPRRe3d7vieOXph6szLSzCfkce8kQYyy2AY_ebnqwmbN7vjktsATjgeCggKS5y7G0_iHxkkS_PWecUsLJqPgm3u1QFbY/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('hover');' 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/AVvXsEgAzCX98J9ffNqsc1TLJPq2nTVYg9kiFGr56212riAumR4Oei2mS_cgqgC2Ve02QeGOiAI6H1uwbHPbCdxVkuaaX10qcKiZxVfBsxsdORiKddFVpW8HFKL5KHyn2YvMzZSOzK7WYk6g84Y/s1600/0B-3SIKm-BBF_bGZzNkFGV09BazQ.png
(2). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirC8AL4X4g29cASOnrYaNFEzxw2wE0Gc9vyUdtr1XoMuH2-VcH9nE6RcWq3QpkDZAzMyl7puWNtfykDN5nzPs3gcBRpgxlrwLHrFnSMPlcrJwe1IcAAvA_AaCv46Ghrz4TPrppqeRqyfg/s1600/0B-3SIKm-BBF_M0xheUVjOFRUZVU.png
(3). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9HnVRDuBliMlyD2yq7WeQo0xAEdMREEJwcc1PT_xITopLCdHrAvlnjcFERSZQzXQw113eE1N8TOAiRDsDNrdwn8PfsVrwSFp7gkwyCAlmALsjh-vjy_MlocWmHNCdj2WL3eQmpo0Ru4/s1600/0B-3SIKm-BBF_NHgyQkZMMk9UcVU.png
(4). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWZuj4sjYXOrwHThYPzyR3HGOUnBfL8vLDv0vpo2FQbWXxcye_hCGuqXnXjbaImDYDhu0DSerKS06-eIY81JUR2SJWFlxBKl8W6TTCm6OWd8egwCrxnQR1outpkHj9OaTUaUpSv4Njks/s1600/0B-3SIKm-BBF_RWRGYzY2WXVRQzg.png
(5). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDibq63HSR0ODneFrIJ_rhhfpiqlBgQtWiuaS-DvQTvGJT8LTkjcSUzIYpEUIMlpJwNdO_zt6AEnI03Zpp47m2GzwYKQsS01ieFI4a6R_DoyrBNo7ywiDK6W-ZmMldaAm42nJaKdo7znk/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.
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/AVvXsEhsz47HL5bR_opvR_0QOJCb1DXez9xXJuuoOl68_9B6mECTWJgkPRRe3d7vieOXph6szLSzCfkce8kQYyy2AY_ebnqwmbN7vjktsATjgeCggKS5y7G0_iHxkkS_PWecUsLJqPgm3u1QFbY/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('hover');' 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/AVvXsEgAzCX98J9ffNqsc1TLJPq2nTVYg9kiFGr56212riAumR4Oei2mS_cgqgC2Ve02QeGOiAI6H1uwbHPbCdxVkuaaX10qcKiZxVfBsxsdORiKddFVpW8HFKL5KHyn2YvMzZSOzK7WYk6g84Y/s1600/0B-3SIKm-BBF_bGZzNkFGV09BazQ.png
(2). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirC8AL4X4g29cASOnrYaNFEzxw2wE0Gc9vyUdtr1XoMuH2-VcH9nE6RcWq3QpkDZAzMyl7puWNtfykDN5nzPs3gcBRpgxlrwLHrFnSMPlcrJwe1IcAAvA_AaCv46Ghrz4TPrppqeRqyfg/s1600/0B-3SIKm-BBF_M0xheUVjOFRUZVU.png
(3). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9HnVRDuBliMlyD2yq7WeQo0xAEdMREEJwcc1PT_xITopLCdHrAvlnjcFERSZQzXQw113eE1N8TOAiRDsDNrdwn8PfsVrwSFp7gkwyCAlmALsjh-vjy_MlocWmHNCdj2WL3eQmpo0Ru4/s1600/0B-3SIKm-BBF_NHgyQkZMMk9UcVU.png
(4). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWZuj4sjYXOrwHThYPzyR3HGOUnBfL8vLDv0vpo2FQbWXxcye_hCGuqXnXjbaImDYDhu0DSerKS06-eIY81JUR2SJWFlxBKl8W6TTCm6OWd8egwCrxnQR1outpkHj9OaTUaUpSv4Njks/s1600/0B-3SIKm-BBF_RWRGYzY2WXVRQzg.png
(5). https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDibq63HSR0ODneFrIJ_rhhfpiqlBgQtWiuaS-DvQTvGJT8LTkjcSUzIYpEUIMlpJwNdO_zt6AEnI03Zpp47m2GzwYKQsS01ieFI4a6R_DoyrBNo7ywiDK6W-ZmMldaAm42nJaKdo7znk/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.
0 Response to "Grabable Responsive Promotion Bubble Gadget For Blogger"
Posting Komentar