Terima kasih telah mengunjungi blog ini muda-mudahan dengan adanya isi blog ini berguna bagi kita sobat blogger.................SALAM PERSAHABATAN
Home » Posts filed under Widget
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Sabtu, 02 Juni 2012

0
Memasang Kotak Pencarian Google


Satu lagi trik untuk mempercantik tampilan blog sekaligus membuat blog menjadi unik, yaitu dengan memasang widget kotak pencarian google yang unik dan menarik. Widget kotak pencarian ini bertemakan "Fortune Teller" (Ahli Ramal), jadi maksudnya widget kotak pencarian google dibuat seolah-olah seperti peramal yang dapat menjawab semua pertanyaan pengunjung blog tentang dunia maya (internet) berbasiskan database pencarian google... Kelebihan widget kotak pencarian google ini, yaitu hasil pencarian akan dibuka di tab baru jadi tidak akan menggangu aktivitas pengunjung blog yang sedang berkunjung ke blog sobat. Gimana sob... keren-kan dan yang pasti unik abis... Coba liat contohnya seperti yang di bawah ini...


Widget kotak pencarian google ini menggunakan plugins javascript yang dapat di kostumisasi, yaitu warna background (blue, yellow, purple dan green), gambar peramal, teks judul, ukuran lebar widget dan lebar kotak pencarian. Nah... untuk lebih detailnya kita langsung aja ke TKP...

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/JavaScript", seperti gambar dibawah ini.



  • Copy-paste kode berikut ini di kotak postingan gadget.


    <script>
    var sbcolor="purple";
    var sbwidth="255";
    var sbsize="28";
    var sbimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPHmRw20VAuD5QWdT5TDClPEjVEWe7h_GLQ7mdwMZTa945ShyphenhyphendL-QgbDcoBRmpraXF0PMcqtMX0l7yXL77cl5SmlWpbc4hzY1S3eu9MGWj6vTpaXpL7pz8ynsY6c2Ym23QXeFeDLRHCVT/s800/FortuneTeller.gif";
    var sbtitle="Ask Your Question...";
    </script>
    <script language="javascript" src="http://monozcore-project.googlecode.com/files/MonozCoreSearchBox.js"></script>

    Catatan :
    • var sbcolor="purple"; // warna style background, tersedia dalam empat pilihan warna (blue, yellow, purple dan green).
    • var sbwidth="255"; // lebar widget sidebar atau upbar.
    • var sbsize="28"; // lebar kotak pencarian.
    • var sbimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPHmRw20VAuD5QWdT5TDClPEjVEWe7h_GLQ7mdwMZTa945ShyphenhyphendL-QgbDcoBRmpraXF0PMcqtMX0l7yXL77cl5SmlWpbc4hzY1S3eu9MGWj6vTpaXpL7pz8ynsY6c2Ym23QXeFeDLRHCVT/s800/FortuneTeller.gif"; // gambar peramal.
    • var sbtitle="Ask Your Question..."; // teks judul widget.

  • Klik "Save" dan lihat hasilnya...
Additional Attribute's :
  • Gambar Peramal

    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPHmRw20VAuD5QWdT5TDClPEjVEWe7h_GLQ7mdwMZTa945ShyphenhyphendL-QgbDcoBRmpraXF0PMcqtMX0l7yXL77cl5SmlWpbc4hzY1S3eu9MGWj6vTpaXpL7pz8ynsY6c2Ym23QXeFeDLRHCVT/s800/FortuneTeller.gif

    • https://lh6.googleusercontent.com/-zg620wXX5MY/T8pyKPyD29I/AAAAAAAAB0M/zNtB24hzvTk/s800/browser-girl-firefox-icon.png

    • https://lh6.googleusercontent.com/-rAQ7Rv9XpXU/T8ozmTJSb8I/AAAAAAAABz0/DVbHlG1V_4g/s800/genie2.png

    • https://lh4.googleusercontent.com/-7AJwtPfEAfA/T8ozt2ei7BI/AAAAAAAABz8/cVTVbZgtR6o/s800/Avatar%2520Companion.png

    • https://lh6.googleusercontent.com/-We0jmhFLSVM/T8pyKBvbcRI/AAAAAAAAB0Q/chOLvfPYqpY/s800/Pumpkin-icon.png

    • https://lh6.googleusercontent.com/-moBUsTBqFf8/T8p0RRZWC-I/AAAAAAAAB0c/GmPBy6hizrs/s800/Android.png

  • Ukuran Widget
    • Widget 255 x 255 pixel
      var sbwidth="255";
      var sbsize="28";
    • Widget 300 x 300 pixel
      var sbwidth="300";
      var sbsize="32";
    • Widget Leaderboard 720 x 90 pixel
      var sbwidth="720";
      var sbsize="452";

  • Teks Judul
    • Ask your question...
    • Get your fortune...
    • Search your answer...
.: Semoga Bermanfaat :.

Rabu, 30 Mei 2012

0
Recent Post With Slide Effect


Membuat recent post dengan animasi slide yang unik dan menarik. Seperti postingan artikel sebelumnya tentang recent post, postingan kali ini menggunakan API google untuk menampilkan postingan artikel blog terbaru (recent post). Widget recent post banyak digunakan di blog ternama karena dapat membuat rating pageview semakin besar sekaligus memudahkan pengunjung blog untuk mengetahui postingan artikel blog yang terbaru. Nah... buat sobat blogger yang ingin meningkatkan rating pageview di blognya silakan pasang widget recent post berikut ini.

Loading....

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Copy-Pastekan kode di bawah ini kedalam kode template HTML sobat atau, dengan ketentuhan harus di dalam tag <Body> atau penempatan kode di bawah ini juga bisa ditempatkan sebagai widget di sidebar atau di upbar.

    <style type="text/css">
    .gfg-root {
      width: auto;
      height: auto;
      position: relative;
      overflow: hidden;
      text-align: center;
      font-family: verdana, sans-serif;
      font-size: 12px;
      padding:2px;
      background:none;
      border: 0px solid #363636;
    }
    .gfg-title {
      font-size: 16px;
      font-weight : bold;
      color : #fff;
      background-color: none;
      line-height : 1.4em;
      overflow: hidden;
      white-space : nowrap;
    }
    .gfg-subtitle {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      background-color: none;
      line-height : 1.4em;
      overflow : hidden;
      white-space : nowrap;
      margin-bottom : 0px;
    }
    .gfg-subtitle a {
      color : #a43434;
      display:none !important;
    }
    .gfg-entry {
      background-color: none;
      width : 100%;
      height : 9.9em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top : 0px;
    }
    /* To allow correct behavior for overlay */
     .gfg-root .gfg-entry .gf-result {
      position : relative;
      background-color:none;
      width : auto;
      height : 100%;
      padding-left : 5px;
      padding-right : 5px;
    }
    .gfg-list {
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-bottom : 15px;
      display:none !important;
    }
    .gfg-root .gfg-entry .gf-result .gf-title {
      font-size: 13px;
      display:block;
      color:#a43434;
      font-weight:bold;
      line-height: 1.2em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      -o-text-overflow : ellipsis;
      margin-top : 4px;
    }
    .gfg-root .gfg-entry .gf-result .gf-snippet {
      line-height : 1.3em;
      color: #333;
      margin-top : 3px;
      font-size: 12px;
    }
    .clearFloat {
      clear : both;
    }
    #feedGadget {
      margin-top: 3px;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      font-family:verdana, arial;
      font-size: 10px;
      color: #333;
    }
    </style>
    <script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w"
    type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
    <script type="text/javascript">
    function showGadget() {
      var feeds = [{
        title: 'title',
        url: 'http://url-blog-sobat.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'
      }, ];
      new GFdynamicFeedControl(feeds, 'feedGadget', {
        numResults: 1000,
        stacked: true,
        title: " "
      });
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
    </script>
    <div id="feedGadget">
      <center>Loading....</center>
    </div>

    - Keterangan :
    • Jangan lupa !!! silahkan sobat ganti dahulu url feeds-nya pada kode script [ http://url-blog-sobat.blogspot.com/feeds/posts/default ] dengan url blog sobat.

  • Klik "Save" dan lihat hasilnya...
Gimana...... keren-kan widgetnya... sobat juga bisa mengedit atau mengubah kode tampilan css sesuai dengan keinginan sobat. Ok teruslah berkreasi dan tetap bersemangat.

.: Semoga Bermanfaat :.

Jumat, 25 Mei 2012

0
Slide Out Recommended Blog Post


Menjaga supaya pengunjung menjadi betah mengunjungi blog sobat dan hal ini merupakan trik jitu untuk meningkatkan trafik pengunjung blog. Slide Out Recommended Blog Post merupakan widget yang menampilkan link postingan artikel yang ada di blog sobat secara acak dan saling terkait dengan label postingan artikel yang sedang di baca pengunjung blog. Widget ini menggunakan animasi slide out untuk animasi tampilan dan akan tampil ketika pengunjung blog berada di akhir halaman blog.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik tombol "Add to Blogger" untuk memasang script 

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Pasang penanda akhir halaman yang akan digunakan sebagai batas tulisan artikel dan menampilkan widget. Cari kode dibawah ini pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian). 
    <div class='post-footer-line post-footer-line-1'>
    atau
    <p class='post-footer-line post-footer-line-1'>
    atau
    <data:post.body/>

    Setelah kode di atas sudah ketemu, selanjutnya copy-paste kode di bawah ini dan letakan kode tepat di bawahnya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='mzcslidein_place_holder' style='display:none'/>
    </b:if>

  • Klik "Save" dan lihat hasilnya...
Kustomisasi Tampilan :

Sobat blogger dapat merubah tampilan kode CSS widget Slide Out Recommended Blog Post, tetapi sebelumnya pasang script berikut ini di atas kode </Head> pada template blog sobat.

<script>var mzcslidein_custom_css=true;</script>

Jika variabel diatas tidak dimasukan (diset) maka tampilan kode CSS widget Slide Out Recommended Blog Post akan menampilkan kode CSS default. Apabila variabel sudah di pasang maka sobat dapat merubah kode CSS tampilan widget berikut ini. Silakan kreasikan tampilan widget menurut selera sobat.

<style>
#mzcslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-radius:5px;border:3px solid #619bb9;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#mzcslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#mzcslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#mzcslidein a,#mzcslidein a:hover,#mzcslidein_title{text-decoration:none;color:#1616F5;}
#mzcslidein .close,#mzcslidein .expand,#mzcslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#mzcslidein .help{right:35px;}
#mzcslidein_title,#mzcslidein_image{float:left;width:80px;}
#mzcslidein_title{width:290px;}
</style>

Silakan "Save" dan coba lihat hasilnya...

.: Semoga Bermanfaat :.

Minggu, 20 Mei 2012

0
Blog Avatar Companion


Maksimalkan blog sobat dengan widget Blog Avatar Companion v1. Layaknya sebuah perusahaan yang memiliki customer service untuk mendampingi klien perusahaan, Blog Avatar Companion juga memiliki fungsi yang hampir sama dengan customer service yaitu untuk memberikan greeting dan product knowledge dari blog kita selain itu biar pengunjung blog ga kesepian sewaktu mengunjungi blog kita, sobat... hehehe... asik-kan... sik...asik... Widget ini cukup ringan dan tidak memberatkan waktu loading blog... Oke sob buat yang tertarik langsung aja ke TKP...

Cara Pembuatan :
  • Kunjungi situs SitePal kemudian klik "SignUp" untuk mendaftar.
  • Seperti biasa konfirmasi di akun email kemudian login ke SitePal.
  • Kemudian klik "Enter" untuk masuk ke dashboard SitePal.
  • Klik gambar avatar untuk mengkostumasi avatar dan atributnya.
  • Seteleh selesai memodifikasi avatar kemudian disimpan.
  • Klik gambar panah yang ada di kolom publish.
  • Klik "Embed in Flash".
  • Pada step 1 pilih "Blogger" kemudian pada kolom 3 sesuaikan ukuran dimensi avatar.
  • Copy kode javascript pada kotak no. 4, biasanya terletak di bawah.
Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di bawah kode <Body> tersebut. Penempatan kode di bawah ini juga bisa ditempatkan sebagai widget sidebar atau upbar.

    <style>
    .gb {
    position:fixed;
    top:0px; left:0px;
    z-index:+10;
    }
    #gbcontent {
    height: auto;
    width: auto;
    padding: 10px 10px 5px 10px;
    border: #000;
    box-shadow:inset 0 0 1px #fff;
    -moz-box-shadow:inset 0 0 1px #fff;
    -webkit-box-shadow:inset 0 0 1px #fff;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:#619bb9;
    background-image:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background-image:-webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
    }
    </style>
    <div class="gb"><div id="gbcontent">
    <!-- Begin: BAC -->

    Taruh Kode Script dari SitePal Disini

    <!-- End: BAC -->
    <div align="left">
    <img src="https://lh4.googleusercontent.com/-OU72qj2_Zfg/T7fLcZpb5rI/AAAAAAAABww/vpyHLKADLoY/s800/Female-Face-Icon.png" style="vertical-align: middle;" /> <a href="http://monozcore.blogspot.com/" style="color: white; text-decoration: none;" target="blank" title="Get this widget"><b style="font-size: 14px;">Blog Avatar Companion</b></a>
    </div></div></div>

    - Keterangan :
    • not available.

  • Klik "Save" dan lihat hasilnya...
.: Semoga Bermanfaat :.

Selasa, 15 Mei 2012

0
Popup Facebook Like Box With Timer


Dongkrak popularitas fanpage facebook dengan memasang widget Popup Facebook Like Box With Timer. Widget ini akan memunculkan kotak suka (like) untuk halaman fans Facebook kamu. Jika beberapa waktu yang lalu saya pernah membagikan kotak suka juga, namun yang ini berbeda dengan widget like box yang sebelumnya, Pada postingan artikel ini like box fanpage facebook akan muncul secara tiba-tiba seperti iklan namun dengan waktu yang dapat di atur sendiri. Widget like box fanpage facebook akan tampil hingga waktu tertentu kemudian setelah waktunya habis, widget like box ini akan menutup dengan sendirinya, seperti contoh yang ada pada postingan atikel ini.... Gimana ??? keren-kan, oke sob buat yang tertarik langsung aja kita ke TKP.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di bawah kode <Body> tersebut. Penempatan kode di bawah ini juga bisa ditempatkan sebagai widget sidebar atau upbar.

    <link type='text/css' rel='stylesheet' href='https://sites.google.com/site/monozcore/home/mbtlikebox2.css' />
    <script type='text/javascript'>
    KNFBFansPRO='monozcore';
    KNFBImg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjo2x84mrXG_zTJSUWMgEbJ6FqUR0IJn0QRIABAmEsnTRICWM6b2KdOgQ1XT9GV5V6fEfuEcAlt9SZjm1gL9vOJBJBzv56QtnKI-x21drA90G4ppfkxX7gKCLr0QNICOKWuM05yLUZQlve/s800/BecomeFanOnFacebook.jpg';
    </script>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script>
    <script src='http://monozcore-project.googlecode.com/files/mbtlikebox2.js' type='text/javascript'></script>
    <script language='javascript'>
    $(document).ready(function(){$().KNFBFansPRO({timeout: 30,wait: 0,url: 'http://www.facebook.com/monozcore',closeable: true});});
    </script>
    <div id='fbtpdiv'></div>

    - Keterangan :
    • Pada kode [ KNFBFansPRO='monozcore'; ] ganti teks monozcore dengan user akun facebook sobat.
    • Pada kode [ KNFBImg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjo2x84mrXG_zTJSUWMgEbJ6FqUR0IJn0QRIABAmEsnTRICWM6b2KdOgQ1XT9GV5V6fEfuEcAlt9SZjm1gL9vOJBJBzv56QtnKI-x21drA90G4ppfkxX7gKCLr0QNICOKWuM05yLUZQlve/s800/BecomeFanOnFacebook.jpg'; ] merupakan url link gambar. Silakan sesuaikan gambar facebook tersebut yang sesuai dengan keinginan sobat. Pada postingan artikel ini saya menyediakan 3 pilihan gambar yang unik dan menarik.
    • Pada kode script [ $(document).ready(function(){$().KNFBFansPRO({timeout: 30,wait: 0,url: 'http://www.facebook.com/monozcore',closeable: true});}); ] merupakan settingan awal widget popup facebook like box. Silakan ganti teks yang berwarna biru dengan url link facebook sobat.

  • Klik "Save" dan lihat hasilnya...
Pilihan Gambar :

  1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjo2x84mrXG_zTJSUWMgEbJ6FqUR0IJn0QRIABAmEsnTRICWM6b2KdOgQ1XT9GV5V6fEfuEcAlt9SZjm1gL9vOJBJBzv56QtnKI-x21drA90G4ppfkxX7gKCLr0QNICOKWuM05yLUZQlve/s800/BecomeFanOnFacebook.jpg

  2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic77LR-umhpz62NbP9noh5-aVR0FwzKEsFOqTiodYDWXegVxvIoxudEI7uekAuwV7gqq3FP7F3QOzHOQV8XpIW9mFLwxH35p19uJmJnodvErYBEkvub5kTrb6KMHfevf8xno6niFNWIpf8/s800/facebookbutton.png

  3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifwGaH_MruMOsoJyfodVi_9nd4QjvFdz8588oWpfz4vqlVdpr_fyABYiyqJoflDedCTbuHWVkA9-kS83oOl2NsPZtjQmsy-14JoJA-Y7u8vjytS-v5-befgo8w07oVFK894IqKagGpRdJi/s800/fb.png
.: Semoga Bermanfaat :.

Selasa, 08 Mei 2012

0
JQuery Twitter Ticker


Info unik dan menarik untuk sobat blogger yang maniak dengan twitter, yaitu JQuery Twitter Ticker dari tutorialzine.com. Widget ini digunakan untuk melihat update status twitter (twitt) dan menghubungkannya di gadget blog sobat. Widget ini juga dapat digunakan untuk menampilkan twitt beberapa akun twitter sekaligus. Seperti contoh di bawah ini yang menampilkan twitt monozcore dan indonesia idol. Ohh yaa widget ini hanya menampilkan twitt terbaru dan untuk twitt yang lebih dari 2 hari tidak akan ditampilkan.
Twitter icon

MonozCore Twitter

Loading..

Gimana sob... asik-kan... syik..ashiyk hehehe :):). Widget ini menggunakan library jquery dan api twitter sehingga untuk proses pengambilan data langsung di browser client tanpa harus di proses di server. Pemasangan widget ini cukup mudah tinggal ikuti cara pemasangan langkah demi langkah atau klik tombol "Add to Blogger" untuk mempermudah pemasangan sebagai widget sidebar blog.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di atas kode </Head> tersebut.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <style>
    #twitter-ticker{width:250px;height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-T3oNugsUwW8ps6-zhYnxfcBx5fNEYf5SusIrledYg3Ff1BHjOUIE-oAWq3CI1isHLDNjP2lCmNGreFK9D4v1pY0PlCNRcJZ2mpbDs72BvpQwJn5YIApA3Crwfm3kq9clFJWGL6ef70/s1600/slickbg.png) no-repeat #f5f5f5;color:#666666;display:none;-moz-border-radius:10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius:6px;border-radius:6px;text-align:left;}
    #tweet-container{height:230px;width:auto;overflow:hidden;}
    #twitIcon{position:absolute;top:-25px;left:-10px;width:64px;height:64px;}
    #top-bar{height:45px;border-bottom:1px solid white;position:relative;margin-bottom:8px;border-radius:6px 6px 0 0;background-color:#619bb9;background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:-o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC));background-image:-webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image:linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));}
    .tweet{padding:5px;margin:0 8px 8px;border:1px solid #F0F0F0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nz5hoN3T8H_QmrBAZm6T7oxDWrlhI3PGIukUnB_jaP-0frnWf1Z84TAEkaShr809ZKwEZoldo2knyGP-0ltI3byKgZTxAtgd7YQRMQkb-j-zPwT22kEhhyphenhyphenLDy-46mMEDHUzDVVz2wW8/s1600/transparent.png);width:auto;overflow:hidden;}
    .tweet .avatar,.tweet .user,.tweet .time{float:left;}
    .tweet .time{text-transform:uppercase;font-size:10px;color:#AAAAAA;white-space:nowrap;}
    .tweet .avatar img{width:36px;height:36px;border:2px solid #eeeeee;margin:0 5px 5px 0;}
    .tweet .txt{clear:both;}
    .tweet .user{font-weight:bold;}
    #loading{margin:100px 95px;}
    #twitter-ticker{margin:40px auto 20px;}
    .jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;}
    .jScrollPaneTrack{position:absolute;cursor:pointer;right:4px;top:0;height:100%;background:#ddd;}
    .jScrollPaneDrag{position:absolute;background:#999;cursor:pointer;overflow:hidden;}
    .jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;}
    .jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;}
    a.jScrollArrowUp{display:block;position:absolute;z-index:1;top:0;right:0;text-indent:-2000px;overflow:hidden;height:9px;}
    a.jScrollArrowUp:hover {}
    a.jScrollArrowDown {display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-2000px;overflow:hidden;height:9px;}
    a.jScrollArrowDown:hover {}
    a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {}
    h4.tut{color:#fff;font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:16px;padding:12px 0 0 58px;text-transform:uppercase;text-shadow:2px 1px 6px #333;}
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div.tweet {background:none;border:none;}
    div#twitIcon{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0cjxggqb3Wy_vZizQ4bF97ZJpDCEC5EQ3vrtl4DL22Co8IgZ1gxqYYquu_8pV5j_Jfc3f3F6OxKnZ6_2qb3Hu5QOSAtiF5YGjMAg9iFe6W0ItXGZl21U4Cd73TpiYAWhJgHRqC8X0QY/s1600/twitter_64.png, sizingMethod=crop);}
    div#twitIcon img{display:none;}
    </style>
    <![endif]-->

    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/jScrollPane-1.2.3.min.js"></script>
    <script type="text/javascript" src="http://monozcore-project.googlecode.com/files/Jquery_twitter_ticker.js"></script>

    <script type="text/javascript">
    var tweetUsers = ['monozcore','indonesiaidol'];
    </script>

    - Keterangan :
    • Teks yang berwarna biru merupakan username twitter yang akan ditampilkan, ganti username tersebut dengan akun username twitter sobat atau sesuai dengan username twitter yang sobat inginkan. Apabila sobat ingin menambahkan akun username twitter lebih dari dua, sobat blogger tinggal menambahkan username twitter pada kode teks yang berwarna biru. Contoh : ['monozcore','indonesiaidol','username twitter3'];

  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di bawah area kode <Body> tersebut. Penempatan kode di bawah ini juga bisa ditempatkan pada widget sidebar.

    <div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0cjxggqb3Wy_vZizQ4bF97ZJpDCEC5EQ3vrtl4DL22Co8IgZ1gxqYYquu_8pV5j_Jfc3f3F6OxKnZ6_2qb3Hu5QOSAtiF5YGjMAg9iFe6W0ItXGZl21U4Cd73TpiYAWhJgHRqC8X0QY/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div><h4 class="tut">MonozCore Twitter</h4></div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMpik7nEks_FIUGvuR_i8ZnLSLubxYDwd4oO6uU63Yw3nh-yoB2zDFqh2rIYyUzDIe05Cxr2G1LGmim5Z_Fbku-ihCSYWE4V21ryNOAQTjidz16W_SanTxIFcLIh11eYNwrAjKvtPyq4/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div></div>

    - Keterangan :
    • Klik "Add to Blogger" untuk memasang jquery twitter ticker sebagai widget.
    • Teks yang berwarna merah pada kode di atas merupakan judul widget silakan ganti judul tersebut sesuai dengan yang sobat inginkan.

  • Klik "Save" dan lihat hasilnya...
.: Semoga Bermanfaat :.
Posting Lama ►
Langganan: Postingan (Atom)
 

Follows

DMCA.com

Special Song


Iklan Melayang
Iklan Melayang
Flag Counter

Copyright 2012/2013 Lovers_community: Widget Template by Lovers Templates

blog sementara di renofasi untuk sementara aja TNK"S