widget subscribe bubble style

Widget subscribe bubble style - tutorial cara membuat widget subscribe bubble style di blogspot. widget subscribe bubble style ini memiliki tampilan yang menarik, dan memiliki fasilitas widget social media ditambah dengan foto admin, nah bila anda ingin melihat tampilan widget subscribe bubble style silahkan klik demo dibawah ini , bila anda tertarik memasangnya silahkan lihat code widget subscribe bubble style dibawah ini, langsung saja menuju TKP..

Demo

Code CSS here..

/**************************
Name : subscribe bubble style
Update : Rabu 19 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
.subscribe-bubble-style {
width: 300px; /* lebar widget */
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
line-height: normal;
text-align: left;}
.subscribe-bubble-style p {font-size: 11px;margin: 0 0 10px 0;font-weight: normal;}
.subscribe-bubble-style a {color: #0000CC;text-decoration: none;float: right;text-transform: uppercase;font-weight: bold;}
.subscribe-bubble-style a:hover {color: #333333;}
.subscribe-bubble-style .titles{font-size: 12px;font-weight: bold;color: #FFFF00;margin: 0;}
.subscribe-bubble-style .forms {
position:relative;
padding:5px;
margin: 0px 0 10px 0;
height: 100px;
color:#ccc;
border-radius:5px;
background-color: #344558;}
.subscribe-bubble-style .forms:after {
content:"";
display:block;
position:absolute;
top: 110px;
left: 30px;
width:0;
height:0;
border:15px solid transparent;
border-top-color:#344558;}
.subscribe-bubble-style .forms .email-group input {
display:block;
float:left;
width:68%;
margin:0 5px 0 0;
padding:12px 10px 11px 10px;
border:1px solid #249FEA;
border-radius:4px;
font-size:14px;
box-shadow:none;
color: #999999;}
.subscribe-bubble-style .forms .button {
font-family: Helvetica,Arial,sans-serif;
color: rgb(255, 255, 255);
background-color: #249FEA;
display: inline-block;
white-space: nowrap;
height: 42px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border: 0px none;
border-radius: 4px 4px 4px 4px;}
.subscribe-bubble-style .forms .button:hover{opacity:.8;color: #000000;}
.subscribe-bubble-style .kiri{width: 20%;margin: 0;padding: 5px;float: left;}
.subscribe-bubble-style .kanan{width: 70%;margin: 0;padding: 5px;float: right;}
.subscribe-bubble-style .icon {width: 100%;margin:0 auto;padding:0 10px;}
.subscribe-bubble-style .icon ul li {margin:0 auto;}
.subscribe-bubble-style .icon li {display: inline;float: left;padding:0 10px;}
.subscribe-bubble-style .image-profil {display: block;width: 70px;height: 70px;border: 5px solid #fff;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhli0eeKkwqQSmBnFcU-alizVvkiCVRqLf6sz3zYYy8Om4GomriSvZ79_poF-8gJt7rbTosK5IP6PqMfIu95fGfbWgjXHnpClYNfa4WdfVY839bTx_X38VEfDmonqeSCOrqBuwF0KpjkQE/s1600/s.jpg') no-repeat center center;
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);}
/* subscribe bubble style - Ide Blogspot */

Code HTML here..

<!-- subscribe bubble style - Ide Blogspot start code -->
<div class="subscribe-bubble-style">
<div class="forms"><h2 class="titles">Free Update article now..!!</h2><p>Silahkan daftarkan email anda untuk mendapatkan update artikel gratis dari blog ini...</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onSubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=idblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><div class="email-group"><input type="email" id="email" name="email" onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' value='Enter Your Email Address...'/><input name="uri" type="hidden" value="idblogspot" /><input name="loc" type="hidden" value="en_US" /><button class="button" type="submit"> Subscribe </button>
</div></form></div><div class="kiri"><div class="image-profil"></div></div>
<div class="kanan"><div><ul class="icon">
<li><a href='https://www.google.com/+RivaiSilaban' target="_blank" rel="nofollow" title="GOOGLE PLUS"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbyoIwflPq7ns0r7r05S82D9kZvYNyXXErosMSUauhaf1Ml9oSRM-WRes9XZxSoe9m0eyPBW1uSka0PFo0M7c8xdm9cxiLBakZtkHxmWysTfi1WXvvrTA82vG39KRrQsYN2VeQ5Z9MbzJ/s1600/gplus5.png" title="GOOGLE PLUS"/></a></li>
<li><a href='https://www.facebook.com/rivaisilaban' target="_blank" rel="nofollow" title="FACEBOOK"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFiSjBvfiTbsWrQRV-c-Zz7KnI_eTnH_c7Gs1N7F4SFaYwLZAlxQrh0rdksz5npZMSzecN9dRpILA1XOk3BavuJB3EsDTWlHZngQioC9iot3_RXhps8Xx9jNchycVHK84o00K8Z4g95PF/s1600/fb5.png" title="FACEBOOK"/></a></li>
<li><a href='https://twitter.com/Rivai_Silaban' target="_blank" rel="nofollow" title="twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNZYM_mFRWhcY5DscN8iXmJZoHB8gCpMAWeDkyFrrYbbZOTB1YQRq7hkLKbsHr2z0DTy06QHi0OezkkPdXvg7gJHqeURL1xrS9om1KPBxLUy8rLUejEUZbVToAXT69BLPkq81pv1dHcT9/s1600/twit5.png" title="TWITTER"/></a></li>
<li><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="TWITTER"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxnTpTcNcYT_XTC4wZ5AvugibExV89WC_nV__RiXhy_-agUoppAqYkXIrkYhbAo40M-jIzSFu49M7p-8Z1fDJ18RMx_2oKQthw4daumUYNP_x4W69gvkCMKFlh7UULsfc-33_-X8iLvVR/s1600/rss5.png" title="RSS"/></a></li>
</ul></div><div style="clear:both"/>
<div style="padding: 10px;"><p>Saya seorang newbie dalam dunia blogging, yang sangat menggemari bahasa pemprograman..<span><a href="http://www.ideblogspot.com/" target="_blank" rel="nofollow" title="Lihat Profil">+ See More +</a></span></p></div></div></div>
<!-- subscribe bubble style - Ide Blogspot end code -->

Code diatas merupakan code CSS dan code tag HTML dari widget subscribe bubble style yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara pemasangan widget subscribe bubble style....

http://www.ideblogspot.com/2014/02/subscribe-bubble-style.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:31 PM