Home » » Cara Membuat Subcribe Sidebar v.2

Cara Membuat Subcribe Sidebar v.2

Di tulis oleh Ifan Prabowo pada Sunday, March 11, 2012 | 10:27 PM

Hai sobat..!! Setelah kita share Subcribe Sidebar Menarik, kini bagaimana kalau kita share widget subcribe tapi yang berbeda di lengkapi dengan google translatenya lagi. Berikut demonya sobat :




Sudah terbayang belum sobat, ini widget hasil modifan. jadi mohon maaf jika ada yang kurang. silahkan di rombak ulang sama sobat deh. kalau kurang jelas bisa tanyakan ke saya kok.... Ini kodenya sobat :

<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/AVvXsEjw8caiXwuBtxjoDPQj3rW9CY0BVHHiW4OGBIHr5_eKx9ajrwcLYtYRxFEt-Z5mwh_1r1ak2AyaB-v5BMThrNUbggT9G4S0MFTvrDT-d-3smA2jzM_RAAXyneiwzJupxhUATCjSgMCxx2A/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://suryaworld.edu.in/images/facebook_small.gif) 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/AVvXsEgGML3cIIDTl_JYqR2l80ogO8mJhqJdADV9cabwg8cX5HdH4ZmzjvkylEP-5IoCoCAtNZdGBApXh8XXB3y1pphKUmQoIRLihq34n9xweUXUs8WLMO_V2ZhAHjRTDBuVXnRCqpny5u2CX18/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 id="mashable"> <center><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center></div>
<div class="fb-likebox"> <center><h3>Subcribe + Like Mahasiswa Lugu</h3></center><hr/><!-- Facebook --> <div class="fb-like" data-href="http://www.facebook.com/pages/Lugu-Group-Independence/149462678461044" data-send="false" data-width="250" data-show-faces="true"></div></div>
<div class="googleplus"> <!-- Google --> <span>Circle Me 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=ifandankaliand&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=MahasiswaLugu', '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="MahasiswaLugu" 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/MahasiswaLugu" target="_blank">RSS Feed</a> </li>
<li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/ifandankaliand" target="_blank">Facebook</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/109815156786872378130" target="_blank">Google +</a> </li>
</ul> </div>
<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div id="mashable">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mahasiswalugu.blogspot.com/2012/03/cara-membuat-subcribe-sidebar-v2.html" target="_blank" >~ Get this widget ~</a></span>
</div>
<!-- End Widget --> </div></div>


Edit :
Ganti http://www.facebook.com/pages/Lugu-Group-Independence/149462678461044 dengan alamat group facebook sobat.

Ganti ifandankaliand dengan username twitter sobat.

Ganti MahasiswaLugu dengan ID feedburner sobat.

Ganti ifandankaliand dengan ID facebook sobat.

Ganti 109815156786872378130 dengan ID Google plus sobat.

Mudah bukan sobat untuk membuatnya. Semoga bermanfaat.
Share this article :
Baca Juga Yang Ini !!

Dapatkan artikel terbaru dari " Mahasiswa Lugu ".

Masukan Email anda disini :

Posted by Ifan Prabowo
Labels:

0 comments:

Post a Comment

:: MAHASISWA LUGU ::
Just share and save my story

Subscribe to: Post Comments (Atom)
 
Support : Maskolis | RMC | Naeza
Copyright © 2012. Mahasiswa Lugu - All Rights Reserved
Webmaster by Ifan Prabowo