Halo Sobat ! | Members area : Register | Sign in
About me | SiteMap
Diberdayakan oleh Blogger.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Subscribe to Anak Kampung by Email

Cara Membuat menu di atas Footer Blog

Rabu, 27 Maret 2013


1. masuk dasbor
2. Klik teplate
3. Untuk jaga-jaga Klik cadangkan dan pulihkan. (download template lengkap)
4. Klik edit HTML (exspand template widget)/(centang)
5. Lalu sobat cari kode ]]></b:skin> (untuk mempermudah pencarian tekan Control f)
6. Masukkan kode berikut di atas kode No. 5

  • #footer-top-wrapper { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOHvQUJOTwrv5Qtpd8cStl9mrILNb5XeNKhiKvwhN-lVt8fobSHRyKymDYXVkQ4lXiUfoyAiLGkIOtXu214FIjZ2fQ7zvdJMOZac8xYyDwP6z_nyBlilu1IQwdkx1hljqGBcOzdSsn1g/s1600/navbar-bg.png) repeat-x; height:44px; border-bottom: 6px solid #fff} #footer-top { width:960px; margin:0 auto; padding-top:20px; }#footer-top a { color:#797979; text-shadow: 1px 1px 1px #000; }#footer-navigation li { display:block; float:left; margin-right:20px; }#footer-navigation span { margin-right:10px; }#backtotop { float:right; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDHrC-y24ocsjkw9s2zcpj1OKEZOOncD6PipGzEyNdwxK1JNJvhqFf0xU8TgCReCLhi2fkn0LRp-3_9BxxdIiOZasXBPisxJW_U2YPKGrXvsrc2lYMLnUrz4V6bFI868lV3DoHdpT6s/s19/back-top.png) no-repeat right; padding-right:26px; }


7. Lalu sobat cari kode <div id='footer-wrapper'>
8. Setelah ketemu copy code berikut diatas kode No. 7
  • <div id='footer-top-wrapper'>
     <div id='footer-top'>
    <ul id='footer-navigation'>
     <li><a href='url posting blog'>Home</a></li>
     <li><a href='url posting blog</a></li>
     <li><a href='url posting blog</a></li>
     <li><a href='url posting blog</a></li>
     <li><a href='url posting blog'>Link Exchange</a></li>
     <li><a href='url posting blog'>Radio Online</a></li>
     <li><a href='url posting blog'>TV Online</a></li>
    </ul>

    <div id='backtotop'>
     <a href='#'>Back to top</a>
     </div>
     </div>
    </div>
9. Klik Pratinjau
10. Klik Simpan template  (Jangan lupa ganti yang Merah dengan URL Sobat)

Membuat Menu Dibawah Header / Judul Blog

Minggu, 24 Maret 2013



Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung didalam blog tersebut (baca: easy to navigate)  .Yuk kita mulai...

Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 
  • <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol' showaddelement='no'>
    <b:widget id='HTML1' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
Anda ubah kode showaddelement='no' menjadi showaddelement='yes' , kalau sudah klik simpan ya

Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
  • <a href="http://www.reyhan82.com " class="navigation">HOME</a>
    <a href="http://www.reyhan82.com " class="navigation">CONTACT</a>
    <a href="http://www.reyhan82.com " class="navigation">BUKU TAMU</a>
    <a href="http://www.reyhan82.com " class="navigation">FACEBOOK</a>
    <a href="http://www.reyhan82.com " class="navigation">TWITER</a>
    <a href="http://www.reyhan82.com " class="navigation">DOWNLOAD</a>
    <a href="http://www.reyhan82.com " class="navigation">LAIN-LAIN</a>
    <a href="http://www.reyhan82.com " class="navigation">CHATTING</a>
*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode </b:skin> kemudian simpan.
  • a.navigation {
    background: #3333ff ;
    color: #ffffff
    margin: 1px;
    padding: 2px;
    border-width: 0;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    }
    a.navigation:hover {
    background: #333333;
    color: #ffffff;
    text-decoration: none;
    }

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga disini

Selesai, semoga bermanfaat....salam

Cara Membuat Show/Hide Komentar Blog

Selasa, 12 Maret 2013


Cara Membuat Show/Hide Komentar Blog:

1.login ke blog sobat
2.silahkan sobat cari kode </Head> gunakan F3 untuk pencarian
3.letakkan kode berikut ini tepat di atas kode <Head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>
 4.letakkan kode berikut ini di atas kode ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;} 

5.save template sobat

Cara Mendapatkan Copyright atau Hak Paten Intelektual Blog

Cara mendapatkan hak paten atau Copyright Intelektual yang diperkenalkan dan dibahas pada artikel ini adalah Copyright yang dapat bekerja secara otomatis atau default pada media online sesuai dengan ID pemilik yang tedaftar. Pelayanan ini disediakan secara gratis, dan persayaratan untuk menjadi hanya dengan mengisi formulir pendaftaran yang tersedia  di Jl. Tynt.

Menurut pendapat saya Copyright atau hak paten tulisan dalam blog adalah kekayaan intelektual seseorang yang sudah terdaftar secara sah menurut hukum dan sesuai dengan aturan yang berlaku dalam media online pada situs yang sudah memiliki legalitas hukum.

Sebelum berangkat mendaftar alangkah baiknya mengikuti tutorial singkat yang disuguhkan dalam postingan. Harapan ini dimaksudkan untuk memudahkan mendapatkan Hak paten dengan efisien pada situs penyedianya.

Detail langkah-langkah mendapatkan Hak cipta atau Copyright atas tulisan sendiri dalam media blog pada Tynt dapat dilakukan sebagai berikut, yaitu:
Pertama
1. Isi Formulir pendaftaran sesuai dengan data pribadi dan data media online anda
2. Centang Box/kotak I agree to Usage and Privacy Agreement sebagai tanda persetujuan menjadi anggota.
3. Klick Next

4. Klick Next

 

5. Copy kode yang tersedia untuk ditempatkan pada template blog anda
6. Klick Next

8. Klick Test, apabila ingin mengetahui media anda sudah terdaftar oleh kode yang tersedia. Namun sebelum melakukan test sebaiknya lakukan langkah tahap kedua di bawah ini.
9. Klick Next
10. Klick Save.
kedua, Cara menempatkan kode copyright atau hak paten anda dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:
1. Sign in di blog
2. Klick rancangan
3. Klick Edit HTML
4. Download Template Lengkap bila diperlukan untuk menghindari kesalahan
5. Cari kode </head>
6. Paste kode yang diperoleh dari Tynt seperti terlihat pada kolom dari gambar di atas. Kode tersebut tempatkan sebelum kode </head>
7. Klick Simpan Template untuk menyimpan perubahan

Dengan mengikuti langkah yang diuraikan di atas maka mulai saat itu setiap tulisan anda akan terhubung dan diketahui situs yang mengcopy kreasi atau tulisan anda.

Semoga bermanfaat dan selamat mendapat hak cipta intelektual dari kreasi anda sendiri.

Membuat Templates Mudah Dengan Templates Designer

Salah satu fitur terbaru blogger adalah Templates Designer. Dengan fitur ini memungkinkan kita dalam membuat/memodifikasi templates. Dengan fitur ini anda bisa mengatur tata letak/layout blog anda dengan mudah, mengganti design blog anda, dll. Oke tidak usah panjang lebar, mari kita bahas fitur terbaru ini satu per satu :


1. Silahkan Log in ke blog anda > Design > Templates Designer
2. Jika Sudah, mari kita bahas satu per satu fitur dan fungsinya


Templates : Di sini anda bisa memilih templates sesuai keinginan anda. Ada 6 templates tersedia dan di setiap templates masih terbagi beberapa model lagi. Untuk contoh saya akan menggunakan templatesPicture Windows

Background : Setelah anda memilih templates, anda dapat memilih background sesuai keinginan. Klik Background Image untuk memilih background. Ada 19 tema background, dan di setiap tema terdapat banyak background yang bisa anda pilih.

Ini adalah tampilan yang akan muncul saat anda mengklik Background Image
Layout : Layout terbagi menjadi 3, dan yang ini adalah body layout. Body Layout ini berfungsi untuk mengatur tata letak blog anda di bagian sidebar dan posting. Dengan ini anda dapat mengatur model sidebar dengan mudah.
Layout bagian ini adalah footer layout. Di sini anda dapat mengatur jumlah dan model footer dengan mudah. Misalnya anda ingin membuat footer anda 1 kolom, 2 kolom, atau 3 kolom sekalipun.
Layout ke tiga adalah adjust width. Di sini anda dengan mudah dapat mengatur lebar blog anda secara keseluruhan dan lebar sidebar juga.
Advanced : Di sini anda dapat mengatur segalanya seperti model text, warna text, penambahan CSS, dan lain-lain. Daftar Advanced berbeda-beda sesuai templates yang anda pilih tadi. Karena saya memilih model Picture Windows saya akan membahas Advanced ini saja.


  1. Page Text : Berfungsi untuk mengatur jenis font, warna text, ukuran, dan juga model seperti bold italic
  2. Backgrounds : Berfungsi untuk mengatur warna background di bagianouter, header, dan post.
  3. Links : Berfungsi untuk mengatur warna link. Link Color adalah warna link sebelum di klik, Visited Color warna link setelah/sudah pernah di klik, Hover Color warna link saat di sentuh mouse.
  4. Blog Title : Untuk mengatur jenis, ukuran, model, dan warna font judul blog (header)
  5. Tabs Text : Beberapa dari anda mengukin belum tau tabs text. Tabs Text adalah gadget yang terletak di antara header dan isi blog. Ini berfungsi untuk mengatur jenis, ukuran, model, dan warna font pada tabs.
  6. Tabs Background : Untuk mengatur background tabs. Background Color untuk background gadget. Selected Color ini berfungsi untuk mengatur warna background tabs yang sedang di pilih. Maksudnya yang di pilih adalah jika anda menggunakan Pages blogger dan di letakan di bagian tabs.
  7. Post : Title Font untuk mengatur font judul post. Footer Text untuk mengatur warna pada bagian footer post/bawah post. Border Color untuk mengatur warna garis tepi post.
  8. Gadgets : Title Font untuk mengatur jenis font pada judul sidebar/gadget. Title Color untuk mengatur warna judul sidebar/gadget
  9. Footer : Text Color untuk mengatur warna text di bagian footer. Gadget Title Color untuk mengatur warna pada judul gadget di bagian footer
  10. Footer Link : sama dengan link, hanya yang ini untuk mengatur link bagian footer saja.
  11. Add CSS : Ini berguna jika anda ingin menambah, menghapus, dan memodifikasi CSS pada templates anda
3. Jika Sudah selesai dengan modifikasi templatesnya, Silahkan kilik APPLY TO BLOG untuk savenya

Buat animasi keren di blogger


Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat


Script:

  • <div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>




2. Boring

Script :
  • <div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3.Tuyul ketawa

Script:

  • <div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


4.Boneka joget

Script :

  • <div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


5. Panda main bola

Script :

  • <div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>



6. Tuyul baring

Script :
  • <div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru


Script

  • <div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah



Script:

  • <div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>




9. Bunga



Script :

  • <div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


10.Anjing laut

Script:

  • <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


11.Lumba-lumba

Script :

  • <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur


Script :

  • <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci

Script :
  • <div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


14.Dragon


Script:

  • <div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


15.Ikan

Script :

  • <div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


16.Pinguin

Script :

  • <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter

Script :
  • <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.


Cara memasang widget animasi ke blog :

1. Pilih script yang tersedia


2. Di Dashboard blogger pilih Rancangan - Elemen halaman


 Catatan:
Untuk tampilan blogger yang baru Pilih Tata Letak



3. Selanjutnya pilih Tambah Gadget

4. Kemudian pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript


Jangan lupa klik tombol Save

Catatan:


1.Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog
2. Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag left menjadi right
Untuk mengubah posisi dari kiri ke kanan ganti tag right menjadi left
Contohnya bisa dilihat di bawah ini
<div style="position: fixed; bottom: 0px; left: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>


Artis

1. Leonardo



Untuk widget animasi gambar artis bisa dilihat scriptnya disini widget animasi blog


Untuk widget animasi kartun lucu lainnya seperti di bawah ini bisa dilihat disini widget animasi lucu.
.
24.Telur menetas



25.Ayam bertelur



26.Beruang




32.Gawang

Artikel Terkait:

memasang gambar animasi di blog
gambar animasi lucu

Menangani Tampilan Posting Ganda Pada Blog

Rabu, 06 Maret 2013



Menangani Tampilan Posting Ganda Pada Blog
Ini adalah posting kedua setelah berhasil membikin blog. Kemarin saya medapati permasalahan pada saat ganti template blog hasil download. Setelah saya pasang ternyata pada body posting tampil menjadi tiga postingan yang sama. Setelah cari solusi kesana kemari saya dapat info dari beberapa blogger ternyata tidak membuahkan hasil pada blog saya. Beberapa cara yang saya dapatkan untuk membuang posting ganda adalah :

Login ke blogger ->>klik template-->>klik edit HTML-->> jangan centang expand widget template-->> cai kode beikut :
  • <b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog">
Atau
  • <b:widget id="Blog2" locked="true" title="Blog Posts" type="Blog">
Jika keterangannya seperti ini 
<b:widget id="Blog1" locked="false"title="Blog Posts" type="Blog">
Maka tulisan ‘false’ diganti dengan ‘true’kemudian save. Setelah sama-sama ‘true’ kemudian buang salah satunya dan simpan template.
Jika terjadi galat alias tidak bisa disimpan, anda masih bisa mencoba trik di atas melalui tampilan lawas blog. Caranya :
      Masuk Old Blogger Interface/Tampilan Blogger lawas :

  
       Kemudian klik Rancangan-->>perancang template-->>pilih salah satu template bawaan blogger.
 
      Setelah template berganti dengan bawaan blogger, anda kembali ke tab rancangan-->>edit HTML-->>dan ikuti cara seperti tahap pertama.
 
      Kemudian simpan template anda.jika ada opsi apakah anda akan menyimpan widgate atau membuangnya pilih opsi menyimpan agar widgate yang sudah anda terapkan masih utuh. Semoga berhasil.
 
      Namun justru disinilah permasalahan yang saya hadapi, ketika saya memilih menyimpan widgate ternyata body postingan blog saya masih ada 3. Saya sendiri bingung waktu itu. Kemudian saya memakai cara terakhir yaitu dengan mengganti template hasil download dengan cara :
  1.      Buka dulu file HTML template hasil download lalu copy kode HTML di dalamnya.
  1.      Buka dashboard blog-->>edit HTML-->>klik lanjut-->>centang Expand Template Widgate-->>kemudian buang kode HTML di dalamnnya.
  1.      Pastekan kode HTML dari template hasil download tadi ke dalamnya, kemudian simpan.
         Demikian yang dapat saya bagikan

Membuat sticky bar sendiri dengan tombol close blogger

Selasa, 05 Maret 2013

Membuat sticky bar sendiri dengan tombol close di blog - Sticky bar bisa digunakan untuk menaruh pesan -  pesan anda, promote artikel unggulan anda dll. Ok, screenshootnya seperti ini :



1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang expand template widget -> gunakan ctrl dan f.
4. Cari kode ]]></b:skin> -> Letakan kode CSS dibawah ini diatasnya.
  •  #mbt_bar{
    background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfFAz8ELF1k_TnzFC2Xh6PMlfFUbPfXZ4EYgFIPRb6KqZsHwClj71rdyjHkeT1iTnzs35rlBQ9VIaAL_NALmBQZbbuxfNUqO6RNXmjFUiZqA0ceILA1OMCeEI0-YBa88uLpRafoe5jVg/s400/stickybar.png') repeat-x;
    width:100%;
    margin:0 auto;
    text-align:center;
    padding:0px 0;
    border-bottom: 1px solid #888888;
    -moz-box-shadow: #666666 0px 1px 3px;
    -webkit-box-shadow: #666666 0px 1px 3px;
    box-shadow: #666666 0px 1px 3px;
    z-index: 999;
    height: 28px; position:fixed;
    line-height: 1.85em;
    vertical-align: baseline;
    letter-spacing: 1px;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    font-family: arial,"Helvetica",sans-serif;
    }
    #mbt_bar a{
    text-decoration:underline;
    color:#E2E504;
    }
    #mbt_bar a:hover{
    text-decoration:none; }
    #mbt_bar p {margin:0; list-style:none;}
    #mbt_bar img {vertical-align: middle;
    margin-right: 6px;
    }

5. Taruh kode berikut diatas tag </head>.
  • <script type='text/javascript'> 

    //<![CDATA[ 
    var mbt_arr = new Array(); 
    var mbt_clear = new Array(); 
    function mbtFloat(mbt) { 
    mbt_arr[mbt_arr.length] = this; 
    var mbtpointer = eval(mbt_arr.length-1); 
    this.pagetop = 0; 
    this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
    this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt); 
    this.mbtsrc.height = this.mbtsrc.offsetHeight; 
    this.mbtheight = this.cmode.clientHeight; 
    this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]); 
    var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);'; 
    mbtbar = mbtbar; 
    eval(mbtbar); 
    function mbtGetOffsetY(mbt) { 
    var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop); 
    var parentOffset = mbt.mbtsrc.offsetParent; 
    while ( parentOffset != null ) { 
    mbtTotOffset += parentOffset.offsetTop; 
    parentOffset = parentOffset.offsetParent; 
    return mbtTotOffset; 
    function mbtFloatInit(mbt) { 
    mbt.pagetop = mbt.cmode.scrollTop; 
    mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px"; 
    function closeTopAds() { 
    document.getElementById("mbt_bar").style.visibility = "hidden"; 
    //]]> 
    </script>

6. Cari lagi, kode <body>. Untuk kode kali ini, gak perlu deh agan cari menggunakan Ctrl dan f. Cukup dengan scroll halaman ke bawah, sampai pucuk. Sudah ketemu? letakkan kode berikut dibawahnya ya.
<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?
<a href='http://grafisnet.blogspot.co.id'>KLIK DISINI</a> 
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELZZR5ktDs7co8SxIx-dpiUAoPWdNvAct-iO6kChBCpn8n_8Ym3N0-8bQf3_j9XXAUshBTUR6tvc66VeCvxR4KQEXPjctd_6ttDoKFgwqXHt0-JXlzUz9zWEI05LDWnDBmtQFltd2rUo/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

7. Save & Liat hasilnya!

Cara membuat scroll box di blogspot -

Jumat, 01 Maret 2013

Cara membuat scroll box di blogspot -

Hai sobat blogger..ane sekarang ingin berbagi tips cara membuat scroll box di blogspot yang mana sebelum membuat postingan ini ane melakukan riset kecil-kecilan dengan cara research keyword versi ane yang sempet ane share disini. Dan setelah itu ane coba cek di search engine blog siapa yang sudah membuat artikel tentang cara membuat scroll box di blogspot, ternyata hasil penelusuran menunjukan terdapat 240,000 blog yang membahas hal ini, namun sayangnya bayak diantara mereka yang membuat postingan tentang cara membuat scroll box terkesan tidak detail dan tidak berjalan dengan lancar, tentunya ini akan membuat pemula blogger akan merasa kesulitan untuk mempraktekannya.

Oleh karena itu sekarang ane akan berbagi tips cara membuat scroll box di blogspot yang ane rasa ini lebih detail dan lebih mudah untuk para pemula blogger mengikutinya. Tetapi sebelumnya apakah agan tahu apa itu scroll box dan apa manfaatnya? Sedikit penjelasan serta pengetahuan untuk nawbi perihal fungsi serta manfaat jika kita menggunakan scroll bar yaitu untuk meringankan kita jika ada kode script atau postingan yang amat panjang supaya tidak menghabiskan banyak tempat, yang nantinya postingan blog kita akan terlihat lebih singkat serta dinamis. 
Cara membuat scroll box di blogspot amatlah sangat gampang, langkah-langkahnya nyaris sama pada waktu kita membuat spoiler di postingan blog, agan hanya perlu menyimpan code script yang akan ane berikan dibawah ini dengan cara copy/paste ke tempat yang di inginkan atau pada saat agan membuat postingan blog. Untuk lebih jelasnya silahkan ikuti langkah-langkah dibawah ini. 

Cara membuat scroll box di blogspot

Berikut ini adalah kode script untuk membuat scroll box di blogspot yang harus agan simpan dan letakan di tempat yang agan inginkan termasuk di tempat saat agan membuat postingan
<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'> 
Simpan tulisan agan atau apapun disini. 

(Tulisan ditulis di mode Compose, sedangkan kode di tulis pada mode Edit HTML)
</div>

Note:
  • Harus di ingat, Tulisan ditulis di mode Compose, sedangkan kode di tulis pada mode Edit HTML agar script dapat bekerja dengan lancar.  
  • Untuk mengecek script bekerja dengan lancar atau tidaknya, silakan agan klik mode compose. 
  • height:200px; yaitu ukuran lebar atas bawah kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
  • width: auto; yaitu ukuran otomatis lebar samping kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
  • border:1px solid yaitu ukuran tebal garis kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
  • #000000 yaitu kode warna pada garis kotak scroll, silakan agan ubah kode warnanya, sesuai dengan keinginan agan.
Mungkin itu saja cerita hari ini tentang cara membuat scroll box di blogspot. Semoga postingan ini bermanfaat dan semoga pembahasan ini cukup jelas untuk para nawbi blogger mengikutinya. 

Pasang Iklan Google Adsense Di Bawah Judul Postingan Blog Untuk Dapatkan Hasil Maksimal

Kamis, 28 Februari 2013

Anda baru saja diterima google adsense? Atau sudah lama bermain dengan google adsense namun belum mendapatkan hasil yang maksimal? Kalau kamu baru diterima oleh google adsense, sebelumnya saya ucapkan selamat. Dan bagi yang sudah lama bermain dengan adsense namun belum mendapatkan hasil maksimal, kamu harus mencoba salah satu trick yang akan saya bagikan.

Iya memang Google Adsense merupakan salah satu sahabat para blogger yang paling baik. Saya bisa bilang seperti itu karena banyak blogger yang sekarang nyaman dengan bekerja sama dengan google adsense.
Nah, untuk itu saya disini akan membantu kawan-kawan sekalian untuk memaksimalkannya dengan menaruh iklan dari google adsense di bawah setiap judul postingan blog kamu.

Namun di samping iklan adsense akan terlihat pula tombol share yang keren. Jadi akan lebih bermanfaat lagi apabila kamu memasangnya di blog kamu.

Bagaimana caranya? Ikuti beberapa langkah di bawah ini !


Cara Membuat Google Adsense Di Bawah Judul Postingan

Langkah 1 : Login blogger >> dashboard >> Template >> Jangan Lupa centang Expand Widget Template

Saya sangat menyarankan setiap kamu akan mengedit HTML template blog kamu, alangkah baiknya kamu untuk membackupnya terlebih dahulu. Hal ini penting karena ketika kamu salah dan template blog kamu rusak maka kamu bisa mengembalikan seperti semula.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Gunakan CTRL + F untuk menemukan kode di bawah ini :

]]></b:skin>

Setelah kamu menemukan kode di atas, kamudian copy dan paste kode di bawah ini di atas kode ]]></b:skin>

.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;}
.mini-facebook{background:url(
http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif
) no-repeat;}
.mini-tweet{background:url(
http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMexv7t8kt5smyeSBoa8Q1NgJY5bcvjsJ6wylGq0ad6TIXXfEO6TF5xu7KQVn2zqYlGTUZ2_vRZ8Q_5YRwaGqAULr4G3kmM0GIvHsiyRHnSt2qKVQelYAmG2dt07mmaZEJ4tn8ZZ8uqmM/s800/delicious_icon.jpg) no-repeat;}
.mini-stumble{background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsVa-P5LZ231REJvbXPINuJtKvFwmLvYL0Ga_9hsvFRGmmRib03Ya0KxbijtisGR7K9_JrYxc-HTVL3kYMx4BECzsCGHsPeqR1T-AYWaOfKRifMAPdBBTviVALFKDmk0zX7xzKYS22y0/s800/stumbleupon%20icon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnjHi3qHCcZ9LzyABoulMQgc312_-Ee76_V09SevdqWFt0taa3qwOcrlm6u-Av6wbhyphenhyphendRYn9U3EyiqpWUt5MgmQSB8wjy5MOm7gIMmjXnQ_-xR1TiRnw6oUlITyz2WI_Uwk0ekp3Qt-c/s800/Digg_icon.png) no-repeat;}
.flt-wdt{
position:fixed;
margin-right:10px;
left:0;
top:40%;
}
.flt-wdt img{
float:left;
clear:left;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{

Sebelum kamu masuk langkah selanjutnya, kamu harus membuat slot iklan google adsense kamu terlebih dahulu. Saya sarankan kamu untuk membuat slot 300 x 250 atau  336 x 280 terlebih dahulu.

Setelah kamu selesai membuat slot iklannya, sekarang phrse HTML google adsense yang sudah kamu sebelumnya. Silahkan klik disini untuk pharse HTML!

Nah, kalau kamu sudah selesai melakukan langkah di atas, kita lanjutkan ke langkah selanjutnya.

Langkah 4 : Masuk Ke Edit HTML Template kamu lagi

Langkah 5 : Gunakan CTRL + F untuk temukan kode di bawah ini :

<data:post.body/>

Langkah 6 : Copy dan paste kode di bawah ini kemudian letakkan tepat di bawah kode <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
LETAKKAN KODE GOOGLE ADSENSE YANG TELAH KAMU PHARSE DISINI
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'
title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'
title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to
Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</b:if> 

Langkah 7 : Ganti LETAKKAN KODE GOOGLE ADSENSE YANG TELAH KAMU PHARSE DISINI dengan kode google adsense kamu yang telah kamu pharse sebelumnya.

Langkah 8 : Simpan Template dan lihat bagaimana hasilnya !

Setelah kamu memasang iklan google adsense di bawah judul postingan, luhat beberapa hari hasil yang akan dihasilkannya. Semoga berhasil dan semoga sukses.

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu



Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.





menu navigasi horizontal bercabang


Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)




add menu navigasi

  • <style>
    #menunavigasihorisontal {
    background: #848484;
    width: 100%;
    color: #FFF;
    margin: 10px 0;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px; }
    #bb2nav  margin: 0;

    padding: 0;}

    #bb2nav ul {

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;}

    #bb2navli {

    list-style: none;

    margin: 0;

    padding: 0;}

    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {

    color: #FFF;

    display: block;

    font:bold 12px Helvetica, sans-serif;

    margin: 0;

    padding: 9px 12px 11px 12px;
    text-decoration: none;
    border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
    background: #2E9AFE;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 11px 12px;}
    #bb2nav li {
    float: left;
    padding: 0;}
    #bb2nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;}
    #bb2nav li ul a {
    width: 140px;}
    #bb2nav li ul ul {
    margin: -25px 0 0 161px;}
    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
    li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
    left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
    li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

    li li li.sfhover ul {

    left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
    position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
    a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
    margin: 1px 0 0 -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;}
    </style>
    <div id='menunavigasihorisontal'>
    <ul id='bb2nav'>
    <li>
    <a href='#'>Home</a>
    </li>
    <li>
    <a href='#'>Tentang Saya</a>
    </li>
    <li>
    <a href='#'>Contact</a>
    <ul>
    <li><ahref=’#>Sub Halaman 1 </a></li>
    <li><ahref=’#>Sub Halaman 2 </a></li
     <li><ahref=’#>Sub Halaman 3 </a></li>
    <ul>
    </li>
    <li>
    <a href='#'>Daftar Isi ▼</a> <ul>
    <li><a href='http://blitar-reyhan.blogspot.com/2012/04/cara-membuat-menu-navigasi-horisontal.html’>sub menu 1</a></li>
    <li><a href='http://blitar-reyhan.blogspot.com/2012/04/cara-membuat-menu-navigasi-horisontal.html’>sub menu 2</a></li>
    <li><a href='http://blitar-reyhan.blogspot.com/2012/04/cara-membuat-menu-navigasi-horisontal.html’>sub menu 3</a></li>
    <li><ahref=’#>Sub Halaman 1 </a></li>
    <li><ahref=’#>Sub Halaman 2 </a></li>
    <li><ahref=’#>Sub Halaman 3 </a></li>
    <ul>
    </li>
    </ul> </li>
    </ul>
    </div>

Pengaturan dan modifikasi;


1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AF
2.Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru)
bisa juga sobat tambahkan di item menu lainnya jika ingin.


  • <ul>
    <li><ahref=’#>Sub Halaman 1 </a></li>
    <li><ahref=’#>Sub Halaman 2 </a></li>
    <li><ahref=’#>Sub Halaman 3 </a></li>
    <ul>
3. Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.

Oke saya kira sudah cukup jelas dan mudah, untuk live demo silahkan buka di sin
Selamat mencoba.

Update:
Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):

  • <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
    <b:includable id='main'>
ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini.


  • <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemen header.





Cara Hanya Menampilkan Judul Posting per Label

Sebuah tambahan artikel di bawah menu modifikasi blog setelah sebelumnya saya memberikan tutorial cara membuat huruf besar di awal postingan atau membuat drop cap - sesuai koreksi dari bang Je-Fry- , kali ini kita akan merubah tampilan daftar artikel per label dengan hanya menampilkan judul artikel atau posting nya saja.

Defaultnya, saat pengunjung melakukan klik menu label di blog anda, maka yang akan tampil kemudian adalah daftar postingan di blog tersebut lengkap dengan potongan artikel hingga batas jump break atau read more, namun lewat posting kali ini saya ingin mengajak anda memodifikasi tampilan tersebut hingga hanya menampilkan judul artikelnya saja, dengan tampilan seperti itu diharapkan akan membantu meringankan loading blog anda nantinya.

Cara menampilkan hanya judul posting

Berikut penampakan default saat label anda di kunjungi ;
tampilan label

Jika posting anda sudah banyak, maka tampilan artikel akan berjajar ke bawah dan memberi tambahan waktu saat loading halaman blog anda. Untuk menyiasatinya, maka kita akan menuju ke menu template dan edit HTML blog.

Setelah menambahkan centang pada expand template widget, kita cari markah <b:include data='post' name='post'/> dan menggantinya dengan ;
  • <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
    <b:include data='post' name='post'/>
    <b:else/>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>