remoxp

Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi. Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

• 1. Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
• 2. Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
• 3. Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

• 1. Login ke blogger dan masuk ke Dasbor.
• 2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
• 3. Cari kode ]]></b:skin>
• 4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}

• 5. Cari kode <b:section class='footer' id='footer'>  dan ganti dengan kode pengganti di bawah ini:

<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>

• 6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode <!-- end content-wrapper -->
• 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
• 8. Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....

Free Template Blogger collection template Hot Deals SEO

Sesuai janji saya, saya akan membahas cara membuat halaman penuh tanpa sidebar. Bagi yang belum tahu, silakan lihat contohnya di submit artikel anda di forum antum. Sebenarnnya cara nya sangat mudah, akan tetapi itu apabila kita bisa memahaminya dan mengetahui kode-kode CSS di template kita. Coba kita memakai logika, apabila halaman penuh tanpa sidebar maka sidebar tidak akan di tampilkan, dan area postingan juga harus diperluas.

Cara Menghilangkan Sidebar

Kode di setiap template berbeda-beda, saat ini saya menggunakan contoh kode template minima atau template default milik blogger. Untuk menghilangkan sidebar menggunakan kode dibawah ini:

#sidebar{
display: none !important;
}

Kode yang berwarna hijau itu bisa berbeda-beda, anda harus mengatahui mana kode CSS sidebar di template blog sobat sendiri. Apabila di blog forantum karena memliki dua sidebar yaitu sidebar kanan dan sidebar kiri memakai kode seperti ini:

#sidebar-leftwrap{
display: none !important;
}
#sidebarright{
display: none !important;
}

Nah, sobat harus mencari kode sidebar template sendiri, cari saja kode yang hampir mirip.

Cara Memperlebar Area Posting

Apabila sidebar tidak ditampilkan, maka halamanya akan kosong sehingga area postingan sebaiknya di perluas. Sama-dengan yang saya terangkan diatas, kodenya bisa berbeda-beda. Ini kode untuk memperluas area postingan pada template minima atau template standar dari blogger:

#main-wrapper{
width: 640px;
    }

Nah, kode yang berwarna kuning itu bisa berbeda-beda pada setiap template, sedangkan kode yang berwarna kuning itu harus di ubah sesuai dengan ukuran halaman template blog sobat.

Apabila di template forantum ini kodenya seperti ini:

#main .Blog{margin:0 5px;padding:0;width:985px}

Okey, Langsung saja ke tutorialnya:

• Login ke Blogger

• Klik Tata Letak

• Pilih Edit HTML

• Cari kode </head> (tekan F3 pada keyboard untuk mempermudah pencarian)

• Letakkan kode berikut diatas </head>

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>
    <style>
#sidebar{
display: none !important;
}
    #main-wrapper{
width: 640px;
    }
    </style>
    </b:if>

Keterangan:
Ganti kode yang berwarna hijau dengan alamat postingan sobat dan ganti kode berwarna kuning dengan lebar blog atau lebar halaman blog sobat sendiri.

Lalu simpan. apabila tidak ada pengaruhnya maka mungkin kode template sobat berbeda, silakan coba ganti kode yang berwarna merah muda dengan sesuai kode CSS template sobat. Semoga berhasil.....

Free Template Blogger collection template Hot Deals SEO

Jika anda melakukan pencarian di blog, baik itu melalui mesin pencari yang di pasang pada blog tersebut atau melalui label ataupun arsip blog, maka biasanya di atas halaman pencarian akan muncul pesan seperti ini :

Rupanya ada blogger yang tidak suka dengan kehadiran pesan ini dan menanyakan ke kang Rohman, apakah pesan ini bisa di hilangkan atau tidak? jawabannya tentu saja bisa, dan sangat mudah sekali. anda cukup menambahkan sedikit kode pada style sheet CSS anda. Kodenya seperti ini :

.status-msg-wrap{
display:none;
}

Kalau anda sudah memasang kode tersebut, niscaya pesan pencarian yang biasanya muncul akan malu-malu untuk menampakkan diri lagi. Aihhh.. kang Rohman suka bingungin dech, kasih tau donk cara lengkapnya bagaimana, masa gitu doank? hihihi.. bingung yach, ya sudah, saya kasih cara lengkapnya. Berikut langkah-langkah untuk menghilangkan pesan pencarian di blogger :

   1. Sign in ke blogger dengan ID anda.
   2. Klik Tata Letak.
   3. Klik tab Edit HTML.
   4. Klik tulisan Download Template Lengkap. silahkan di backup dulu biar aman.
   5. Cari kode seperti ini ]]></b:skin>
   6. Simpan kode berikut di atas kode yang tadi :

      
      .status-msg-wrap{
      display:none;
      }
     

   7. Klik tombol Simpan Template.
   8. Selesai.

Jika anda sudah melakukan langkah-langkah di atas, maka langkah selanjutnya tinggal ucapkan “bye bye dech loe”.

Sumber:

Kolom-Tutorial.blogspot.com

Ziliwu.blogspot.com

Free Template Blogger collection template Hot Deals SEO

Biasanya pada template blogger akan terdapat tulisan subscribe to: post(atom) atau berlangganan : post(atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai feed dari blog anda. Tujuannya agar pengunjung bisa dengan mudah menemukan alamat feed anda. Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini sudah tidak terlalu penting lagi.

Bagi anda yang merasa tulisan ini tidak terlalu penting untuk ditampilkan, anda bisa menghilangkannya dengan cara berikut ini:

1. Login ke Blogger. Klik menu Layout -> Edit HTML
2. Beri tanda centang pada "Expand Widget Template"
3. Lalu cari kode di bawah ini:

    <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>

4. Kalau sudah ketemu, hapus kode tersebut lalu klik Save Template
5. Selesai.

Sumber: HermanBlogTips.blogspot.com

Free Template Blogger collection template Hot Deals SEO

Bagi para Blogger, pasti pernah melihat icon berbentuk tang dan obeng / quick edit pada template Anda. Yang tampilannya seperti disamping.

Nah, itu bisa jadi sangat bermanfaat karena berfungsi sebagai tombol quick edit. Tetapi bisa jadi sangat mengganggu karena kita tidak bisa melihat bagaimana tampilan blog kita saat kita tidak login yang semestinya karena adanya obeng dan tang yang muncul hanya saat kita login.

• Cara menghilangkannya:

1. Login ke blogger
2. Tata Letak lalu EDIT HTML
3. Centang "Expand Widgets Templates"
4. Cari kode <b:include name='quickedit'/>
5. Hapus kode tersebut

Setiap kode tersebut mewakili satu tool tang dan obeng sehingga kode tersebut lebih dari satu. Hapus semuanya.

Tip: Gunakan Ctrl+F, isikan <b:include name='quickedit'/> dan tinggal klik Next dan next untuk mencari kode kode itu

• Nah, jika anda kesusahan dengan semua itu ada cara sangat praktis yakni hanya dengan cara menyisipkan kode di bawah ini di atas ]]></b:skin>

    .quickedit{
    display:none;
    }

Simpan, dan selesai...

Sumber:  http://www.masdoyok.co.cc

Share By: ForAntum

Free Template Blogger collection template Hot Deals SEO

Judul blog sangat penting karena berperan sebagai keyword di mesin pencari. Tetatpi kadang judul blog terlihat kurang menarik. Kita tidak bisa menghapusnya, yang kita lakukan adalah menyembunyikannya. Begitu juga untuk deskripsi blog.

Nah, bagi yang ingin menghilangkannya caranya adalah sebagai berikut:

Menghilangkan Blog Title
1. Login ke blogger
2. Tata Letak - EDIT HTML
3. Cari kode berikut #header h1 { atau kalau tidak ada kodenya .header h1 {
4. Nah sebelum penutup } tambahkan kode berwarna biru berikut:

display:none;

5. Lalu Simpan Template

Menghilangkan Deskripsi
1. Login ke blogger
2. Tata Letak - EDIT HTML
3. Cari kode berikut #header .description { atau kalau tidak ada kodenya .header .description {
4. Caranya sama tambahkan script berwarna hijau berikut sebelum penutup }

display:none;

5. Lalu Simpan Template

Semoga berhasil.....

Free Template Blogger collection template Hot Deals SEO

Untuk berbagai pertimbangan, seperti agar lebih ringkas dan lebih simpel dalam menampilkan hasil pencarian, beberapa blogger memilih hanya menampilkan judulnya saja. Nah, yang belum mengetahui caranya langsung saja ikuti tutor di bawah ini:

(Eh, untuk contohnya coba anda cari artikel di forantum menggunakan tools pencari yang ada di sidebar bagian kanan, widget yang paling atas. Nah...yang tampil hanya judulnya saja kan)

1. Login ke blogger
2. Menuju Tata Letak - Edit HTML
3. Centang Expand Widget Templates
4. Cari kode berikut

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

5. Ganti dengan kode di bawah ini

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

6. Terakhir simpan template Anda dan lakukanlah percobaan dengan mengetikkan keyword di kotak search Anda...

Free Template Blogger collection template Hot Deals SEO

Coba lihat ke bahwah Blog mu, nah... disitukan ada tulisan Newer post, Older post dan Home di bawah Postingan tuch. Atau dengan tulisan : Postingan lebih baru, Rumah / halaman muka, Postingan lama. Nah.... Tulisan itu dapat diganti dengan tulisan yang kamu mau, atau... bahkan dengan gambar. Gimana,,,, MAU??!!

Contoh yang bergambar bisa dilihat di blog percobaan saya di http://jeblogand.blogspot.com/

OK mulai beraksi, jangan banyak basa-basi:

ket: Carilah kode HTML dengan mengKLIK "F3" pada keyboard, lalu masukan kode yang hendak dicari.

•  Mengganti tulisan Newer Post

Untuk mengganti tulisan Posting Lebih Baru (Newer Post), carilah kode HTML:

<data:newerPageTitle/>

Kemudian gantikan kode HTML tersebut dengan:

<img src='ganti kode gambar panah ke kiri'/>

•  Mengganti tulisan Older Post

Untuk mengganti tulisan Posting Lama (Older Post), carilah kode HTML:

<data:olderPageTitle/>

Kemudian gantikan kode HTML tersebut dengan:

<img src='ganti kode gambar panah ke kanan'/>

•  Mengganti tulisan Home

Untuk mengganti tulisan Halaman Muka (Home), carilah kode HTML:

<data:homeMsg/>

Kemudian gantikan kode HTML tersebut dengan:

<img src='ganti kode gambar rumah'/>

Gantilah kalimat ganti kode gambar panah ke kiri, gambar panah ke kanan, dan gambar rumah, dengan kode gambar di atas sesuai dengan keinginan Anda.

Untuk mendapatkan URL gambar tersebut kamu tinggal menunjuk pointer mouse kamu ke salah satu gambar--DI ATAS--yang diinginkan lalu klik kanan dan pilih Copy Image Location. Kemudian tempelkan (paste) menggantikan kalimat-kalimat tadi.


Gimana mudahkan... Selamat bereksperimen ya.

Free Template Blogger collection template Hot Deals SEO

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer (letaknya di bawah, karena foot itu artinya kaki..hehehe) tiga kolom, seperti blog ini. Nah, bagaimana cara menambah footer 3 kolom di Blogger atau Blogspot? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.
Oke, langsung saja ke tutorialnya:

1. Masuk Layout, Edit HTML, beri centang (jangan lupa back up dulu buat jaga-jaga).

2. Cari kode: <div id="footer-wrapper">
Ket: pada beberapa template kodenya: footer atau footer-section.

3. Geser ke bawah (biasanya dua baris ke bawah) sampai ketemu kode: </div>

4. Tambahkan kode berikut ini di bawahnya:

<div id="footer">
<div id="footer2" style="margin: 0pt; width: 30%; float: left; text-align: left;">
<b:section class="footer-column" id="col1" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer3" style="margin: 0pt; width: 40%; float: left; text-align: left;">
<b:section class="footer-column" id="col2" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer4" style="margin: 0pt; width: 30%; float: right; text-align: left;">
<b:section class="footer-column" id="col3" preferred="yes" style="float: right;">
</b:section></div>
<div style="clear: both;">
<p>
</p><hr align="center" color="#5d5d54" width="90%"><p></p>
<div id="footer-bottom" style="padding: 10px; text-align: center;">
<b:section class="footer" id="col-bottom" preferred="yes">
</b:section>
</div>
<div style="clear: both;">
</div>

5. Simpan, lalu klik Layout dan lihat hasilnya: akan muncul tiga kolom di bawah (bagian footer).

Apabila muncul galat, wakakaka....tenang. Kembalikan template dengan back up template yang telah kita buat dan ulangi semua tahap. tapi coba dengan jangan centang expand widget template.

Semoga barhasil...

( Sumber : http://wawanwae.blogspot.com )

Free Template Blogger collection template Hot Deals SEO

Saat ini saya akan memberikan sedikit cara blogger hack, khususnya cara menghilangkan tanggal posting. Sebenarnya, tanggal posting berguna untuk memberi informasi kapan postingan anda diterbitkan. Akan tetapi apabila anda merasa terganggu oleh tanggal postingan ini atau anda ingin merahasiakan kapan postingan anda diterbitkan kepada pengunjung, ini adalah solusi yang tepat untuk anda.

1. Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini di Blog Anda:

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}

2. nah jika sudah ketemu tambahkan code Css visibility:hidden; kedalam Css diatas sehingga menjadi seperti:

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
visibility:hidden;
}

3. Simpan.

(Sumber : http://tutorial-jitu.blogspot.com)

Free Template Blogger collection template Hot Deals SEO

Sekarang saya akan membahas bagaimana cara untuk membuat teks yang diblock menjadi berwarna. Sehingga teks yang diblock akan terlihat indah. Sebagai contoh, coba block tulisan diblock saya. Nah, tulisan yang tadinya berwarna putih berubah warna menjadi merah...apik thow. Tapi efek block berwarna hanya dapat dirasakan apabila kita menggunakan browser Mozilla Firefox.
Apabila anda tertarik, silakan mengikuti dengan seksama artikel ini. Cara untuk membuatnya adalah sebagai berikut:

1. Masuklah ke halaman edit HTML.

2. Taruh kode dibawah ini diatas kode ]]></b:skin> (untuk mempermudah pencarian gunakan tombol Ctrl+F.

::-moz-selection {
background: none;
color: #90EE90;
}

3. Okey....slesai lalu Simpan.

Ket:

*kode background: none adalah warna dari background, apabila ingin menggantinya gunakan kode warna. Kode warna dapat dilihat disini.

*color: #90EE90 adalah warna teks yang telah di block, apabila ingin menggantinya gunakan kode warna. Kode warna dapat dilihat disini.

Free Template Blogger collection template Hot Deals SEO