Cara Menciptakan Widget Mashable - Tempat Blogging
›

Cara Menciptakan Widget Mashable

Written By Monday, August 18, 2014 Add Comment

Cara Membuat Widget Mashable - Media Besar Mashable sebagai salah satu blog sosial terbesar ini selalu menjadi wangsit dalam apa pun yang mereka lakukan. Widget ini dibentuk alasannya ialah terinspirasi oleh Mashable dan plugin ini dinamakan sebagai kafe sosial mashable. Widget ini sanggup dipakai di setiap blog hanya dengan langkah instalasi sangat mudah. Seperti yang teman lihat widget ini berisi link ke halaman ke Facebook Fan, laman Google+ dan tombol rekomendasi, twitter ikuti tombol, RSS dan LinkedIn link dan yang paling penting bentuk widget langganan ini sangat menarik yang selanjutnya akan meningkatkan jumlah pelanggan Email blog sobat. Seperti apa live demonya ? Silakan lihat demo nya dibawah ini :


Bagaimana Cara Membuat Widget Mashable ini ? Cara nya sangatlah mudah, teman tinggal Add Gadget HTML di blogspot sobat, berikut arahan nya :

<style>
/* Social Widget */
#MBT-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;
        height:80px;
}
.googleplus {
    background: #F5FCFE;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #ebebeb;
    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 70px;}
.g-plusone {    float: left;}
.twitter {
    background: #EEF9FD;
    padding: 10px;
    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;
    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}   
#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:37px;
}
#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: 270px;}
#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/AVvXsEhS89BKze7fWMANZsdsJJ19VRx2CRcIyYeV19NPXkw8ljHARopEwLQ34zr9yiE8R1hyphenhyphenu3POg2HZMmX5OB27NgBeHY8GTxyMvNFEcUmpY2131xsNWlD3NGWGxnVFkQy-BQVGZMxPTscKTTk/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-linkedin {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6rD_WZAaazU80Lob92UVhbTKgncXodWSueanVPg8pxWY7IUj1sszdugR2CKUUpitf9ljbvynfjIfZVawakzjHTl4FERvluaE0KHIjJ97bm3UA7nMVq_k-1WTxbgEMDEMWipmBfBSSio/s400/linkedin-16x16.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/AVvXsEgeVObfUF58QBMpXAqKB29XG6de4P2J-Bm4NKMsByZjB-EXu4x1opNorvjhyphenhyphenxm40RL7VQQDEO5y6nr-CFPY2GoSczUzEFlxx1iNLdISB2OA4ASeeM86eXTpvmpIVG7Nzd9zpx8-by-lVPw/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]-->

<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/bloggertricks&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;
font&amp;height=100px&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </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="Cara Membuat Widget Mashable" 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=mybloggertricks&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=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">   
        <input class="email" type="text" style="width: 150px; 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;&#39;)this.value=this.defaultValue;" />       
        <input type="hidden" value="tntbystc" 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="Cara Membuat Widget Mashable" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="Cara Membuat Widget Mashable" rel="author" href="LINKEDIN PROFILE LINK" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Cara Membuat Widget Mashable" rel="author" href="http://plus.google.com/44448117245314564536" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggertricks.com" target="_blank" >Blogger Widgets »</a></span></div></div>
<!-- End Widget --> </div> <!--end of social widget-->

Note : Silahkan rubah pengaturan nya menyerupai dibawah ini :

Related

  • Replace bloggertricks with your Facebook username
  • Replace mybloggertricks with your twitter username
  • Replace tntbystc with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/tntbystc
  • Replace http://feeds.feedburner.com/tntbystc with your feedburner  link.
  • Replace LINKEDIN PROFILE LINK with your Linkedin profile link
  • Replace http://plus.google.com/44448117245314564536 with your Google Plus profile link
Kalau sudah, tinggal teman save saja, dan widget mashable ini sudah siap digunakan.

Source : www.mybloggertricks.com

Related Posts

Show comments
Hide comments

0 Response to "Cara Menciptakan Widget Mashable"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close