/ / Cara membuat judul widget jika di sentuh akan terbuka pada blog

Cara membuat judul widget jika di sentuh akan terbuka pada blog

author: -
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/AVvXsEhrHavhZTvaquusN878WOq3v-9D7UWRNVKL0KIRgj_fZvfs105KzwueyreEa1d5ElwQvbKB1LawgMVqqhCs8JOppSrkWAXmG-a6wlsyQbygQD5iDMa95uCZ43Rg8idv0lWGRCo8zTZJcF_U/) 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/AVvXsEhrHavhZTvaquusN878WOq3v-9D7UWRNVKL0KIRgj_fZvfs105KzwueyreEa1d5ElwQvbKB1LawgMVqqhCs8JOppSrkWAXmG-a6wlsyQbygQD5iDMa95uCZ43Rg8idv0lWGRCo8zTZJcF_U/) 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.