Widget Subscribe Mashable Style untuk Blogger atau blogspot. Widget subscribe untuk blogger ala mashable
ini menjadi salah satu widget populer di kalangan blogger. Memang sih
style nya elegant dan sangat menarik. Kali saya akan share cara membuat wiget subscribe ala mashable ini, caranya mungkin sama dengan cara membuat widget search box, widget recent post
dll, yang beda hanya kodenya saja hehehe. Oh ya ngomong-ngomong sudah
tahu belum situs mashable? kwkwkw, kalau belum tahu silahkan cek sendiri
di www.mashable.com
Keterangan :
Cara membuat widget Subscribe ala Mashable
- Langkah pertama silahkan login blog anda kemudian ke halaman edit Design
- Selanjutnya silahkan add gadged baru dan pilih HTML / Javascript
- Kalau sudah silahkan paste kode barikut ke dalam widget baru tersebut
<style>
/* Social Widget */
#B-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
border-bottom:0;
}
.googleplus {
background: #fff;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 80px;}
.g-plusone { float: left;}
.twitter {
background: #fff;
padding: 5px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: #ff9b00;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:5px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
backfround: #ff9b00;
-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 260px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cp0CigyU8hAVh-hAM6ErEGvjeElxfVKccblHgEDu8LkQSkZkxHjbaGXWj3MOafrfyR5LnwlD749D3Ca0Wkhq5tTIDG4Fojl5SzSNi3lVZh80-XGeYAREPQakESOgkqeIQMbUS1oViGY/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhFvdjKXrSwwls0MaUXB04bYcU2TYPfVy9KIsofzMorrWgavsbLa8JNvTtYnuaANZSmPFvuulqHqRkWjuLuir2YGK4GwBITE8tyqRLWQDvFYpjnkF9VZB51maLz2fHAzaGI9czF4sTtQ/s400/facebook.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgz_QKN85fsUAN2vd6hLVoYFToTyV5qoKpOrLF1Bjq5CeJAEJTGib753vxjx4KeTnUdmjZg_mKxm58DJgTsgKzoiOZSgDMTzU07HOmpZ7XS683pMlVBZllkbvqG9LeQwSAyKzKQBv9JfY/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="282864185058662" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0" css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=BamzUs&show_count=&
show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BamzUs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if (this.value==')this.value=this.defaultValue;" />
<input type="hidden" value="BamzUs" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/BamzUs" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/Bamz.Us" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/107316055823938290681" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.bamz.us" target="_blank" >Template Blogger</a></span></div></div>
<!-- End Widget --> </div>
Keterangan :
- <fb:fan profile_id="282864185058662" : ganti kode merah dengan Id fan Page facebook anda
- screen_name=BamzUs : Ganti dengan username twitter anda
- http://feedburner.google.com/fb/a/mailverify?uri=BamzUs : isi dengan Feedburner anda
- http://feeds.feedburner.com/BamzUs : id Feedburner
- http://www.facebook.com/Bamz.Us : Id fans page facebook
- http://plus.google.com/107316055823938290681 ID google Plus
