Showing posts with label Blogging Widget. Show all posts
Showing posts with label Blogging Widget. Show all posts

How to make a Slide Menu

Hi, Blogger! Now, I will
teach you, about
How To Make A Slide Menu. Maybe you don't
know, what is Slide
Menu? These are menus that will slide out from the sides of the page. So, if
you want to add this
menu to your blog, you
have to follow the steps.

1. Log in to your blogger
Dashboard

2. Go to Page Elements --> Add Gadget
3. Choose HTML/JavaScript
4. Add the code below
into the place:

<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
height:100px;
width:30px; float:left;
cursor:pointer;
background:url('http://
lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png

') no-repeat;
}
.hitsukeFXcontent
{ float:left;
border:2px solid
#A5BD51;
background:#F5F5F5;
padding:10px;
}
</style> <script
type="text/javascript">
function
showHidehitsukeFX(){
var hitsukeFX =
document.getElementById
("hitsukeFX");
var w =
hitsukeFX.offsetWidth;
hitsukeFX.opened ?
movehitsukeFX(0, 30-
w) : movehitsukeFX(20-
w, 0);
hitsukeFX.opened = !
hitsukeFX.opened;
}
function movehitsukeFX
(x0, xf){ var hitsukeFX
=
document.getElementById
("hitsukeFX"); var dx =
Math.abs(x0-xf) > 10 ?
5 : 1; var dir = xf>x0 ?
1 : -1; var x = x0 + dx
* dir;
hitsukeFX.style.right =
x.toString() + "px"; if
(x0!=xf){setTimeout
("movehitsukeFX("+x+",
"+xf+")", 10);} }
</script>
<div id="hitsukeFX">
<div
class="hitsukeFXtab"
onclick="
showHidehitsukeFX()">
</div>
<div
class="hitsukeFXcontent
">
<!-- INSERT YOUR CODE HERE -->
</div>
</div>
</div>
<script type="text/
javascript"> var
hitsukeFX =
document.getElementById
("hitsukeFX");
hitsukeFX.style.right =
(40-
hitsukeFX.offsetWidth).
toString() + "px"; </
script>



* You must change
<-- INSERT YOUR CODE HERE --> with your widget code
* Change the image address
5. Then...Save it!

Join the family by like our page:
www.facebook.com/MaxkdaveBlog
Happy Blogging!

Adding Floating Spoiler Menu to Blogger

Hi, buddy, I want to show you how to add floating spoiler menu. With this spoiler menu, once your readers/visitors put the cursor on this menu, the menu will slide out. You can add it as a design on your blog to beautify your blog. Now, if you want to add floating spoiler menu into your blog, just follow the steps below.

HOW TO ADD FLOATING SPOILER MENU

1. Log in to your Blogger Dashboard
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/JavaScript"
4. Add the code below

<style text-type="CSS">
#bmenu{
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 .5sease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#bmenu li a:hover{
color:#fff;}
#bmenu:hover{
z-index:5;
height:175px;
</style>
<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="URL">MTECH1</a></li>
<li><a href="URL">MTECH2</a></li>
<li><a href="URL">MTECH3</a></li>
<li><a href="URL">MTECH4</a></li>
<li><a href="URL">MTECH5</a></li>
</ul>
</div>

Change the following:
TITLE: Change to your title
URL: Change to your link
MTECH1-5: Change it to your link title

5. Click SAVE

Join the family by like our facebook page:
www.facebook.com/maxkdaveblog
Happy Blogging!