blog tutorial « Hanya arsip

Cara Me-reset Template Blogger

Salah satu kelebihan blogging di blogger.com di banding dengan di wordpress.com adalah kita di beri kebebasan untuk mengganti ataupun mengedit template dengan sesuka hati, sehingga ini memungkinkan kita untuk mendapatkan tampilan blog sesuai dengan keinginan. Namun dari kebebasan tersebut ada sedikit efek negatifnya yaitu kita menjadi lebih sering mengedit atau bahkan mengganti template dibanding memposting artikel.

Akibat dari seringnya melakukan editting terhadap template yang kita miliki, terkadang ada hasil yang mengecewakan di suatu waktu, ambil contoh banyak blogger yang ingin mengembalikan kotak komentar dari haloscan ke kotak komentar original blogger serta hal-hal lainnya yang terkadang membuat kita frustasi karena tidak bisa mengembalikannya sesuai keinginan. Bagi anda yang mempunyai masalah-masalah seperti ini, kang Rohman mempunyai cara me-reset template blogger agar kembali seperti saat kita baru membuat blog, yup benar-benar kembali seperti awal anda membuat blog. penasaran? lanjut deh.

Namun agar tidak ada hal-hal yang tidak di inginkan, silahkan coba dulu trik ini pada blog percoban anda, karena trik ini terbilang ekstrim. Catatan pertama yang harus anda ketahui adalah :

Semua widget yang ada akan hilang, jadi jangan lupa untuk membuat backup data sebelum melakukan reset. Tentang cara membackup data dalam widget pernah kang Rohman bahas pada postingan Tips Membackup Data Dalam Widgets.
Isi posting anda tidak akan terlihat, namun tidak terhapus. Pada saat memilih template yang baru, posting yang ada akan di tampilkan kembali.

Siap untuk tantangan ekstrim? yuk kita mulai!

Langkah #1

Silahkan login ke Blogger dengan ID anda
Klik Tata Letak
Klik tab Edit HTML
Alihkan perhatian anda ke bagian bawah kode template anda, cari kode <body> dan </body>
Hapus semua kode yang ada antara kode <body> dan </body>. Contoh :

<body> <= yg ini jangan di hapus
<div id=’outer-wrapper’><div id=’wrap2′>

    <!– skip links for text browsers –>
    <span id=’skiplinks’ style=’display:none;’>
      <a href=’#main’>skip to main </a> |
      <a href=’#sidebar’>skip to sidebar</a>
    </span>

    <div id=’header-wrapper’>
      <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Template Tutorial (Header)’ type=’Header’/>
</b:section>
    </div>
    <div id=’content-wrapper’>

      <div id=’crosscol-wrapper’ style=’text-align:center’>
        <b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’/>
      </div>

      <div id=’main-wrapper’>
        <b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
      </div>

      <div id=’sidebar-wrapper’>
        <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’Profile1′ locked=’false’ title=’About Me’ type=’Profile’/>
<b:widget id=’BloggerButton1′ locked=’false’ title=” type=’BloggerButton’/>
</b:section>
      </div>

      <!– spacer for skins that want sidebar and main to be the same height–>
      <div class=’clear’> </div>

    </div> <!– end content-wrapper –>

    <div id=’footer-wrapper’>
      <b:section class=’footer’ id=’footer’/>
    </div>

</div></div> <!– end outer-wrapper –>
</body> <= yg ini jangan di hapus
Klik tombol Simpan Template.
Akan keluar peringatan semua widget akan di hapus. Klik tombol KONFIRMASI & SIMPAN (ingat! anda harus sudah membuat backup sebelumnya)
Silahkan lihat blog anda, dan hasilnya blog anda kosong tidak ada isinya.
Langkah #1 selesai.

langkah #2

Masih dalam kondisi login. silahkan klik tab Pilih Template baru
Silahkan pilih template yang anda sukai ( atau sembarang saja).
Klik tombol SIMPAN TEMPLATE
Silahkan lihat blog anda, seharusnya postingan sudah bisa muncul kembali seperti sedia kala.
Selesai.

Jika anda melakukan trik di atas, maka template anda akan kembali ke template standar blogger yang belum di utak-atik. Sekarang terserah anda mau di apakan lagi, mau di ganti template dengan yang baru sesuai keinginan anda? mau di edit atau di apakan, up to you deh.

Salam ekstrim dari kang Rohman.

26 Desember 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial | Tinggalkan komentar

Cara mengganti Tulisan Posting Lama Dan Posting Baru

Dulu pernah ada yang bertanya ke kang rohman tentang bagaimana cara menyembunyikan tulisan Posting lama atau Posting baru di blogger, dan jawaban tentang hal ini pernah kang Rohman posting pada artikel “Cara Menghilangkan Link Posting Lama”. Ternyata ada pertanyaan lain seputar “Link Posting lama Dan Posting baru” ini, kutipan pertayaan tersebut seperti ini :

Hallo,

Bagaimana caranya mengganti “posting lama” atau “Posting baru” dengan tulisan “Next” atau “previous”

Terima kasih

Tulisan Posting lama atau Posting baru tentu saja bisa anda ganti sesuai dengan keinginan anda, contoh di ganti dengan tulisan “Next” atau “Previous”, bahkan tidak hanya bisa diganti dengan dengan tulisan biasa namun “Posting lama atau Posting baru” bisa diganti dengan gambar atau icon. Yuk, kita bahas satu – satu.

Mengganti Posting lama dan Posting baru dengan Next dan Previous

Ikuti langkah-langkah berikut :

Login ke blogger dengan ID anda
Klik Tata Letak.
Klik tab Edit HTML
Klik tulisan “Download Full Template”, silahkan di backup dulu template anda (penting)
Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai.
Cari kode berikut pada template anda :

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

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

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>
     <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
     <b:else/>
     <b:if cond=’data:newerPageUrl’>
       <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
     </b:if>
   </b:if>
Perhatikan kode yang saya cetak merah.
Gantilah kode <data:newerPageTitle/> dengan tulisan Next dan kode <data:olderPageTitle/> dengan tulisan Previous
Klik tombol Simpan Template
Selesai.

Sangat sederhana bukan?

Mengganti Posting lama dan Posting baru dengan Icon

Untuk mengganti Posting lama serta Posting baru dengan icon, langkah pertama tentu saja anda harus mempersiapkan icon yang akan di pakai. Sebagai contoh kang Rohman mempunyai icon seperti ini :

Uploadlah icon-icon yang anda miliki ke server tempat anda biasa menyimpan gambar, kemudian catat URl nya. Contoh kang rohman mempunyai alamat icon icon di atas sebagai berikut :

http://lh6.ggpht.com/_pt7i0nbIOCY/SVGKP6ApR7I/AAAAAAAAAok/jdxY8orBJ10/Next_thumb%5B2%5D.png?imgmax=800

http://lh3.ggpht.com/_pt7i0nbIOCY/SVGWOwXOtlI/AAAAAAAAAo8/iCG-SNx6gMI/previous_thumb%5B1%5D.png?imgmax=800

http://lh4.ggpht.com/_pt7i0nbIOCY/SVGKSFmGSsI/AAAAAAAAAos/dzYf7KrG0S4/home_thumb%5B3%5D.png?imgmax=800

Ubahlah kode di atas menjadi seperti ini :

Jika anda sudah mempunyai kode seperti diatas, langkah selanjutnya adalah tinggal memasukannya ke kode template anda, caranya seperti ini :

Login ke blogger dengan ID anda
Klik Tata Letak.
Klik tab Edit HTML
Klik tulisan “Download Full Template”, silahkan di backup dulu template anda (penting)
Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template
Tunggu beberapa saat sampai proses selesai.
Cari kode berikut pada template anda :

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

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

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>
     <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
     <b:else/>
     <b:if cond=’data:newerPageUrl’>
       <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
     </b:if>
   </b:if>
Perhatikan kode yang saya cetak merah.
Gantilah kode <data:newerPageTitle/>, <data:olderPageTitle/> , dan <data:homeMsg/> dengan kode icon anda. Contoh

<span id=’blog-pager-newer-link’>
     <a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’><img alt=’Next’ border=’0′ src=’http://lh6.ggpht.com/_pt7i0nbIOCY/SVGKP6ApR7I/AAAAAAAAAok/jdxY8orBJ10/Next_thumb%5B2%5D.png?imgmax=800′ title=’Next’/></a>
     </span>
   </b:if>

   <b:if cond=’data:olderPageUrl’>
     <span id=’blog-pager-older-link’>
     <a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’><img alt=’previous’ border=’0′ src=’http://lh3.ggpht.com/_pt7i0nbIOCY/SVGWOwXOtlI/AAAAAAAAAo8/iCG-SNx6gMI/previous_thumb%5B1%5D.png?imgmax=800′ title=’previous’/></a>
     </span>
   </b:if>

   <b:if cond=’data:blog.homepageUrl != data:blog.url’>
     <a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’home’ border=’0′ src=’http://lh4.ggpht.com/_pt7i0nbIOCY/SVGKSFmGSsI/AAAAAAAAAos/dzYf7KrG0S4/home_thumb%5B3%5D.png?imgmax=800′ title=’home’/></a>
     <b:else/>
     <b:if cond=’data:newerPageUrl’>
       <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
     </b:if>
   </b:if>
Klik tombol Simpan Template
Selesai

Contoh hasil yang akan anda dapatkan seperti ini :

Jika anda mempraktekan tutorial ini kemudian mendapatkan pesan error, kang Rohman menyarankan untuk mencoba lagi dengan menggunakan browser yang berbeda.

Selamat mencoba!

25 Desember 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial | Tinggalkan komentar

Memasang Kode Hasil CSS Menu Generator

Pada postingan terdahulu kang Rohman sempat menginformasikan tentang free download tool yang bernama CSS Menu Generator, dengan tool CSS Menu Generator anda dapat dengan mudah membuat sebuah Horizontal Menu, Vertical Menu, Combo-box Menu, Full Down Menu atau Drop down Menu. Namun ternyata eh ternyata setelah di kasih enak malah jadi pada bingung tujuh keliling dan akhirnya banyak yang bertanya ke Kang Rohman tentang cara memasang kode hasil dari CSS Menu Generator pada blog. Hihihi.. pada bingung yah, duuuh kacian…..

Bagi anda yang masih merasa kebingungan memasang kode hasil dari CSS Menu Generator, mungkin postingan ini bisa menjadi obat sakit kepala anda karena Kang Rohman akan mencoba membahas tentang bagaimana cara memasukan kode yang di hasilkan oleh CSS menu generator ke dalam blog. Namun sebelumnya, anda saya anggap sudah bisa mengoperasikan CSS Menu Generator.

Kode yang di hasilkan oleh CSS Menu Generator terdiri dari dua bagian yaitu bagian kode CSS dan yang satunya kode HTML. Perhatikan gambar berikut :

Contoh kode CSS ;

<style type="text/css" media="screen">
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Contoh kode HTML :

<div class="pd_menu_01 ">
<ul><li><a href="/">Home<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
<ul><li><a href="">Blog Tutorial<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<ul>
<li><a href="" >Cara Daftar</a></li>
<li><a href="" >cara Setting</a></li>
<li><a href="" class="lastone">Cara Posting</a></li>
</ul>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
<ul><li><a href="">Wordpress tutorial<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
<ul><li><a href="">Hot News<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
</div>

Untuk menempatkan kode di atas pada blog anda tentu tidak ada ketentuan yang baku karena tergantung di manakah posisi tab menu mau di tempatkan, faktor yang lain adalah kode template antara yang satu dengan yang lain tentu saja berbeda. Namun sebagai gambaran, kang Rohman akan memberikan satu contoh, mungkin dengan ini akan ada sedikit titik terang.

Jika menurut kebiasaan, lazimnya suatu tab menu di simpan di atas Header atau di bawah header. Untuk itu anda di sarankan untuk membuat elemen di atas atau di bawah header, trik ini pernah kang rohman posting pada “ Menyimpan Widget Persis Dibawah Header “ atau pada posting “ Cara Membuat Elemen Persis Di Bawah “, Silahkan di baca dulu.

OK. sekarang saya anggap anda sudah membuat elemen persis di bawah header, dan sekarang kita mencoba untuk memasukkan kode hasil dari CSS Menu Generator. Namun sebelumnya perlu di ketahui bahwa pada kode CSS seperti contoh di atas ada sedikit kode yang perlu di hapus, yaitu pada contoh kode yang saya contohkan di atas saya cetak merah, tepatnya kode yang ini :

</style>

Sekali lagi, kode di atas di hapus saja.

Berikut adalah langkah-langkah untuk memasukkan kode dari CSS Menu Generator :

Mungkin langkah-langkah di atas bisa menjadi satu gambaran bagaimana cara memasukkan kode hasil dari CSS menu Generator.

Selamat mencoba!

18 Desember 2008 Diposkan oleh: rohman | blog tutorial, menu navigasi css | Tinggalkan komentar

Pasang Label Bentuk Animasi di Blog

Blogumulus by Roy Tanck and Amanda Fazani

Agar menarik, coba arahkan mouse komputer anda pada tulian di dalam gambar di samping! bagus tidak? kemarin lusa ada yang minta di buatkan tutorial tentang bagaimana membuat widget label / kategori dalam bentuk animasi flash seperti gambar di samping. Widget tersebut biasa di gunakan oleh pengguna mesin wordpress, namun jika anda sebagai pengguna mesin blogger ingin memasang widget tersebut, anda bisa melakukannya. Terima kasih untuk amanda yang telah membuat widget ini bisa di pasang di blogger.

Anda tertarik juga untuk memasang widget ini? berikut adalah langkah-langkahnya :

Login ke blogger dengan ID anda.
Klik Tata Letak.
KLik tab Edit HTML.
Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
Cari kode yang mirip dengan kode di bawah ini :

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Copy lalu paste kode di bawah ini di bawah kode yang tadi ;

  <b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Klik tombol SIMPA TEMPLATE
Selesai.

Seharusnya dengan langkah di atas, anda sudah mempunyai sebuah label atau kategori dalam bentuk animasi flash. Akan tetapi agar lebih pas dengan template yang anda gunakan, ada beberapa yang bisa di ubah pada kode di atas, misal :

Untuk mengubah lebar widget :

width="250"

Nilai “250” adalah lebar widget sebesar 250 pixel. Nilai ini bisa anda ganti sesuai kebutuhan, misal : 300

Untuk mengubah tinggi widget :

height="200"

Nilai “200” adalah tingg widget sebesar 200 pixel. Nilai ini bisa anda ganti sesuai kebutuhan, misal : 250

Untuk mengubah warna background ":

<param name="bgcolor" value="#ffffff" />

Tulisan “ffffff” adalah kode warna untuk putih, jika anda ingin mengubahnya, gantilah kode warna tersebut dengan kode warna yang anda inginkan. Contoh : kode warna untuk hitam adalah “000000”.

Untuk mengubah warna tulisan ":

<param name="flashvars" value="tcolor=0x000000&

Tulisan “000000” adalah kode warna untuk hitam, jika anda ingin mengubahnya, gantilah kode warna tersebut dengan kode warna yang anda inginkan. Contoh : kode warna untuk putih adalah “ffffff”.

Dan jika anda mengerti lebih banyak, anda bisa mengubah yang lain- lainnya pula.

Selamat mencoba!

2 Desember 2008 Diposkan oleh: rohman | blog tutorial, blogging tutorial, blogspot tutorial | Tinggalkan komentar

Cara Menghilangkan Link Posting Lama

Sebagaiman anda ketahui bahwa saat sekarang ini blogger.com masih menggunakan template dengan dua versi, yaitu versi Template Klasik serta versi Template baru. Salah satu perbedaan antara keduanya adalah versi klasik tidak mempunyai fasilitas link “Posting Lama” atau “Older Posts”, dengan di tambahkannya fasilitas tersebut pada template versi baru maka akan lebih mempermudah para pembaca untuk menemukan artikel yang sudah tidak tampil di halaman depan.

Ternyata memang “lain orang lain juga keinginan”. Di kala orang lain senang dengan kehadiran fasilitas tersebut, ternyata ada juga yang ingin menghilangkannya, apakah itu anda? pertanyaan selanjutnya apakah fasilitas tersebut bisa di hilangkan atau tidak? jawaban singkat “Bisa”, dan caranya pun terbilang sangat mudah.

Sebelumnya perlu di ketahui bahwa fasilitas link tersebut ada 3 yaitu “Posting baru” atau “Newer Posts”, “Home” atau “Halaman Muka”, serta “Posting Lama” atau “Older Posts”. Mana yang mau anda hilangkan, atau mau semuanya? tentu saja bisa. Untuk menghilangkannya anda hanya menambahkan sedikit kode pada CSS template anda.

Untuk menghilangkan “Posting baru” atau “Newer Posts” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager-newer-link {
float: left;
}

Ganti kodenya jadi seperti ini :

#blog-pager-newer-link {
display:none;

Jangan lupa untuk menyimpan template anda

Untuk menghilangkan “Posting Lama” atau “Newer Posts” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager-older-link {
float:right;
padding-right:5px;
}

Ganti kodenya jadi seperti ini :

#blog-pager-older-link {
display:none;

Jangan lupa untuk menyimpan template anda

Untuk menghilangkan “Home” atau “Halaman Muka” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager {
text-align: center;
}

Ganti kodenya jadi seperti ini :

#blog-pager {

display:none;

Jangan lupa untuk menyimpan template anda

Mudah sekali bukan? atau anda masih merasa bingung? OK, kang Rohman ladenin deh kalau begitu. Berikut langkah lengkapnya ;

Login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML
Klik Download Template Lengkap. silahkan save dulu template anda sebagai backup.

Cari kode yang mirip dengan kode di bawah :

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float:right;
padding-right:5px;
}
#blog-pager {
text-align: center;
}

Hapus kode di atas, lalu ganti dengan kode di bawah ini :

#blog-pager-newer-link {
display:none;
}
#blog-pager-older-link {
display:none;
}
#blog-pager {
display:none;
}

Klik tombol SIMPAN TEMPLATE.
Selesai. Ucapkan dadah padanya.

Selamat deh bagi yang benci akan kehadiran fasilitas “Older Posts”, karena dia akan enggan untuk menampakkan diri lagi di blog anda.

30 November 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial, modifikasi blog | Tinggalkan komentar

Pasang Featured Content Di Blogger

Anda sudah pasti mengetahui WordPress Theme karya Brian Gardner, sebuah karya yang begitu populer di kalangan pengguna wordpress karena menghadirkan Theme yang mengusung tema Magazine, namanya “Revolution Theme”. Dan sekarang malah sudah di launching “Revolution Theme 2”. Salah satu dari Revolution Theme tersebut ada yang di namakan “Revolution_music-10”. Daya tarik dari “Revolution_music-10” adalah adanya feature gambar Slide show dengan penambahan variasi yang begitu cantik dan menarik.

Setengah hari Kang Rohman habiskan agar feature tersebut bisa di implementasikan pada template blogspot, dan akhirnya bisa juga. Penasaran seperti apa Feature tersebut? silahkan lihat demonya di http://user-online.blogspot.com, silahkan saksikan beberapa saat untuk melihat keindahan dari slideshownya, klik pada tulisan Featured Content atau tanda panah yang ada di sebelah pinggir agar bisa melihat variasi yang menarik.

Sudah di lihat demonya? tertarik untuk memasang pada template anda? tunggu saja pada posting berikutnya yang akan kang Rohman tulis!

Engga dhenk mo di tulis sekarang Big Grin . Jika anda tertarik membuat feature tersebut, silahkan ikuti langkah-langkah berikut ;

Buat gambar yang ingin di jadikan Slide Show dengan ukuran yang anda inginkan, misal ukuran 550px X 200px. Disarankan jangan terlalu banyak, maksimal 5 buah gambar agar tidak terlalu berat saat loading. Contoh :

Upload gambar-gambar tersebut ke server yang biasa anda gunakan, kemudian catat alamatnya. Misalkan gambar yang sudah saya upload mempunyai alamat seperti ini :

http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800

http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800

http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800

http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800

http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800

Tentukan link yang anda targetkan apabila gambar-gambar tersebut di klik oleh pengunjung, misal :

http://www.blogspottutorial.com/search/label/free%20icons

http://www.blogspottutorial.com/search/label/free%20template

http://www.blogspottutorial.com/search/label/free%20tool

http://www.blogspottutorial.com/search/label/blogspot%20tutorial

http://www.blogspottutorial.com/search/label/logo

Jika anda sudah mempunyai alamat gambar serta alamat link yang akan di pasang, maka ubahlah menjadi seperti ini (contoh saja) :

<div id="myGallery">
        <div class="imageElement">
            <h3>Wordpress Themes</h3>

            <p>Get WordPress Themes for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/blogspot%20tutorial" class="open" title="Click here to read full story"></a>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Blogger Templates</h3>
            <p>Get Blogger templates for free here!</p>

            <a href="http://www.blogspottutorial.com/search/label/free%20template" class="open" title="Click here to read full story"></a>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Icons</h3>
            <p>Get cute icons web and blog for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/free%20icons" class="open" title="Click here to read full story"></a>

            <img src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Wallpapers</h3>
            <p>Get beautiful wallpapers for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/logo" class="open" title="Click here to read full story"></a>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800" class="full"/>

            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Tools</h3>
            <p>Get Powerful tools for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/free%20tool" class="open" title="Click here to read full story"></a>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800" class="full"/>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800" class="thumbnail"/>
                </div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($(‘myGallery’), {
timed: true
});
}
window.addEvent(‘domready’, startGallery);
</script>
        </div>

Untuk selanjutnya, script di atas akan saya sebut sebagai file #1

Silahkan download dua skrip di bawah ini ( Klik kanan : Save target As… (IE), Save Link As..(FF))

jd.gallery.js	mootools.v1.11.js

Uploadlah dua JavaScript diatas ke server tempat anda menyimpan script, misal ke yahoo geocities atau yang lainnya. Silahkan catat URL kedua script tersebut. Contoh : script tersebut mempunyai alamat seperti ini (contoh saja) :

http://ServerAnda.com/jd.gallery.js

http://ServerAnda.com/mootools.v1.11.js

Ubahlah alamat tersebut menjadi seperti ini :

<script src='http://ServerAnda.com/jd.gallery.js' type='text/javascript'></script>

<script src='http://ServerAnda.com/mootools.v1.11.js' type='text/javascript'></script>

Untuk selanjutnya, script di atas akan saya sebut sebagai file #2

Sekarang anda akan memasuki langkah terakhir, silahkan ikuti langkah-langkah berikut :

login ke blogger dengan Id anda.
Klik Tata Letak
Klik tab Edit HTML
Klik Download Template Lengkap, silahkan di save dahulu untuk backup (penting).

Copy kode berikut, lalu paste persis di atas kode ]]></b:skin> :


  #myGallery, #myGallerySet, #flickrGallery 
    
{width: 550px;height: 200px;z-index: 5;} 
  #flickrGallery 
    
{width: 500px;height: 334px;} 
  #myGallery img.thumbnail, #myGallerySet img.thumbnail 
    
{display: none;} 

.jdGallery 
    
{overflow: hidden;position: relative;} 

.jdGallery img 
    
{border: 0;margin: 0;} 

.jdGallery .slideElement 
    
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800'); 
} 

.jdGallery .loadingElement 
    
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800');}
.jdGallery .slideInfoZone 
    
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;} 

* html .jdGallery .slideInfoZone 
    
{bottom: -1px;} 
  
.jdGallery .slideInfoZone h2 
    
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;} 
.jdGallery .slideInfoZone p 
    
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;} 
.jdGallery div.carouselContainer 
    
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;} 
.jdGallery a.carouselBtn 
    
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;} 
.jdGallery .carousel 
    
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;} 
.jdExtCarousel 
    
{overflow: hidden;position: relative;} 
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper 
    
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;} 
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner 
    
{position: relative;} 
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail 
    
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;} 
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail 
    
{margin-bottom: 10px;} 
.jdGallery .carousel .label, .jdExtCarousel .label 
    
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;} 
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton 
    
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;} 
.jdGallery .carousel .label .number, .jdExtCarousel .label .number 
    
{color: #b5b5b5;} 
.jdGallery a 
    
{font-size: 100%;text-decoration: none;color: inherit;} 
.jdGallery a.right, .jdGallery a.left 
    
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;} 

* html .jdGallery a.right, * html .jdGallery a.left 
    
{filter:alpha(opacity=50);} 

.jdGallery a.right:hover, .jdGallery a.left:hover 
    
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;} 

.jdGallery a.left 
    
{left: 0;top: 0;background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800') no-repeat center left;} 

* html .jdGallery a.left { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800') no-repeat center left; } 

.jdGallery a.right 
    
{right: 0;top: 0;background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right;} 

* html .jdGallery a.right { background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right; } 
.jdGallery a.open 
    
{left: 0;top: 0;width: 100%;height: 100%;} 
.withArrows a.open 
    
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;} 
.withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center; } 

* html .withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center;filter:alpha(opacity=80); } 
    
/* Gallery Sets */ 

.jdGallery a.gallerySelectorBtn 
    
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);} 

.jdGallery .gallerySelector 
    
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;} 

.jdGallery .gallerySelector h2 
    
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;} 

.jdGallery .gallerySelector .gallerySelectorWrapper 
    
{overflow: hidden;} 

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton 
    
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;color: #fff;cursor: pointer;float: left;} 
.jdGallery .gallerySelector .gallerySelectorInner div.hover 
    
{background: #333;} 
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview 
    
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;} 
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 
    
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;} 
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info 
    
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}

Copy file #2 (lihat script tadi di atas), lalu paste persis di atas kode </head>
Klik tombol SIMPAN TEMPLATE. Silahkan santai dulu sejenak.
Klik tab Elemen Halaman.
Klik Tambah Gadget.
Klik tanda plus (+) untuk HTML/JavaScript.
Copy file #1 (lihat script di atas), kemudian paste pada kolom yang muncul.
Klik tombol SIMPAN.
Geserkan elemen yang baru di buat tadi di atas elemen posting.
Klik tombol SIMPAN yang ada di bagian atas.
Selesai. silahkan lihat hasilnya.

Sedikit tambahan, dalam kode CSS di atas (langkah 5) pada awal kode ada yang seperti ini ;

#myGallery, #myGallerySet, #flickrGallery

{width: 550px;height: 200px;z-index: 5;}

Anda dapat mengatur lebar serta tinggi widget yang anda bentuk dengan mengubah nilai width serta height nya.

Selamat menikmati suasana baru di blog anda!

25 November 2008 Diposkan oleh: rohman | blog tutorial, blogging tutorial, blogspot tutorial | 1 Komentar

Membuat Menu Slide Show Tab View

Apakah anda pernah mengunjungi situs http://kompas.com? salah satu situs surat kabar di indonesia yang cukup terkenal. Coba anda perhatikan ke seblah kiri atas situs tersebut, di sana terdapat menu tab yang biasa di sebut dengan “Tab View” karena jika tabnya di klik akan berpindah ke isi menu tersebut (coba buktikan, klik saja tab nya), namun sedikit berbeda dari biasanya karena menu tersebut bisa menampilkan isi dari menu tersebut secara bergantian atau bahasa yang biasa di gunakan adalah “Slide Show”. Dapat di ambil kesimpulan bahwa menu tersebut mempunyai dua fungi yaitu sebagai “Tab View” serta “Slide Show”.

Sedikit tertarik terhadap menu tersebut agar bisa di implementasikan pada template blogger, dan akhirnya ternyata bisa juga. Untuk melihat contoh, silahkan anda kunjungi http://magazine-1.blogspot.com, silahkan perhatikan ke pojok kiri atas, di sana ada menu yang mirip dengan yang di situs kompas bukan (sengaja tidak di buat sama persis).

Bagi anda yang tertarik membuat Menu Slide Show Tab View, silahkan ikuti langkah-langkah berikut :

Langkah #1

Login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.

Copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/ 
} 
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
} 
.indentmenu ul li{
display: inline;
} 
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc; 
} 
.indentmenu ul li a:hover{
background:#ddd;
} 
.indentmenu ul li a:visited{
color: white;
} 
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
} 
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
} 
.tabcontent{
display:none;
} 
@media print {
.tabcontent {
display:block !important;
}
}

Download dulu script ini, copy lalu paste persis di atas kode </head>
Klik tombol SIMPAN TEMPLATE.
Langkah pertama selesai. Silahkan istirahat dulu, minum khe, minum teh khe atau apa gitu biar tenang dulu

Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

Klik tab Elemen Halaman.
Klik Tambah Gadget
Klik tombol plus (+) Untuk HTML/JavaScript.

Copy lalu paste kode berikut pada kolom yang tersedia :

 
       <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
     <div id="pettabs" class="indentmenu">
      
<ul>
    
<li><a href="#" class="selected" rel="tab1">1</a></li>
     
<li><a href="#" rel="tab2">2</a></li>
      
<li><a href="#" rel="tab3">3</a></li>
       
<li><a href="#" rel="tab4">4</a></li> 
    </ul>
        
<br style="clear: left"/>
     
</div> 
    <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> 
    <div id="tab1" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
       
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SSS44BOiVbI/AAAAAAAAAZ8/JSAjyxXZVEc/obamabush_thumb%5B1%5D.png?imgmax=800" height="152" title="obamabush"/></a> 
    <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
      
U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
      
</div> 
    <div id="tab2" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
    
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSS47jWx8HI/AAAAAAAAAaE/wTj2qMO6dV8/beyone_thumb%5B1%5D.png?imgmax=800" height="152" title="beyone"/></a>
       
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> 
     Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
        
</div> 
      
<div id="tab3" class="tabcontent">
        
<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
       
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSS5Gg8b_8I/AAAAAAAAAac/OdWejtZv8GI/gunNroses_thumb%5B1%5D.png?imgmax=800" height="152" title="Guns N 'Roses"/></a> 
      
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>      
After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
        
</div> 
    <div id="tab4" class="tabcontent">      
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
     
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSS5KkL_ihI/AAAAAAAAAak/jwZPOux8pk4/earbuzz_thumb%5B1%5D.png?imgmax=800" height="152" title="ipod"/></a>
     
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> 
     Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
        
</div>
</div> 
   <script type="text/javascript">      
var mypets=new ddtabcontent("pettabs")       
mypets.setpersist(true)       
mypets.setselectedClassTarget("link")       
mypets.init(2000)       
</script>

Klik tombol SIMPAN TEMPLATE.
Selesai. Silahkan lihat hasilnya.

Kode-kode di atas tentunya tidak mutlak harus seperti yang Kang Rohman tulis, namun anda bisa memodifikasinya agar sesuai dengan keinginan atau[un sesuai dengan template yang anda pakai.

Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">1</a></li>

<li><a href="#" rel="tab2">2</a></li>

<li><a href="#" rel="tab3">3</a></li>

<li><a href="#" rel="tab4">4</a></li>

</ul>

<br style="clear: left"/>

</div>

Kode ini adalah deretan tab dengan urutan tab seperti ini : 1, 2, 3, 4. Ini bisa anda ubah dengan apa yang anda mau. Misal Recent Comments, Recen Post, Shoutbox, atau apa saja sesuai keinginan. Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

Perhatikan juga yang ini :

Kode tersebut adalah untuk mengatur isi dari menu tersebut, ini tentunya bisa anda ubah sesuai dengan keinginan anda, Misal :

width:240px : ini untuk mengatur lebar, ubah dengan nilai yang sesuai keinginan. Contoh : width:300px.

text-align:justify : ini untuk mengatur perataan tulisan, ganti dengan yang anda inginkan. Contoh : text-align:left, text-align:right.

Perhatikan kode berikut :

var mypets=new ddtabcontent("pettabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(2000)

</script>

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan, itu hanya contoh untuk memberikan sugesti terhadap anda.

Selamat mencoba!

Original Script by : dynamic drive. Modified by : Blogspot tutorial

21 November 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial, menu navigasi css | Tinggalkan komentar

Solusi Agar Favicon Tidak Sering Hilang

Anda pernah membaca tutorial kang Rohman tentang “Cara membuat Favicon” kan? ternyata akhir-akhir ini banyak yang mengeluhkan bahwa favicon sering hilang atau tidak muncul, dan tentunya favicon yang muncul adalah logo blogger. Apakah ada solusi untuk mengatasi hal ini? untuk mengatasi favicon yang sering hilang, anda bisa mencoba beberapa tips di bawah ini :

Pastikan bahwa gambar favicon anda ber ekstensi .ico bukan yang lain

Mungkin anda pernah mencoba membuat gambar favicon dengan ekstensi selain .ico, misal .gif, .jpg, atau yang lainnya. Dan setelah di upload ternyata gambar tersebut memang muncul. Jika anda masih melakukan hal tersebut, coba ubah gambar anda menjadi berakhiran .ico, silahkan baca tutorial kang rohman sebelumnya.

Pasang kode Favicon anda di bawah kode Favicon milik blogger

Pasti bingung di mana kode favicon blogger di simpan bukan? jika anda memperhatikan kode di dalam template anda sudah pasti tidak akan menemui kode favicon selain yang anda pasang sendiri, namun sebenarnya blogger menyelipkan kode favicon di dalam template anda. Kodenya adalah yang seperti ini :

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

Tidak percaya? silahkan anda tuju alamat blog anda. Klik menu View yang ada di bar menu bagian atas browser anda, lalu klik “Source” untuk internet Explorer atau “Page Source” untuk FireFox. nanti akan keluar semua kode template anda. Perhatikan kode yang anda di dalam head, anda tidak akan melihat kode yang kang Rohman tulis di atas, namun akan menemui kode seperti ini :

<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Kolom Tutorial - RSS" href="http://kolom-tutorial.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://www.blogger.com/feeds/4569368524623882898/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=4569368524623882898" />
<link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/147113262052297401/comments/default" />

Kode yang saya cetak merah adalah adalah kode favicon milik blogger. Solusi agar favicon anda tidak di timpa oleh favicon blogger adalah kode favicon anda harus di simpan di bawah kode tadi.

Misalkan kode favicon anda seperti ini :

<link href='http://www.servergambar.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Maka simpanlah kode favicon tersebut seperti ini :

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

Atau apabila belum berhasil juga, coba simpan persis di atas kode <b:skin> :

<b:skin>

Jangan lupa untuk klik tombol SIMPAN TEMPLATE.

Ikuti struktur kode Favicon Blogger

Jika kedua cara di atas masih tetap tidak mempan, coba ubah kode favicon anda seperti yang milik blogger, misalkan kode favicon anda sebelumnya seperti ini :

Ubahlah jadi seperti ini :

Pasanglah kode tersebut persis di atas kode </head> :

<b:skin>

Jangan lupa untuk klik tombol SIMPAN TEMPLATE.

Jika langkah-langkah di atas sudah dicoba dengan benar, seharusnya favicon anda sudah normal kembali seperti sedia kala.

Saya masih bingung, kasih caranya yang lengkap dong? Oh masih bingung. OK deh, namun bagi anda yang masih bingung tentang cara membuat favicon, silahkan baca dulu di sini!

Berikut adalah langkah-langkah memasukan kode favicon ke dalam template anda :

Silahkan login ke blogger dengan ID anda
Klik Tata Letak.
Klik tab Edit HTML.
Cari kode <b:skin> atau biasanya bersatu jadi kelihatan seperti ini : <b:skin><![CDATA[/*
Simpan kode favicon anda persis di atas kode <b:skin>, contoh :

<link href=’http://www.servergambar.com/favicon.ico’ rel=’icon’ type=’image/vnd.microsoft.icon’/>

<b:skin>
Klik tombol SIMPAN TEMPLATE.
Selesai.

Semoga dengan melakukan langkan di atas, favicon anda tidak akan menghilang lagi.

10 November 2008 Diposkan oleh: rohman | blog tutorial, favicon | Tinggalkan komentar

Buat Kolom Dibawah Header Pada Magazine Template 2

Jika sebelumnya kang Rohman telah membuat tutorial tentang cara membuat kolom di atas kolom posting pada template magazine 2, maka pada kesempatan kali ini mencoba alternatif lain yaitu membuat kolom dibawah kolom header. Ini tentunya berguna bagi anda yang suka menyimpan iklan langsung di bawah header.

Jika menilik pada desain asli magazine template 2, maka anda tentu saja tidak dapat menyimpan iklan atau apa saja langsung di bawah header. Berikut desain asli dari magazine template 2 :

Dan kita akan membuatkan kolom baru yang langsung berada di bawah kolom header, berikut contoh ilustrasi dari penempatan iklan langsung di bawah kolom header :

Tertarik ingin membuat kolom langsung di bawah header? berikut adalah cara lengkapnya :

Silahkan login ke Blogger dengan ID anda.
Klik Tata Letak
Klik tab Edit HTML.
Klik tulisan Download Template Selengkapnya.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Cari kode ]]></b:skin>.
Copy paste kode berikut persis di atas kode ]]></b:skin>.
.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}

.adscolumn .widget{
}
Lihat ke bagian bawah, lalu cari kode berikut :

<div id=’main-wrapper’>
Copy paste kode berikut persis di atas kode <div id=’main-wrapper’> :

<b:section class=’adscolumn’ id=’adscolumn’ preferred=’yes’/>
Klik tombol SIMPAN TEMPLATE.
Selesai.

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :

Sekarang anda sudah bisa memasukan apa saja langsung di bawah kolom header. Selamat mencoba!

Jangan lupa juga untuk mengunjungi para sponsor Blog Kang rohman yang ada di bawah kolom header serta di bawah posting ini agar kang Rohman rajin membuat tutorial baru !

18 Oktober 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial, edit template | Tinggalkan komentar

Buat Kolom Diatas Kolom Posting Pada Magazine template 2

Tutorial kali ini khusus Kang Rohman tujukan bagi anda para pengguna template magazine 2 yang ingin menambahkan kolom baru di atas kolom posting. Ini di sebabkan setelah melakukan inspeksi ke beberapa pengguna template magazine 2, ternyata banyak diantaranya yang sering memasang iklan atau apa saja di atas kolom posting, namun tampilannya menjadi kurang enak untuk di lihat. Coba perhatikan gambar di bawah ini :

Coba bandingkan dengan gambar berikut :

Di lihat dari segi fungsi, kedua duanya memiliki fungsi yang sama yaitu memasang iklan di atas kolom posting, tidak ada yang salah dengannya. Namun, secara estetika gambar yang kedua jauh lebih baik. Disamping memiliki fungsi memasang iklan, nilai keindahan dari template tersebut tidak menjadi rusak ( itu menurut kang Rohman lho ).

Untuk menciptakan seperti gambar yang kedua seperti contoh di atas, anda perlu membuat kolom baru di atas kolom posting. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini :

Silahkan login ke Blogger dengan ID anda.
Klik Tata Letak
Klik tab Edit HTML.
Klik tulisan Download Template Selengkapnya.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Cari kode ]]></b:skin>.
Copy paste kode berikut persis di atas kode ]]></b:skin>.

.topcolumn{
width: 578px;
padding:10px 0px 10px 10px;
background:#fff;
margin:0px 0px 10px 0px;
text-align:left;
border:1px solid #C0C0C0;
}

.topcolumn .widget{
}
Lihat ke bagian bawah, lalu cari kode berikut :

<div id=’main-wrapper’>
Copy paste kode berikut persis di bawah kode <div id=’main-wrapper’> :

<b:section class=’topcolumn’ id=’topcolumn’ preferred=’yes’/>
Klik tombol SIMPAN TEMPLATE.
Selesai.

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :

Sekarang anda sudah bisa memasukan apa saja di atas kolom posting anda tanpa harus mengganggu keindahan dari template anda.

Selamat mencoba! serta jangan lewatkan, posting selanjutnya adalah tentang cara menambahkan kolom baru di bawah kolom header untuk template magazine 2. Jangan sampai terlewatkan!.

16 Oktober 2008 Diposkan oleh: rohman | blog tutorial, blogspot tutorial, edit template | Tinggalkan komentar

Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara Me-reset Template Blogger

Cara mengganti Tulisan Posting Lama Dan Posting Baru

Memasang Kode Hasil CSS Menu Generator

Pasang Label Bentuk Animasi di Blog

Cara Menghilangkan Link Posting Lama

Pasang Featured Content Di Blogger

Membuat Menu Slide Show Tab View

Solusi Agar Favicon Tidak Sering Hilang

Buat Kolom Dibawah Header Pada Magazine Template 2

Buat Kolom Diatas Kolom Posting Pada Magazine template 2

Tentang blog ini

Mohon Perhatian

Kategori

Blogroll

Site info