Cassol Gadget News, NCK Dongle SPD, Video & Photo Gallery, latest Android Marshmallow, Falcon Box Latest Version, Samsung Galaxy, Infinix Stock Roms, stock firmware

Sabtu, 24 Oktober 2015

How To Create CSS Expandable Button in blogger

How To Create CSS Expandable Button in blogger - every day I always pay attention to many brands that compete in the field of technology, every day they always find new things that are useful for our lives, on blogs Cassol Gadget News we will review new products from many brands in this world, now we will discuss first about How To Create CSS Expandable Button in blogger please refer to the complete information we will convey:

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...



thank you for reading How To Create CSS Expandable Button in blogger

hopefully information about How To Create CSS Expandable Button in blogger can give you the knowledge of gadget technology that keeps growing and you can find technogical products that suits your needs.

you have finished reading article How To Create CSS Expandable Button in blogger if tone intend to share or just bookmark please use link https://rudythecassol.blogspot.com/2015/10/how-to-create-css-expandable-button-in.html.

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

Related : How To Create CSS Expandable Button in blogger

0 komentar:

Posting Komentar