Followers

Powered by Blogger.

  • Cara Membuat Widget Full Social Profil

    Posted by : Unknown Apr 28, 2013

    SELAMAT DATANG DI -LAVIXTA STAR~BLOG-

    Hi sobat-sobat ku dimanapun anda berada.
    Berjumpa lagi di Lavixta Star Blog, blog sederhana saya.

    Kali ini saya akan mengshare satu tips yang sangat membantu yaitu     "Cara Membuat Widget Full Social Profil".

    Saya sudah sering sekali berjalan-jalan di website-website yang menyediakan khusus Template Blog/Web. Saya melihat disebagian besar templatenya terdapat widget yang sangat unik. Karena di widget itu, terdapat Subcribe Email, Like Facebook, Follow Twitter, Button Icon Social Bookmark, dll. Lalu, saya berpikir, kalau misalnya saya membuat widget ini dan membagikannya ke teman-teman blogger lainnya saya rasa sangat membantu. Maka itu akhirnya hari ini saya bisa mengsharenya untuk teman-teman semua.

    Widget Full Social Profil ini sangat membantu para visitors blog kita, karena mereka dapat dengan mudah melihat dan menghubungi kita lewat social bookmark seperti Facebook, Twitter, Google+, FeedBurner, dll.

    Jika teman-teman tertarik, berikut ulasannya untuk anda.

    Feature
    • Membantu visitor dalam berkomunikasi dengan admin
    • Menambah like Facebook (Tergantung)
    • Menambah Followers Twitter dan Google+ (Tergantung)
    • Mempermudah Subcribe via Email
    requirements
    • Koneksi yang lancar
    • Internet Browser yang memadai
    • Berpengalaman dalam mengedit HTML atau sejenisnya
    • Sediakan minuman segar dan cemilan ringan untuk merilekskan pikiran

    screenshot & Demo


    Demo Free Live


    sTep/Langkah-langkah
    • Loggin di blogger.com
    • Tentukan blog yang akan dimodifikasi
    • Dari Dasbor, pilih "Tata Letak"
    • Pastikan terlebih dahulu dimana widget akan ditampilkan.
    • Jika sudah, klik "Tambah Gadget"
    • Pilih "HTML/JavaScript"
    Lihat gambar untuk lebih jelas :
    Gambar 1 : Menu "Tata Letak" pada Dasbor
    Gambar 2 : Pilihan "Tambah Gadget" pada menu Tata Letak
    Gambar 3 : Pilihan "HTML/JavaScript" pada tampilan Tambah Gadget
    • Copy dan letakkan kode dibawah ini pada kotak kontennya

    Code
    <style type="text/css">
    /*<!CDATA[*/
    #mediablogger{width:300px;margin:auto;padding:0;}
    .mediablogger-googleplus {height: 57px;}
    .mediablogger-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
    .mediablogger-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
    .mediablogger-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
    .mediablogger-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
    .mediablogger-twitter a.twitter-follow-button {display: block;}
    .mediablogger-twitter iframe {margin: 9px 11px;}
    .mediablogger-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
    .mediablogger-sociallinks a {text-shadow: 1px 1px white;}
    .mediablogger-sociallinks .mediablogger-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
    .mediablogger-sociallinks .mediablogger-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRmelP_pRSp8FLi6wQG8aFQNTBv133IyMpJy-cMqZsaq5aTDHCwwcWfcIP_ULlaGVDhLa-r9HKABGyZsVv1M2ZogIDxTfw5azvcjB-lKtgCvpalN28BEW_-wGySu4H9AeYMWPlE5MeG7X/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
    .mediablogger-sociallinks .mediablogger-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
    .mediablogger-sociallinks .mediablogger-social li a:hover {text-decoration: underline;}
    .mediablogger-sociallinks .mediablogger-social li.technorati {background-position: 0 -180px !important;}
    .mediablogger-sociallinks .mediablogger-social li.rss {background-position: 0 -240px !important;}
    .mediablogger-sociallinks .mediablogger-social li.facebook-p {background-position: 0 -450px !important;}
    .mediablogger-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
    .mediablogger-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .mediablogger-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
    .mediablogger-emailbox input.emailu:focus {color: #333;}
    .mediablogger-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
    .mediablogger-emailbox input.submitu:hover {text-decoration: none;}
    .w2bOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
    .w2bOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
    .mediablogger a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
    /*]]>*/
    </style>
    <div id="mediablogger">
    <div class="mediablogger-googleplus">
    <script type="text/javascript">
      /*<![CDATA[*/
      window.___gcfg = {lang: 'en'};
      (function(){
          var po = document.createElement("script");
          po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(po, s);
      })();
      /*]]>*/
         </script>
    <div class="g-plus" data-height="69" data-href="https://plus.google.com/107989334542993182217" data-theme="light" data-width="300">
    </div>
    </div>
    <div class="mediablogger-facebook">
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FLavixtaStar&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" style="border: none; height: 66px; overflow: hidden; width: 280px;"></iframe>
     </div>
    <div class="mediablogger-gplusone">
    <script type="text/javascript">/*<![CDATA[*/
           (function() {
      var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
      po.src = "https://apis.google.com/js/plusone.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
           })();/*]]>*/
         </script>
    <div class="g-plusone" data-href="http://lavixtastar.blogspot.com/" data-size="medium">
    </div>
    Recommend on Google
     </div>
    <div class="mediablogger-twitter">
    <a class="twitter-follow-button" data-show-count="true" href="https://twitter.com/AN_Sirait">Follow @AN_Sirait</a>
         <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
     </div>
    <div class="mediablogger-sociallinks">
    <ul class="mediablogger-social">
    <li class="technorati"><a href="http://technorati.com/blogs/lavixtastar.blogspot.com">Technorati</a></li>
    <li class="facebook-p"><a href="http://facebook.com/arielda.lavista" title="My Facebook Profile">Facebook</a></li>
    <li class="rss"><a href="http://lavixtastar.blogspot.com/feeds/posts/default">RSS</a></li>
    </ul>
    </div>
    <div class="mediablogger-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mediablogger1', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table style="width: 100%px;">
          <tbody>
    <tr>
       <td><input class="emailu" name="email" placeholder="Enter your email" type="text" />
       </td>
       <td width="64px"><input class="submitu w2bOrange" type="submit" value="Subscribe" />
       </td>
          </tr>
    </tbody></table>
    <input name="uri" type="hidden" value="LavixtaStar" />
      <input name="loc" type="hidden" value="en_US" />
         </form>
    </div>
    <div class="mediablogger">
    <a href="http://lavixtastar.blogspot.com/">Get this Gadget</a>
     </div>
    </div>
    Ganti :
    • 107989334542993182217 dengan ID Google+ anda
    • LavixtaStar dengan ID/URL Fans Page Facebook anda
    • lavixtastar.blogspot.com dengan URL/Alamat blog anda
    • AN_Sirait dengan ID/Username Twitter anda
    • arielda.lavista dengan ID/Username Profil Facebook anda
    • LavixtaStar dengan Alamat/URL Feedburner anda
    • Jika sudah, klik "Simpan"
    • Anda sudah bisa melihat hasilnya.
    Gimana teman-teman??
    Keren kan widgetnya?!
    Dijamin deh widgetnya..
    Ke punya!!


    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    *jangan lupa komentarnya ya gan.. :D

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    DAFTAR ISI :

    Tag :

    { 3 comments... read them below or Comment }

    Peraturan yang harus diikuti ketika membuat komentar :
    1. Tidak Membuat Link Aktif
    2. Tidak SPAM
    3. Menggunakan Bahasa Yang Sopan
    4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

    Selamat Berkomentar..
    Terima Kasih Atas Kerjasamanya.. ^_^

    Show Konversi KodeHide Konversi Kode Show Emoticon

    • Subscribe to: Post Comments (Atom)

    Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Johanes Djogan