Widget dari BlogCatalog

30 Apr 2009

DuniaBlogger | BlogCatalog adalah sebuah situs jejaring blogger dan Blog directory yang memungkinkan kita membuat sebuah Profile dan memasukan daftar blog kita kedalamnya, di sana kita dapat berdiskusi, mencari teman, sesama pemilik blog tentunya! Silahkan kunjungi BlogCatalog untuk melihat info lengkap di sana! Web ini saya rekomendasikan karena akan berpengaruh juga dengan trafik dan page rank blog anda!. Di sini saya hanya ingin membahas beberapa tools /widget untuk perlengakapn mempaercantik blog anda.

Sebelum mendapatkan widget ini tentunya anda perlu melakukan registrasi pada BlogCatalog dan menambahkan daftar blog anda kedalam profile anda. Setelah melakukan pendaftaran, berikut ini adalah beberapa Widget yang ada di sana.

Silahkan Gunakan Link ini untuk melihat widgetnnya: http://www.blogcatalog.com/widgets

Recent Viewer Widgets | Adalah Sebuah widget seperti Follower pada blogger dan ini memungkinkan kita terhubung dengan blog teman-teman dai blogCatalog dan mengetahui apa yang dia baca di blog kita.

Discussion Widget | Sebuah widget yang memungkinkan kita mengetahui seputar permasalahan tentang tofik yang dibahas di BlogCatalog. dan ini akan menambah informasi dan wawasan anda tetntunya ketika anda semakin sering berdiskusi.

My Community Widget | Dengan adanya widget ini, akan memudahkan orang lain menemukan anda dalam sebuah aktifitas anda di internet dengan mengumpulkan atau menggabungkan account-account anda dalam satu widget.

News Feed Widget | Sebuah widget yang bisa anda gunakan untuk memanagement feeds anda sehingga orang lain akan mengetahui status terberu dan info terbaru tentang blog anda, atau account lainnya seperti tweeter, facebook dalam satu widget.


BlogCatalog Search Widget | DenganBC 360 Cari Widget anda memberikan kesempatan pembaca untuk menelusuriisi blog Anda tidak seperti sebelumnya. Anda dapat mencari pembaca blogAnda dan kegiatan sosial serta BlogCatalog blogger di jaringan anda.

Selamat mencoba!

Read Post | komentar

Fitur Menarik GFC Blogger (Follower)

9 Mar 2009

Judulnya mungkin hampir mirim dengan artikel O-Om di "Akhirnya Pilihan jatuh Pada GFC Blogger (Follower)" dan sebelumnya saya juga pernah memposting artikel tentang keanehan Widget follower Jadi google Friends Connect tersebut dan akhirnya saya memutuskan untuk menggunakan GFC Blogger (Follower). Hari ini saya sempet melihat salah satu vitur darinya! hal ini terjadi ketika saya sedang mencoba melakukan klik pada gambar seorang user yang melakukan follow blog saya! mau tahu?
Silahkan Klik Pada Gambar Image Pada GFC Blogger (Follower anda) dan lihat Hasilnya:

Akan ditampilkan sebuah ringkasan Profile pengguna "yang gabung di follower", Link Bllog miliknya, Blog yang diikuti dan Teman pada GFC.

Anda bisa menggunakan Pilihan menu di bagian bawah berupa "Member/Anggota" untuk melihat daftar anggota yang ikut gabung, back untuk kembali ke perintah sebelumnya dan pengaturan lainnya.

Saat melakukan pengaturan akan muncul sebuah popup pengaturan yang memungkinkan kita menambahkan user/profile dari Blogger, Google. Twitter, orkut dll.  berikut adalah Screenshotnya:

Selamat mencoba vitur tersebut, Terima Kasih!

Read Post | komentar

Membuat Widget Feed Status Facbook ( Seperti Widget Twitter atau Recent Post)

15 Jan 2009

Anda tentunya masih ingat dengan artikel saya tentang "Asiknya menggunakan facbook" :) itu sih menurut pendapat saya mengasikan :) mungkin sudah ada yang merasakannya! Sebuah jejaring sosial yang menurut saya sangat powerfull dan vitur yang lengkap. Salah satu layanan yang menarik adalah "What you do? alias apa yang kamu lakukan? Seperti TWITTER .
Sayangnya Facbook tidak menyediakan widget/kode status untuk di pasang di web/blog. Sebagai solusinya Facbook menyediakan Lencana (kode status facbook) contohnya bisa di lihat pada artikel di atas. yang gunanya untuk memberikan informsi seputar apa yang dilakukan oleh kita di Facbook! . Sayangnya status yang ditampilkan hanya Satu! ( Status terakhir yang di tulis di Facbook misalnya " Sekarang lagi Ngblog... :) " ) nah setatus berikutnya tidak di tampilkan! Bagaimana mengatasinya? agar seperti twitter.
Untuk mengatasi permasalahan tersebut adalah dengan mencari alamat feed pada facbook dan dikombinasikan dengan Widget Feed.

Langka-Langkahnya: (tahap Pertama mencari alamat Feed Status Facbook)

1. Login/masuk ke www.facebook.com 
2. Kemudian setelah masuk di Facbook sekarang ketikan di browser alamat ini http://www.facebook.com/minifeed.php?filter=11
3. Klik Kanan pada " My Status"/"Status Saya" Kemudian Klik "Copy Link Location" lihat gambar. atau penjelasan  di sini
   

4. Ini adalah Contoh Link Feed Status yaang saya dapatkan (kemungkinan berbeda tergantung user dan ID facebook anda)  http://www.facebook.com/feeds/status.php?id=1567656419&viewer=1567656419&key=e91df4cb4e&format=rss20

Ok Selesai pada tahap ini anda sudah mendapatkan alamat feed untuk status facbook anda! pasti sudah tau kan akan diapakan selanjutnya? ya Anda Benar selanjutnya akan di gabung dengan widget feed seperti artikel yang dulu sudah pernag di bahas mengenai "Komentar atau Artikel terbaru via Widget Feed" silahkan pelajari lebih lanjut jika di perlukan :)

(Tahap Kedua menggabungkan dengan Widget Feed)

Gambar di samping adalah contoh penggunaan feed dengan menggunakan url feed Komentar, cara tersebut bisa kita gunakan untuk status facbook! Caranta:

1. Login di www.blogger.com
2. Klik di Layout pada Dashboard blog anda.
3. Klik Add Widget 
4. Dan Cari Widget Feed.
5. Masukan Alamat Feed dengan url pada langkah pertama no. 4 yaitu:  http://www.facebook.com/feeds/status.php?id=1567656419&viewer=1567656419&key=e91df4cb4e&format=rss20
6. Atur sesuai dengan Selera-dan kebutuhan Masing Masing. berikut hasilnya:

Untuk Blog anda yang sumpek atau sempit bisa memadukannya dengan teknik "Widget Tabbed Feed" Untuk alamat Feed Facbook lainya bisa anda daptkan pada link berikut ini:

http://www.facebook.com/posted.php?id=1567656419 untuk "My Post Item" dan http://www.facebook.com/notes.php?id=1567656419 untuk "Notes Pages" dan silahkan aplikasikan sesuai dengan kreasi masing masing!.


Silahkan Bereksperimen! Hapy Blogging! /* Maaf  arang Update karena mulai sibuk dengan tugas tugas kuliah nih :) */ Inspirasi diambil dari layanan manajemen feed "http://friendfeed.com/" yang tak sengaja saat daftar dan otak-atik. :)

Read Post | komentar

Widget Blog List untuk Indeksing Artikel

17 Des 2008

Blogger mengindeks /mengurutkan artikel berdasarkan tanggal terbaru artikel itu di buat, artinya Artikel Terbaeu akan berada di halaman paling pertama .atas. Begitu seterusnya Blogger mengindeks artikel kita, dari indeks ke 1, 2, 3, dan sampai jumlah artikel pada blog kita. Mungkin anda pernah melihat Koran! majalah bisanya Memberikan Indeks pada halaman utamanya!
Koran atau Tabloid biasanya memberikan Cuplikan atau ringkasan halaman yang penting atau dari sub masing masing headline koran! Biasanya memberikan beberapa cuplikan kata/penjelasan kemudian di berikan Nomor halaman untuk artikel tersebut. Ok saya rasa sudah cukup perkenalannya!

Sekarang Perhatikan Gambar di samping! itu adalah contoh pemanfaatan Indeksing Artikel, Artikel di jelaskan sebagian dan ada gambar untuk memikan pengunjung membacanya!.

Widget Blog List dapat juga dimanfaatkan untuk membuat Indeksing Artikel pada blog kita! Caranya cukup dengan mengetahui alamat Feed kemudian menambahkan Parameter pada alamat feednya. Langkah langkahnya sebagai berikut:

1. Login Pada Account Blogger anda kemudian Pilih LayOut pada Dashborad Blog anda.
2. Klik Add Page Element / Add Gadget
3. Kemudian PopUp pilihan Widget dan Pilih Widget Blog List Lihat gambar di bawah:
   

Setelah itu akan muncul pengaturan Widget blog List sebagai Berikut:

Title: Untuk Meberikan Judul Pada Widget Tersebut Misalnya: Artikel Berdasarkan Indeks / Artikel Terbaru .
Short: Untuk mengurutkan List blognya. Biarkan gak usah dirubah alias "Most Recently Update"
Show: Untuk menampilkan banyaknya List.
Ceklis  :

Icon (Untuk Menampilkan Icon Baca:

Title of most recent item (Untuk Menampilkan Judul Artikel)

Snippet of most recent item (Untuk memberikan ringkasan artikelnya)

Thumbnail of most recent item (Untuk memberikan Thumbnail gambar di samping ringkasan artikel)

Date of last update (Untuk Menampilkan Tanggal artikel di posting)

Silahkan pilih sesuai selera masing masing!  supaya lebih bagus pilih semua.

4. Kemudian Klik "Add to List" untuk menambahkan indeks artikel. Perhatikan Gambar:

5. Langkah Berikutnya adalah menambahkan kode di bawah ini:

http://dunia-blogger.blogspot.com/feeds/posts/default/?start-index=5

6. Kemudian klik Add pada blog anda.


Sebelum menambahkan Indeksing artikel berikutnya perhatikan pada pengaturan dan klik "Rename" untuk mengganti Nama Blog anda menjadi " Artikel Indeks ke 5" misalnya.

Lakukan Langkah 4, 5 dan 6 tergantung jumlah Indeks yang ingin di tampilkan.

Catatan: Ganti nama dunia-blogger dengan nama blog anda dan Ganti start-index=5 dengan nilai dengan indeks yang akan ditampilkan.

Jika Semuanya sudah selesai kemudian Simpan dan Silahkan Cek di Blog anda. Hasilnya pada gambar di samping:

Read Post | komentar

Widget Tabbed Feeds

21 Okt 2008

Blogger In Draf Memiliki Banyak Widget, Salah Satunya Tabbed Feed, yang fungsinya menampilkan Feed Blog/Web kita atau yang lain dalam satu Area dan Terbagi maenjadi beberapa Tab, Sehingga tidak memerlukan banyak space/tempat. dan Asiknya gak dipusingkan dengan kode-kode HTML/Java Script.

Untuk menambahkan Element/Widget syaratnya mesti masuk Blogger In Draft. jika sudah silahkan ikuti langkah selanjutnya:

1. Klik Layout

2. Klik Add a Gadget nanti akan muncul PopUp add widget

3. Di atas Ada Kotak Pencarian Silahkan Masukan Kata Kunci "Tabbed" atau Tabbed Feeds" dan Tekan Enter. Akan tampil hasil pencarian anda.

4. Silahkan Pilih Tabbed RSS Reader, Note: /* Jika Gak Bisa gunakan yang ainnya misalnya YouTube Tabbed Feed, New York Times News (Tabbed Feeds) dan lainnya */ karena semuanya sama tinggal mengganti alamat Feed yang kita Inginkan.

5. Silahkan Klik Pada Judulnya atau Tanda gambar + ( Plus ) Kemudian Akan Muncul Form Pengisian

6. Title: Isi dengan Judul masing-masing,
Height: Isi dengan Tinggi dan dalam pixel /*cukup masukan angkanya saja */
Gadget Title: memberikan Nama Gadget anda.
Feed Name 1 : Isi dengan Nama Tab Misalnya (Artikel terbaru)
Feed Url 1: Alamat Feed yang sesuai dengan Nama Feed disini alamatnya : http://www.duniague.net/feeds/posts/default atau http://feeds.feedburner.com/DuniaBlogger (silahkan ganti dengan alamat feed blog masing masing dengan mengganti tulisan dunia-blogger
Feed Name 2 : Isi dengan Nama untuk Tab yang ke dua misalnya (Komentar Terbaru)
Feed Url 2: Isi dengan Alamat Feed yang ke 2 di sini alamatnya: http://www.duniague.net/feeds/comments/default (untuk menampilkan komentar terbaru).

Dan Seterusnya Isi Sesuai banyaknya Tab yang diinginkan. Untuk menampilkan Feed Berdasarkan label Silahkan Copy Paste Kode Ini: http://www.duniague.net/feeds/posts/default/-/Tutorial Itu akan menampilkan Artikel dengan Kategori "Tutorial" silahkan ganti Tutorial dengan Nama pada Lebel blog masing Masing dan harap hati-hati, perhatikan huruf besar dan kecil berpengaruh :d

# of Entry: Tentukan Jumlah Artikel yang Akan di Tampilkan Standarnya sih 5 dan maksimal 15
Summaries: Ringkasan Artikelnya Tentukan Sesuai Pilihan ( None : yang tampil Judulnya saja gak ada ringkasannya, All: Tampilkan Semua ringkasan, dan Lainnya bisa anda coba sendiri :) )
Render HTML: Ceklish Agar Kode HTML tidak Tampil..... pada bagian ringkasan.


Perhatian: Pastikan Anda Cek Sebelum menyimpannya dengan Klik Tombol Update dan berikut tampilannya:

Read Post | komentar

Menu bar dengan Widget Link List

28 Sep 2008

Masih Manual Buat Menu, Pada Blog... Duh Ribet deh Mesti Buka HTML kalau mau Nambah atau nge-hapus menu di tambah lagi Bikin Pusing deh bagi yang Gak ngerti HTML :D nah... Gampang kok tenang aja Dunia Blogger selalu menampilkan Hal baru untuk teman-teman semuanya tentunya. Jangan lupa Langganan atau Follow jika ingin mendapatkan artikel lainnya secara UPtoDate :) Pembahasan kali ini Adalah Membuat Menu dengan Widget Link List (Modifikasi WLL Versi 2) Karena Sebelumnya Modifikasi WLL /Widget Link List Untuk Link Teman/ Blogroll Bagi yang Ingin Melihat Videonya di Sini [Contoh Linkbar]

Silahkan Lihat aja dulu yah Gambar di Atas dengan cara klik kanan dan view Image, yang di bawah gambar dunia blogger, itu adalah tampilan Link List saat akan menambahkan atau menghapus Menu, Cukup Simpel kan.

Silahkan Masuk Ke Edit HTML dan Expand Widget Template, supaya lebih cepat silahkan klik link di samping: http://draft.blogger.com/html?blogID=1112329461817557155&tpl=true  /* ganti ID dengan ID blog masing Masing */ secara otomatis anda akan di bawa ke Edit HTML dan plus sudah di centang Expand Widget :/* ini hanya cara saya untuk efektifitas saat editing, cara lainnya ada di sini */ Jangan Pusing yah :d soalnya Agak Banyak Tutorialnya :)

Langkah Pertama Seperti biasa yang pertama pasti cari kode :D Cari kode di bawah ini:

<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>

Jika sudah ketemu silahkan Copy Kode di bawah ini:

</div>
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>

dan letakan Persis di Bawah kode Sebelumnya. Lanjut Pada Tahap ke Dua yaitu Menambahkan kode CSS supaya Link yang tadinya ke bawah menjadi kesamping dan animasi lainnya :) silahkan Copy paste Kode di bawah ini dan Letakan persis di Atas kode ]]></b:skin>

/* --- LINKBAR -- Tips Trik Blogger oleh http://dunia-blogger.blogspot.com */#linkbar {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;width: 100%;position: relative;background: $warnaBackgroundLinkbar;border: 1px solid $warnaBorderUtamaLinkbar;}#linkbar ul {margin: 0px 0px 0px 0px;padding: 5px 5px 7px 5px;text-align: left;list-style-type:none;}#linkbar li {display: inline;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}#linkbar h2 {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;display: none;visibility: hidden;}#linkbar a {clear: both;margin: 0px -4px 0px 0px;padding: 3px 20px 3px 20px;width:100%;text-decoration:none;font: $jenisHurufLinkbar;color: $warnaTextLinkbar;border-right: 1px solid $warnaPembatasLinkbar;}#linkbar a:hover {color: $warnaTextLinkbarHover;background: $backgroundHoverLinkbar;}

Silahkan Pasang yah Jika Sudah Nih Satu Lagi, Langkah ke Tiga Ini di Buat Untuk Mempermudah Saat Ingin mengganti Warna background, Text, maupun Border. Sekarang Cari Deh Variable definitions biasanya kodenya sperti ini:

<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#EBFFED">

dan seterusnya sperti itu biasanya :d itung aja ada berapa :D Nah Sekarang Pasang Kode di Bawah ini dan Letakan di Atas kode yang tadi :)

<Variable name="warnaBorderUtamaLinkbar" description="Warna Border Utama Linkbar"type="color" default="#C94093" value="#EBFFED"><Variable name="warnaBackgroundLinkbar" description="Warna background Likbar"type="color" default="#C94093" value="#000000"><Variable name="warnaPembatasLinkbar" description="Warna Pembatas Antar Link"type="color" default="#9D1961" value="#00FF00"><Variable name="warnaTextLinkbar" description="Warna text untuk Linkbar"type="color" default="#ffffff" value="#ffffff"><Variable name="backgroundHoverLinkbar" description="Warna Background Saat Cursor di Arahkan"type="color" default="#ffffff" value="#ffffff"><Variable name="warnaTextLinkbarHover" description="Warna Teks Linkbar saat di arahkan cursor"type="color" default="#9D1961" value="#ff0000"><Variable name="jenisHurufLinkbar" description="Jenis Huruf untuk Linkbar"type="font" default="normal normal 77% Verdana, sans-serif" value="normal bold 74% Arial, sans-serif">

Silahkan Simpan Hasil Kerjanya nanti saya koreksi :D kalo berhasil dapet 10 yah :d  /*obsesi guru mode on*/

Sayang jika Ilmu hanya Sekedar Copy Paste, Belajarlah berexperient, Kegagalan menunjukan suatu langkah besar Keberhasilan. :)

Menamabhkan Atau Menghapus Menu: Untuk menambahkan Link/Menu atau menghapusnya, Caranya Mudah Cukup Login Ke Blogger dan Pilih Layout, Selanjutnya Cari yang ada bacaannya Link List dan Klik Edit atau Buka Blog Kemudian Cari yang ada Gambar Toolsnya lihat gambar :) Jika Sudah Silahkan Edit dan Caranya sudah di bahas pada artikel sebelumnya :)
Tutorial Ini Bersumber dari Template Blogger karya http://www.ourblogtemplates.com/ Untuk Memudah kan Teman teman Semua :d

Read Post | komentar

Blog Roll dengan Widget Link List

26 Sep 2008

Link List: Add a collection of your favorite sites, blogs, or web pages. nah itulah sedikit penjelasan dari Mbah Blogger, Widget Link List Gunanya untuk Mempermudah kita Untuk Menambahkan Sebuah Situs Atau blog atau Link Favorit yang Sering Kita Kunjung, :) Terkadang banyak Juga yang Menggunakannya Sebagai Blogroll alias Link Teman. Namun Ada Satu Masalah Jika kita Gunakan Untuk Blog Roll,/Link Teman karena Tampilannya Akan Terus Mengurut Ke Bawah dan Semakin Banyak Linknya Semakin Tinggi, sehingga memakan banyak tempat.
Nah Kali Ini Dunia Blogger ingin Berbagi Tips Buat Teman-Teman Semua, dengan Menggunakan Widget Link List, kita bisa dengan Mudah menambahkan Link Teman dengan Cepat, Cukup Tau nama dan Alamatnya Aja, Gak Perlu Ribet Ribet buat Kode :D dan kelebihan lainya kita bisa menentukan jumlah link yang akan di tampilkan dan Bisa diurutkan Berdasarkan Abzad juga lho:D


Sebelum memulai Modifikasi, Harus Memasang dulu Widgetnya dengan Cara Klik Add Widget dan Cari deh [Link List]... Sialahkan Isi 2 atau Beberapa link teman dengan Klik [Add Link] Dan pada bagian Title saya sarankan isi dengan "Link Teman" supaya Nantinya gak Ribet :D jika sudah lanjut pada langkah Modifikasi:

Roll Pada Widget Link List (Blog Roll)

Link Ke Samping:

Di sini, Link yang di Tampilkan Ke Samping dan dari kiri, ke kanan sampai batas kanan, kemudian link pindah kebaris berikutnya. Antar Link yang Satu dan yang Lainnya di Pisahkan oleh Tanda "|"  garis lurus seperti huruf  i,

Langkah Untuk Membuat Widget Link List menjadi Blogroll Samping Caranya Cukup Simple kok:
Perhatik Kode ini:

<b:widget id='LinkList1' locked='false' title='Link Teman' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

 Caranya Cukup Mudah Kok yaitu dengan Cara menghapus kode <ul> <li> </li> dan </ul> selanjutnya Pasang Pembatas menggunakan simbol yang diinginkan, misalnya |, }, +, dan lainnya letakan sebelum kode </a>   tambahkan juga  kode Roll (yang tebal warna merah) dan Ini hasil modifikasinya:

<div style='width:100%; height:100px; overflow:auto;'>
<b:loop values='data:links' var='link'>
       <a expr:href='data:link.target'><data:link.name/>||</a>
</b:loop>
 </div>

Mudah Kan? pembatasanya di sini garis lurus dua buah tuh yang ada background hijau: D

Link Ke Bawah:

Cara ini sudah ada di blog sahabat  [ANASKU] mampir Kesana yah.. :) [Roll Pada Widget label], Kalu yang ini, Lik di tampilkan per baris dan Seterusnya Ke Bawah, Agar gak Penuh Makanya di Tambahkan Kode Roll sehingga Linknya bisa di Gulung.

Kodenya Sama Seperti di Atas, Hanya menambahkan saja dan Gak ada yang perlu di Hapus :dHasil Modifikasi Kurang Lebih Seperti Ini:

<div style='width:100%; height:100px; overflow:auto;'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>

</b:loop>

</ul>

</div

Selesai Semua Tutorialnya dan Silahkan Pilih yang Mana, sesuai Selera Masing-Masing Jika sudah Silahkan Simpan dan Lihat Hasilnya: Untuk pengaturan lainnya bis menambahkan width, height sesuai dengan nilai yang diinginkan.  Sekarang dengan mudah kita pasang Link teman tanpa mesti buka/otak-atik kode HTML, Cukup menambahkan Link dan nama Tampilannya aja Semuanya Selsai deh....

Read Post | komentar

Dropdown Pada Label Postingan

18 Sep 2008

Habis Keliling ke Blognya Kang Rohman,  yah Sekedar nyari inspirasi Buat nyari yang baru. Nah Saya Mampir deh di Blognya dan Baca Artikel yang Ini [Membuat Sidebar dalam Kotak-kotak terpisah] sekalian Komentar dan bartanya di Sana ada yang menarik, Dropdown Menu untuk Archive dan Label Ternyata Penuh /full sesuai ukuran Sidebar :d sedangkan di DB ngga..! Makasih kan Udah Memberikan Ilmunya ke saya, dan melalui shoutbox juga :D OK Sekian Basa Basinya yah... Setelah Mampir dan Berhasil Eh Saya Dapet Ide Baru Nih akhirnya... Ini Dia Idenya... :)
Coba Lihat Gambar di Atas atau cek Dunia blogger pasti Label yang Biasanya berada di Footer Postingan Posisinya Kesamping kan Sekarang jadi Drop Down :D mau juga...? nih tutorialnya:
Bermodal Ilmu dari Kang Rohman mengenai Label menjadi Dropdown /Dropdown pada Label dan apa lah istilahnya:d saya mencoba mengaplikasikannya pada Label Postingan, /* itu tuh yang suka ada di bawah Postingan kita */

Sekalian Kang Saya Numpang Pasang tutorialnya di sini:d bagi yang sudah tahu, langsung aja yah ke TKP no 2 :s

1] Dropdown pada Widget Label,...

Kalau yangini sekedar menambah basic/dasar aja, toh udah banyak yang bisa kok :d saya aja yang ketinggalan :d
Silahkan Login ke Blogger, Pilih LayOut, dan EditHTML dan Klik Expand Widget Template selanjutnya Silahkan Cari Kode Ini:

<ul>
   <b:loop values='data:labels' var='label'>
     <li>
       <b:if cond='data:blog.url == data:label.url'>
         <data:label.name/>
       <b:else/>
         <a expr:href='data:label.url'><data:label.name/></a>
       </b:if>
       (<data:label.count/>)
     </li>
   </b:loop>
   </ul>

Tahap berikutnya Silahkan Ganti Kode di Atas dengan kode ini:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>

<option>Cari Berdasarkan Kategori...</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

Jika sudah silahkan Simpan dan lihat hasilnya. dan Nantinya Label yang biasanya Tampilannya Ke Bawah, Menjadi Drop down, dan Tempat yang dibutuhkan Sedikit, dan mempercpat Loading blog kita :D

2] Dropdown Pada Label Postingan

Nah Ini yang ditunggu-tunggu kan :d Dunia-Blogger berusaha menampilkan Artikel yang Belum ada Sebelumnnya :D Oh ia Promosi Artikel yang tentang Label juga [Modifikasi label Postingan] yah mudah-mudahan aja bermanfaat:D

Silahkan Cari Kode yang Seperti Ini: /*yang tebal  yah :d */
<p class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </p>

Supaya Lebih Gampang, Silahkan Cari kode ini aja  <data:postLabelsLabel/> dan cocokan sama gak ma yang atas :D
Ganti kode yang Miring Warna Biru dengan Kode di Bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option value='http://www.duniague.net/2008/09/dropdown-pada-label-postingan.html'>Label Post [X]</option>
          <b:loop values='data:post.labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
      </option>
          </b:loop>
</select>

Silahkan Simpan Hasil Setingan Kita dan Eng Ing Eng...:d jadi deh... Nah Biasanya di Sampingnya Ada Bacaan Label/Labels, Jika Ingin Menggantinya dengan Tulisan "Artikel ini Masuk Kedalam ketegori" Misalnya :D Silahkan Hapus Kode <data:postLabelsLabel/> dengan Tulisan di atas:d Selamat mencoba dan Semoga Berhasil :)

Sayang jika ILMU hanya Sekedar COPY, PASTE, Kembangkanlah sesuatu hal yang bermanfaat dan menjadikan sesuatu hal yang Baru :) Salam Blogger, Berinspirasi, Bereksperimen, Cari Hal Baru Bersama Dunia Blogger

Read Post | komentar

Back Up Widget atau Gadget Blogger

10 Sep 2008

Jika teman-teman Sering Gonta-Ganti Template.. Ada hal yang menyebalkan jika kita ingin mengganti template Baru yaitu Widget/Gadget, Karena akan Terhapus.... Anda bisa aja menghapus dan menggantinya dengan yang baru, Tapi masalahnya jika Widgetnya Misalnya Counter /*Data Pengunjung*/ jadi maslah, harus ulang dari 0 kan..? Atau Widget Link Teman [Tukeran Link] Biasanya Sudah Banyak. Jdi sebel kan kalo terhapus mesti Ngulang keliling blog teman untuk menambahkan linknya.... Sedia Payung Sebelum Hujan yah mesti sekarang jarang hujan :) Ayo saya tunjukan Cara Mem-Backup Widgetnya.

Untuk melakukan Backup, Silahkan Masuk ke Blogger dankemudian klik [Layout] atau supaya lebih cepat silahkan klik ini http://draft.blogger.com/rearrange?blogID=714406304483671032 dan jangan lupa sebelumnya ganti dengan Id Blog masing masing, jika sudah nanti muncul gambar seperti di bawah ini:


Selanjutnya Silahkan Klik tombol [Edit] kemudain akan muncul Popup dan Sekarang Copy kode yang di tampilkan dan Selanjutnya Simpan Kode Tersebut, Untuk Menyimpannya Bisa menggunakan Notepad atau MS Word.

Jangan Lupa Selalu Memberi Keterangan di Atas Kode Supaya nantinya Gak Bingun, Sesuaikan dengan Judul Widget/gadget.

Jika Sudah Lakukan hal Yang Sama untuk Semua Widget/Gadget yang akan di backup. Setelah Semua Selesai Simpan Hasil Backup dan Sekarang Teman Teman Gak Usah Khawatir deh Jika Nantinya Akan Melakukan Pergantian Template Baru, sebab sudah ada cadangannya :D

Perlu di ingat, Cara di Atas Emang agak sedikit menyebalkan, Karena kita harus Mondar mandir Copy Paste kode Pada Widget kita, Apa Lagi kalu Banyak Widgetnya.. Cupe deh :d

Cara Yang paling Mudah Adalah dengan Melihat Source Kode Blogger masing Masing: dengan Cara Menekan Ctrl+U pada Firfox  dan Silahkan Copy Paste Kodenya ke Notepad/MS Word kemudian Simpan .... Cara ini Lebih Cepat, Tapi Bikin Pusing Alias.. Soalnya Terlalu Banyak Kode :D dan Mesti Nyari nyari dulu kode mana yang sesuai.... kalau udah terbiasa dengan hal ini sih silahkan tapi saya sarankan mending pake cara yang manual yang Satu persatau aja yah :) bagi yang punya cara lain silahkan kasih tau yah... :)

Read Post | komentar

Membuat Widget Daftar Isi Blogger

8 Sep 2008

Widget daftar isi ini  akan memudah kan pembaca dalam mencari artikel yang ingin dibaca di blog Anda sehingga memungkinkan artikel blog Anda semakin populer.  Untuk memasang widget ini cukup dengan menekan tombol di bawah ini.

 

<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;><script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://www.duniague.net/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script></div>Widget By: [<a href="http://dunia-blogger.blogspot.com">Dunia-Blogger</a>]

Kemudian Blogger akan menambahkan widget otomatis pada blog Anda!.

Cara di atas adalah cara untuk memudahkan Anda memasang widget tersebut dan di dalam widget tersebut berisi kode seperti berikut ini:

<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="http://www.srbekasi.org/daftar-isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://www.duniague.net/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Widget By: [<a href="http://dunia-blogger.blogspot.com">Dunia-Blogger</a>]

Kode tersebut akan menampilkan daftar isi artikel blog ini. Silahkan ganti http://dunia-blogger.blogspot.com dengan alamat blog masing-masin.

Kode yang berwarna merah adalah kode CSS untuk memperindah tampilan daftar isi dan silahkan atur sesuai denga selera masing masing. 
Silahkan seting pada border untuk garis pinggir dan warnanya dan jika perlu tambahkan kode width: 200px; sebelum height, untuk mengatur lebar widget tersebut. Di bawah ini adalah screenshot widget daftar isi yang sudah di pasang.

Selamat Mencoba dan Semoga Berhasil!

Read Post | komentar

Related Post with Roll (Artikel Bersangkutan dengan Roll)

30 Agu 2008

Artikel terkait blogger teman teman pastinya membutuhkan banyak tempat kan... jadinya berantakan...? Apa lagi jika Kategori dan Artikel bersangkutan makin banyak Pasti Gak Rapih jadinya....!!. Ha ha ha :D kali ni [Dunia Blogger] menampilkan Artikel yang Unik Lagi nih... mudah-mudahan membantu yaitu Related Post with Roll (Artikel Bersangkutan dengan Roll) Pastinya Sudah banyak Teman teman yang Sudah Tau donk atau sudah memasang Artikel Terkait/bersangkutan di Blogger, Nah.... Gimana kalu Sekarang ganti dengan yang Ini...? mau ga...?

Berikut Kode Yang Saya Berikan:
<b:if cond='data:blog.pageType == "item"'> <div class='similiar'> <!-- *****************http://blogger.com*****Jan,2007****************** --> <!-- *****************Related Articles by Labels - Take Two****************** --> <!-- 1. Now, users don't need to change anything to use this widget. just copy and paste, and done! 2. The current article will also be listed, now it's no more. --> <div class='widget-content'> <h3>Related Posts by Categories</h3> <div style='border: 2px solid rgb(51, 255, 51); overflow: auto; width: 510px; height: 160px;'> <div id='data2007'/></div> <div id='Scrapur'> Widget by <u><a href='http://scrapur.com'>Scrapur</a></u> -: With Roll by: Ade Sanusi :- [<a href='http://dunia-blogger.blogspot.com'>Dunia Blogger</a>] </div> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>
Selanjutnya Silahkan masuk Ke Edit HTML dan Cari Kode <data:post.body/> kemudaian Copy Paste kode Atas dan pasang di Bawah kode <data:post.body/>


Untuk melakukan Pengaturan Besarnya Roll, Silahkan Cari Kode di bawah ini:
<div style='border: 2px solid rgb(51, 255, 51); overflow: auto; width: 510px; height: 160px;'> 
dan Silahkan ganti nilay 510 untuk Lebar dan 160 untuk Tingginya.... adapun, Pengaturan kode seperti di atas sudah pernah di bahas di Blog Roll ala youTube, Roll Pada Widget label ataupun Roll pada widget Archive

Nah Adapun hasilnya bisa di lihat pada gambar di bawah ini:

 

Nah Lebih Simple dan Gak perlu banyak Tempat kan..... Oke makasih banyak yah Udah baca Artikel ini :d dan Kalau bersedia jangan lupa berkomenter... :) Ide muncul dari mana aja, Tapi taukah anda bahwasanya Mencoba dan Memaksimalkan IDE itu yang lebih penting... thx for Scrapur.com atas Widgetnya /* Mohon maaf Widgetnya saya modifikasi */ :d dan Buat teman teman Blogger yang selalu setia Mampir dan berkomentar di Dunia Blogger,

Read Post | komentar

Widget dengan Tema Ramadhan

26 Agu 2008

Marhaban ya Ramadhan...  kalo mau lihat videonya silahkan kli di sini http://www.youtube.com/watch?v=m5IWcbqgvBk Kita patut Mensyukuri akan datangnya Bulan yang Penuh Berkah dan Ampunan ini, dan Semoga kita Semua mendapatkan Ridho-Nya.... Kali ini dalam rangka Bulan Suci Ramadhan, Alangkah baiknya kita memasang Widget dengan Thema Ramadhan, Saya dapat dari http://myquran.org, yang mana dengan ini memudahkan kita untuk mengatahui Jadwal Sholat dan Imsak per hari...
Berikut Contoh Kode untuk wilayah Jakarta dan Sekitarnya:
<script language="JavaScript" src="http://myquran.org/jsholat/?kode=jakarta&amp;type=js"></script>
Seperti biasa masuk ke bagian Layout/tataletak dan pilih Edit HTML, dan pasang kode di atas... Setelah kode <head>

jika Sudah
Silahkan pasang kode Ini dengan menambahkan Page Element [HTML/JavaScript] dan pasang deh kode ini:

<SCRIPT language="Javascript">
<!--
document.write("Jadwal Sholat Kota : <strong>",kota,"</strong> dan sekitarnya. <br>");
document.write("<marquee onmouseover=\"this.stop()\" onmouseout=\"this.start()\" title=\"Jadwal Sholat @ myQuran.org\">");
document.write(namahari,", ",ntanggal," ",nnamabulan," ",ntahun," / ",htanggal," ",hnamabulan," ",htahun," - ");
document.write("<b>Shubuh</b> ",sholat[0]," <b>Dzuhur</b> ",sholat[1]," <b>Ashar</b> ",sholat[2]," <b>Maghrib</b> ",sholat[3]," <b>Isya'</b> ",sholat[4]);
document.write("</marquee>");
// -->
</SCRIPT>

Hasilnya silahkan lihat di sini http://myquran.org/jsholat/test.html

Ribet yah...? :D Tenang masih ada kok yang Mudah Caranya Cukup Pasang kode ini aja... silahkan pasang kode ini:
<img src="http://myquran.org/jsholat/index.php?kode=jakarta&type=png"/> dan nanti hasilnya seperti di bawah ini:


Caranya Cukup Pasang Kode di Atas dan Tempatkan di Sidbar dengan Menambahkan Page Elemen/Add Gadget dan pilih yang tipe HTML/JavaScript 
Jangan lupa ganti kode http://myquran.org/jsholat/index.php?kode=jakarta&type=png Sesuai Kota dan Warna yang di inginkan, Kode bisa di dapatkan di sini http://myquran.org/jsholat/?type=kota
Semoga Bermanfaat dan Selamat Menunaikan Ibadah Puasa, Semoga Mendapatkan Ampunan dan Ridho-Nya.. Amin

Read Post | komentar

Aksesoris blog dengan Widget atau Gadget

22 Jul 2008

Widget atau Gadget bisanya yang sering di tampilkan di bagian kanan Blog... supaya lebih jelasnya Widget itu semacam Asesoris untuk Mempercantik Tampilan Blog.... Pada awalnya blogger sedikit menyediakan widget, untuk mendapatkan widget kita harus nyari dulu googleing nah... semenjak sudah ada http://draft.blogger.com/ sekarang Widget/Gadget dengan mudah bisa langsung di tambahkan ke blog tanpa harus pusing pusing mikirin kode....
Berikut ada beberapa Tips dari [Dunia blogger] mengenai Widget/gadget:

1. Sesuaikan dengan kebutuhan,

Ini penting lho... mengeapa? soalnya Semakin banyak Widget, semakin berat/lama loading blog kita... sehingga pengunjung jadi males deh... pastikan pilih yang perlu aja,,,,, Misalnya Widget Archive, untuk keperluan pencarian Artikel blog. LABEL, untuk mencari berdasarkan kategori, FROFILE, untuk menampilkan profile kita dan lainnya yang Sangat di butuhkan oleh kita... yah gak ada salahnya juga sih jika mau menambahkan sebanyak mungkin :d

2. Sesuaikan dengan Blog

Kalo yang ini supaya Blog kita Lebih Cantik, Jiak blog kita tentang Makanan jangan tampilkan Widget untuk Musik.. :D gak nyambung deh.. ya gak pa-pa sih kalo mau mah :D Sesuaikan dengan tema blog kita, Selanjutnya Warna, ini juga penting lho... Pastikan pilih Widget yang pas dengan Warna blog kita, jangan terlalu mencolok, karena membuat mata tidak fokus...

3.Pengaturan Widget

Setting/Atur Widget kita Supaya Pas, jangan terlalu Besar dan jangan terlalu kecil, Pastikan juga Posisinya... supaya Lebih proporsional...alias seimbang Ok :d OK

Nah... bagi yang belum tahu, untuk menambahkan Widget, Pastikan... Masuk ke blogger, Sebaiknya masuk Ke Google In Draf, karena lebih banyak Widgetnya.... Selanjutnya Pilih [LayOut/Tata letak] kalu Sudah silahkan Pilih [Tambah Gadget/Add Gadget,atau kalo yang lama biasanya Add page Element] Dan Pilih deh Widget/gadget yang ingin di Tambahkan......

Itu aja mungkin Tips nya mudah mudahan membantu :) dan Selalu ingat yah... sesuaikan dengan KEBUTUHAN bukan KEINGINAN :D

Read Post | komentar