BlogTariff


To make reader sticky to your blogger blog by installing small stylish Floating menu. This menu also know as "Spoiler Menu" totally different look and style when compare with other menu styles.

Advantages for adding this "Spoiler Menu"

You can drag visitors/readers concentration and force to tempt the visitors/readers to click on this menu, in this way alternatively you can can increase number of pageviews and the ads displayed on your blog their CTR rate also increases, there are more chances for click on Ads to boost you revenue.
Some times visitors/readers won't focus on upper side menu, by adding this menu to your blogger blog attracts readers and crafts better clicking opitons for better ranking.

Let's begin tutorials "How to add Floating menu for blogger"

Sign into your blogger account
Click on "Design (Layout in the New Blogger interface) - Page Elements"
Click on "Add a Gadget" select "HTML/Javascript" widget
Copy the below code and paste it

<style text-type="CSS">
#btfmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#btfmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#btfmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}

#btfmenu li{list-style:none;margin:0 0 5px;padding:0;} #btfmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#btfmenu li a:hover{
color:#fff;}

#btfmenu:hover{
z-index:5;
height:175px;
</style>

<div id="btfmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">BTF-1</a></li>
<li><a href="#">BTF-2</a></li>
<li><a href="#">BTF-3</a></li>
<li><a href="#">BTF-4</a></li>
<li><a href="#">BTF-5</a></li>
</ul>
</div>

Customization:-

If you need to Replace the position change from to "Right" to Left or bottom.
If you need to Replace the background color "#000" with your choice color by using our Color code chart
Replace "BTF-1 to 5" with your post title URL.
After Successful adding and customization of the above code,
Now "Save the Widget" and Template to preview, how "Floating menu works"

Acknowlegment:-

If you enjoyed this post let know how you ejoyed, if you're facing any type of difficult then bring to us we try for you.Happily blogging.

Post a Comment Gmail ID

Do not Try to Add Spam Comments

 
Top