mY LoVe

Rabu, 18 Juni 2008

BloG tUtORiaL


Utak Atik Template Blog Part 1

blog-bootel-02Jika grup band The Police mempunyai syair lagu " Message In A Bottel ". Maka tutorial ini mengajak kita untuk meredesain template minima dari blogspot, menjadi layout yang menyerupai sebuah botol atau " Blog In A Bottel ".


Tutorial ini merupakan satu teknik saja, dari sekian teknik yang bisa kita gunakan untuk meredesain template blogspot.


Tutorial sendiri di bagi ke dalam tiga tahap.


a. Tahap pertama menjelaskan sekilas tentang struktur layout Minima.


b. Tahap kedua meredesain dan menempatkan gambar-gambar yang di perlukan sebagai bakgroundnya.


c. Tahap ketiga menambah tab menu / navigasi.


View Tutorial : Utak Atik Template Blog " Blog In A Bottel "




Technorati tags: Layout Blog, Tutorial Blogger
Link : Cara membuat link pd Gambar

Untuk membuat link gambar, yakni menjadikan gambar ketika di klik membuka halaman blog atau alamat url lain. kodenya seperti ini.


< href= " Lokasi_tujuan ">< src = " alamat url gambar">




Contoh :

< href= "http://catalog-tutorial.blogspot.com/">
< src ="http://jaloee.googlepages.com/combo-box.gif">




* Lokasi Tujuan = http//catalog-tutorial.blogspot.com *
* IMG SRC ( url gambar ) = http://jaloee.googlepages.com/combo-box.gif.


Yang akan di tampilkan oleh browser adalah seperti ini.





Maka ketika kita menekan gambar tersebut, browser akan membuka alamat situs catalog-tutorial.blogspot.


Target Link


Sama seperti Link Teks. kita dapat membuat link gambar yang di tekan membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.

< href= "Lokasi_Tujuan" target="_blank">< src ="url / alamat gambar">




Tulisan Yang Rada Nyambung


cara membuat link
menampilkan gambar ke dalam postingan
Trik Membackup Daftar Link
Membuat Kotak Scroll Untuk Blogroll




Technorati tags: Link Gambar, Tutorial Blogger
Memperbaharui Judul Blog Untuk Search Engine

Dulu waktu pertama ngeblog saya terkadang heran melihat sebuah blog yang di status browser atasnya selalu berubah-rubah sesuai dengan judul postingan yang saya klik ( baca ).


Contoh. jika pada halaman utamanya menampilkan nama Judul blog-nya.
SHOTOSHOP SATU


gam-01


Maka saat saya membaca salah satu artikelnya, yang terlihat pada status browser atas, bukan menampilkan Judul Blog berikut Judul Postingan . seperti ini.


SHOTOSHOP SATU - Mengabungkan dua buah photo. ( judul postingan )


gam-02


Tapi yang terlihat hanya menampilan Judul Postingan saja . seperti ini.


Mengabungkan dua buah photo ( judul postingan ).


gam-03


Konon yang menampilkan hanya judul postingannya saja ketika seseorang membaca salah satu artikel, merupakan settingan yang benar untuk keperluan mesin pencari seperti google dll.


nah bagaimana agar blogspot kita dapat membaca dan membedakan antara judul blog dan judul postingan seperti itu ?


Dalam dasboard ( halaman template ) buka tab Edit Html - kemudian cari judul blog ( title tags ) ini.





<data:blog.title/>



Kemudian ganti dengan kode ini.






<data:blog.title/>

<data:blog.pagename/>






Setelah beres klik Simpan Perubahan. dan coba sekarang kita cek perubahannya dengan menekan salah satu judul postingan pada blog kita.


yuu selamat mencoba.




Artkel Yang Rada Nyambung


mendaftarkan blog ke search engine google


mendaftarkan blog di search engine yahoo




Technorati tags: SEO, Tutorial Blogger
Privacy Statement



www.catalog-tutorial.blogspot.com Privacy Statement

What follows is the Privacy Statement for all www.catalog-tutorial.blogspot.com websites (a.k.a. blogs) including all the websites run under the www.blogspot.com .

Please read this statement regarding our blogs. If you have questions please ask us via our contact form.

Email Addresses

You may choose to add your email address to our contact list via the forms on our websites. We agree that we will never share you email with any third party and that we will remove your email at your request. We don’t currently send advertising via email, but in the future our email may contain advertisements and we may send dedicated email messages from our advertisers without revealing your email addresses to them. If you have any problem removing your email address please contact us via our contact form.

Ownership of Information

www.catalog-tutorial.blogspot.com is the sole owner of any information collected on our websites.

Comments/Message Boards

Most www.catalog-tutorial.blogspot.com websites contain comment sections (a.k.a. message boards). We do not actively monitor these comments and the information on them is for entertainment purposes only. If we are alerted to something we deem inappropriate in any way, we may delete it at our discretion. We use email validation on most of our message boards in order to reduce “comment spam.” These email addresses will not be shared with any third party.

Cookies

Currently we assign cookies to our readers in order to save their preferences. This data is not shared with any third party. Accessing our websites is not dependent on accepting cookies and all major browsers allow you to disable cookies if you wish.

Third Party Cookies

Many of our advertisers use cookies in order to determine the number of times you have seen an advertisement. This is done to limit the number times you are shown the same advertisement. www.catalog-tutorial.blogspot.com does not have access to this data.

Traffic Reports

Our industry-standard traffic reporting records IP addresses, Internet service provider information, referrer strings, browser types and the date and time pages are loaded. We use this information in the aggregate only to provide traffic statistics to advertisers and to figure out which features and editorials are most popular.

Legal proceedings

We will make every effort to preserve user privacy but www.catalog-tutorial.blogspot.com may need to disclose information when required by law.

Business Transitions

If www.catalog-tutorial.blogspot.com is acquired by or merges with another firm, the assets of our websites, including personal information, will likely be transferred to the new firm.

Links

www.catalog-tutorial.blogspot.com websites frequently link to other websites. We are not responsible for the content or business practices of these websites. When you leave our websites we encourage you to read the destination site’s privacy policy. This privacy statement applies solely to information collected by www.catalog-tutorial.blogspot.com

Notification of Changes

When www.catalog-tutorial.blogspot.com makes changes to this privacy policy we will post those changes here.

Contact Information

If you have any questions regarding our privacy policy, please contact us.



another url / web

www.jaloee.blogspot.com
Recent Post Berdasarkan Label Artikel ( non java script )

Bagaimana cara menambahkan Post Terbaru ( Recent Post ) ke dalam blog kita ?


Sebenarnya untuk caranya sendiri banyak, namun di sini saya lebih suka mengunakan Elemen Feed yang sudah tersedia dalam dasboard , kelebihannya mengunakan elemen feed ini tidak mempengaruhi beban halaman blog ketika ngeloding. Sangat berbeda speed-nya jika kita mengunakan recent post mengunakan sebuah java-script.


Sedangkan kekuranganya mengunakan elemen feed hanya di batasi 5 post terbaru saja.


Namun tenang saja dengan sedikit trick kita akan menampilkan yang 5 post terbatas itu semenarik mungkin.Yaitu dengan cara menampilkan recent post berdasarkan label artikel. hasilnya bisa di lihat di samping blog ini. atau trick ke dua dengan cara mengatur tanggal postinganya.

Cara Pertama


Dalam Halaman Elemen tambahkan sebuah Elemen Feed.








Setelah terbuka masukan alamat feed berdasarkan label





ini contohna :


http://namablogkamu.com/feeds/posts/default/-/labelname


ganti namablogkamu dengan alamat blog kita


kemudian ganti LabelName dengan nama label yang ada di blog kita.


Note


Perlu di ketahui jika label nya mengunakan spasi biasanya penulisan na seperti ini. contoh : Blogger Bab 2 menjadi Blogger%20Bab%202 -
%20 = menunjukan spasi.


Untuk itu bagusnya alamat labelnya di copy paste dulu ke dalam program Notepad.


contoh :


http://namamu.blogspot.com/search/label/Blogger%20Bab%202


yang berwarna menunjukan nama label blog kita.


Setelah ok, klik tulisan Lanjutkan, jika tidak ada kesalahan kemudian atur jumlah feed na ke angka 5.


Setelah beres klik Simpan Perubahan.

Cara Kedua.


Trick atau Cara kedua ini saya berasumsi, kita biasanya menampilkan postingan dalam halaman blog utama kurang lebih sebanyak 5 postingan. Agar menampilkan Recent Post dengan elemen feed ini meloncat atau mundur pada postingan yang 6,7,8 dst ( yang biasanya menjadi arsip ).


caranya dengan merubah parameter atau queri seperti ini.


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


?start-index=5 artinya meloncat atau mundur pada postingan 5 sebelumnya. jadi ganti angka 5 tersebut dengan yang kita kehendaki.


Ok selamat mencoba :)

Tulisan Yang Rada Nyambung


1. Menampilkan Recent Commnet


2.Menampilkan Recent Post Dengan Ajax Feed Rss

Technorati tags: Recent Post non java script, Tutorial Blogger
Link : Cara menulis Format / tag link

Link atau hyperlink merupakan sebuah navigasi dalam halaman webblog. Atau objek perantara yang menghubungkan satu situs web/blog dengan situs blog lainya, atau satu halaman blog dengan halaman blog lainya. bahkan juga bisa menghubungkan dalam sebuah artikel yang sama.


Dan objek link yang kita bisa gunakan di antaranya merupakan objek Teks, gambar, movie dan flash.


Sedangkan format penulisan dan pengunaanya sebagai berikut.

Link Teks.


Link ini merupakan link yang sederhana untuk di buat, format atau penulisannya seperti ini.



Nama Link




Contoh:



Tutorial Blogger




*Lokasi_Alamat_Tujuan yaitu : http://catalog-tutorial.blogspot.com *
*Nama Link yaitu Tutorial Blogger *


Yang akan di tampilkan oleh browser adalah nama link. seperti ini

Tutorial Blogger



maka ketika kita menekan tulisan Tutorial Blooger tersebut, maka browser akan membuka alamat situs catalog-tutorial.blogspot.

Target Link :


Format link di atas merupakan link dalam windows atau jendela yang sama. Sedangkan agar link yang di tekan membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.



Nama Link




Technorati tags: Css dan Html, Tutorial Blogger
Mengundang Teman Dengan berbagi admin

Karena beberapa hal mungkin suatu waktu kita butuh teman atau sahabat untuk di mintai bantuan-nya merapikan dan mengedit-edit blog yang kita miliki.


Untuk keperluan mengundang seperti itu, sebenarnya kita tidak perlu mengirim akun atau password mail kita. cukup yang kita lakukan.





Pertama : Buka tab/halaman Pengaturan - kemudian tab Ijin.


gam 01





Kedua : Setelah itu tekan tombol Menambah Penulis. kemudian pada kotak bawah masukan alamat email teman kita yang ingin kita undang.


internet-02


klik tombol Undang.





Ketiga : Setelah beres mengundang. kita tunggu konfirmasi dari teman kita yang di undang. Jika undanggan kita dapat respons, buka lagi tab Pengaturan - tab Ijin.


Kelima : Kemudian klik tulisan Berikan Hak istimewa Setingkat Admin.


Dengan demikian blog yang kita miliki berada juga pada Kontrol Panel sahabat kita dengan akses penuh. artinya teman yang kita perlukan bantuannya bisa mengedit-edit Html secara penuh. Dan jika sudah tidak di perlukan lagi kita bisa menghapusnya pada tab Ijin.


Kelebihan cara seperti ini, akun atau password mail kita tetap aman dan rahasiah. juga jika punya blog lebih dari satu, blog yang lainnya tetap aman.


Untuk latihan dan bagaimana cara kerjanya coba saja lakukan jika kita punya dua akun alamat mail.

Technorati tags: Berbagi Admin, Tutorial Blogger
Read More Style Ala yahoo

Apakah blog anda sudah termasang Read More ( pemengalan artikel ) ? jika bloem silahkan baca postingannya di sini. - walaupun tulisan-nya acak-acak moga saja dapat membantu.


Namun jika anda sudah memasangnya, kepikiran tidak oleh anda untuk sedikit mempercatik tulisan " Read More " -nya ?.


Jika jawabannya " Ya " silahkan lanjutkan membaca tulisan ini.
Jika " Tidak " tolong tutup saja blog ini. hehehehehe..





Ok. yang akan saya tunjukan hanyalah satu variasi saja dari sekian kemungkinan-kemungkinan yang bisa kita lakukan untuk mempercantik tulisan "read more " ini. mudahan-mudahan dari yang satu ini anda dapat membuat konsep dan desain sendiri nantinya.


Dan read more style ini mengacu atau menjiplak pada tulisan "read more"-nya ala Yahoo. - yang posisinya di samping kanan.


read 00





Pertama : Memasukan kode Css.


Buka halaman Edit Html kemudian tandai tulisan Expand Template Widget.


gam 02


Setelah itu simpan kode di bawah pada baris halaman kode Css.


.more {
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}


atau bisa juga simpan atau letakan seperti pada ilustrasi gambar.


skin





Kedua : Memasukan tag

..

pada elemen Html.


Kemudian cari tulisan " Read More " ( jika tulisannya bloem di ganti ). gunakan kotak pencarian browser ( Ctrl + F ).


setelah ketemu.


Read More......


Tambahkan tag

» ..

. seperti tulisan di bawah.



» Read More....





Silahkan lakukan inprovisasi pada tulisan " Read More " misalkan - "Countinue Reading" or " Baca Selanjutnya " dll.. terserah ente.


Setelah beres Simpan Perubahan.

Menambah Gambar.


Jika suka dengan gambar, kita pun bisa menambahkan gambar-nya.


read 02


Untuk melakukanya tambahkan saja properti Background:url ( alamat gambar ) no-repeat right;



.more {
background:none;url(http://i120.photobucket.com/albums/o190/jaloewig/blogger/reedmore-bg.gif) no-repeat right;
bottom:5px;
font-family:verdana;
font-size:80%;
.....


Penjelasan Yang tidak penting.


.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan fixel misal 12px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks lawannya Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan lawanya left or center
white-space:nowrap;
}





Tulisan Yang Rada Nyambung.


1. membuat-read-more-di-new-blogger




Technorati tags: Read More, Tutorial Blogger
Update label hack : Menampilkan semua judul postingan

Ini lanjutan kisah kemarin tentang " Menampilkan Judul Artikel ", yakni ketika menekan link label/categorie maka yang tampil indek judul-judul artikel saja, tidak semua content atau isi artikel.


Sedangkan pada tulisan ini merupakan lanjutan-nya, yaitu bagaimana jika ingin menampilka atau mengindek semua judul artikel atau postingan ( tampa di batasi oleh label/categorie ).


Caranya sangat mudah and gampang. kita hanya memasukan kode di bawah ini.


  • Show All Posts



  • Blogkamu = nama blog kita.


    Dan untuk penempatannya yang paling bagus di bawah list label/categorie.


    gam 05





    Baiklah. buka halaman Edit Html. kemudian tandai kotak kecil di samping Expand Template Widget.








    Kemudian cari widget/elemen Label1. ( gunakan kotak find borwser Ctrl + F ).


    Setelah ketemu masukan kode di atas pada script Label1. - hasil penambahannya seperti tulisan yang saya beri warna.








    s .......... d





    ()


  • Show All Posts







  • Technorati tags: Label Hack, New Blogger Tutorial
    Menampilkan hanya judul artikel atau postingan

    Secara default jika kita menekan sebuah label/categorie , maka yang tampil semua isi postingan ( artikel ). dan terkadang jika terlalu banyak isi postingannya maka yang terjadi di lihat dari sisi si pengunjung akan menjadi segan membacanya, apalagi jika artikel yang kita tulis tidak di penggal ( memakai read more ).


    Nah sekarang bagaimana jika ketika kita menekan sebuah label/categorie, yang di tampilkan hanya judul-judul artikel-nya saja ?





    Tutorial ini ( atau hack ini ) saya dapatkan dari blognya suhu ramani. sedangkan untuk menerapkanya ke dalam blog kita.


    Pertama : buka halaman Edit Html . Tandai Expand Template Widget .


    expand-template



    kemudian cari kode ini.





    Kedua : Setelah ketemu ganti dengan kode ini.















    Bonus : Jika ingin menambah icon/gambar di setiap
    judul yang di tampilkan kodenya ini.














    Technorati tags: Label Hack, New Blogger Tutorial
    Blogger in Draft

    Selain halaman elemen yang biasa kita tambahakan ke blog, sebenarnya pihak blogger memiliki sejenis laboratorium untuk mengembangkan berbagai perangkat elemen terbarunya. versi elemen ini sendiri menurut para pengembangnya merupakan versi elemen uji coba atau uji kelayakan. Jika hasilnya memuaskan dan stabil maka versi ini hasilnya di patenkan. di antaranya yang lulus sensor seperti elemen poll, open id dll.


    Sedangkan yang masih dalam tahapan pengembanggan blogger draft saat ini seperti.


    1. Scheduled Post
    2. Blog list
    3. Feed subscription
    4. Google gadgets ( game, communication, tool, finance, dll )
    5. Search box.


    Untuk menambahkan gadget ( widget/elemen ) yang masih dalam blogger draft. buka saja www.bloggerindraft.com.


    Setelah terbuka klik tulisan Blogger in Draft di samping kanan, yang akan menuju dan membuka Panel Kontrol, setelah itu klik Layout.


    Kemudian klik add gadget ( tambahkan gadget ). selanjutnya terserah anda mau pilih gadget yang mana. karena untuk menambahkan sebuah gadget sangatlah mudah.


    Contohnya untuk menambahkan fasilitas Kotak Pencarian ( search box ) ke dalam blog , kita tinggal tekan tulisan Tambah di samping tulisan Kotak Pencarian.


    aeitttt.. jangan lupa sebaiknya alamat ini kita bookmarks saja, agar kita tahu perkembangkan selanjutnya tengtang blogger in draft ini.

    Technorati tags: Blogger In Draft
    Tip N Trik Membackup Daftar Link

    JIka anda orang yang suka mengonta-ganti template, saya tebak salah satu yang membosankan adalah membakup daftar link ( blogroll ). mungkin anda menulis ulang one by one nama dan alamat linknya. dan mungkin karena males membuat daftar link lagi, maka biasanya solusi yang tercepat anda mengunakan widget Html/JavaScript sebagai penganti.


    Namun masalah datang kemudian ketika teman ngeblog anda mengajak tukeran link !.. uuukhhk malesnya karena anda harus menulis nama dan alamat blog teman anda secara manual ( atau copy paste ).


    Nah di sini saya mempunyai sedikit trik cara membackup alamat daftar link, kemudian menambahkanya lagi ke dalam widget ( elemen ) daftar link.


    Pertama : Membackup dan menyimpan ke dalam program notepad.


    Dalam halaman muka blog kita, klik kanan mouse kemudian pilih View Page Source ( atau Ctrl + U di keyboard).





    Setelah terbuka windows Source kemudian cari alamat dan nama daftar link ( gunakan kotak pencarian dengan menekan Ctrl + F di key ).





    Copy paste semua ke dalam program notepad. ( yang di awali dengan tag
  • di tutup
  • )





    Kedua: Menambah ( Widget ) elemen Daftar Link baru.


    Setelah kita menganti templatenya dengan yang baru. buka dan tambahkan widget ( elemen ) Daftar Link. kemudian buat link pertama sebagai pancingan. dan beri judul My link.








    Ketiga : Memasukan Alamat link yang telah di backup.


    Buka tab Edit Html kemudian tandai kotak kecil di samping tulisan Expand Template Widget.





    setelah itu cari daftar link baru yang telah kita pasang dengan judul My Link. ( Ctrl + F kemudian pada kotak pencari tulis My Link ).


    Kemudian masukan alamat link yang telah kita backup letakan posisinya , seperti contoh tulisan yang berwarna merah. ( tambahkan tag
  • Blogroll 2
  • untuk membedakan dengan yg baru )










    Dan jika ingin Daftar link-nya bisa di scroll





    Tambahkanlah kode dan letaknya seperti tulisan berwarna red ini.







    • Blogroll 2

    • lowongankerja

    • .....





      Tulisan Yang Rada Nyambung


      1.membuat-kotak-scroll-untuk-blogroll

      2.blogroll-scrolling-dengan-inline-style

      3.labels-cloud-tampa-java-script

      Technorati tags: Tip n trik, Membackup daftar link
      Menambah Figura atau gambar icon dalam tanggal postingan

      Saya pernah nulis tentang merubah atau menambah figura pada tanggal yang posisinya bersebelahan dengan judul postingan.





      tapi karena javascript-nya sudah tidak kompatible lagi dengan xml rilis baru. maka tulisan tersebut sudah lapuk dan tidak layak untuk di baca :).


      Namun setelah bw sana sini, akhirnya saya menemukan tutorial baru lagi tentang menampilkan tanggal ini, dan setelah saya uji coba dalam laboratorium blogQu hasilnya menyimpulkan positif dan layak untuk di pakai. blog test.


      Sedangkan tutorial ini saya dapatkan keterangannya dari blogU - bu anne, dan saya robah sedikit kode javascript-nya, karena saya mengiginkan format dd-mm. ( angka kemudian nama bulan.- binun nulis na. red).


      Pertama : Merubah format tanggal.


      Buka tab Pengaturan - Format. kemudian ganti formatnya menjadi yyy-mm-dd. ( ilustrasi gambar ).





      Kemudia klin tombol Simpan Pengaturan.





      Kedua: Mengecek Status tag dateheader.


      Buka Tab Edit Html kemudian cari kode ini setelah ketemu jika kode na seperti ini.





      atau seperti ini.





      maka kudu di ganti dengan kode ini









      Ketiga : Meletakan Tanggal di atas judul.


      Catatan : jika blog kita menampilkan posisi tanggal-nya di atas judul langsung saja baca langkah keempat. Namun bagi yang posisinya tanggal-nya di bawah Judul saudara harus mengikuti langkah ketiga ini.


      Pindahkan kode ini.






      di bawah kode ini.




      ...... Letakan di sini.




      Keempat: Memasuka javascript.


      Kemudian masukan javascript ini, di atas tag penutup





      kemudian ganti saja id mybloglog -nya ( tulisan yg berwarna hitam )dengan id mybloglog na kamu.
      dan biar serasi dengan tampilan template yang kita miliki. sesuaikan saja nilai.


      widht=125 dengan nilai lebar sidebar kita.


      rows=2 jumlah baris photo.


      bg=cc9966 nilai warna background - sesuaikan dengan warna template.


      Dan jika kita ingin menghilangkan batas atas dan bawah. seperti terlihat dalam gambar.





      trik ini saya mendapatkan dari Bloggerbuaster by Amanda. caranya masukan kode ini di atas tag /skin.
      table#MBL_COMM td.mbl_fo_hidden {
      display:none;
      }
      table#MBL_COMM td.mbl_join_img {
      background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
      }
      table#MBL_COMM td.mbl_join {
      background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
      }
      table#MBL_COMM tr#tr0 {
      background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
      display:none;
      }
      table#MBL_COMM th.mbl_h {
      display:none;
      }






      Dan jika kita ingin ada link atau tautan ke situsnya Mybloglog, untuk memudahkan kita login. tambahkan saja kode html di bawah script nya mybloglog. contoh na seperti ini.


      kode script mybloglog





      tambahkan di bawahnya kode ini.
      • View the reader community

      • Join this community


      • hasilnya seperti gambar ini.




        Technorati tags: My Bloglog, Blogger Tutorial

        del.icio.us tags: My Bloglog, Blogger Tutorial
        Technorati : Vitamin untuk blog

        Banyak jalan menuju Roma.. begitu juga banyak cara untuk mempromosikan dan mempopulerkan blog kita di dunia maya. artinya setelah kita mendaftarkan blog kita di kedua search engine yang paling populer seperti google dan yahoo ( baca di sini ). juga menambah meta tag untuk keperluan atau informasi bagi search engine menemukan blog kita. ( baca di sini ).


        Tugas kita selanjutnya adalah menambah vitamin blog . Di antaranya yang paling efektif ialah melakukan pertukaran link, apalagi pertukaran dengan yang memiliki pagerank 4 ke atas.


        Atau cara yang lain kita melakukan submit atau mendaftarkan blog ke direktorie blog seperti Technorati, feedburner, blog catalog dll.


        Untuk itu dalam tulisan ini, kita akan melakukan cara pendaftaran ke direktorie blog tersebut dan yang pertama akan kita pilih adalah technorati.


        Mengapa technorati ? pertimbangannya karena technorati ini merupakan direktorie blog kawakan dan terbesar selain blog search miliknya google, selain itu technorati juga mempunyai fitur-fitur yang menarik., diantaranya sebagai blog search, online bookmark, mengetahui siapa yang ngelink ke blog kita, tag aggregator dll.


        Untuk melakukan pendaftaran ke technorati.


        Pertama : buka situsnya Technorati


        Kedua : pada tab di atas klik tulisan Join ( bersebelahan dengan Sing in ). setelah terbuka jendela Join Us. isi semua kotak register, tandai juga kotak persetujuan dan klik Join.


        Ketiga: kemudian pada jendela baru yang terbuka isi semua kotak register seperti tadi kemudian klik lagi tulisan Join.


        Keempat: pada jendela My Accoun atau Claim a Blog. isi dengan nama blog kita. kemudian klik tulisan Begin Claim, yang berarti bahwa kita mengklaim nama blog yang kita masukan itu milik kita.





        kelima : Pada jendela berikutnya, technorati memberi tiga pilihan cara untuk menngclaim blog kita. yaitu Quick Claim, Post Claim dan Embeded Claim. pilih cara yang sederhana saja dan cepat Quick Clain.





        Keenam : Pada jendela Activate the claim using Quick Claim. masukan atau isi dengan accoun user dan password blog kita ( jangan khawatir menurut pihak technorati bahwa nama user dan password kita tidak di simpan dalam sistem mereka )





        Ketujuh : pada jendela berikutnya, isi description singkat tentang blog kita dan juga isi kotak-kotak tag ( kategorie ) blog kita, dengan kata-kata semenarik mungkin. misalkan indonesia, informasi, desain dll.


        Sedangkan di bawahnya ada beberapa widget yang bisa kita pasang di blog kita ( sifatnya optional - boleh kita pasang atau tidak).


        salah satunya widget di bawah ini.


        Blog Authority.


        Dengan memasang widget ini, kita akan mengetahui berapa blog yang mentautkan ( ngelink ) ke blog kita.





        untuk memasangnya, tambahkan elemen Html/javascript . kemudian masukan kode ini.



        View blog authority

        ganti http://catalog-tutorial.blog.com dengan nama alamat blog anda.



        del.icio.us tags: Technorati, blogger baru



        Technorati tags: Technorati, blogger baru
        Menampilkan Recent Post Atau judul artikel dengan ajax feed Rss



        " Mas saya tertarik dengan " berita online " ( recent post. red ) yang bisa berpindah-pindah gitu. gimana cara buatnya "



        Demikianlah pertanyaan saudara Anggoro, yang masuk melalui kotak komentar dan mas ini juga pernah tanya lewat shoutbox.


        Jika anda bloem mengerti dengan maksud ketertarikan mas yang bertanya itu silahkan klik saja di sini Demo.


        Dan saudara akan melihat Recent Post dari judul artikel yang bergerak-gerak atau berpindah-pindah seperti memakai kode Marquee, Tapi ini lebih halus dan Ciamikkk tenan.


        Untuk memasangnya ke dalam blog, kita harus mempunyai Google's Ajak Feed Api, yang bisa kita dapatkan di group-nya google. untuk langkah-langkahnya bisa anda ikuti di bawah ini


        Langkah Pertama : Daftar untuk memiliki API Key.


        Buka code.google.com kemudian klik tulisan Sign up for an Api Key. ( jika ada pertanyaan untuk login, gunakan google akun milik kita )


        Setelah itu terbuka jendela agreement . tandai ( cekbox ) -> kemudian masukan nama blog kita dan klik tombol Generate Api Key.


        Langkah Kedua : Menyimpan kode Api Key.


        Simpan di komputer kita kode Api Key. di bawah tulisan Your key is: atau untuk lengkapnya cari di kolom tulisan Here is an example web page to get you started:


        Contoh na seperti alamat Api Key yang saya miliki ini.
        http://www.google.com/jsapi?key=ABQIAAAAlH2AVYF2BpHOrr
        BUiKTxqhQOjbF87P1Hq2IQKvgir1U9QH77mBQf6a3JQmBlj24agls_bXW0mAUxyg

        Langkah Ketiga : Memasukan Kode Css Dan JSON file.


        Buka blog kita pada halaman Template pilih tab Edit Html kemudian di atas kode/ tag penutup.


        simpan kode ini.









        Kemudian ganti tulisan ini :
        http://www.google.com/jsapi?key=YOUR-API-KEY

        dengan alamat dan kode API KEY yang kita miliki .


        Setelah beres dengan pekerjaanya Klik tab Simpan Template


        Langkah Keempat : Menambah Elemen Html/JavaScript


        buka tab Elemen Halaman kemudian dalam penambahan elemen pilih elemen Html /JavaScript.


        setelah itu masukan kode ini.



        a. " Judul"


        merupakan tulisan yang akan kelihatan di ujung tulisan ( ganti dengan nama kita atau nama blog misal : Nyahooo


        b. http://www.namakamu.blogspot.com/rss.xml


        merupakan alamat feed , ( ganti dengan alamat feed kita alamat feed komentar atau bisa juga alamat feed media berita seperti Detik, Republika, Atau bisa juga alamat Feed blog ini - http://catalog-tutorial.blogspot.com/rss.xml . halah promosi.


        c. "Date" :


        menunjukan tanggal yang akan ditampilkan . ( jika kita ingin menampilkan sunber beritanya tulis "Label". dan Jika kita ingin menampilkan sumber berita, tanggal berikut waktunya tulis saja "Label Datatime"


        d. 10, "date" :


        menunjukan jumlah Feed yang akan di tampilkan. dan pengurutanya berdasarkan waktu/tanggal.

        Cari di sumber tutorial.


        Untuk menambah variasi lain dari cara menampilan feed atau judul artikel di atas kita dapat mengaksesnya di www.dynamicdrive.com

        Alamat Feed KIta.


        Alamat Feed yang kita miliki ada banyak.


        1. http://namakamu.blogspot.com/rss.xml
        2. http://namakamu,blogspot.com/atom.xml
        3. http://feeds.feedburner.com/namafeedmu
        4. http://namakamu.blogspot.com/feeds/comments/default?alt=rss (feed untuk komentar).


        Alamat feed media berita di tanah air.


        1.http://feeds.feedburner.com/detikfoto
        2.http://feeds.feedburner.com/tempophoto
        3.http://feeds.feedburner.com/Detikcom
        4.http://feeds.feedburner.com/Kompascom
        5.http://feeds.feedburner.com/Detikinet
        6.http://feeds.feedburner.com/Gempa/Besar
        7.http://feeds.feedburner.com/Bencana

        Atau googling saja, cari feed yang lainnya.



        del.icio.us tags: Recent Post, Feed, Tutorial New Blogger



        Technorati tags: Recent post, feed, Tutorial new Blogger
        Label Tab Ala hoctro Dan hackosphere

        Setelah kemarin menulis artikel tentang Label Cloud Tampa JavaScript, sekarang saya akan menulis alternatif lain untuk menampilkan Label, yakni dalam bentuk Tab Horizontal. yang diletakan posisi ideal na di bagian header, baik itu atas ,di bawah atau di samping header.
        ilustrasi gam:





        Untuk memasang atau menampilkan label seperti gambar di atas yang perlu kita lakukan, langkah-langkahnya seperti berikut ini.





        Langkah Pertama : Menyimpan atau Memasukan kode Css menu.


        Buka blog kita, dalam halaman Template buka tab Edit Html. kemudian cara kode ini.
        ]]>

        Setelah ketemu letakan atau masukan di atas ]]> tersebut.
        kode css menu ini.



        /*- Menu Tabs F--------------------------- */

        #tabsF {
        float:left;
        width:100%;
        background:#efefef;
        font-size:93%;
        line-height:normal;
        border-bottom:1px solid #666;
        }
        #tabsF ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
        }
        #tabsF li {
        display:inline;
        margin:0;
        padding:0;
        }
        #tabsF a {
        float:left;
        background:url("http://jaloee.googlepages.com/tableftF.gif") no-repeat left top;
        margin:0;
        padding:0 0 0 4px;
        text-decoration:none;
        }
        #tabsF a span {
        float:left;
        display:block;
        background:url("http://jaloee.googlepages.com/tabrightF.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
        color:#666;
        }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #tabsF a span {float:none;}
        /* End IE5-Mac hack */
        #tabsF a:hover span {
        color:#FFF;
        }
        #tabsF a:hover {
        background-position:0% -42px;
        }
        #tabsF a:hover span {
        background-position:100% -42px;
        }




        ilustrasi gam :








        Langka Kedua : Menambah Halaman Untuk Bagian Header.


        Kemudian cari dan ganti angka di baris kode ini.


        di ganti menjadi .( dari 1 menjadi 2. dari No menjadi Yes ): lihat tulisan yang di pertebal.


        SIMPAN TEMPLATE





        Langkah Ketiga : Menambah Elemen Label.


        Setelah beres dengan pekerjaan di atas. masukan atau simpan kode di bawah ini.






        Letakan di antara kode di bawah ini.




        Letakan di sini



        Cara Lain Dari Hackosphere


        Label Tab di atas merupakan cara yang dilakuan oleh Hoctro, yang memasukan semua nama label . Sedangkan cara kedua yang di lakukan oleh blog na hackosphere membatasi jumlah label yang akan kita jadikan Label Tab-nya. - artinya kita bisa mensetting dan mengatur jumlahnya.





        Caranya setelah melakukan pada langkah yang kedua di atas pada langkah ketiganya masukan kode berikut ini.




        • Home







        Jika kita ingin menambah jumlah label yang akan di tampilkan ganti angka 5 di kode tersebut dengan jumlah yang kita inginkan.


        Dan JIka kita ingin meng-index label menurut jumlah yang terbanyak. ganti saja dalam elemen label dari Alfabetik menjadi Berdasarkan Frekuensi.




        Pilihan Model Tab Menu.


        Jika kita kurang suka dengan model tampilan Css menu-nya. kita dapat memilih dan mendonlotnya di sini. atau lihat dulu tampilannya di sini.


        yang perlu kita lakukan, jika kita misalnya memilih model TabsG maka ganti kode ini.


        menjadi :

        Technorati tags: Label Tabs, Tutorial New Blogger

        del.icio.us tags: Label Tabs, Tutorial New Blogger
        Labels Cloud tampa java script
        T ernyata oh ternyata. Terutama ini lebih di khususkan bagi yang mempunya kolom sidebar-nya cukup lebar, misalkan sekitar 225px ke atas, ( contohnya bisa lihat lebarnya kolom sidebar blog ini ) .



        Jika mengunakan pengurutan labelnya di biarkan jatuh ke bawah , maka akan banyak space kosong yang terbuang percuma. tak enak di lihat layauuu. ( ngertikan maksudnya )


        Solusinya bisa saja kita mengunakan sistem label Tag Cloud, biar tulisan labelnya memanjang secara horizontol, dan itu merupakan pilihan yang paling tepat.


        Namun ada cara lain yang paling mudah dan murah walaupun tidak sebaik tag Cloud, karena cara yang akan saya uraikan ini tidak mengunakan unsur fietnah dan Java Script. ( terutama cocok sekali bagi yang tidak suka dengan Java - java timur, java tengah atau java barat ).


        Sebelum kita lanjutkan inilah tes DNA perbedaan antara labels cloud yang asli dengan label cloud manuali tampa java script. ( kalau ingin lebih menarik tambahkan saja icon-icon luthu di setiap labelnya )

        Labels Cloud tampa java script Labels Cloud tampa java script



        Baiklah untuk yang penasaran ingin mebaca tulisan ini, kita lanjutkan saja cara membuatnya.


        Pertama : pasang dulu elemen label ke blog kita, beri judul atau namai label tersebut, dan inga ! inga !.


        Kedua : Buka tab Edit Html kemudian tandai Expand Template Widget.


        expand-template


        Ketiga : Cari kode di bawah ini. ( kalau binun cari tulisan judul yang kita namai untuk label tersebut. gunakan find browser lihat di sini. )







        Setelah ketemu buang tulisan ini
        .


        kemudian setelah itu, masukan kode di bawah ini.




        simpan pada posisi seperti tulisan yang saya pertebal.











        ()



        Setelah itu coba tekan tulisan Pratinjau.


        Jika saudara tidak suka dengan angka setelah label seperti ini: (2), (1). buang saja dengan cara menghapus tulisan ini ().


        Dan jika suka dengan tampilan barunnya klik Simpan Perubahan.

        Embedded Style.


        Cara di atas saya mengunakan Inline Style, yakni menerapkan langsung pada kode Html. Jika ingin menarik dan terkontrol tampilan labelnya. saya sarankan dan saya paling suka membuat dulu sintaks Css -nya atau istilahnya Embedded Style Sheet. karena dengan cara kedua ini keuntungannya kita tidak perlu menghapus tag
        . dan keuntungan lainnya kita bisa menambahkan gambar icon juga aman.


        gam-04


        Bagaimana cara membuatnya ? tergantung kalau ada yang tertarik saya pasti tulis . ok.


        Tulisan Yang Rada Nyambung.


        1.blogroll scrolling dengan inline style


        2.membuat kotak scroll untuk blogroll


        3.mengedit mengatur dan menambah label



        Technorati tags: Merubah Label, New Blogger Tutorial



        del.icio.us tags: Blogger Tutorial
        Blogroll Scrolling Dengan Inline Style

        M elanjutkan kisah kemarin tentang membuat blogroll scrolling , yakni membuat kotak atau box untuk link blogroll kita yang bisa di scroll. contoh na seperti blogroll My Link di blog ini.


        Namun pada tulisan kali ini, kita tidak mengunakan atau membuat dulu sinstaks di halaman css -nya, tetapi langusng menerapkan properti kodenya pada elemen Html. bahasa kampung-nya Inline Style Sheet gitu lho :)




        Baiklah tampa basa basi langsung saja pada penerapanya. dalam layout buka tab Edit Html .





        kemudian tandai Expand Template Widget.





        Setelah itu cari elemen Daftar link Blogroll kita, yaitu ber- id "linklist1". kalau di blog kita ada dua daftar link maka menjadi"linklist2" dst. atau kalau daftar link kita di beri judul semisal " My link ", "blogroll" dst. maka cari tulisan itu. ( gunakan kotak pencarian di browser ie atau firefox lihat cara mudah mencari kode css dan html di sini.)


        Jika sudah ketemu masukan kode ini.


        dan di tutup dengan kode ini.


        Hasil penerapan kode di atas pada elemen daftar link "lisklist" kira-kira menjadi seperti ini. ( lihat tulisan yang dipertebal )


















        Dan untuk kolom sidebarnya yang terlalu lebar seperti blog ini, atau daftar link-nya di simpan di bagian bawah ( footer ), bagusnya buang saja tag ini
        • dan
        . biar daftar link-nya memanjang.

        Penjelasan yang tidak jelas namun perlu biar jelas.


        Overflow: auto; -> Mengatur batas sebuah konten atau isi. jika conten-nya melebihi batas yang telah di tentukan maka scrollbar akan di tampilkan.

        height:200px; -> ukuran tinggi sebuah objek/box.

        width: 94%; -> ukuran lebar sebuah objek/box. mengunakan satuan persen ( % ), untuk memudahkan bagi kita yang tidak tahu persis berapa ukuran lebar sidebar yang kita miliki. karena dengan satuan persen akan secara otomotis mengikuti ukuran sidebar yang kita miliki.


        Tulisan Rada Nyambung


        membuat kotak scroll untuk blogroll

        Technorati tags: Blogroll Scrolling, New Blogger Tutorial
        Membuat kotak Scroll untuk blogroll

        S udah sama-sama mafhum kalau ngeblog tampa pertukeran link ibarat sayur tampa garam.


        Namun karena seringnya melakukan pertukaran link, terkadang untuk mengurus yang satu ini menjadi sangat ribet. ada sebagian orang yang mengakalinya dengan cara membuat text berjalan ( Marquee ).




        Dan dalam tulisan ini, saya ingin memberi alternatif lain untuk menangani blogroll tersebut dengan cara membuat wadag atau kotak yang bisa di scroll, atau kita sebut saja Blogroll scrolling. - yang kebetulan akhir-akhir ini mulai trend di gunakan oleh para blogger mania.


        Dan Blogroll scrolling yang saya akan tunjukan, tidak akan merubah kebiasaan kita ketika menambah sebuah link baru, tetap mengunakan elemen linklist seperti biasanya, artinya kita tidak perlu membuat brogroll dari elemen Html/javascript, yang apabila menambah link baru, kita di harus menulis manuali seperti ini :
        • alamat blog
        di ulang-ulang sampai pegal tangan kita.. cape deeeh !!!...


        Untuk membuatnya, seperti biasa dalam halaman layout kita buka
        tab Edit Html. kemudian tandai kotak Expand Template widget.








        Setelah itu masukan kode di bawah ke dalam halaman sintaks Css.
        ( atau simpan saja di atas kode ini -> ]]>
        #scrolling {
        overflow: auto; height: 100px; width: 94%;
        background-color:#EFEFEF; border:1px solid #777;
        margin: 0px auto; padding:5px; font-size: 14px;
        color: #999; text-align: left;
        }




        oke setelah itu cari elemen blogroll yang telah kita pasang,- agar memudahkan dalam pencarianya gunakan find browser yang kita pakai, jika anda mengunakan browser firefox buka menu file Find In This page.





        maka di posisi kiri bawah jendela browser akan terlihat kotak kosong seperti ini





        kemudian agar mudah mencarinya ke dalam kotak kosong tersebut masukan judul elemen blogroll kita, misalkan judulnya " link Teman ",
        " Blogroll " atau " my link " dll . kemudian klik tombol Next sampai kita menemukan tulisan judul tersebut , juga sampai terlihat semua kode html elemen blogroll seperti di bawah ini ( aslinya elemen LinkList ).














        setelah itu masukan kode Html yang sintaks Css-nya telah kita buat, yakni id = " scrolling " atau tulisan lengkapnya menjadi
        dan di akhiri dengan tag
        .


        hasil penambahan dan letak posisinya bisa di lihat pada tulisan yang dipertebal di bawah ini.

















        Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template.


        sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm ngga pegal lagi kan mengetik berulang-ulang ....enjoy aja lagi !


        Begitu juga jika anda keukeuh ingin mengunakan text berjalan ( marquee ) untuk blogroll ini, lakukan saja tata cara dan upacara pada bagian tag Html seperti di atas. hasilnya seperti ini.















        Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template. ( penjelasan tentang marque bisa anda lihat di sini )


        sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm enjoy aja lagi !

        Masalah Dan Solusi


        Nah sekarang bagaimana jika tampilan blogroll-nya ingin seperti ini. memanjang secara horizontal.





        Gampang saja dalam tag Html listlist di atas kita tinggal hapus tulisan ini semua :
        .. segitu saja ngga kurang ngga lebih. :).

        Technorati tags: Blogroll Scrolling, New Blogger Tutorial
        Text Berjalan ( marquee )
        T entang marquee ini ( text berjalan ), sering di gunakan oleh para penguna blog khususnya blogger dari blogspot. tujuan yang utama mungkin untuk menyederhanakan content, baik itu blogroll dll.



        Sebenarnya kodenya sangat simple sekali, di buat dengan tag text yang akan berjalan .


        sedangkan atribut yang sering di gunakan menyertainya ialah :


        BGCOLOR="warna" - mengatur warna background text.


        DIRECTION="left \ right \ top \ down" - mengatur arah gerakan text


        BEHAVIOR="scroll / slide / alternate /" - mengatur cara geraknya - bergerak berputar / bergerak sekali lalu berhenti / bergerak kiri-kanan.


        TITLE="pesan" - pesan yang akan muncul saat mouse berada di atas text.


        SCROLLAMOUNT="angka" - mengatur kecepatan gerakanya.


        SCROLLDELAY="angka" - mengatur waktu tunda gerakan dalam milidetik.


        LOOP="angka \ -1 \ infinite " - mengatur jumlah pengulangan.


        WIDTH="angka" - mengatur lebar block text . baik secara pixel atau persen.


        Contoh-contoh Marquee.


        Simple
        simple scrolling text simple marquee text



        Mengunakan Background : mengunakan atribut bgcolor mengunakan atribut bgcolor






        Mengunakan atribut direction. " left " atau " right " / "top" / "down" .
        mengunakan atribut direction right atau dari kanan direction right atau dari kanan






        Mengunakan Atribut Behavior dan Direction
        Mengunakan Atribut Behavior dan Direction Mengunakan Atribut Behavior dan Direction






        Mengatur atribut Behavior, Direction dan SCROLLAMOUNT ( keceptan ).
        Behavior, Direction dan SCROLLAMOUNT Behavior, Direction dan SCROLLAMOUNT






        Mengatur atribut Behavior, Direction , Scrollamount dan prilaku mouse.


        Nyahooo Booo Sotoshop yeuh







        Nyahooo Booo Sotoshop yeuh


        Technorati tags: Text Marquee, New Blogger Tutorial
        Page Options ala yahoo
        J ika anda main ke situs yahoo betulan :). di bagian tab sebelah kanan anda akan menemukan sebauh tulisan Page Option yang fungsinya merupakan pilihan-pilihan untuk merubah warna layout web-nya. walaupun tidak begitu penting namun cukup bagus untuk menambah situsnya lengkap dan dinamis.



        Atau karena blog ini juga kepinginnya mengejar layout situs yahoo tersebut. anda juga bisa memilih warna blog di bagian tab menu sebelah kanan di atas, dengan cara menandai radio buttom. hasilnya sama dengan Page Option yang di miliki Yahoo.. ( ya rada beda -beda tipislah. hex100 ).


        Cara-cara merubah warna layout ini, saya mesti berterimakasih kepada blog PurpleMoggi, karena kebetulan saya menemukanya di sana, dan si PurpeMoggi pun mendapatkannya dari dinamicdrive.


        Jika anda suka dengan template yang memiliki fitur untuk memilih perubahan warna dan tata letak layoutnya tampa perlu lagi pusing. anda bisa menemukan dan mendonlot-nya di blog PurpleMoggi ini.


        tinggal pilih-pilih templatenya saja, apa mau yang berubah warna atau berubah tata letaknya atau mau yang keduanya.


        Dan seandainya anda kepingin tahu cara pembuatanya anda pun dapat mengikuti tutorilnya masih pada blog yang sama.

        Technorati tags: page option, blogger Tutorial
        Membuat Layout Blog dgn Photoshop

        Sudah ngga asing lagi bagi kita, selain kemampuanya mengolah photo menjadi sangat menarik, program photoshop pun merupakan pengolah grafis layout yang andal, baik itu untuk keperluan sebuah layout web yang di buat secara profesional atau mengolah layout blog yang sifatnya sangat personal dan amatiran.


        nah bagi anda yang ingin belajar membuat layout blog kreasi sendiri, ada artikel tentang masalah ini yang saya tulis. mudah-mudahan artikel tersebut dapat membantu.


        View Tutorial : jaloee.blog - membuat layout blog

        Technorati tags: Tutorial Photoshop, Layout Blog
        Menampilkan Recent Komentar di Sidebar

        Bagaimana caranya menampilkan recent komentar di halaman sidebar blog kita ?.. terutama biar gampang melihatnya kalau tulisan kita ini ada yang ngasih sebuah komentar baru.


        Menampilkan Recent Komentar di Sidebar


        Untuk memasang Recent Comment tersebut, sebenarnya banyak sekali cara yang bisa di lakukan baik itu mengunakan Javascript atau mengunakan sebuah Feed.


        Dan dalam tulisan ini, saya mengunakan dengan cara yang ke dua yaitu mengunakan sebuah feed, pertimbangannya karena sangat mudah untuk di pasang dan tidak memberatkan blog kita sewaktu ngeloding.


        untuk itu yang perlu kita lakukan adalah.


        1. Buka blog kita, dalam Tab Layout pilih - Halaman elemen.


        Menampilkan Recent Komentar di Sidebar



        2. Klik Tulisan Tambahkan Sebuah Halaman Elemen.


        3. Setelah terbuka pilih Elemen FEED ( dan tekan tombol Tambahkan Ke Blog ).


        Menampilkan Recent Komentar di Sidebar



        4. Dalam Konfigurasi Feed isi kotak kosong dengan alamat url feed comment blog kita yaitu :

        http://NamaBlogKamu.blogspot.com/feeds/comments/default



        Menampilkan Recent Komentar di Sidebar


        Kemudian klik tombol Lanjutkan


        5. Setelah itu dalam windows yang terbuka atur settingan-nya.


        Judul : Isi dengan nama yang kita inginkan.


        Tampilkan : Menampilkan jumlah komentar yang masuk.


        Tanggal Item : Tandai / cek untuk menampilkan tanggal komentar.


        Sumber/Pengarang Item : Tandai untuk mengetahui siapa yang memberi komentar.


        6. Setelah beres klik Simpan Perubahan.

        Menambah Latar Belakang Atau Bingkai


        Secara default recent comment yang di tampilkan oleh template bawaan blogger seperti gambar di bawah ini :


        Menampilkan Recent Komentar di Sidebar


        Dan kita bisa menambahkan list icon latar belakang atau bingkai untuk mempercantik dan menonjolkan kotak komentar ini. seperti gambar.


        Menampilkan Recent Komentar di Sidebar


        Caranya yang mesti kita lakukan :


        1. Dalam Tab layout pilih Edit Html


        2. Kemudian dalam halaman/tulisan kode Css masukan kode ini :



        #sidebar #Feed1 ul li {
        background-color:#DEDEDF;
        border-bottom:1px solid #000;
        margin:0 0 0 0px;
        padding:5px;
        text-indent:0px;
        }


        Keterangan


        #sidebar #Feed1 ul li: mendifinisikan proferti list feed. dan feednya tergantung dari jumlah yang telah kita pakai misalkan bisa #Feed1, atau #Feed2, dst.


        background-color: mendifinisikan proferti warna latar belakang. bisa #DEDEDF ( abu-abu ) atau #B4D2F2 ( biru muda ) dll.


        border-bottom: menambah border untuk bagian bawah saja.

        Recent Komentar Dengan Javascript


        Jika anda tertarik untuk memesang kotak komentar dengan bantuan javascript, anda bisa lihat di :


        1. beautifulbeta.blogspot Recent Comments Widget ( Add Recent Comments To Blog )


        2. hackosphere.blogspot customizable-recent-comments-widget




        Jika blog ini bermangfaat.Ikuti terus update informasinya. Silahkan Klik dan masukan emal anda untuk berlanganan Via Email Subscription atau klik Subscribe Via Rss Feed .
        Makasih juga atas kunjungannya.

    0 Komentar:

    Posting Komentar

    Berlangganan Posting Komentar [Atom]

    << Beranda