Just another free Blogger theme

Tuesday, March 26, 2013

Cara membuat widget email subscribe keren abiz

by Yuga irgi on 9:23 PM 2 comments
Untitled+picture
  Halo, sobat blogger! Posting saya kali ini, mengenai memodifikasi widget email subscribe. Tampilannya kurang lebih seperti ini :


tkp
Gimana gan, keren kan? Kalo gitu langsung saja tancap gas gaan...

1. Login blog.
2. Tata letak.
3. Add gadget.
4. HTML/Javascript.
5. Copas script dibawah ini :
<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/AVvXsEjok3GFXBHHHGzwlc-E7W09RZdUEEqj-oY8LdPc6q2Dlx6ZXi5J5bh-LxMMvH8qnT3U6qDRbQDB7n8XOckhe3BPMklUCx7j4AAXqPpf-Hwy7_U8tWRzlX8WBESdzu5oAJiaPe14CEcvGfU/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/AVvXsEgklVmrgfXLJ3P0QtAsWTw7wvu1MvGUSEiTSU4XiUPlupwK4QpVpt6rTz6el93aiQwLMpv-ewqmAC5API9m88G2vnAERQENhcDIt8m3P8JFWkkgdJrreg09Pj08zTTEQBgUG2ZlxHwQ8_A/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/AVvXsEiH3HCm62oHtdmI-I-rHamJ2n_ApkZpbuSFls4aQLfC_KWRKdr1RBPRaybK3vIwiuK-MM1hYVhyphenhyphenRx4ePE2GwiaixyUTOTr5doUxKU1Z1TddFcbosahNVMRC7e_qKfDoISLkEdL9-vTMvTA/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="PROFILE ID FACEBOOK" 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=USERNAME TWITTER ANDA&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=ID FEEDBURNER', '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="ID FEEDBURNER" 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/ID FEEDBURNER ANDA" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="ALAMAT FB ANDA" 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://infoiki.blogspot.com/2012/08/cara-membuat-widget-email-subscribe.html" target="_blank" >get this</a></span></div></div>
<!-- End Widget --> </div>

 Keterangan :
1. Ganti kode berwarna merah dengan ID feedburner anda.
2. Ganti kode yang saya beri  Blok kuning  dengan Id profile facebook fans page anda.
Example : http://facebook.com/pages/nama-page/DISINI ID PROFILE ANDA 

 3. Ganti kode berwarna hijau dengan url facebook fans page anda.
4. Ganti kode yang saya beri  Blok merah  dengan username twitter anda.
5. Ganti kode berwarna ungu dengan ID google plus anda.
Example : https://plus.google.com/ID GOOGLE PLUS ANDA/posts

 6. Terakhir, klik Save dan lihat hasilnya.

  Good luck! :)

  • Digg
  • Delicious
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • StumbleUpon
  • Technorati

    • Categories:


    Hai,.. I am just an ordinary man who just might share the knowledge that I know ahead of you, No one is more perfect. Always keep learning and sharing of knowledge, Just be Yourself and be The Unique that makes them know who you are.!! pengembarabiru.blogspot.com

    2 komentar:

    Yuga irgi said...

    DISINI ID PROFILE ANDA

    April 3, 2013 at 10:08 PM
    Yuga irgi said...

    "disini id profile anda" tinggal masukin id profil fb atau id fanspage agan?

    May 1, 2013 at 3:09 AM

    Post a Comment

    Subscribe to: Post Comments (Atom)
    Read latest headlines in your favorite news reader
    Sign up for our email news letter

    blog