Toggle Text box widget for Blogger

Posted on December 07, 2014 by 
Toggle Text box widget for Blogger
For mentioning an article’s some important phrase, author credit or just highlight some special text in post we often use Toggle text box widget (Click on a line or button, expands and expose to lot’s of embedded text). Toggle text box widget usually comes up with Wordpress theme package (like Thesis theme, Elegant Themes) what can be activate through ‘text editor’. But for ‘Blogger’ there is no such function like Toggle box. So I wanted to make one for Blogger. This Toggle box widget basically work like Accordion and they powered by jquery for creating smooth effect. This one I developed it do not use jquery felt not necessary and slow down site, made with just CSS, HTML5 and CSS3, cool designed, light weighted and responsive. Let’s see how it looks like and how to add it in Blogger.  

Toggle text box widget for Blogger

Demo:- (Click here)

Codes for copy-

CSS

/*crawlist.net css starts*/
.ks-toggle-box{
    width: 600px;
    text-align: left;
}
.ks-toggle-box label{
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    font-family: 'Droid Serif', serif;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1);
}
.ks-toggle-box label:hover{
    background: #fff;
}
.ks-toggle-box input:checked + label,
.ks-toggle-box input:checked + label:hover{
    background:#666;
    color:#fff;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.ks-toggle-box label:hover:after,
.ks-toggle-box input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;   
}

.ks-toggle-box input{
    display: none;
}
.ks-toggle-box article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ks-toggle-box article p{
    font-family: 'Droid Serif', serif;
    color: #777;
    font-size: 16px;
    padding:20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
   
}
.ks-toggle-box input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ks-toggle-box input:checked ~ article.ac-small{
    height:300px;
    }
/*crawlist.net css ends*/


HTML

<!-- crawlist.net toggle starts -->
<section class="ks-toggle-box" style="width:80%; margin:auto">
  <div>
    <input id="ac-1" name="accordion-1" type="checkbox" />
    <label for="ac-1"> Heading </label>
    <article class="ac-small">
      <p>
Paragraph
</p>
    </article>
  </div>
</section>
<!-- crawlist.net toggle ends-->


How to add it in Blogger

This widget set up has four steps, read on-

1. Back up your template
  • Log in to your blogger, select your blog, 
  • Select 'Template' tab option, click 'backup/restore' from upper right corner. 
  • Download full template and save it on your pc's Hard drive

2. Goodies installing
  • Go to ‘Template’ tab, select ‘Edit HTML’, 
  • Search (Using CTRL+F or CMD+F) into code snippet </head>
  • Above </head> copy and paste this line of code

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>


 3. Installing CSS
  • Go to ‘Template’ tab, select ‘Edit HTML’, 
  • Search (Using CTRL+F or CMD+F) into code snippet ]]>< 
  • Above ]]>< copy and paste CSS part

4. Setting up HTML
  • During editing post ‘post editor’s upper side (compose/HTML) 
  • Select HTML/switch to HTML, and copy paste HTML part, and configure, 
  • Red text replace with your Heading, Pink text replace with your hidden paragraph. 
  • After configuring switch to ‘compose’ part.
  • Done, check out your post now ;)

Compatibility
This toggle text box widget is compatible with all major web browser and compatible with all standard designed Templates.

So add this Toggle text box widget to your Blogger blog easily, make your blog post trendier and style-full, any problem or feedback please leave with comment. New unique widget will be release soon stay subscribed. Chill….