Widget Subscribe Mashable Style untuk Blogger

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
Widget Subscribe Mashable Style Blogger

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('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/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 ('http://2.bp.blogspot.com/_C6KkooKXCEw/SjNkb64JO4I/AAAAAAAAEbI/oALk2rlXwdg/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(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/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&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=BamzUs&amp;show_count=&amp;
show_screen_name=&amp;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=&#39;&#39;;" onblur="if (this.value==&#39;&#29;)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

Widget Subscribe Mashable Style untuk Blogger

Oh yah widget ini berukuran lebar 300px, kalau anda ingin memasang widget ini dengan ukuran 200px misalnya, silahkan ganti yang warna biru! Selamat mencoba widget subscribe ala mashable ini

Info : Bamz Magazine Blogger Template sudah update!

33 comments:

AbeebAreedana mengatakan...

Baguss ..

FikriShare.Com - Free Download Software Full Version mengatakan...

widget ini sangat keren abis gan.

Admin Ovoo mengatakan...

Gan , ane mau tanya ya :D Cara ngebuat supaya Search Engine Blog mencari berdasarkan yang kita inginkan gimana ? Umpama kita ingin menyediakan Search Engine Untuk Mencari Lirik Lagu saja yang ada di blog kita ,Gimana cara buatnya ya,thanks!

Admin FikriShare.Com mengatakan...

@Admin Ovoo: saya bantu menjawab ya, bila sobat membuat widget search yang disediakan oleh blogger, terdapat 3 pilihan 1. this blog (hanya dari blog sobat, 2. Linked From Here (yang membarikan link dari blog sobat), 3. The Web (dari google). jadi sobat cukup ceklis opsi 1 saja (this blog).
atau sobat membuat search manual dari google widget.

Admin Ovoo mengatakan...

@Admin FikriShare.Com : Oke Gan thanks Atas Infonya , Jadi saya pilih yang ke 2 ya? . :D

katils mengatakan...

saya harus banyak belajar neh dsni

Admin Ovoo mengatakan...

Ehh Maaaf 2 Maksutnya :D salah ketik

Admin Ovoo mengatakan...

Ehh maaf 1 Maksutnya salah ketik :D , sori spam dikit , gak sengaja ane gan

FikriShare.Com - Free Download Software Full Version mengatakan...

^_^ ada2 aja salah berulang2 :D

BamZ Gz mengatakan...

walah ada yang lagi diskusi disini rupanya kewkekw. selamat berdikusi. thank juga bantuan2nya :D

solution-u mengatakan...

makasih ya mas atas tutorialnya
^_^

aa solah mengatakan...

^makasih bang,, ane dari duLu nyari yang satu ini.. :)

Software Akuntansi Laporan Keuangan Terbaik mengatakan...

Terima kasih mas, lagi belajar blogspot, susah juga ya

adibey mengatakan...

saya kira cuma bisa di WP, ternyata buat blogspot juga bisa..makasih tutorialnya gan..

roby-gen mengatakan...

Gan,,kalo blog kita kbanyakan skrip,apa efeknya ya gan?? maklum pendatang baru nih.. :D

DIBRATA NAZAR YUDA mengatakan...

Puyeng BOS :/

angga D'abellzia mengatakan...

pusing gan masukin id fan page facebooknya
http://www.facebook.com/Bamz.Us : Id fans page facebook..
bagian mana yg dirubah gan? id nya di letakkan disebelah mana?
mohon bimbingannya?
trima kasih..

BamZ Gz mengatakan...

ganti aja http://www.facebook.com/Bamz.Us dengan url fanspage sobat. :)

empat sekawan mengatakan...

makasih gan infonya, sekalian minta ijin kopi paste buat koleksi blog saya gan.....

Com Hf mengatakan...

Mantapppppppppppp

angga D'abellzia mengatakan...

tetap kaga mau gan apa yg salah yah??
umpama http://www.facebook.com/Bamz.Us : Id fans page facebook,,
,,
lalu saya ganti dngn id saya misal ..
http://www.facebook.com/profile.php?id=105555185870688"
benar gk sperti itu gan..
maaf sbelumnya saya masi baru hehehe ^^
ada tulisan..
Could not retrieve id for the specified page. Please verify correct href was passed in...
maaf ya gan ngerepotin ^^

BamZ Gz mengatakan...

itu mah profil facebook sampean masbro. link fanspage, bukan profil facebook :)

Belajar dan berbagi mengatakan...

Gan icon facebook yg ditengah (samping icon google plus) nya kaga muncul gimana nih gan,,

roban mengatakan...

thankyu bgd info nya bos, ane coba dulu ya...
visit to my blog ya bos.. thanx

Ibo Zavasnoz mengatakan...

hail brother, saya suka widget ini, tapi untuk setting if fb fan page gimana, saya gagal terus padahal id fb sudah di coba rubah...trim

Bien's mengatakan...

nice...good, smangat Gan! and tanks ntuk semuanya

Edzar AlHamdany mengatakan...

Keren widgetnya gan, ini pake deh... hehe,, :D
http://edzar-master.blogspot.com/

WONG NDESO mengatakan...

Widget kereen nihh
Coba ahh kli ajah bisa
Maklum wong ndeso msh newbie masbroow :D

mohon bimbingannya....

Putra patiwara mengatakan...
Komentar ini telah dihapus oleh administrator blog.
kowandy mengatakan...

memang keren gan widgetnya

obat ambeien mengatakan...

terimaksih mas atas infonya

ildaf94 mengatakan...

Thanks :)

ro mengatakan...

Widget kereen nihh.
Blognya juga keren
pokoke sip deh

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih