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.

<li><a href="http://blogkamu.blogspot.com/search/label/?max-results=999">Show All Posts</a></li>

Blogkamu = nama blog kita.

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

 

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.

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    s .......... d

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    <li><a href='http://blogkamu.blogspot.com/search/label/?max-results=999'>Show All Posts</a></li>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>

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 .

kemudian cari kode ini.

<b:include data='post' name='post'/>

Kedua : Setelah ketemu ganti dengan kode ini.

<b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><hr/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

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

<b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <div style='width: 90%;border-bottom:1px solid #9F9F9F;padding:3px;margin-left:25px;'>
<img src='http://i120.photobucket.com/albums/o190/jaloewig/catalog-tut/bullet-hol3.gif'/><a expr:href='data:post.url'>
        <data:post.title/></a><br/></div>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
<b:else/>
     <b:include data='post' name='post'/>
</b:if> 

 

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 <li> di tutup </li> )

 

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 <li> Blogroll 2 </li> untuk membedakan dengan yg baru )

<b:widget id='LinkList4' locked='false' title='My Link' 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>
<li> Blogroll 2 </li>
<li><a href='http://lowongankerja87.com/'>lowongankerja</a></li>
<li><a href='http://uangpanas.com/'>uangpanas</a></li>
<li><a href='http://mrilham.com/'>mrilham</a></li>
<li><a href='http://mangamovie-review.blogspot.com/'>mangamovie-review</a></li>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

 

Dan jika ingin Daftar link-nya bisa di scroll

Tambahkanlah kode dan letaknya seperti tulisan berwarna red ini.

<b:widget id='LinkList4' locked='false' title='My Link' type='LinkList'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content' style="overflow:auto;width:95%;height:150px;border:1px dotted #000;padding:2px;">
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
<li> Blogroll 2 </li>
<li><a href='http://lowongankerja87.com/'>lowongankerja</a></li>
.....
</b:includable>
</b:widget>
</b:section>

 

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 <data:post.dateHeader/> setelah ketemu jika kode na seperti ini.

<span class='date-header'><data:post.dateHeader/></span>

atau seperti ini.

<p class='date-header'><data:post.dateHeader/></p>

maka kudu di ganti dengan kode ini

<h2 class='date-header'><data:post.dateHeader/></h2>



 

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.

<b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

di bawah kode ini.

<data:adStart/>
    <b:loop values='data:posts' var='post'>
...... Letakan di sini.

 

Keempat: Memasuka javascript.

Kemudian masukan javascript ini, di atas tag penutup </head>

<!-- orangevolt calendar widget -->
<script src='http://jaloee.googlepages.com/fastinit.js'/>
<script src='http://jaloee.googlepages.com/prototype-1.5.0.js'/>
<script src='http://jaloee.googlepages.com/orangevolt-calendar.js'/>
<!-- end calendar widget -->

 

Kelima: Memasukan Kode Css.

Setelah itu masukan kode ini, di atas tag penutup ]]></b:skin>

/* Calendar ----------------------------------------------- */
span.cal {
background:#91190A;
border:#6F1307 1px solid;
float:left;
height:45px;
width:40px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-top:5px;
margin-right: 13px;
}
span.cal_month {
color:#fff;
display:block;
font-size:11px;
line-height:8px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:10px;
text-align:center;
text-transform:uppercase;
}

 

Setelah beres klik Simpan Perubahan.

Catatan dari Mr Nyahoo.

Jika ingin menampilkan tanggalnya di atas sebuah Icon.

maka yg kudu di ganti dan mendapatkan perhatian serius adalah di kode css ini.

span.cal {
background:#91190A;
border:#6F1307 1px solid;

menjadi

background:url ( url / alamat gam kamu ) no-repeat center;

dan border: delete saja.

height:45px;
width:40px;

sesuaikan nilai ukurannya dengan ukuran lebar dan tinggi gambar.

margin-top:5px;

terkadang kita perlu juga merubahnya.

Untuk donlot gambar icon-nya di sini.

Atau suka dengan gambar di bawah donlot di sini.

 

del.icio.us tags: Menambah Icon Kalender, Belajar New Blogger

Menambah Icon dalam tab menu

Untuk melanjutkan seri membuat tab menu ( lihat di sini ). Sekarang bagaimana  caranya untuk menambahkan icon-icon luthu di samping tab menu navigasi. biar keliatan-nya sedikit rada begaya !!.

Caranya untuk menambah tab menu itu sendiri sama seperti yang telah saya jelaskan di sini. namun yang membedakan adalah kode Css dan Html -nya.

Untuk memasukan kode Css -nya ini.

#menu ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; } #menu li span.home { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/home-icon.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.about { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/add-user-yellow.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.feed { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/feed-icon16x16.png') no-repeat left center; padding: 0 0 0 20px; } #menu li span.contact { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/email-contact-orange.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.login { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/user-login-yellow.gif') no-repeat left center; padding: 0 0 0 20px; }

 

Sedangkan untuk kode Html na ini.

<div id="menu">
<ul>
<li><span class="home"><a href="http://alamat_blog_home.com">Home</a></span></li>
<li><span class="about"><a href="http://alamat_blog_profile.com">About</a></span></li>
<li><span class="feed"><a href="http://alamat_feed">My Feed</a></span></li>
<li><span class="contact"><a href="mailto:alamat email.com">Contact</a></span></li>
<li><span class="login"><a href="http://www.blogger.com">Login</a></span></li>
</ul>
</div>

Catatan Si Nyahoo

Jika kita ingin menambah navigasi menu-nya, yang perlu kita lakukan pertama menambah dulu dalam tag Css -nya seperti ini.

#menu li span.tambah menu {
background: url(' url / alamat gambar icon') no-repeat left center;
padding: 0 0 0 20px;
}

langkah kedua menambah dalam tag Html-nya seperti ini.

<li><span class="tambah menu"><a href="url / alamat yang di tuju">Apa Kek </a></span></li>

Tulisan Yang Rada Nyambung

1. basic-menambah-tab-menu-horizontal

2. memasang-tab-menu-di-new-blogger

 

Technorati tags: Tab Navigasi, Belajar New Blogger

del.icio.us tags: Tab Navigasi, Belajar New Blogger

Memindahkan Blog Feed Ke FeedBurner

Yang terpenting  saya asumsikan saudara telah mendaftarkan blog feed-nya ke FeedBurner. ( lihat di sini )
Karena tulisan ini sangat bertautan dengan tulisan di atas.

Ok. seperti yang saya katakn sebelumnya, bahwa saat kita mendaftrakan ke feedburner pada dasarnya kita belum mengalihkan atau memindahkan  blog feed kita ke feedburner. Agar semua feed-nya terbaca dan di urus oleh feedburner kita perlu melakukan beberapa settingan dalam halaman Edit Layout blog kita.

1. buka  tab Pengaturan -> Feed situs.

2. Dalam Dropdown pilih sindikasinya ke Penuh.

3. Kemudian isikan alamat feedburner yang kita miliki ke dalam kotak  di samping tulisan Posting URL Pengubahan Arah Feed. - setelah beres  klik tulisan Simpan Pengaturan.

 

 

Feed Auto Detektion

4. Pada halaman depan ( muka )  blog kita klik kanan mouse kemudian klik  View Page Source ( atau untuk browser IE  pilih menu Edit - Source ).

copy paste kode seperti di bawah ini  ke dalam Notepad. ( ingat kode seperti di bawah ini !! karena masing-masing blog mempunyai informasi yang berbeda-beda. )

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate"  type="application/atom+xml"
title="Muqaddimah Online - Atom"
href="http://namablogkamu/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml"
title="namablogkamu - RSS"
href="http://namablogkamu/feeds/posts/default?alt=rss" />
<link rel="service.post"
type="application/atom+xml"  title="judulblog - Atom"
href="http://www.blogger.com/feeds/597620046253070844/posts/default" />
<link rel="EditURI"
type="application/rsd+xml" title="RSD"
href="http://www.blogger.com/rsd.g?blogID=597620046253070844" />
<link rel="openid.server"
href="http://www.blogger.com/openid-server.g" />

 

kemudian ganti tulisan yang berwarna merah di atas dengan kode ini.

 

<link rel="alternate" type="application/atom+xml"
title="judul blog - Atom"
href="http://feeds.feedburner.com/YourFeedburnerFeed" />
<link rel="alternate" type="application/rss+xml"
title="judul blog - RSS"
href="http://feeds.feedburner.com/YourFeedburnerFeed" />

* ganti namafeedkamu

 

hasilnya kira-kira  menjadi seperti ini.

 

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml"
title="judulblog - Atom"
href="http://feeds.feedburner.com/feedkamu" />
<link rel="alternate" type="application/rss+xml"
title="Minima Theme Switch Demo - RSS"
href="http://feeds.feedburner.com/feedkamu" />
<link rel="service.post" type="application/atom+xml"
title="judulblog - Atom"
href="http://www.blogger.com/feeds/8301582465326140745/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD"
href="http://www2.blogger.com/rsd.g?blogID=8301582465326140745" />

 

*ganti namafeedkamu

 

Setelah itu dalam Edit layout  klik tab Tata Letak -> Edit Html.

kemudian cari dan ganti baris kode ini dengan kode di atas.

<b:include data='blog' name='all-head-content'/>

 

Setelah beres klik tulisan Simpan Perubahan.

 

Sekarang blog feed kita sudah di alihkan dan di urus oleh feedburner.

 

Reperensi lebih lanjut.

1. all-feeds-by-feedburner  - beautifulbeta.blogspot

2. integrating-your-feedburner-feed - purplemoggy.blogspot

 

Technorati tags: Blogger Tuturial, FeedBurner

 

FeedBurner

Sebelum kita mengoptimalkan feed dengan cara mendaftarkan feed blog kita ke feedburner. ada baiknya saya tulis tanya jawab dari yahoo answer tentang feed ini .

Penanya : Rss Feed itu apa yach ?

Penjawab : untuk mengumpulkan berbagai info dalam satu halaman.
analoginya seperti kita gunting artikel kompas, jawapos, surya, dll terus kita tempelin di satu halaman.jadi dengan RSS feed kita tidak perlu susah2 browsing semua halaman koran tersebut. kita cuma perlu subscribe artikel yang kita inginkan.

Masih belum jelas juga ?

Mari kita contek tulisan Bapak Blogger ini.

" Feed, atau lebih umum disebut Web Feed atau Web Syndication adalah dokumen berbasiskan XML yang dapat digunakan untuk mengirimkan informasi terstruktur, salah satunya adalah posting blog kamu. "

Dan Feed terbagi dua. ada yang berformat Rss dan Atom. Apa perbedaanya ?

Sebenarnya Baik Rss atau Atom masih berbasis dolumen xml. cuman untuk lebih jelas perbedaannya coba cek di  yahoo answer atau bloggerbuster deh :).

Terlepas dari semua itu, jika kita telah memiliki sebuah blog baik di blogger atau blog lainnya, sebenarnya kita telah mempunyai  sebuah feed. untuk platform blogger mengunakan feed berbasis Atom.

Sekarang bagaimana hubungannya dengan FeedBurner ?

Feedburner sendiri merupakan situs layanan ( re-direction feed )  yang menitik beratkan pada promosi, distribusi , optomalisasi feed.  dan juga salah satu fasilitas yang pentingnya lagi dengan mengunakan layanan Feedburner kita dapat memonitoring jumlah yang berlangganan feed/ artikel  blog kita, baik melalui ditribusi klik, bookmark dan berlangganan via Email.

Daftar feed ke FeedBurner.

Untuk mengetahui cara mendaftarkan Feed ke Fedburner , bisa di kita ikuti tulisan berikut ini.

1. buka situs www.feedburner.com

2. kemudian pada kotak kosong isi dengan url blog yang ingin kita daftarkan.

Klik Next

 

3. Pada halaman Identify Feed Source. pilih satu jenis feed yang ingin kita gunakan.- kalau saya pilih rss: http://blogkamu/feeds/posts/default?alt=rss

4.  kemudian pada halaman berikutnya isi : feed title, feed adrress ( nantinya ini url feed kita - contoh http://feeds.feedburner.com /judulfeed ), Username dan password untuk login, dan Email Address yang aktif dan valid. klik Activate Feed.

5. Jika nama feed adrress  belum ada yang memakai, maka kita melangkah pada halaman selanjutnya. klik Next

6. Get More Gusto From Your Feed  Traffic Statistic. ( mengukur dan memonitoring feed kita )  pada halaman ini tandai semua-nya. Klik Next

7. pada halaman ini ada beberapa tab yang bisa kita buka.

Tab Optimize

Gunanya untuk mengoftimalkan feed . pada tab ini yang perlu kita aktifkan adalah Smartfeed. - klik  tombol Aktivate - agar feed kita kompatible dengan berbagai macam  feed reader.( dari  Cosaranda.com )

( Jika memerlukan aktifkan juga FeedFlare - lihat bloggrbuster.com )

Tab  Publicize

Klik tulisan Pingshot - untuk memberi tahu layanan ping lain bahwa blog kita telah berubah. tandai/centang pada Ping-o-matic dan Newsgator. setelah itu pada dropdown menu kita bisa menambahkan layanan ping lainnya. pilih   Weblog.com, FeedBlitz dan pilih ping lain-nya sesuka kita. - ( dari Cosaranda.com )

Klik tulisan FeedCount - untuk memonitoring jumlah yang berlangganan feed. serasikan warna count-nya dengan blog yang kita miliki. - klik tombol Aktivate. kemudian pada halaman yang terbuka , jika ingin secara otomatis terpasang pada blog kita. dalam dropdown menu pilih blogger kemudian klik Go dan ikuti petunjuknya. Namun jika ingin secara manual copy kodenya. kemudian pilih elemen - widget Html/JavaScript  dan paste-kan kodenya  (lihat cara pasang elemen Html/Javascript  di sini)

Klik tulisan Email Subscritions - gunanya untuk  menyediakan atau menawarkan kepada pengunjung untuk berlangganan feed yang di kirim via email -. pilih salah satu service email yang disediakan. contohnya saya pilih Feedburner. - klik tombol Aktivate.  Untuk memasang kode Email Subscrition-nya caranya  sama seperti cara memasang FeedCoun di atas. bisa secara otomatis atau manual.

gambar widget - Email Subscribe

Klik tulisan Headline Animator - gunanya untuk menampilkan judul-judul feed post kita. atur judul, ukuran , warna, tanggal untuk widgetnya. - klik tombol Aktivate. untuk memasang widget ini akan di lakukan secara otomatis ke dalam blog kita. ( ikuti saja petunjuknya dengan cara menekan tombol next ).

gambar - widget Headlines Animator

 

Note :

Setelah beres dengan pendaftaran dan pengaturan di atas, pada dasarnya feed kita belum di alihkan atau di pindahkan ke layanan FeedBurner. Agar feed blog kita di layani secara penuh oleh FeedBurner seharusnya saudara baca juga artikel selanjutnya di sini.

 

Technorati tags: Blogger Tutorial, FeedBurner

    

Menganti Tampilan Widget Recent Reader dari Mybloglog

Tulisan ini di khususkan bagi yang telah memiliki widget Mybloglog,  namun kurang suka dengan tampilan mybloglog yang baru,  dan ingin mengembalikannya kepada tampilan yang dulu lagi - classic. ( seperti mybloglog yang saya miliki ).

 

Caranya sebenarnya sangatlah mudah. (saran saya backup dulu scriptnya )

Pertama : buka kode script  mybloglog dalam widget Html/Javasript.

Kedua : setelah tebuka ganti saja tulisan  /comm3 menjadi /comm2. otomatis tampilannya akan kembali seperti dulu.

Dan jika ingin tampilannya seperti yang saya miliki.

ini kode script-nya

<script src="http://pub.mybloglog.com/comm2.php?mblID=2007092517293341&amp;c_width=125&amp;c_sn_opt=n&amp;c_rows=2&amp;c_img_size=h&amp;c_color_link_bg=CC9966&amp;c_color_link=666666&amp;c_color_bottom_bg=990000" type="text/javascript"></script>

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.

<center><ul><li><a href="http://www.mybloglog.com/buzz/community/YourCommunityName/"
title="Visit the MyBlogLog Community">View the reader community</a></li>
<li><a href="http://www.mybloglog.com/buzz/yjoin/?ref_id=[your community ID#]&ref=w"
title="Do you want to be a part of this community?">Join this community</a></li>

hasilnya seperti gambar ini.

 

Technorati tags: My Bloglog, Blogger Tutorial

del.icio.us tags: My Bloglog, Blogger Tutorial

Pasang Brogroll Atau Daftar Link

Bagaimana cara menambah blogroll atau daftar link ?

Langkah Pertama

Dalam Edit Layout ( halaman template ) buka tab Elemen Halaman.

Kemudian klik tulisan Tambahkan Sebuah Elemen Halaman di samping kanan atau kiri. setelah itu pilih Daftar LInk dengan cara menekan tulisan Tambahkan Ke Blog.

dan setelah terbuka jendela Daftar Link-nya.

Judul : Isi dengan sebuah judul, misalkan Blog Teman atau Blogroll.

Menyortir : Apakah daftar link akan di tampilkan secara berurutan dari mulai A sampai Z, atau secara acak tidak bebrurutan.

Url Situs Baru : contoh -   http://Catalog-Tutorial.blogspot.com.

Nama Situs Baru :contoh -  Catalog-Tutorial.

* alamat Url atau situs di awali dengan http:// atau www.

Tambahkan Link : Klik tombol ini setiap kita menulis dan menambahkan daftar link.

Setelah beres klik tombol Simpan Perubahan.

Note :

Selain Blogroll ( blog teman ) daftar link juga bisa untuk menghubungkan pada situs atau web favorit kita.

 

Tulisan Yang Nyambung

1.membuat-kotak-scroll-untuk-blogroll

2.blogroll-scrolling-dengan-inline-style

3.tip-n-trik-membackup-daftar-link

 

Technorati tags: Blogger Tutorial, Daftar Link

 

Pasang Elemen Html / Java Script

Elemen Html / Javascript ini merupakan elemen yang sangat multi fungsi dan sangat berperan penuh untuk mempercantik dan memperkaya blog. karena melalui elemen ini, kita bisa menampikan shoutbox, site meter dll. ( nantinya elemen ini banyak di gunakan )

Untuk memasang sebuah kode Html atau  javascript ke dalam blog. caranya

Langkah Pertama

Dalam Edit Layout  ( halaman template ), buka tab Elemen Halaman.

Kemudian klik tulisan " Tambahkan  Elemen Halaman ", setelah terbuka pilih Elemen Html / Javascript - klik Tambahkan Ke Blog.

Setelah terbuka Jendela Html/Javascript. kemudian isi dengan html / javascript  yang di berikan.

 

Widget :

Pasang Jam, Status Mesengger, FeedBurner, Pasang Banner dll lihat di sini.

 

Technorati tags: Blogger Tutorial, Html JavaScript

Berburu Brushes

  Ngga ada kerjaan.

liat-liat koleksi brush, klik sana-sini akhirnya saya nemu brushs world of warcraft . kemudian sy cari2 photo .. eh  nemu photo orang centil ini..

Setelah itu  saya penggal kepala -nya dengan Poligonal Lasso tool.  keeukkk !!!

Walapun masih  kasar dan kelihatan tempelannya..
hehehe .. namanya juga ngga ada kerjaan :D

So buat yang suka berburu dan mengkoleksi brushes ,  ada beberapa koleksi situs yang sempat saya bokmark. mudahan-mudahan saya posting di sini dapat membantu dan menambah koleksi brush -nya.

And buat yang masih belum tahu  cara menginstall brush  dalam program photoshop. ente  dapat  membaca penjelasanya di sini.

Link ini akan selalu terupdate ... jadi cek terus blog ini ( halah hari gini promosi :D )

http://amadaun.net/brushes/brush.htm
http://www.brusheezy.com
http://dyingday.all-thats-left.net/goodies/brushes.php http://www.freephotoshop.com/html/free_brushes.html
http://brushes.nenuphar.net/index2.php?p=5to8
http://www.nymphaea.org/brushes
http://www.photoshopbrushes.com/brushes.htm
http://www.pixelchick.dk/pc.php?file=brushes
http://pootato.org/downloads?dl_cat=1
http://design.rainharbour.net/brushes.php
http://tomledin.com/stuff/brushes.html
http://brushes.500ml.org
http://beautiful-sin.net/brushes
http://www.appendixsquared.com/
http://blinding-light.com/download/brushes/0
http://fantabulous.murkybucket.com
http://www.headlock.ws
http://www.jeffsdigital.com/brushes
http://hawksmont.com/blog/category/graphic_design/resources/brushes
http://www.strangeangels.net

del.icio.us tags: Brush, Photoshop Tutorial

Technorati tags: Brush, Photoshop Tutorial

Pasang Banner dan Tukeran Banner Link

Bagaimana caranya membuat banner , pasang banner ( logo ) dan tukar menukar banner link.

Membuat Banner.

Jika kita tidak pamiliar dengan sofware image editing seperti photoshop dan lain-lain. kita bisa  mengunakan layanan online pembuat button banner ini.

diantaranya :

a.  lucazappa.com - button image generator

b. Cooltext

Pasang Banner

Untuk pasang bannernya ke dalam blog sebenarnya kita bisa mengunakan Elemen ( widget ) gambar.

Namun jika ingin mengunakan atau memakai Elemen Html/Javascript. Gambar dapat di tampilkan dengan tag <IMG> cara pengunaanya seperti ini. - simpan gambar dalam image hosting ( web penyimpan gambar lihat di sini.)

kodenya :

<IMG SRC="alamat/url Gambar">

contoh:

<img src="http://jaloee.googlepages.com/combo-box.gif">

Tukeran Banner.

Untuk melakukan tukeran banner, kita harus membuat sebuah textarea ( kotak ) yang menyimpan alamat gambar dan alamat link tujuan.

seperti ilustrasi ini.

 

contoh kodenya seperti ini.

<img border="0" alt="alamat blog kamu" width="125" src="alamat/url gambar kamu" height="25"/><br/>

<textarea style="width: 120px; height: auto;"><a href="alamat url blog kamu" target="_blank"><br/><img border="0" width="125" alt="alamat url blog kamu" src="alamat gambar kamu" height="25"/></a></textarea>

Note :

alamat blog kamu = http://wwww.nama blog.com/

Alamat url gambar = http://alamat gambar.com/namagambar.jpg

width dan height = merupakan ukuran gambar dan kotak textarea-nya, yang bisa di sesuaikan dengan logo banner dan sidebar blog kita masing-masing.

simpan kode textarea pada Elemen Html/Java Script .

Nantinya tulisan yang ada di dalam kotak textarea yang akan di copy pastekan oleh teman pertukaran link pada elemen Html/javascript blog mereka. 

 

Technorati tags: Blogger Tutorial, Tukeran Banner

 

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.

<script src="http://widgets.technorati.com/t.js" type="text/javascript"> </script>
<a href="http://technorati.com/blogs/http://catalog-tutorial.blogspot.com?sub=tr_authority_t_ns" class="tr_authority_t_js" style="color:#4261DF">View blog authority</a>

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

del.icio.us tags: Technorati, blogger baru

Technorati tags: Technorati, blogger baru

Pasang Favicon

Favicon singkatan dari Favorit Icon. merupakan sebuah gambar mungil sebagai identitas khusus sebuah situs. dan biasanya  terlihat dalam menu  favoriet untuk Ie atau Bookmarks untuk firefox. dan selain itu favicon bisa juga terlihat di address bar dan new tab untuk firefox.

Situs blog kita pun bisa untuk di pasang sebuah favicon asalkan kita mempunyai gambar berekstensi .ico

Untuk mendapatkan format gambar .ico kita dapat mengunakan situs layanan online untuk merubah gambar berformat  Jpg, Gif dan Png ke dalam format ico.

caranya.

1. Siapkan sebuah gambar yang kita akan jadikan faviconya. ( logo, photo kita dll.. ukurannya jangan terlalu besar.. red  ).

2. setelah siap dengan gambarnya, buka situs htmlkit.com.

3. Klik tombol Browser , dan masukan gambar yang telah kita siapkan . kemudian klik Generate Favicon Ico.

akan terbuka jendela seperti ini

4. Klik Download Favicon Simpan pada komputer.

5. Karena Ico yang kita download berformat Zip. extraklah dulu.

6. Setelah itu upload ( simpan ) gambar.ico ke image hosting ( googlepages ). - jika belum tahu cara menyimpan gambar ke googlepage bisa di lihat di sini.

7. buka blog kita dalam kedaan login, klik tab Edit Html kemudian di bawah tag / kode : <head>

masukan kode ini.

<link href='alamat/url gambar.ico' rel='shortcut icon'/>

alamat/ url  gambar ico = adalah alamat link gambar sampean.

jika ingin faviconya beranimasi. upload ( simpan ) juga gambar berformat gif yang tadi di download. kemudian tambahkan kodenya menjadi seperti ini.

<link rel="shortcut icon" href="alamat link gambar favicon.ico" >
<link rel="icon" href="url animated_favicon1.gif" type="image/gif" >

kemudian jangan lupa klik Simpan Perubahan.

8. Jika belum kelihatan coba refresh ( F5 ) pada browser internet yg kita pake ( atau keluar dulu dari browser na ).

 

Technorati tags: Blogger Tutorial, Favicon

 

Pasang Status Yahoo Messenger

Untuk pasang status yahoo messenger, yang menandakan apakah kita sedang online atau tidak,  dan mungkin mengajak pengunjung untuk bergabug ngobrol ( chating ).

Pertama :

Buka Tambah Elemen Halaman, Kemudian pilih Elemen Html/JavaScript.

 

Kedua :

Setelah terbuka masukan pada Elemen Html/javascript kode ini.

<center><a href="ymsgr:sendIM?yahooId">
<img src="http://opi.yahoo.com/online?
u=yahooId&m=g&t=14&l=us"/>
</a></center>

 

Note :

YahooId = ganti dengan yahooId yang kita miliki.

Jika ingin menganti gambar status yahoo ms-nya, ganti saja angka 14 tersebut, menjadi.

angka 1 ( satu )

angka 3 ( tiga )

angka 6 ( enam )

angka 14 ( empat belas )

 

Technorati tags: Blogger Tutorial, Status Mesengger