Widget Subscribe Blogspot Bubble Style

Salam blogger mania....
buat teman teman blogger yang menginginkan tampilan subscribe menarik dengan tampilan social media dan image profil admin, silahkan simak tutorial cara pemasangannya dibawah ini, untuk melihat bagaimana tampilannya silahkan klik demo dibawah, bila anda tertarik silahkan pasang codenya pada template anda...

Link tampilan : Demo subscribe blogspot
Link Sumber : Widget Subscribe

Pemasangan code Subscribe Blogspot

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code
   
   Code:

   ]]></b:skin>
   

4. Copy Code script CSS dibawah ini, pastekan diatas code
   
   Code:

   ]]></b:skin>
   

   tadi atau bila template blog anda memakai
   
   Code:

   </style>
   

   silahkan pastekan kode CSSnya sebelum code
   
   Code:

   </style>
   

   template anda. Edit code tersebut dan save template anda.

Spoiler

Code:

/**************************
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('http://3.bp.blogspot.com/-AsnKz0x8BpQ/UoensPK6VYI/AAAAAAAACCo/xghZjQIgXuE/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);}

Install tag html Subscribe Blogspot

1. Di dasbor anda silahkan pilih " Tata Letak " pada menu dasbor
2. Klik " Tambahkan Gadged " maka sebuah halaman akan muncul
3. Pilih widget " HTML / Javascript " yang berlogo
   
   Code:

   </>
   

4. Copy dan pastekan code HTML dibawah ini kemudian silahkan anda edit, ganti semua link yang ada, bila anda memerlukan informasi lainnya silahkan kunjungi halaman sumbernya, terimakasih salam blogger...

Spoiler

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="http://4.bp.blogspot.com/-uqdkHzEv0ww/UrFJu22Ur2I/AAAAAAAACGY/go2sx_-GBN0/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="http://2.bp.blogspot.com/-l1SRbPTHAsQ/UrFJyc_5FAI/AAAAAAAACGo/gcapAexj3_A/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="http://3.bp.blogspot.com/--LWudJfcADA/UrFJ1T3u6nI/AAAAAAAACGw/4VCrwmXhefA/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="http://4.bp.blogspot.com/-rmOQYKSH5MM/UrFJv-vmyEI/AAAAAAAACGg/-xUU2XcONNQ/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>

 

wah keren nih langsung ane

wah keren nih langsung ane praktekin ah

 

keren tuh, btw warna nya bia

keren tuh, btw warna nya bia di ganti gak gan ?

 

Keren...

Keren...
kalo soal widget emang mas @Rivaiblog ahlinya

 

Silahkan gan...

terimakasih....

 

Bisa gan...

bisa gan silahkan cari code yang bersngkutan dengan " color " atau " background "

 

heheheh...

heheh ngak juga gan saya hanya sebatas debu saja di dunia blogging...
thx atas pendapatnya gan.. salam...