lJika sobat blogger belom jelas seperti apa widget yang di sentuh akan terbuka dengan sendirinya,
lihat contoh widget di bawah ini:
Detailnya seperti 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&width=300&height=300&colorscheme=dark&show_faces=true&border_color=ff0000&stream=false&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/AVvXsEifnk0UMOTHaOtmz2VIxR5oPldPLmcAecfc_3nbNHsAPYW8-gl-4joIq2ITEOgmvKPnqWuh6Q31HqOFW7G2zzJnBNtJsPN7lexthUp7acrOJL3Xbu_y77a-LuMvis8iIlmLyQ7-MrXcbjvk/) 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/AVvXsEifnk0UMOTHaOtmz2VIxR5oPldPLmcAecfc_3nbNHsAPYW8-gl-4joIq2ITEOgmvKPnqWuh6Q31HqOFW7G2zzJnBNtJsPN7lexthUp7acrOJL3Xbu_y77a-LuMvis8iIlmLyQ7-MrXcbjvk/) 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.


Word
PowerPoint
OneNote
Outlook
Akses
Publisher
InfoPath
SharePoint Workspace