Widget Share Keren Ala bTemplate

Widget Share Keren Ala bTemplate - tes tes ! hehe. Oke seperti janji di Postingan sebelumnya tentang Cara Membuat Kolom Subscribe bahwa saya akan berbagi Widget Share. Ya, widget share ini yaitu hasil kloningan dari salah satu situs Template Gratis yang sangat populer yaitu bTemplate. Hasil kloning ini dijamin 100 persen mirip dengan yang ada disana. Jadi, langsung disimak kode dibawah ini, sobat:

<!-- Styles -->
<style type="text/css">
#share-box-0 {
width:300px;
overflow:hidden;
}
#share-box-0 .gplusone {
background-color:#f5fcfe;
border:1px solid #d8e6eb;
border-top:1px solid #FFF;
font-size:.87em;
color:#000;
line-height:24px;
padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
display:inline-block;
vertical-align:middle;
height:20px;
margin-top:-17px;
}

#share-box-0 .fb-like-box {
border:1px solid #dcdcdc;
padding:5px 11px;
}
#share-box-0 .twitter-follow {
background-color:#eef9fd;
border:1px solid #c7dbe2;
border-top:0;
}

#share-box-0 .twitter-follow iframe {
margin:9px 11px;
}
#other-social-bar {
    background-color: #D8E6EB;
    border: 1px solid #B6D0DA;
    box-shadow: 0 1px 1px #FFFFFF inset;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
}
#other-social-bar ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow {
    color: #1E598E;
    float: left;
    height: 16px;
    overflow: hidden;
    padding: 10px 10px 7px;
    width: 270px;
}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow li {
    border: 0 none;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li a {
    color: #1E598E;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
    background: url(http://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16x16.png) no-repeat scroll 0 0 transparent;
    line-height: 1;
    margin-bottom: 0;
    padding: 0 3px 1px 20px;
    width: 60px;
}
#other-social-bar .other-follow li.my-gplus {
background: url(http://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#other-social-bar .other-follow li.my-pinterest {
background: url(http://4.bp.blogspot.com/-zYx6lF1--pw/T-MLzJGZcNI/AAAAAAAAFyA/R7emD2taC9s/s000/small-p-button.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#email-news-subscribe .email-box {
padding: 10px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
}
#email-news-subscribe .email-box input.email {
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-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: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0
}
</style>


  <br />
<div id="share-box-0">
<!--div class="g-plus" data-href="https://plus.google.com/118156531917979784466" data-size="smallbadge"></div-->
    <br />
<div class="fb-like-box">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FCupitBlog&amp;send=false&amp;layout=standard&amp;width=250&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=142042149281848" style="border: none; height: 80px; overflow: hidden; width: 250px;"></iframe>
    </div>
<div class="gplusone">
<div class="g-plusone po-stub" data-callback="fire_multitrack" data-count="true" data-href="http://cupitong.com/" data-size="medium">
</div>
Recommend on Google
    </div>
<div class="twitter-follow">
<a class="twitter-follow-button" href="http://twitter.com/pondokgue">Follow @pondokgue</a>
    </div>
<div id="email-news-subscribe" style="background: #E3EDF4;">
<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CupitsBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="font-size: 12px; width: 140px;" type="text" value="Enter your email" />
   <input name="uri" type="hidden" value="CupitsBlog" />
   <input name="loc" type="hidden" value="en_US" />
   <input class="subscribe" name="commit" type="submit" value="Subscribe" />
   </form>
</div>
</div>
<div id="other-social-bar" style="background: #D8E6EB;">
<ul class="other-follow">
<li class="my-rss">
<a href="http://feeds.feedburner.com/CupitsBlog" rel="nofollow" target="_blank" title="RSS">RSS Feed</a>
</li>
<li class="my-gplus">
<a href="https://plus.google.com/118156531917979784466" rel="nofollow" target="_blank" title="Google Plus">Google Plus</a>
</li>
<li class="my-pinterest">
<a href="http://pinterest.com/pondokgue" rel="nofollow" target="_blank" title="Pinterest">Pinterest</a>
</li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="https://apis.google.com/js/plusone.js" type="text/javascript">{lang: 'en'}</script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Keterangan Script :

• Facebook Like : Ganti Kode yang Warna Merah dengan Nama Page dan AppId kamu.
• PlusOne Widget : ganti kode warna putih dengan URL Blog kamu.
• Twitter Widget : Ganti Kode Warna Kuning dengan Username Twitter kamu.
• Subscribe Widget : Lihat kode warna Ungu dan ganti dengan Username FeedBurner kamu, sebagai contoh 'http://feeds.feedburner.com/CupitsBlog' berarti UserName Cupits yaitu CupitsBlog.
• Tombol Pinterest, Google Plus dan RSS Feed : Ganti saja dengan URL masing masing Social Bookmark.
• dan jika merasa ribet, Copas aja kode diatas, dan saya turut berterima kasih kamu telah berbagi blog ini.. heuheuheu

Langsung teraplkan, sobat.. :D

Posted by BV Media

Tweet