CARA MEMBUAT 3 KOLOM FOOTER PADA BLOGGER

BLOGGERPOX.COM - Mengedit template blogger untuk memiliki footer 3 kolom untuk template blogger ternyata bukan perkara yang sulit, namun sangatlah mudah, hanya butuh beberapa menit waktu anda. Mungkin rekan-rekan blogger menganggap ini perkerjaan rumit, yah silahkan saja menganggap begitu, namun tunggu dulu baca tutorial ini, pasti anda akan heran.

Sebelumnya saya umumkan bahwa tutorial ini khusus untuk blogger beta (layout), oke langsung saja.

1. Seperti biasa login ke blogger.com
2. Kemudian klik “Expand Widget Template”
3. Lantas save template anda kalau-kalau terjadi kesalahan
4. Kemudian temukan ini:

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

5. Ganti tag yang berwarna merah dengan script berikut:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

6. Save template anda!

Selamat anda telah mempunyai footer 3 kolom di blogger anda. Untuk melihat hasilnya, anda kembali ke “page element” lalu lihat bagian footer, pasti ada 3 tempat untuk menempatkan page element. Nah silahkan anda taruh page element yang anda inginkan di footer 3 kolom blogger blogspot anda.

Semoga bermanfaat dan selamat mencoba.

CARA MENGGANTI HEADER DAN LOGO BLOGGER

BLOGGERPOX.COM - Salah Satu Komposisi Blogger adalah Header, Header adalah kepala halaman website yang paling utama dilihat para pengunjung, sebaiknya manfaatkan header sebagai promosi paling efektif untuk blogger anda, jangan sia-siakan bagian header blogger, Tegaskan nama tampilan blog anda karena itu merupakan salah satu yang membuat blogger anda ramai pengunjung, usahakan header blogger anda mudah diingat para pengujung.

Tutorial kali ini adalah cara mengganti header blogger

1. Buat Header Blogger anda mengggunakan Software Desain Seperti Adobe Photoshop atau CorelDRAW.

2. Buat ukuran desain header dengan ukuran header yang sebenarnya.

Cara mengetaui ukuran header.

- Dashbord > Rancangan > Element > Klik Edit Pada Elemen Header, Maka Akan Tampil Seperti Gambar dibawah ini.

Catatan : Untuk Width (Lebar) Ukurannya 760* untuk Ukuran Height (Tinggi) anda bisa atur sesuai keinginan, karena sifatnya dinamic, otomatis mengikuti resize gambar yang anda buat.
3. Lakukan Proses Upload gambar header yang sudah anda buat.
- Klik Telusuri Apabila anda melakukan proses upload melalui explorer anda
- Pilih Selain Judul dan Keterangan untuk menempatkan Posisi Header anda di bagian layer paling depan
- Simpan, dan Proses Selesai

Catatan : Untuk mengganti header blogger dengan template yang tidak menyediakan elemen header anda cukup mengikuti langkah-langah berikut ini.

1. Klik Kanan Pada Header Blogger > Lihat Informasi Gambar, Maka akan tampil kotak dialog seperti dibawah ini. Lihat Ukuran Resolusi Gambar Contoh : 260*67, Klik Close

2. Kemudian Klik Kembali Header Blogger Klik Kanan > Salin Lokasi Gambar

3. Setelah Anda Salin Masuk Kedalam Rancangan > Edit HTML > Tekan CTRL+F > Pastekan Pada kolom Cari

4. Setelah Anda Temukan Kode Pada Edit HTML

5. Upload Image Anda Pada Posting Blogger, Setelah Terupload Klik Original Size > Masuk Ke Dalam Tab Compose menjadi Edit html pada Posting Blogger, temukan kode image yang anda upload.

Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0oseWSlAcx8NNhKjwqBmUWwcYBhbveCAR_LqsR_vMFngX46rWmiUAI8Cg_MyprjSfuS0jvS8BZnYIsuLHJqS-bcT_JgoeVTNsnnQF9HxkYl9Tzpgv1LNcd74JFspiHGEMv_TKfhjDnHUP/s1600/logobloggerpox.png
Copy Kode dan Ganti Kode yang ada pada Rancangan Edit HTML Sebelumnya.
6. Selamat Mecoba, Apabila ada Kesulitan Silahkan tinggalkan komentar.

CARA MENGHAPUS DAN MENYEMBUNYIKAN TANGGAL POSTING

BLOGGERPOX.COM - Tutorial Blogger Pox Kali ini adalah bagaimana menghapus atau menyembunyikan Tanggal pada Blogger.

Pertanyaannya kenapa harus dihapus atau disimpan ?

Tanggal atau Date Blogger memang salah satu peran penting dalam blogger, tapi ada beberapa para blogger yang non update atau web static tidak begitu perlu menampilkan tanggal posting.

Berikut adalah Langkah - Langkah Sederhana Cara Menghapus atau menyembunyikan Tanggal Posting 

CARA PERTAMA

1. Masuk Dasboard > Rancangan > Kemudian Klik Edit Pada Elemen Posting

2. Setelah Itu akan Tampil Pop Up Konfigurasi Blogger, Perhatikan Gambar dibawah ini

3. Anda perhatikan terdapat beberapa pilihan konfigurasi chek list yang tertera pada posting blogger, Non Aktifkan Kedua Check List Seperti Gambar diatas, Maka Secara Otomatis pada setiap posting anda tidak akan tampil tanggal posting.

CARA KEDUA MELALUI EDIT HTML

Untuk Cara yang kedua adalah bagaimana kita menyembunyikan Tanggal Posting dengan cara mengedit dan Menambahkan Script HTML

1. Tekan CTRL+F Untuk Memanggil Kotak Cari masukan kata kunci date-header {

2. Setelah anda menemukan Kode date-header {

Perhatikan dengan detail Tempat Pemambahan Kode visibility: hidden;

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

3. Maka Secara Otomatis Blogger anda tidak akan menampilkan tanggal posting, karena dengan memasukkan perintah Hidden (Menyembunyikan), untuk kembali menampilkan tanggal posting anda tinggal menghapus kembali visibility: hidden;

4. Selamat Mencoba 

CARA MEMASANG KOTAK PENCARIAN - SEARCHING PADA BLOGGER

BLOGGERPOX.COM - Cara memasang kotak pencarian atau kolom searching di blogger tidaklah susah hanya saja kita perlu beberapa script untuk memasangnya. Bloggerpox akhirnya berhasil memodifikasi beberapa kode script kolom pencarian yang praktis dan efektif.

Tapi yang perlu kita ketahui adalah apa sebenarnya fungsi kolom pencarian selain untuk memudahkan pengujung mencari artikel.

Beberapa fungsi lainnya adalah meningkatkan trafik rank kita pada alexa, karena secara metode program yang di buat google adalah setiap blogger yang berhasil di index dari kolom pencarian mendapat nilai lebih di banding dengan refering link dari blog lain.

Berikut langkah-langkah memasang kotak pencarian pada blogger

1. Masuk kedalam Dashboard Blogger Anda

2. Masuk kedalam Rancangan > Element Laman
3. Copy Kode/Script Pada Kolom di Bawah ini
4. Tambahkan Gadget  > HTML & Javascript > Pastekan Kode
5. Edit Value Pada Form Sesuai dengan Nama Domain anda
6. Dibawah ini merupakan demo kolom pencarian yang kita buat, Selamat Mencob

Google Bloggerpox.com

<form method="get" action="http://www.google.com/custom" target="google_window"> <table border="0" bgcolor="#ffffff"> <tr><td nowrap="nowrap" valign="top" align="left" height="32"><br /> <a href="http://www.google.com/"><br /> <img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google"></img></a><br /> <br/><br /> <br /> <input type="hidden" name="domains" value="bloggerpox.com"></input><br /> <input type="text" name="q" size="25" maxlength="255" value=""></input><br /> </td></tr> <tr> <td nowrap="nowrap"><br /> <table> <tr> <td><br /> <input type="radio" name="sitesearch" value="" ></input><br /> <br /> <font size="-1" color="#000000">Web</font><br /> </td> <td><br /> <input type="radio" name="sitesearch" value="id-blogger.com"></input><br /> <font size="-1" color="#000000">bloggerpox.com</font><br /> </td> </tr> </table><br /> <input type="submit" name="sa" value="Search"></input><br /> <input type="hidden" name="client" value="pub-4926928126068726"></input><br /> <input type="hidden" name="forid" value="1"></input><br /> <br /> <input type="hidden" name="ie" value="ISO-8859-1"></input><br /> <input type="hidden" name="oe" value="ISO-8859-1"></input><br /> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input><br /> <input type="hidden" name="hl" value="en"></input><br /> <br /> </td></tr></table> </form>

CARA MEMASANG PAGE NUMBER PADA BLOGGER

BLOGGERPOX.COM - Tutorial kita kali ini adalah cara membuat page number pada blogger, page number merupakan perinta untuk berpindah halaman, page number sama halnya dengan tombol next pada blogger, sudah sering kita temui blog dengan menggunakan page number yang bermaksud memudahkan para pengunjung melihat beberpa artikel lama yang telah kita posting sebelumnya.

Berikut Langkah-langkah membuat Page Number pada Blogger
 

1. Masuk dahulu ke Dashboard blogspot Anda, selanjutnya pilih Rancangan (Layout) dan pilih Edit HTML, seperti biasa contreng option Expand Widget Templates, selanjutnya cari kode berikut: ]]>;
2. Setelah ketemu, di atas kode ]]> letakkan kode di bawah ini :                                              
   .showpageArea a {
   text-decoration:underline;
   }
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #cccccc;
   margin:0 3px;
   padding:3px;
   }
   .showpageNum a:hover {
   border: 1px solid #cccccc;
   background-color:#cccccc;
   }
   .showpagePoint {
   color:#333;
   text-decoration:none;
   border: 1px solid #cccccc;
   background: #cccccc;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #cccccc;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#333333;
   }
   
   
3. Lalu cari lagi kode seperti ini: ;
4. Jika sudah ketemu, di atas kode letakkan script di bawah ini: 
   <b:if cond='data:blog.pageType != "item"'>
   <script type='text/javascript'>
   var pageCount=5;
   var displayPageNum=5;
   var upPageWord ='Previous';
   var downPageWord ='Next';
   </script>
   <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
   </b:if>
5. Selanjutnya carilah kode berikut ini : 'data:label.url';
6. Hapus kode ini : 'data:label.url' dan gantilah dengan kode di bawah ini:
   'data:label.url + "?&max-results=5"'
7. Terakhir Simpan Templates, Selamat Mencoba

CARA MEMASANG TEKS AREA PADA BLOGGER

Membuat teks area memang sangat diperlukan untuk memasukan beberapa kalimat yang penting salah satunya untuk memasukkan kode html pada blog.

Berikut Langkah-langkah membuat teks area:

1. Copy paste kode pada kolom area

2. Klik Entri Baru pada blogger, pastikan anda sedang berada pada perintah edit HTML bukan compose

3. Setelah anda pastekan, atur kembali ukuran cols dan rows kolom area sesuai dengan kebutuhan

4. Setelah masukan tulisan anda diantara tanda tutup > isi <

5. Selamat Mencoba

<textarea cols="60" rows="5">TULISAN DALAM KOTAK</textarea>

CARA MENGGANTI FAVICON - ICON BLOGGER

Cara Mengganti Pavicon Blogger bukanlah hal yang sulit, tetapi banyak orang yang ternyata cuma ikut-ikutan cara mengganti pavicon Blogger dengan cara mengedit html dengan memasukan kode sebelum head 

Contoh

</head>
<link href='url gambar' rel='short cut icon'/>

ini merupakan metode lama hal ini anyalah pengelabuan kode image belaka, hal ini memang bisa dilakukan akan tetapi sudah banyak hal yang membuat metode lama ini sudah tidak berlaku lagi, karena banyak perubahan browser saat ini tidak dapat membaca kode html yang kita masukan.

Pada google chhrome atau safari contohnya, penggantian icon dengan metode ini ternyata tidak berlajan dengan baik dimana icon blogger tetap tampil, sedangkan icon yang kita buat hanya tampil pada beberapa browser saja.

Sekarang Bloggerpox memberikan metode yang benar tanpa mengedit html sedikitpun, karena cara ini merupakan fitur terbaru dari blogger.com

Berikut langkah-langkah menggati icon blogger :

1. Buka Blogger anda dengan menggunakan http://draft.blogger.com

2. Setelah Tampil Dashboard draft.blogger.com > Klik Dashboard 

 3. Klik Layout > Klik Edit Favicon > Upload Icon

* Catatan : Untuk Icon yang anda upload usahakan ukuran max 25*25px, untuk mengoptimalkan kecepatan reload icon.

CARA MENGHAPUS NAVBAR BLOGGER

Pada Blogger default anda menemukan navbar blogger pada bagian header, hal ini sering kali dianggap menganggu, untuk menghilangkan navbar langkahnya sangat sederhana :

1. Login Blogger Anda
2. Klik Rancangan > Edit HTML > Centang Expand Template Widget
3. Untuk membackup resiko kerusakan template sebaiknya anda download template terlebih dahulu.

4. Tekan Ctrl+F, untuk memanggil menubar pencarian, cari kode </style>
5. Apabila Anda Menemukanny, anda masukan kode dibawah ini tepat diatas </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

BLOGGER TEMPLATE MOBILE

Meningkatnya pengguna internet menggunakan handphone, smartphone, blogger akhirnya mengeluarkan blogger mobile dengan rancangan template minimalis versi handphone, template minimalis hasil dari 27 para designer blogger, untuk mengaktifkan blogger mobile ini, tidak terlalu sulit.

1. Masuk Dasboard > Pengaruran > Email & Mobile

Checklist perintah Ya, pada tampilan, kemudian lihat menggunakan pratinjau seluller
Apabila Selesai Klik  Simpan Pengaturan.

Beberapa fitur kami menyoroti:

• Preview: Dapatkan sekilas tentang bagaimana blog Anda akan ditampilkan dengan mengklik tombol Preview Mobile. Anda juga dapat melihat di smartphone Anda dengan memindai kode-QR.
• Pengalihan otomatis: Pemirsa akan melihat versi mobile dari blog Anda ketika mengakses dari smartphone *.
• Template dukungan: Kami sekarang mendukung semua 27 template. Beberapa gadget juga didukung **.
• Iklan seluler: Mobile iklan AdSense akan ditampilkan di bagian atas halaman posting dan di bagian bawah halaman indeks jika blog memiliki gadget AdSense atau in-line iklan blog.
• Komentar dan video: Pemirsa pada perangkat smartphone akan mampu membuat komentar dan menonton video.