adsense link 728px X 15px

Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts
Sunday, May 30, 2010, 

update twitter widgetMungkin anda sudah tidak asing lagi dengan twitter. Twitter merupakan salah satu situs jejaring sosial yang mempunyai banyak member setelah facebook. Masing-masing dari kedua situs ini tentu mempunyai kelebihan dan kekurangan. Setelah facebook meluncurkan lencana profil. Twitter-pun tidak mau kalah karena di Twitter juga terdapat widget untuk menampilkan update twitter anda di blog. Mungkin inilah salah satu trik mereka dalam bersaing menarik perhatian para member ^^. Tutorial ini memang sangat mendukung bagi anda yang aktif di Twitter, karena anda bisa menampilkan status terakhir anda di Twitter. Jadi orang lain yang nggak punya akun twitterpun bisa melihat update twitter anda. Penasaran???

Langsung aja gan nih caranya.

  1. Login ke blog anda.
  2. Klik Tata Letak
  3. Klik add gadget (Pilih letak sesuai keinginan anda)
  4. Pilih/Klik HTML/JavaScript

  5. Beri title widget anda, kemudian Copy paste kode di bawah ini.

    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 1, //jumlah status terakhir yang ditampilkan
    interval: 6000,
    width: 250, //lebar widget
    height: 300, //tinggi widget
    theme: {
    shell: {
    background: '#0066ff', //warna background profil
    color: '#030303' //warna teks profil
    },
    tweets: {
    background: '#0099ff', //warna background status
    color: '#060606', //warna teks status
    links: '#ff9933' //warna link
    }
    },
    features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
    }
    }).render().setUser('adhityamasda').start();
    </script>

    Keterangan:
    * kode berwarna orangemerupakan keterangan kode yang berwarna merah pada masing-masing baris. Silakan sesuaikan dengan warna yang anda inginkan.
    * Pada features, kode yang berwarna merah (false dan true) mewakili ya dan tidaknya sebuah fitur. Misalkan pada fitur scrollbar anda ganti kode false menjadi true, maka tampilan widgetpun akan disertai scroll
    * adhitya silakan ganti dengan username akun anda.




  6. Klik Simpan


     Setelah semua selesa silakan lihat blog anda, langkah di atas di katakan berhasil apabila di blog anda muncul Update Twitter Widget seperti di bawah ini.
     Selamat mencoba dan semoga bermanfaat...

Saturday, May 29, 2010, 

recent comments widgetSetelah kemarin malam nggak update karena koneksi jaringan yang lumayan lemot, akhirnya malam ini baru bisa update lagi. Pada postingan kali ini, tak jauh beda dengan postingan saya yang kemarin, yakni tentang cara membuat recent comment widget atau komentar terakhir. Masih sama-sama memanfaatkan feed untuk menampilkan widget ini. Untuk live demo, silakan lihat widget ini pada sidebar di samping.

Langsung saja untuk cara membuatnya kurang lebih seperti ini.

  1. Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.


    <script src="http://masda.googlecode.com/files/recentcomments.js">
    </script>
    <script src="http://masdazine.blogspot.com/feeds/comments/default?max-results=5&alt=json-in-script&callback=showrecentcomments">
    </script>

    Keterangan:
    * URL yang berwarna merah (http://masdazine.blogspot.com) silakan ganti dengan URL anda.
    * Angka yang berwarna merah (5) merupakan jumlah comments terakhir yang akan ditampilkan.
  2. Login akun blog anda
  3. Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent comments ini
  4. Pilih/Klik HTML/JavaScript
  5. Beri title untuk widget anda, kemudian paste code yang anda copy tadi
  6. Klik Simpan

     Sekarang lihat blog anda, muncul nggak recent commentnya??? Semoga bermanfaat...

Thursday, May 27, 2010, 

recent posts widgetSesuai dengan namanya Recent post merupakan sebuah widget yang berfungsi untuk menampilkan postingan yang terakhir diterbitkan. Dari modelnya sendiri recent post mempunyai model yang bermacam-macam, akan tetapi yang akan saya bahas di sini adalah membuat recent post dengan thumbnail.

Untuk memasangnya silakan ikuti langkah-langkah di bawah ini.

  1. Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.

    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i45.tinypic.com/1z70ynn.jpg";
    showRandomImg = true;
    boxwidth = 300; //lebar widget
    cellspacing = 6; //jarak antar post
    borderColor = "#ccc"; //warna border widget
    bgTD = "#fff"; //warna background widget
    thumbwidth = 40; //ukuran lebar thumbnail
    thumbheight = 40; //ukuran tinggi thumbnail
    fntsize = 12; //ukuran font
    acolor = "#333";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#333";
    icon2 = " ";
    numposts = 5; //jumlah postingan yang ditampilkan
    home_page = "http://masdazine.blogspot.com/";
    </script> //ganti dengan URL blog anda
    <script src="http://masda.googlecode.com/files/recentpostswiththumbnail.js"></script>

    * text yang berwarna orange merupakan penjelasan kode yang berwarna merah pada masing-masing baris.
  2. Login akun blog anda
  3. Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent post ini
  4. Pilih/Klik HTML/JavaScript
  5. Beri title untuk widget anda, kemudian paste code yang anda copy tadi
  6. Klik Simpan

     Sekarang lihat blog anda, sudah muncul atau belum widget Recent posts yang baru saja anda pasang.

Monday, May 10, 2010, 

Menampilkan Status Yahoo MessengerKali ini saya hanya membahas tentang serba-serbi blog yakni menampilkan widget status yahoo messenger, dengan tujuan agar pengunjung blog kita mengetahui sedang online atau offline-kah? akun kita di yahoo messenger. Yah siapa tahu aja ada cewek yang berkunjung ke blog kita terus lihat tuh widget kita lagi online, saking baiknya tuh cewek di add deh YM kita. Kalo gini kan sekali dayung dua tiga pulau terlampaui, hehe...

(dasar pikirannya cewek melulu) emoticons langsung saja gan berikut cara untuk menampilkannya.

     Langsung saja copy code di bawah ini.

<a href="ymsgr:ID YAHOO MESSENGER ANDA"><img border="0" src="http://opi.yahoo.com/online?u=ID YAHOO MESSENGER ANDA&m=g&t=1"/></a>

     Misalkan saja widget milik saya seperti ini.

<a href="ymsgr:masda_life"><img border="0" src="http://opi.yahoo.com/online?u=masda_life&m=g&t=1"/></a>

     Hasilnya seperti ini.



     Namun apabila anda menginginkan widget dalam bentuk lain. Silakan anda ganti kode yang berwarna merah (t=1) dengan kode yang berada pada masing-masing widget di bawah ini.


t=2


t=3


t=4


t=5


t=6


t=7


t=8


t=9


t=10


t=11


t=12


t=13


t=14


t=15


t=16


t=17


t=18


t=19


t=20


t=21


t=22


t=23


t=24


     Waduh capek juga saya ngetik. Ya udah met nyoba aja dech, Semoga sampai tujuan....xixixi

Friday, May 7, 2010, 

Memasang Widget Whos amungPada saat anda mengunjungi suatu blog, tak jarang anda menemukan widget yang berfungsi untuk menghitung jumlah visitors yang sedang mengunjungi blog tersebut. Yah walaupun terkadang ada juga blog yang tidak memasang widget tersebut, hehe... Sebenarnya banyak sekali pihak ketiga yang menawarkan widget seperti itu, namun dalam postingan ini saya akan membahas pembuatan widget di whos.amung.us.

Alasan saya memilih whos.amung.us adalah karena pada whos.amung.us memberikan kebebasan kepada kita dalam menentukan warna widget tersebut. Jadi kita bisa menyesuaikan warna widget sesuai dengan warna template kita. Di bawah ini merupakan contoh widget who's amung milik saya.



     Berikut cara pembuatannya.

1. Klik DI SINI untuk mengunjungi whos.amung.us

2. Silakan anda klik "showcase" pada navigasi atas.

3. Pada halaman ini anda akan diberikan berbagai model tampilan widget. Namun apabila anda ingin kreasikan warna widget agar sesuai template anda, silakan anda Klik button image yang bertuliskan "Color Me!". Pada tahap ini saya anggap anda memilih "Color Me!".

4. Selanjutnya silakan anda klik "color wheel".

5. Setelah masuk halaman baru pada point pertama yaitu "Already have a map, or our widget?" pilih ""no". Pada point kedua silakan kreasikan sendiri warna widget anda. Lalu pada point yang terakhir (no.3) silakan anda copy kode yang nantinya akan anda paste di blog anda.

     Widget andapun telah selesai dibuat, langkah selanjutnya yakni memasang widget tersebut di blog anda.

1. Login ke blog anda.

2. Klik "Tata Letak", kemudian "Tambah Gadget".(tentu saja sesuai letak yang anda inginkan)



3. Klik/pilih "HTML/JavaScript", lalu paste kode yang anda copy tadi, kemudian klik "Simpan".

     Sekarang lihat hasil jerih payah anda.hehe... (kayak ngluarin keringat seember saja). Yang olahraga cuman jarinyapun. Selamat mencoba, semoga sinyalnya lancar sampai tujuan...

Thursday, May 6, 2010, 

Memasang Alexa WidgetAlexa widget merupakan sebuah widget yang berfungsi untuk melihat peringkat sebuah web berdasarkan jumlah pengunjung yang mengunjungi web tersebut. Semakin kecil peringkat maka akan semakin bagus web/blog tersebut. Dan pemberian peringkatnyapun lebih lengkap, dari 1 sampai puluhanjuta, lain halnya dengan eyang gugel yang memberi peringkat hanya diantara 1 sampai 10. Saya rasa mengenai penjelasan singkat di atas anda sudah paham dengan alexa widget.

Bagi anda yang berminat untuk memasang alexa widget, silakan anda ikuti langkah-langkah di bawah ini.

STEP 1
1. Kunjungi alexa.com.

2. Klik "For Site Owner" yang terletak pada navigasi. Maka anda akan masuk ke page baru yang berisi 4 kategori, yakni Manage Your Site, Widgets, Advertise On Alexa, dan terakhir Developer Tools.

3. Silakan anda pilih "Get Trafilc Widgets". Nah di sinilah akan di berikan 3 pilihan widget, masing-masing adalah widget Alexa Traffic Graph. widget Alexa Site Stats Button, dan widget Alexa Traffic Rang Button.

4. Selanjutnya anda tinggal memasukkan url anda pada kolom yang telah disediakan, kemudian klik "build Widget".

5. Copy kode yang diberikan oleh alexa (kode widget yang anda buat tadi).

STEP 2
1. Login ke blog anda.

2. Klik "Tata Letak", kemudian "Tambah Gadget".(tentu saja sesuai letak yang anda inginkan)

3. Klik/pilih "HTML/JavaScript", lalu paste kode yang anda copy dari alexa tadi, kemudian klik "Simpan".

     Sekarang lihat blog anda, dan tralala... alexa widget telah terpasang di blog anda.

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers