Cara membuat judul widget jika di sentuh akan terbuka pada blog

lJika sobat blogger belom jelas seperti apa widget yang di sentuh akan terbuka dengan sendirinya,

 lihat contoh widget di  bawah ini:

Like Us

Like Us

Detailnya seperti ini:

<div class="systemBox">

<h2> Like Us </h2><center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-Zona-Mig33-internet%2F327653677253564&amp;width=300&amp;height=300&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=ff0000&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowtransparency="true"></iframe></center><h3>Like Us</h3>

</div>

<style>

.systemBox {

background:transparent;

width:270px;

height:50px;

overflow:hidden;

padding:5px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

-webkit-hyphens: auto;

-moz-hyphens: auto;

hyphens: auto;

-moz-box-shadow: 0 0 5px hsla(0,93%,9%,.7);

-webkit-box-shadow: 0 0 5px hsla(0,93%,9%,.7);

box-shadow: 0 0 5px hsla(0,93%,9%,.7);

margin:0 auto;

}

.systemBox p {

-webkit-hyphens: auto;

-moz-hyphens: auto;

hyphens: auto;

padding-top:20px

}

.systemBox:hover {

background:transparent;

height:100%;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

-moz-box-shadow: 0 0 5px blue;

-webkit-box-shadow: 0 0 5px blue;

box-shadow: 0 0 5px blue;

}

.systemBox:hover h2 {

margin-top:-60px;

}

.systemBox:hover h3 {

margin-top:50px;

padding:5px;

text-align:center;

font-size:20px;

}

.systemBox h2 {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdBJbLvsSrFo8CAHnMK4ewPOtSDdDzeO5U_Ok7AFSYpWIORrq_ncqyfQZDEmGoxpyAvu0AZKtnMIOSZWP02ydrkocZdYnqzSxo6EsMiQyJ3mrpYFnM9x-clqyXLK95jLLbNqcnB_1SfkE/) 0 0 no-repeat;

color:black;

height:28px;

padding:5px;

text-align:center;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);

box-shadow: 0 0 7px hsla(33,50%,43%,.8);

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

}

.systemBox h3 {

margin-top:-195px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdBJbLvsSrFo8CAHnMK4ewPOtSDdDzeO5U_Ok7AFSYpWIORrq_ncqyfQZDEmGoxpyAvu0AZKtnMIOSZWP02ydrkocZdYnqzSxo6EsMiQyJ3mrpYFnM9x-clqyXLK95jLLbNqcnB_1SfkE/) 0 0 no-repeat;

color:black;

height:28px;

padding:5px;

text-align:center;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);

box-shadow: 0 0 7px hsla(33,50%,43%,.8);

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

}

</style>

Teks berwarna yang harus sobat ganti.

Demikian cara membuat widget jika di sentuh akan terbuka pada blog atau sobat blogger  lain menyebutnya dengan efek  elastis.

Semoga tutorialnya bermanfaat.