/* HourGlass THEME */ .ip-header { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmgBn63Xy93Q-liqCuagUsbwD_rnNODt4N_a6O950WcuCsHpK9aijMbT-V6Q0RyT_g6iilt8GbUdwxrkgV-dRg82d57nNhAAg1bgWeQ2uy8yZ_oIcVq_5mJtBeyehODdE1lqvQjElhdws/s1600/hourglass.gif) no-repeat center center; /* warna background dan gambar loader */ z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #fff; /* warna background circle loader */ } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #13BAFA; /* Warna garis circle saat loading */ } /* Pre-Loader main */ .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } /* Animasi */ .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } .loaded .ip-loader { opacity: 1; } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Animasi header ketika loading selesai */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } .layout-switch .ip-header { position: absolute; } /* End Preloader */
IP

Selasa, 28 Februari 2012


Share Otomatis Postingan Artikel ke Twitter & Facebook



Wuiihh panjang juga judulnya... Oke trik unik kali ini tentang Share Otomatis Postingan Artikel ke Twitter & Facebook. Sesuai dengan judulnya trik ini akan mempermudah sobat blogger untuk men-share postingan artikel ke twitter dan facebook secara otomatis, setelah postingan artikel sobat telah diterbitkan di blog. Trik ini menggunakan setingan standar feed burner dan twitter. Saya sengaja menggunakan setingan standar ini untuk menjaga keamanan data pribadi kita yang ada pada situs twitter dan facebook. Buat sobat blogger yang tertarik monggo disimak infonya...

Cara Pemasangan :
  • Login ke blog, twitter & facebook sobat.
  • Kunjungi situs FeedBurner kemudian masuk ke Publicize pada FeedBurner sobat.


  • Pilih "Socialize" kemudian klik "Add Twitter Account".


  • Klik "Authorize app" pada tombol yang berwarna biru.

  • Kunjungi situs Twitter Developer untuk menghubungkan twitter dengan facebook.


  • Klik "Go to your Twitter Profile Setting to start" untuk masuk ke settingan profil twitter.


  • Setelah masuk ke settingan profil twitter klik "Connect to Facebook".




  • Selesai... sekarang blog sobat sudah terkoneksi dengan twitter dan facebook.


.: Semoga Bermanfaat :.

Flying Love Bee



Begitu banyak kreasi widget dengan efek animasi yang unik dan menarik yang bisa diaplikasikan untuk menarik minat pengunjung blog, seperti postingan artikel yang satu ini Flying Love Bee yaitu animasi lebah cinta yang terbang di blog menghiasi tampilan blog dengan cinta dan kasih sayang... hehehe sedikit dramatisir biar romantis... untuk contoh preview mending langsung dicoba aja sendiri, pemasangannya gampang koq...

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 paste di atas kode </Head> tersebut.

    <script language="javascript">
    var floatURLimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU8o_vaPU4qdw_I2og4e-t_tWX84qTK43ixPZKeGwL8Ybc4joUKcZeapriUX0mowd7BEL707wqZ2iojX05EQx1Si-0rPfg-g9yYkgH8ZLW8-Odc_OCdMMh_2hP3znJyH3AJnURuXAhgrV8/s800/MonozCore_Love_Bee.gif";
    </script>
    <script language="javascript" src="http://monozcore-project.googlecode.com/files/DragonScript.js"></script>

     |  Blog Tools
    - Keterangan :
    • Kode yang berwarna biru merupakan URL Link Gambar.

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

Cara Membuat Daftar Isi Otomatis Postingan Artikel Blog



Cara Pemasangan :
  • Login ke  blog sobat...

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



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

    <style>
    .list {border: 0px solid #ffffff; margin: 0px; padding: 0px; overflow: auto; width: auto; height: 350px; background-color: #ffffff; font-weight: normal;}
    </style>
    <div style="font-style: italic;">
    Gunakan Ctrl + F untuk mencari artikel yang Anda inginkan :
    </div>
    <hr />
    <div class="list">
    <script src="http://monozcore-project.googlecode.com/files/Post%20List.js">
    </script>
    <script src="http://monozcore.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>

     |  Blog Tools
    Catatan :
    • Ganti URL link (kode yang berwarna biru) dengan URL link blog sobat.
    • Lakukan hal yang sama jika menggunakan "Add to Blogger" pada widget sobat dengan cara meng-edit widget jika sudah terpasang.

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


Animasi Teks


Animasi highlight text warna yang keren seperti contoh diatas. Animasi highlight text warna ini menggunakan kode javascript sehingga tidak memberatkan waktu loading blog anda...

***** Cara Pemasangan *****
  • Login ke blog anda.
  • Klik "Design" kemudian klik "Edit HTML".
  • Cari kode </Head> kemudian copy-paste kode di bawah ini diatas kode </Head>

    <script src="monozcore-project.googlecode.com/files/AnimatedText1.js"  type="text/javascript"></script>
    <script type="Text/JavaScript">
    animate('animate', '#ff8000');
    </script>
  • Copy-paste kode di bawah ini ditempat yang anda inginkan.

    <span id="animate">Teks tulisan disini</span>
    Catatan :
    - Penempatan kode diatas harus di dalam kode <Body> kode HTML </Body>.
    - Penempatan kode bisa sebagai Header, Tulisan Artikel atau pada teks yang ada di blog.

  • Simpan dan lihat hasilnya.
.:Semoga Bermanfaat:.


Cara Membuat Emoticon Di Komentar Blogger


Memasang Emoticon Yahoo pada kotak komentar blog Blogger bermaksud untuk membuat tampilan komentar para komentator/pengunjung menjadi lebih menarik, selain itu dengan adanya fasilitas penambahan emoticon pada kotak komentar ini menjadikan para pengunjung blog kita bisa mengekpresikan emosi mereka dalam mengomentari postingan kita.

Bagi sobat blogger yang sudah pernah mencoba membuat emoticon di komentar blogger, namun sampai saat ini belum berhasil, silakan sobat membaca postingan saya ini. Semoga trik berikut ini support di template sobat. Harap di perhatikan langkah demi langkah....ingat ini merupakan trik Membuat Emoticon Di Komentar Blogger versi 2 jadi hanya cocok untuk kode template blogger versi 2 (terbaru). Tips dan Trik ini sebenarnya bisa juga diterapkan pada template klasik namun harus banyak perubahan kode script, biar ngga repot untuk yang cari pemasangan emoticon di kolom komentar v1 silakan baca pada postingan saya sebelumnya. Yuhh... langsung aja ke TKP...

Langkah 1
  • Login ke blogger anda.
  • Klik design kemudian edit template.
  • Klik centang pada pilihan expand widget templates.
  • Tekan tombol CTRL + F pada keyboard anda untuk mengaktifkan modus pencarian.
  • Cari kode ]]></b:skin> pada template yang anda gunakan.
  • Copy / Paste kode di bawah ini dan letakan di atas kode ]]></b:skin>
Langkah 2
  • Cari kode <data:blogCommentMessage/> atau yang mirip dengan kode tersebut.
  • Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode<data:blogCommentMessage/>.
  • Kode : <dd class='emoticon'>        </dd>
Contoh :
kode 1 : <dd class='emoticon'>
             <p><data:blogCommentMessage/></p>
kode 2 : </dd>
  • Cari kode <data:comment.body/> atau yang mirip dengan kode tersebut.
  • Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode<data:comment.body/>.
  • Kode : <dd class='emoticon'>        </dd>
Contoh : 
kode 1 : <dd class='emoticon'>
             <p><data:comment.body/></p>
kode 2 : </dd>
  • Cari kode <a name='comments'/> atau yang mirip dengan kode tersebut kemudian lihat kode diatas <a name='comments'/> umumnya seperti kode <div class='comments'>atau seperti kode <div class='comments-wrap'>. Tambahkan kode [ id='comments' ] seperti contoh berikut ini.
    Contoh 1 : <div class='comments' id='comments'>
    Contoh 2 : <div class='comments-wrap' id='comments'>
  • Ingat hanya tambahkan kode [ id='comments' ] jangan merubah nama class-nya.
  • Langkah 3
    • Cari kode <p class='comment-footer'> atau yang mirip dengan kode tersebut.
    • Tambahkan kode di bawah ini dan letakan di bawah kode <p class='comment-footer'>.
    • The Code...
      <hr/>
      <div align='center'><span>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;cemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Yahoo Emoticon</b></span>&lt;/a&gt;</span><b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;uiemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Upin&amp;Ipin Emoticon</b></span>&lt;/a&gt;<b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;kkemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>KasKus Emoticon</b></span>&lt;/a&gt;</div>

      <br/>

      <center>
      <div id='cemo' style='border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ebe9da; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 50px;'><center>
      <b>
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
      :))
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
      :)]
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
      ;))
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
      ;;)
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
      :D
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
      ;)
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
      :p
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
      :((
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
      :)
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
      :(
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
      :X
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
      =((
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
      :-o
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
      :-/
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
      :-*
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
      :|
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
      8-}
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
      ~x(
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
      :-t
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
      b-(
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
      :-L
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
      x(
      <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
      =))

      </b></center></div></center>

      <center>
      <div id='uiemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 110px;'><center>
      <b><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQSLA8i2upQcWnI2Rla6uGDDuww14ZYa2lke2DMJTWKSGyGaFx-zXTyxGXy2_9U4EM79957zsmr841qlewFrfEWY7_6Yy2F9DTfhwC6El9-6DwTOaqkJDh-28ekW1hCyt_yOn8i2-qgbq/s800/ehsan01.gif' width='50'/>
      :a:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRJ4NjYo2qWF4UPL-NsjsC2b_KZClzhzNxMQ810xD_f6oaWv-at9iC5ZWso5_g2sYGkqbQvAgYXIAbJ6XzPD8lwTZy2EWKI9B_qf4IWsXU2fjwEGSVX-tmGLsjG769FHDRfXeFD1QN1LOj/s800/ehsan02.gif' width='50'/>
      :b:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ieBRIfS0Pn1hXUxZHqk5n98d9i_uV5hroEnBW7GX619y-eaGKDr2LYo4KV6wV3iRkhbl-pI6UHCBdFHRJDOnR1bp3OUXIYPU-vCfBml6fuhU4jx9SeWxX1XOjTNlwTbz-khHc3SWxR8z/s800/fizi01.gif' width='50'/>
      :c:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigqnoVYNslv_X1Amk_c6ZCAElDk_ucSqZ22Oe80lQOFFk1eCh4LIj0_b7Hc8Pa_XP_Hj17lvrZwLav1zLhNvqsXFYzrS1hRvTUzTUNSDDIE2dg7p7tjCcCoBUEHrp6UivGTdpNdcf06tem/s800/ipin01.gif' width='50'/>
      :d:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj-bExbuOWAlUabo_HabiX_OHw1ko1e5jCq9lRJxj1fGnQ7P8vRA2JINL8s8BJbK8oY_6yaPKoZcsek9dC7J28JoQ7HAisJ2X5VnjM9cELIKjVIX3ve1-QaYdBm8fbErSozmDSIa5UyTG-/s800/ipin02.gif' width='50'/>
      :e:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTcE8FP9FKxhCf8JXT7kIa7hkPGSPduNnP25oX6PphP8SyewTqkyFUJtzTzCT9yeb0355KBiKCrZk28_a9_eTWCkbLwS6BEvumOsKdY3c-wWbFMoXpCsgtl2hWnPAqjoU23tPCNpa-5fd/s800/kakros01.gif' width='50'/>
      :f:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-NDA10iPmbMf6A3vEM0vzroXl53rk6fTacBgGEQCoJNQHJM__8ru30J0bPQp-1WD_6JziTmjHCB-5sCUZFU797lN7gthYMyMY5xDEGcFY0gZQ-UgDatvOn-VSCjp3Xh_Lal8hTv4iuO-/s800/kakros02.gif' width='50'/>
      :g:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-UkTnuRfXIZi6yfI1BmOg2GWgqTN2OL0rHXehw3pA4W90eEd0scBpqI7DUeaWrUq82nPEyOsGyIAvmAPg3SFKrroqGFIwfJU7lo_P9IV5KUvf8IFufZQ0Swb8wYYEJqOcQz-25iGB1y6/s800/mail01.gif' width='50'/>
      :h:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkg9-LU-lOHPq3SIY5QUYVtF3r-3nSQaO9rgHIb_E-Jh2X-mA2yHyI1p0ENEHzBUlwbUeqvmI6kSLOojmlQMrz-bJBqONkecBax6dCeryXpydoAhaFVDZZnl4NkqYqG02aOs1Qrgfhk23B/s800/upin01.gif' width='50'/>
      :i:
      <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizm-PTVI2rTnY5DTJhL7b3Aiw3ODjMtEEpLUA5Rl9CNMBYa-2h0Mf-JbwwkQHM2kFOP7SRHFmTz-HMevZZeTT8cmIQILRIQ1xwZc08Po14bkXQ-6hDS45E06aL0OqxYyZxcnjXsujROL0t/s800/upin02.gif' width='50'/>
      :j:
      </b></center></div></center>

      <center>
      <div id='kkemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 150px;'><center>
      <b><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGkwZHGAqXu1hltNJgdh8__M14YeFlLJ4TKjaX_Xfsj94WnYD25_sbksd3SJqLIrLA5HPF3CSyLFXYdPVnAYcmN97FGTtvbxQpV9PVMZN7v36AJ1dO-HwaNG1NlSbp7FXP5Q_m2yFEplg/s800/sundul.gif' width='40'/>
      :ka:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyTdj5N-7KJt9v6P9ZG-TQzWLwv-qkfDBUKluhZFNRgxve3flX2xRPqrQBXJhyphenhyphensr4u6rRHj9go3xdlqHv31wSAwKma48V4yOnsE-myzhw-41DYFrikFMQnLDO4XDpBscl6oDQ61QuGfB-/s800/s_big_cendol.gif' width='40'/>
      :kb:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9Gm1wnLLqUbM0jDS25cpAdRbAiBpglKWXXAj1kk2SV1SLeRsA_Kf51ey3LuaLoob3Y3aeA_CCjRUpQZqeDdoxxgw6giDaFylDE9RHSTm27uWZeagA3QGsMrFLw3PNeBWZHbR0txSzNR_/s800/shakehand2.gif' width='40'/>
      :kc:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBxq8LRXQKCngIbCdTB3jET_A1MMAnjPoVjLphbPJcCbTCypGVFgCkKYBU5FQgX1jIrgQ8g47zexHSqLcGTYb_UrFRFwQdaL74BWYjQX76RWxLSDEY-PpHiFK5yM_maNmNBssKziXcST1/s800/ngakak.gif' width='40'/>
      :kd:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEpJqHl9pBlXbJa4gv6hb7WO_5WBQ6XBRG_-0tM93_OMp2TlnuRHNcs7dZdfpfqgK8R2goX-22Ct6znr0WPT6W9w9q9nsJJE3LIbCXttTyZlWPviuE2yAekPXKj0_3PZ8Kz8EvFJPgAcHD/s800/pertamax.gif' width='40'/>
      :ke:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNEfqWo6c391jQVgaEXcoBrlBcYmkIfQQW29AVwI-Z7AADo_gEPJJSgVoILMNA8rmlE7z0gP_GI1js-QRz5nO0ukbRMOlGYLqzhzxc34hrCQYWM5R1p8L0ivnuArjQrYWUiTfiwJcSVwY/s800/mewek.gif' width='40'/>
      :kf:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPwV_RgBtLmjlP461fTK-ND26PhQuvL4qI60fRybuw3OTL6LsgL6grEAxwFDR79phZG-ByaGTrkX3n6med8qVjRaN4T4Owxk6XHq9dD2bYynqxvKU_mg_Q0soLtsg-KYnpHLTHzuQzfDA/s800/siul.gif' width='40'/>
      :kg:
      <br/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwMOgLZ6uUgXIqlz_1gWCoOGLmQxIjKqu_Jddz7UCrC33ctVw-AbpVpJatFUrePBLZMTq5Cm0JD_M9sVEKlGXn1DJuV9zrXDO1EAuMoUvKZwxXHt2vgjUWfOCcSEHOm3EAMXOVQVzL31x/s800/nosara.gif' width='40'/>
      :kh:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4UM4zuRo461sjJJXzFAhYH4y5lFnAl3XEYMVDBHbsy5BIyrqO618Lojc3GdJzWOx4ht9r5HF26CGpl0-ws5HsqT6bXUNXIDLolhvNejtUon7hIljWkAAhYOPqtjtwBpoGniCdVDur9lO/s800/takut.gif' width='40'/>
      :ki:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1g2cfxHCvWKfc00xzbRqLacG7_8vaP1NdWDq08N6V2PVL_CNZLeR082CSGhpNrFfjJJkYAAAbel_QptQdlaFgOgDgMHRTJlT_jGfCJwzZfvN_NScmzHXhlu32qpiFBlLQpYjrvoop0H4s/s800/tkp.gif' width='40'/>
      :kj:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8znZQ2WKzMlnkfjp9an2wmCTyW9zxxz032LxWRv8vMH3IBMoyZNjoG1ZR7GnFUnLtUcMSNnig4Qvmv2s0U9_Dam_anK3gzy2C3AbmR6dB_uCmVWMt-EZjCf7jgttSuMHSUITLvJXPC1D/s800/marah.gif' width='40'/>
      :kk:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQ7KXwXeZ0TB6A51RSrlR6MYNbCwMk-Qg1UQVUx682aiP_ih7Smjn-zRCx44CxKUq40KaNgKFht6IghG8aCm7J9KoLtef2e9Ae8vAkKf_VAKAQ6ufsWGUr_gi_2Fnb_hI9eW1qRUDKA8g/s800/I-Luv-Indonesia.gif' width='40'/>
      :kl:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin6AZ91xBFc0AVLPShomYvLY_gDSBTTzaBtl1be04xZrmVGzKlUZtGKI53ddFx5xZRFvd360dgYZsvvjd97g0VBPdpYTXcszDZXF4OUUML6iMqnsxG-ryQr1k6HLSiL3nrxyIU-cEEYSrO/s800/hoax.gif' width='40'/>
      :km:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8juvtgItplSxJxtDGU1JxfWU8Q1eG6bOtzOxfakM98lU_ASJ1yHDfhW46BouSg0gKu1svnjZZE_7kcHPYm9MPpSLuoLjKYn3slQoqirfVm918I5jjLgm7CYpXQntUdwO5G3apR2B8qmH/s800/berduka.gif' width='40'/>
      :kn:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ9b7C6O-m7xr8Rq0haT5t59TxfxuYFrFMh2EK8ETT8jQ8rAzCEqVDKUdFeCMD-UiN5sMJlrC5bFTLDfYwiZxoLu4-xbx9-R9VE9Ptof2L4zfSH4GD8K-PcvTkgbbP9sIH-dDO9XHQH8r7/s800/ngacir2.gif' width='40'/>
      :km:
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCCASmO1XSbQ3_t0DxHT4svCuIrLhGgP8ebWvmJ46dU5XmSIah9r8cPh63JfOhrmTa98KeTp3GmzkalEJlcZ4p71NzqqC2wG7LeRTPYosxtJ325dMpJBEpnWkMhh7YU17I6M7tkQiY2Lm/s800/bis.gif' width='40'/>
      :ko:
      </b></center></div></center>

      &lt;div style=&quot;text-align: center;&quot;&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      &lt;!--
      google_ad_client = &quot;ca-pub-6109930972696170&quot;;
      google_ad_host = &quot;pub-1556223355139109&quot;;
      /* MonoCore 468x15 Link */
      google_ad_slot = &quot;2912254634&quot;;
      google_ad_width = 468;
      google_ad_height = 15;
      //--&gt;
      &lt;/script&gt;&lt;a href=&quot;http://www.blogger.com/page-edit.do?blogID=7105494544424735270&amp;amp;pageID=1647161614117998862&quot;&gt;
      &lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
      &lt;/script&gt;&lt;/a&gt;&lt;/div&gt;
    • Jika kode <p class='comment-footer'> ada dua maka pilih yang kedua atau yang ada di bawah.
Langkah 4
  • Cari kode </head>.
  • Tambahkan kode di bawah ini dan letakan di atas kode </head>.
  • The Code...
    <script src='http://7startmenu.googlecode.com/files/jquery_vstart.js' type='text/javascript'/>
    <script src='http://7startmenu.googlecode.com/files/animatedcollapse.js' type='text/javascript'/>
    <script type='text/javascript'>
    animatedcollapse.addDiv(&#39;cemo&#39;, &#39;fade=1&#39;)
    animatedcollapse.addDiv(&#39;uiemo&#39;, &#39;fade=1&#39;)
    animatedcollapse.addDiv(&#39;kkemo&#39;, &#39;fade=1&#39;)
    animatedcollapse.ontoggle=function($, divobj, state){}
    animatedcollapse.init()
    </script>
  • Kode tersebut berfungsi sebagai Show / Hide Script.
Langkah 5
  • Cari kode </body>.
  • Tambahkan kode di bawah ini dan letakan di atas kode </body>.
  • The Code...
    <script src='http://monozcore-project.googlecode.com/files/smiley_comment.js' type='text/javascript'/>
    <script src='http://monozcore-project.googlecode.com/files/upinipin_smiley_comment.js' type='text/javascript'/>
    <script src='http://monozcore-project.googlecode.com/files/Monozcore_Kaskus_Emoticon.js' type='text/javascript'/>
Selamat mencoba...jika ada pertanyaan silakan tulis di kolom komentar....


Cara Pasang Custom Cursor Di Blogger



Tambah daya tarik blog sobat dengan memasang custom cursor di blognya, biar tampilan blog sobat makin oke dan lebih menarik. Secara default, cursor blog berbentuk panah, namun jika sobat bosan dengan tampilan itu, sobat bisa merubahnya sesuai dengan keinginan sobat. Tertarik ??? silahkan simak info lengkapnya berikut ini.

Siapkan cursor yang akan digunakan. Sobat bisa menggunakan cursor buatan sendiri atau mendownloadnya dari penyedia cursor gratisan. Berikut beberapa situs yang menyediakan cursor gratisan.
  • cursors-4u
  • jellymuffin
  • moocursors
  • 123cursors
  • myspacecursor
Pilih cursor yang sobat suka kemudian copy link cursornya. Sobat dapat menggunakan linknya secara langsung atau menyimpannya ke hostingan tempat penyimpan gambar yang sobat suka.

Langkah selanjutnya adalah memasang kode css cursor pada blog sobat. Ikuti langkahnya sebagai berikut.
  1. Login di Blogger.
  2. Pilih Template.
  3. Edit HTML.
  4. Search/cari (gunakan Ctrl+F pada browser) body {
  5. Letakkan kode yang berwarna biru seperti yang dibawah ini pada css class body. Contoh.
    body {
    background:#fff;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small;
    cursor: url("https://sites.google.com/site/monozcore/home/OptimusPrimeCursor.cur"), default;
    }
  6. Ganti kode yang berwarna merah dengan alamat link cursor yang akan digunakan.
  7. Simpan Perubahan Template dan lihat hasilnya.
Gampang kan...jika sobat masih mengalami kesulitan silakan tanyakan di kotak komentar.


Hapus Banner Blogger


Navbar adalah fasilitas yang dimiliki oleh blogspot / Blogger, bentuk kotak kecil yang memanjang lateral terletak di bagian atas blog yang berfungsi antara lain, untuk mulai melakukan Sign In / out, atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan penipuan atau kejahatan yang dilakukan oleh weblog dari seorang blogger, seperti konten blog yang melanggar TOS atau hal-hal lain yang dianggap merugikan orang lain.

1- Log in ke blogger

2- Pada Dashboard Anda, pilih Layout. Ini akan membawa Anda ke tab Template. Klik Edit HTML. Di bawah bagian Edit Template Anda akan melihat blog Anda HTML.

3- Sisipkan kode CSS (yang berwarna biru dan merah) seperti contoh dibawah ini pada template anda. Perhatikan letak posisi kode agar trik ini dapat berjalan.


<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:    
Designer:
URL:     
Date:    
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}

/* Variable definitions
  ====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
   

Selamat Mencoba....

Mengganti Link Home, Older Post & New Post Dengan Gambar


Satu lagi tips untuk membuat tampilan blog semakin asik dan ciamik. Biasanya dibagian bawah postingan blog terdapat link teks older post, home dan new post, nah...biar tambah siip link teks tersebut kita rubah dengan gambar atau icon yang bisa menambah daya tarik pengunjung blog. Trik ini biasa digunakan pada kebanyakan blog profesional selain menambah daya tarik, fungsi dari link ini akan menjadi optimal untuk pengunjung blog dalam menavigasi halaman blog...Tertarik ???

Oke buat sobat blogger yang ingin mencoba trik ini, silakan ikuti langkah-langkahnya:
  1. Login ke blog sobat.
  2. Klik "Design" kemudian klik "Edit HTML".
  3. Centang "Expand Widgets Templates' box".
  4. Untuk New Post cari kode di bawah :

    <b:if cond='data:newerPageUrl'>
    <span id='blog-pager-newer-link'>
    <a class = 'blog-pager-newer-link' expr: href = 'data: newerPageUrl'
    expr: id = 'data: widget.instanceId + "_blog-pager-newer-link"'
    expr: title = 'data: newerPageTitle'><data:newerPageTitle/></ a>
    </ span>
    </ b: if>

    Ganti baris kode diatas yang berwarna merah "<data:newerPageTitle/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbOIcpBFAAy5MnnBZDOhPYtbNORB99F9WNV_6hvT3AIHg435Q2_mPNSKbfl58G6Y9ugsE7kFn1-9Edpnfc8EeKCCZZrlFRnkh40TENMrLPAdLlWbtRWPHgefh4uz0X3hARxOU17GMvPmoj/s800/newer.png"/>".

  5. Untuk Older Post cari kode di bawah :

    <b:if cond='data:olderPageUrl'>
    <span id='blog-pager-older-link'>
    <a class = 'blog-pager-older-link' expr: href = 'data: olderPageUrl'
    expr: id = 'data: widget.instanceId + "_blog-pager-older-link"'
    expr: title = 'data: olderPageTitle'><data:olderPageTitle/></ a>
    </ span>
    </ b: if>

    Ganti baris kode diatas yang berwarna merah "<data:olderPageTitle/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fCYiFSo_-1v-VNaDEjHfwQgEtin89ELa8dadoJVxORwqtvTURyGiSC80u_LYYo120pzRVlu7HXMBMp9VFk6r8Az-nWt8hfVXf-pSNip4u89-ODFTobBhR6TUfNPL1MeFo2YOL16hNXjv/s800/older.png"/>".

  6. Untuk Home cari kode di bawah :

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/></ a>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/></ a>
    </ b: if>
    </ b: if>

    Ganti baris kode diatas yang berwarna merah "<data:homeMsg/>" dengan kode "<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVx4CS028hAfSdoDPnxZnjLHZHRmZb5A81ImweVfHC_kLhnbXNrNmux0pFR3ieKgddp5FUwHXwj41-t_pYxrqadpXaMcMsP9HhDLNJz-OdUiPzz6D6xZA6s9G46MPlb4ugTwucWtotgEr/s800/home.png"/>".

  7. Gunakan CTRL+F untuk memunculkan search bar browser agar lebih mudah untuk mencari kode-kode di atas. Cukup ketikan newerPageUrlolderpageUrl dan homepageUrl untuk mempercepat pencarian.
  8. Untuk menggunakan gambar / icon sendiri, sobat blogger cukup mengganti link URL gambar / icon yang sobat inginkan.
  9. Klik "Save" dan lihat hasilnya...
.:Semoga Bermanfaat:.

Senin, 27 Februari 2012

Blog Butterfly Effect

 


Membuat kesan yang unik dan menarik merupakan salah satu strategi untuk mendongkrak popularitas blog. Salah satu cara untuk membuat kesan yang unik dan menarik adalah dengan memasang efek kupu-kupu yang sedang terbang di blog. Efek kupu-kupu ini menggunakan javascript flying image yang menggunakan gambar animasi gif kupu-kupu. Contoh hasil dari efek kupu-kupu ini bisa dilihat pada postingan artikel ini, coba perhatikan tampilan blog. Pada tampilan blog terdapat kupu-kupu yang seolah-olah sedang terbang di tampilan blog. Efek kupu-kupu ini bisa di nonaktifkan dengan cara meng-klik kupu-kupu tersebut.

Cara Pemasangan :
  • Login ke blog sobat...

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



  • Copy-paste kode script berikut ini di kotak postingan gadget.
    - Efek Kupu-kupu 1


    <script src="http://monozcore-project.googlecode.com/files/KupuKupu1.js" type="text/javascript"></script>



    - Efek Kupu-kupu 2


    <script src="http://monozcore-project.googlecode.com/files/Kupu-kupu123.js" type="text/javascript"></script>

    Catatan :
    • Apabila script ditaruh di template blog maka taruh script di atas kode </Head>.
    • Apabila script ditaruh di gadget blog maka kosongkan judul gadget.

  • Klik "Save" dan lihat hasilnya...
Gimana infonya... keren-kan ??? Seperti biasa jangan lupa supportnya ya... supaya kreasi berikutnya makin unik dan menarik... terima kasih, akhir kata...

.: Semoga Bermanfaat :.

 





Cara membuat animasi tulisan berjalan di blog

Pernahkah anda membuka blog kemudian di blog tersebut ada animasi tulisan berjalan, mungkin kalian pernah mengunjunginya dan menganggap hal seperti itu sudah biasa tapi bagi yang belum mngetahui hal tersebut pasti akan merasa kagum dan ingin membuat blog mereka seperti itu.
tulisan kali ini saya akan memposting sebuah animasi tulisan berjalan dan silahkan anda mengcopy atau membuat sendiri tulisan tersebut.
Cara membuat tulisan berjalan di blog.
1. Masuk ke dashbord blog anda
2. Kemudian pilih Rancangan
3. Klik New Widget
4. Pilih HTML java script
5. Paste kode script ke widget anda

1. Tulisan berjalan ke kiri

< marquee behavior="scroll">Lkp Dian Nusantara Surakarta</marquee>

2. Tulisan berjalan ke kanan

<marquee behavior="sroll" direction="right">Program Pendidikan Satu Tahun</marquee>

3. Tulisan berjalan ke atas.

<marquee height="30" behavior="scroll" direction="up">Ayo Bergabung Bersama Lkp Dian Nusantara Solo</marquee>

4. Tulisan berjalan ke bawah.

<marquee height="30" behavior="scroll" direction="down">Jangan Pernah Ragu Untuk Memilih Dian Nusantara Solo</marquee>

5. Tulisan Memantul.

<marquee width="400" behavior="alternate">DINUS SOLO</marquee>

Selamat Mencoba ....

Cara Membuat Background Bergerak di Blog


Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis. Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal dari arah bawah ke arah atas. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.


  • Login » blogger.
  • Rancangan » Edit HTML.
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.

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

  • Copy-Paste kode di bawah ini tepat di atas Kode </Head>.

    <script type='text/javascript'>
    //<![CDATA[
    $(function(){
    // ***
    // Scrolling background
    // ***
    // height of background image in pixels
    var backgroundheight = 4000;

    // get the current minute/hour of the day
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();

    // work out how far through the day we are as a percentage - e.g. 6pm = 75%
    var hourpercent = hour / 24 * 100;
    var minutepercent = minute / 30 / 24 * 100;
    var percentofday = Math.round(hourpercent + minutepercent);

    // calculate which pixel row to start graphic from based on how far through the day we are
    var offset = backgroundheight / 100 * percentofday;

    // graphic starts at approx 6am, so adjust offset by 1/4
    var offset = offset - (backgroundheight / 1);

    function scrollbackground() {
    // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
    offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    // apply the background position
    $('body').css("background-position", "50% " + offset + "px");
    // call self to continue animation
    setTimeout(function() {
    scrollbackground();
    }, 70
    );
    }
    // Start the animation
    scrollbackground();
    });

    //]]>
    </script>
  • Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.

    <style>
    body {
    background: black url(http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif)repeat center; background-attachment: fixed;
    }
    </style>

  • Keterangan :
    repeat // Pengulangan gambar arah x dan y.
    • repeat-x // Pengulangan gambar hanya arah horizontal.
    • repeat-y // Pengulangan gambar hanya arah vertikal.
    http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif // URL Link gambar.
    - center // Lokasi gambar berada di tengah layar.
    • Left // Lokasi gambar berada di kiri gambar.
    • Right // Lokasi gambar berada di kanan gambar.

Pilihan Gambar Background 


  • http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84fk6ovyJz6zHL4nFEn9s7bqNkHdJmyCGA2sNglc6szld5MUgSQqdhQOXE-gBdeI1BVsl0jomyZJNvtt3yyWJ_SOYeGYB9-nbGD_VZZd2b3dRfRmVjIiXMY2gIa1myMaBlP4EndIGrnun/s800/bg_star.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUWshdIoF8JfZLzXiKtR4vuJuQGBBRMzWIEpMcK1otsdF1eu0AQKUqVgAYX4XIpY_M_m-N0arfCpSR1IS6zs_FzPwco5A3ZDPqqtR7-XmA_n4zAmdE64mwc5i-CzKR1lickIQII1y6QSd7/s800/bg-clouds.jpg



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvaJ5_kVQbfftJ_tNgkO4_hJP3vshLK1FCZRknTBOYRlYzMoQdw3bJHDInd20bvLM-tnisemz78eKGTOCg0kQZoRdHkecNTglaYXwrL8hYNQSDtrNWegU965wWxnGZPs2u_aJID-odJqF/s800/skull-fire-monozcore.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUER0Y93OkdN7H10rMOftAm3XJvJUM9sZ8Gthvi8QUe5Jtq1S4LJSfumD-ju199R5h-oI_bVLSlwCXQ3kwHr9E1gnHDGMxOTScNzb-jiAFbOsPCIrjBSy88IOu34H7HLki937Hpn1_oHyi/s800/dance_flow.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMPFwKO_Jqx1yCfWwaHIes3FgptKc1aEm24ya948ikgrMMCrkjRkcEIpAjPl8mEjZo_yFa2eFx6lXK6G-Qh6qrKClOe_42jTQEEi7jrmSvyDCWT_iETW6tptM9hsZHv3t7h0bXZI_NqAQ/s800/ThighHeels.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1OZLMfP-wDNdjpyWc1WeYR1SCRSj-38TZZk0UMybXrJUJH80pnHJb-1GJofpoNlVP9cziRB3JEUvjDk5N1yWUbETHwCyLKXNqSsCWlWAutlROoYzcHpnBwdvmpA9oQxm3RzuPBO_u34a_/s800/animated%2520stars.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOULpiL5gUcncKpYqEEkzoeNn-PgcBIZmM7Y4MKr0AD6p5WcGjeOpe1_FMMVxMLJsYqYSMTPa-DlXivmffdT7a-QK9ojIilPct0pY1C1uPF4otx-ju_bedjahH00HZ01Ph-t5foKje5zNy/s800/animated%2520blue%2520stars.gif
.:Selamat Mencoba:.


Siapa sich... yang ga kenal sama "twitter" ??? Pada kesempatan kali saya mencoba untuk membuat postingan artikel tentang animasi burung terbang twitter. Buat temen - temen yang lagi suka nge-blog widget ini wajib untuk di pasang di blog-nya. Sedikit me-review tentang twitter supaya bagi - bagi ilmunya ga tanggung - tanggung. Itulah nilai plusnya blog ini ga cuma copy - paste doank....hehehe :) jadi promosi dech....maksud saya dari sekian banyak blog yang ngasih informasi tentang widget rata - rata hampir 90% artikelnya copy - paste doank yang fungsinya cuma buat nyari dollar ama popularitas blognya termasuk saya ...hehehe... setidaknya saya masih punya nilai plus-lah. Ok back to topic.

Seperti yang sudah saya singgung "twitter" kalo dalam bahasa burung berarti berkicau dan apabila burung berkicau biasanya kalo dalam spesies yang sama saling bersahutan. Nah twitter.com mengambil konsep yang sama seperti burung dengan membuat sistem jaringan sosial yang bisa saling berkicauan atau sahut - menyahut secara global melalui internet. Hebat kan... kalo twitter mania sudah mempunyai high rank di dunia jagat maya, sekali twitt bisa dapet jutaan follower dan itu berarti uang...uang...uang koq bisa ??? ya bisa lah itulah mengapa saya bilang mengapa blog ini bernilai plus ++ Lebih lengkapnya silakan follow link ini [klik disini].

Twitter merupakan salah satu situs jejaring sosial yang terkenal diantara para blogger dan netter. Widget untuk twitter ada banyak jenisnya dan kebanyakan dalam bentuk icon dan tombol yang bentuknya statis artinya hanya terpaku pada satu lokasi. Sekarang pada kesempatan kali ini saya mencoba memberikan informasi tentang salah satu widget twitter yang dinamis. Kalo widget ini di pasang di blog nya sobat pasti akan menambah daya tarik pengunjung yang sedang blog surfing di blognya sobat.

Widget ini berbasis plugin javascript yang akan menampilkan animasi burung twitter yang sedang terbang dan hinggap di area yang terlihat di monitor. Ketika cursor pengunjung mengenai burung twitter ini maka akan memunculkan teks "Follow Me" dan menampilkan link ke twitter sobat.

Pada postingan ini saya akan memberikan 2 Opsi penempatan animasi burung twitter yaitu sobat boleh menempatkan pada halaman utama saja atau pada semua halaman. Untuk mengetahui lebih lanjut kode xml tentang penempatan halaman pada blogspot silakan sobat baca artikelnya [klik disini]. Seandainya sobat tertarik dengan widget ini tapi belum mempunyai blog dan sobat belum mengerti tentang cara membuat blog silakan sobat baca artikel cara membuat blog di blogspot [klik disini]. Tuh... lengkap kan ulasannya. Kalo sobat suka dengan postingan artikel di MonozCore silakan sobat bookmark blog ini ataupun mem-follow blog ini biar ga lupa alamatnya dan selalu uptodate bila ada postingan terbaru. Oke sekarang kita langsung aja ke TKP (Tempat Kejadian Postingan)

Menampilkan Widget ini Hanya Pada Halaman Utama Saja
  1. Login ke blog anda.
  2. Klik dashboard > design > edit HTML.

  3. Cari potongan kode xml pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser sobat untuk mempercepat pencarian).
    </body>
    
  4. Copy - Paste kode berikut ini tepat di bawah / di atas kode "</body>".
  5. <b:if cond='data:blog.url == data:blog.homepageUrl'>
    
    <!-- Twitter Bird Widget for Blogger edited by MonozCore -->
    
    <script type='text/javascript' src='http://monozcore-project.googlecode.com/files/tripleflap.js'>
    
    </script>
    
    <script type='text/javascript'>
    
    var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZKAPEDnB5Adl5wFvtcOSgHVujazduZbCoBG5bwZbNWGMn3o0npVSxzRFEapA5ksX5gssBhiEO1KfqmvUUkClms5bSbbIspbYE3Q0GIPvGzut3a3bzfksIWZi9Su3HKObHSnl6AOJXrk/s1600/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
    
    var twitterAccount = &quot;http://twitter.com/TwitterKamu&quot;;
    
    var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
    
    tripleflapInit();
    
    </script>
    
    <!-- Twitter Bird Widget for Blogger edited by MonozCore -->
    
    </b:if>
    
  6. Kode yang berwarna biru berguna untuk pilihan animasi. Apabila sobat ingin mengganti animasi dengan Stickman sobat tinggal mengganti kode yang berwarna biru dengan kode untuk animasi Stickman.
  7. Kode yang berwarna hijau merupakan kode untuk alamat akun twitter sobat. Silakan sobat isi sesuai dengan alamat akun twitter sobat. Caranya : ganti kode yang berwarna hijau dengan twitter.com/sobat yang mana sobat adalah alamat username twitter sobat.
  8. Simpan kemudian lihat hasilnya.
Pilihan Animasi
  1. Burung Twitter 


    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZKAPEDnB5Adl5wFvtcOSgHVujazduZbCoBG5bwZbNWGMn3o0npVSxzRFEapA5ksX5gssBhiEO1KfqmvUUkClms5bSbbIspbYE3Q0GIPvGzut3a3bzfksIWZi9Su3HKObHSnl6AOJXrk/s1600/birdsprite.png

  2. Stickman Twitter


    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjloNi8eEmx-1ZBx87VRkYcp6ufDzgAlgZQ-8AO6dNJ3J_-iLAwGq5yk0egWzShyphenhyphen62dHkFYcmKjHp5-2R6O-morWheA2hUi3rYhxgI0nIK731N6QZEQLqvG3QLwaGnP9kYcrDAt5Tgn9qU/s1600/birdsprite_MonozCore_Stickman.png

  3. Star Scream Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6zCadH4dwcJC7PKb2smW93gzxjNFXDw-pCahZNGYv9zpQK_VGiu12cJsI4xcT-I_1IF-WHo1lSmtiDnhixMXgte0t6QuFFPGqOC4Fze0Si-A-wXCUoSCzePAAPSzQoAn4yTrQ27iRlQ/s1600/StarScream.png

  4. Bat Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigiku8NyZuFaerraqpl2BQ6b3oIqmKrai1VkTInWGRrE3LqZg28_q-N-QmFCDZJPY3sLRXbFYhBAXTyNLjQkkFB5_ZGLBWMEGfYTtqRPZ_XCL6j0TqswaqH_3Vw6IsR-nn6mSxV5M9v2o/s800/MonozCore.blogspot.com_BatTwitter.png

  5. SantaBird Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpTAkDRZUkfcUXVCon3fJFj_xqk9xDcSZ6MY51UYUmBeMLIQCPKd62UJH3mN_iUg88uP0r1uvAsDzetDX-b918Jk0vfdkD4gZD8pKppKkgaF3OSbrIx94teowps7Z72eYjh0Niws3Zew/s800/MonozCore.blogspot.com_SantaBirdTwitter.png

  6. Dragon Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc2oHDdcDOqVM3nh15gYRNiHyAS-KRQb1V7lnVEUusJ-S9LceDawVxe8B2kz_xHiVbHJpucdbYs_eQ4ctl5uoFVmhyphenhyphenOkEMdCapNDCRUAD8LInq_OdMUrpknxaHTNywVHN664-zo0Zdkg/s800/MonozCore.blogspot.com_Dragon_Twitter.png

  7. DBZ Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wTiWGW-YGULzZOtkUyt3XztrE0zCqEsU5N9ESuMIcH_hrd9SdMBxPh9DuZXGpSG-aWhDecF3qASUerTvCv3BpQBd0Id2nNj7EHK3idvFE1bkEL3rquZLpWUx4YFsjAGxgqH1Uti9wow/s800/MonozCore.blogspot.com_DBZ_Twitter.png

  8. Dracula Twitter

    Gunakan Kode :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbeQGQ-pKNSfHqr8ycCNRdlSLrNoHTPVmAm4cXSi5tp44LWpeSXPMcg6dLQIR4L0Ppcp9dEja2OrKX4pdNG-LcqLkN0qncJBmzxNNno_eUzt30_pQzN0U4LzbhI3bdPL8KiSzv-1O2Qpq/s800/Drakula.png

Buat penggemar gundamz... nich saya buatkan widget spesial, widget flying twitter bird animation dengan karakter Gundamz, hehe... keren kan ???. Oke silakan di CoPas kodenya, jangan lupa koment-nya ya sob...

Buat sobat blogger yang belum bisa cara memasang widget flying twitter bird animation silakan baca postingan artikel Blog Widget Burung Terbang Twitter.

Gundamz

The Code :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwFg8uxObCUcXYPqJMX_Q0IO0giltSPUOUxGY_0JyGDFCHalHI6bX0pF34Bq-BFTXxzNwrPuKsrOUaeUSg0gNNbYoKjmgrX1jsEcFEF2I9AkuMDNGJzTKe4vKTEZijpydrlg5rKykTsbP/s800/gundam.png



Bagi yang ingin memberikan saran, kritik dan komentarnya saya persilakan, ga perlu malu sebab saya sudah siapkan kolom khusus di bawah postingan ini.


                                                                    .:Semoga Bermanfaat:.