Tech News Today, Marshmallow Custom Rom, Huawei, Run Programs, Network, Chromebook, Bank Account

Sabtu, 24 Oktober 2015

How To Create CSS Expandable Button in blogger

How To Create CSS Expandable Button in blogger - To all visitors of this blog, I say welcome and thank you for visiting the blog Tech News Today Look for all the things you need that are available on this blog. If not available, please leave suggestions and comments for the development of this blog. now we will discuss first about How To Create CSS Expandable Button in blogger we have collected a lot of information from sources to create this article, so 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...



information How To Create CSS Expandable Button in blogger has been completed in the discussion.

hopefully the article we give the title How To Create CSS Expandable Button in blogger can provide knowledge for you in living everyday life in determining the gadget that suits your needs.

you just read the article about How To Create CSS Expandable Button in blogger if this article is useful for you and want to bookmark it or share it please use the link https://sihanandi.blogspot.com/2015/10/how-to-create-css-expandable-button-in.html thank you and do not forget to comment if anyone.

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

Related : How To Create CSS Expandable Button in blogger

0 komentar:

Posting Komentar