» » Cara Membuat Widget All In One Social Widget dan Hadirkan Banyak Keuntunganya

Cara Membuat Widget All In One Social Widget dan Hadirkan Banyak Keuntunganya

ILMUANE new update

↑ Grab this Headline Animator

Cara Membuat Widget All In One Social Widget dan Hadirkan Banyak Keuntunganya

Hay sobat ilmuane , kali ini saya share lagi widget paling keren serta simple dan pastinya menguntungkan bagi sobat Blogger , mulai dari kerapihan blog ,tampilan jadih lebih dinamis dan tidak banyak memakan tempat . Jjaring Sosial Mediamerupakan tempat promosi paling sering di gunakan para blogger . Nah sekarang saya akan bagi bagi nih Java Scriptnya buat kalian .


Fitur Fitur yang tersedia All in One Social Media dalam satu kotak  ini :
  • Follow Google Plus, 
  • Follow Twitter,
  • Like Fans Page Facebook.
  • Subscribe Email
  • RSS Feed
Gambar widget yang pernah di pasang Di blog Ilmu Ane

=========================================================
Dan berikut langkah langkah pemasanganya :
  1.  Login blogger sobat.
  2. Masuk ke menu Setting Blog > Tata Letak.
  3.  klik "Add Gadget" pilih yang " HTML / Java Script "
  4. Silahkan Copy paste kode di bawahkotak  ini
<style>
    /* www.ilmuane11.blogspot.com All in One Social Widget */
    #Pb-allinonesocial-widget {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .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;}
    .gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}
    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #allinonesocial {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #allinonesocial .author-credit {}
    #allinonesocial .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-widget {
        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-widget ul {list-style: none outside none; padding-left: 4px;}
    #other-social-widget .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-widget .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-widget .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;} 
    #other-social-widget .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-widget .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-widget .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-widget .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwKmi6YkPuY29MXoTHQIEX4KDHFPYeyoWMfA6uFMbvf3Qvdcwq_RNAo6RNeT00RuG51prMCpcf7NpGqIziyakWPaoOjlICcM2zWCGjZ17mTiWUZqf8w2KcdNGiYdsSkIRHmEEtpq9M-s/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-widget .other-follow li.my-rss a, #other-social-widget .other-follow li.my-twitter a, #other-social-widget .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-widget .other-follow li.my-rss a:hover, #other-social-widget .other-follow li.my-twitter a:hover, #other-social-widget .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-widget .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbSVKeqVAtcbuqEwqu5gjiJvx3kO0nKMSwsZF6Ed_e2nMBMBfNAImvtY2umN8-Jz4rjwOhZ36i9a3lWzaZe_JGZL_86h3Ea9K1Vj8opfFcEZj3FJaHZRquwUC5Ac-5MVlmbkpEhGE1xA4/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-widget .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gOBzsG7iz4JlemFxEl-hQ0y_JqTZ3uHCvWv4YHe8i5yf4KkBlRmQngJdjhBuMlHIDy2dwLyc782p-JZYljd2TlYFxL8CjpcqFyIs8WRPZ80-YkcqJrTcm0vbyy7d1jx3rvZFEeQCjBs/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
/* www.ilmuane11.blogspot.com.com All in One Social Widget */&nbsp;
    </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="Pb-allinonesocial-widget" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/102710684879824753491" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/102710684879824753491" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="http://www.facebook.com/plugins/like.php?href= https://www.facebook.com/pages/Ilmu-Ane/666470883367243&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=100" 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 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=veryhandika11&amp;show_count=&amp; show_screen_name=&amp;text_color=" title="" style="width: 300px; height: 20px;" class="twitter-follow-button"  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.openundefined'http://feeds.feedburner.com/IlmuAne, '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=='')this.value=this.defaultValue;" /> <input type="hidden" value="AjiApps" 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-widget"> <!-- Other Social widget --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/IlmuAne" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/veryhandika11"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/102710684879824753491" target="_blank">Google Plus</a> </li> </ul> </div> <div id="allinonesocial" 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.ilmuane11.blogspot.com/" target="_blank" >All in One Social Widget »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->


=========================================================

5.  Setelah sudah menambahkan kode nya ada beberapa yang harus di ganti di antaranya :

a.) Ganti https://plus.google.com/102710684879824753491 dengan alamat Profil Google Plus sobat
b.) Ganti https://www.facebook.com/pages/Ilmu-Ane/666470883367243
      dengan alamat URL Fans Page Facebook sobat.
c.) Ganti http://feeds.feedburner.com/IlmuAne dengan aalamat  FeedBurner Sobat.
d.) Ganti https://twitter.com/veryhandika11 dengan alamat URL Akun Twitter sobat.


Sekian Tipsa blogger dari saya , semoga bermanfaat dan semoga blog kalian semakin bagus , semangat blogger :)

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

6 Responses to " Cara Membuat Widget All In One Social Widget dan Hadirkan Banyak Keuntunganya "

SILAHKAN BERKOMENTAR YANG SOPAN... Jangan meninggalkan link aktif , komentar spam tidak akan dipublikasikan!

Subscribe to: Post Comments ( Atom )