Max Gadget, GPG Dragon Latest Version, Install Android, Sony Xperia, Xiaomi Mi Robot Vacuum, Verizon, Android Marshmallow, Network, stock firmware

Sabtu, 24 Oktober 2015

How To Create CSS Expandable Button in blogger

How To Create CSS Expandable Button in blogger - this blog we have built a few years ago and already very many blog visitors Max Gadget who are satisfied with the information we convey and we say thanks for that, we will then improve the quality of information we convey to you, well according to what you are looking for we will now discuss first about How To Create CSS Expandable Button in blogger this information we framework from various trusted sources, please see:

Articles : How To Create CSS Expandable Button in blogger
full Link : How To Create CSS Expandable Button in blogger

You can also see our article on:


How To Create CSS Expandable Button in blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3.Copy below code and paste it just before the ]]></b:skin> tag .
.leftCol {
width: 295px;
overflow: hidden;
padding: 15px 0px 0px 0px;
margin: 0px 25px 0px 0px;
float: left;
clear: both;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #94c93d;
font-size: 100%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}
.leftBoxInnerPicImg {
width: 89px;
overflow: hidden;
float: left;
padding: 0px 0px 0px 18px;
}
.leftBoxInnerPicUlWrap {
width: 167px;
overflow: hidden;
float: left;
}
.leftBoxInnerPic ul {
width: 138px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style: none;
}
.leftBoxInnerPic ul li {
color: #6699cc;
font-size: 110%;
width: 266px;
}
.leftBoxInnerPic ul li a {
color: #6699cc;
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInnerPic ul li a:hover {
color: #6699cc;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxHeading_On {
width: 295px;
height: 19px;
background: url(images/left-box-heading-on.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxFooter_Off {
width: 295px;
height: 12px;
background: url(images/left-box-footer-off.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxFooter_On {
width: 295px;
height: 12px;
background: url(images/left-box-footer-on.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInner {
width: 287px;
overflow: hidden;
margin: 0px 0px 0px 1px;
}
.leftBoxInner ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style:none;
}
.leftBoxInner ul li {
color: #6699cc;
font-size: 75%;
width: 266px;
}
.leftBoxInner ul li a {
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInner ul li a:hover {
color: #6699cc;
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}
4.Now again Scroll down to where you see </head> tag .
5.Copy below code and paste it just before the </head> tag .
<script type="text/javascript" src="Javascripts/yahoo-dom-event.js"></script>
<script type="text/javascript" src="Javascripts/animation-min.js"></script>
<script type="text/javascript" src="Javascripts/main-javascript.js"></script>
6.Now click on "save template".
7.Now go to layout- -> Page Elements and click on "add a gadget".
8.Choose "html /JavaScript" add the code given below and click save.
<div id="Layer1">
<div class="leftCol">
<div id="lhsHeader6" class="leftBoxHeading_Off" onclick="lhsAction('6',true,'T6_Effective_Behaviour_Change');">CSS Expandable Button</div>
<div id="lhsExpander6" class="leftBoxExpander">
<div id="lhsInner6" class="leftBoxInnerPic"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
<ul>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
<li><a href="">add your link here</a></li>
</ul>
</div>
</div>
<div id="lhsFooter6" class="leftBoxFooter_Off" onclick="lhsAction('6',true,'false');"></div>
</div>
</div>
</div>
You are done.
Your final results will look like this:
After click on button:

Thats all...Hope it helps.. Share with others...



so much information How To Create CSS Expandable Button in blogger

hopefully the information How To Create CSS Expandable Button in blogger that we convey can make you satisfied because it can be useful to determine the gadget according to your needs.

you just read the article titled How To Create CSS Expandable Button in blogger if you feel this information is useful and want to bookmark or share please use the link https://maxyaquos.blogspot.com/2015/10/how-to-create-css-expandable-button-in.html do not forget to go back to this blog to get more information about gadgets.

Tag :
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : How To Create CSS Expandable Button in blogger

0 komentar:

Posting Komentar