Selamat Datang di
Panduan Blog Tips dan Trik, membuat kode dan aplikasi kode, solusi optimalis blog
Kotak Status CongCot
Admin : Bang Jack or Jacky
Blogger From : Jawa Barat Indonesia
Status Now : Terjadwal
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Jumat, 20 Agustus 2010

Trik Read More Otomatis, Auto Read More Tanpa Gambar

auto read more

Sebelumnya congcot sudah bahas tentang cara pembuatan readmore (pelajari: Auto readmore), sekarang saya akan memberikan sedikit trik bagaimana supaya tampilan auto readmorenya tidak ada tampilan gambar. Memang, bagi sebagian orang, tampilan gambar sangat penting. Tapi kadang orang suka hal yang simpel, dia tidak ingin ada tampilan gambar, justru hanya ingin judulnya (pelajari: hanya judul) dan sedikit info dari posting tersebut.


Langkah...
Oke langsung saja.
Jika suda baca tentang pembuatan readmore, pasti anda menemukan kode dibawah ini:

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


Supaya gambar tidak tampil, silahkan tambahkan kode display:none. Sekarang perhatikan hasil modifikasinya:


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="display:none;float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


Lihat bagian kata yang bercetak tebal, itu adalah perintah untuk menghilangkan atau menyembunyikan gambar auto readmorenya. Silahkan tambah kodenya sepert diatas.

Intinya...
Tambahkan trik yang baik untuk menambah kreativitas dan menarik perhatian pembaca atau pengunjung dengan tampilan blog anda. Sebenarnya kembali kepada diri anda sendiri, apakah mau dihilangkan atau memilih untuk tetap ditampilkan. Blog anda milik anda, anda lebih berhak memutuskan. Terima Kasih.
Hari Jumat, 20 Agustus 2010 dengan 19 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Senin, 16 Agustus 2010

Tentang QuickEdit dan Menghilangkan Tanda Obeng dan Tang

http://t0.gstatic.com/images?q=tbn:ENSwNt43t33IqM::&t=1&usg=__f1aGe7rsuHfUGWMrjlHXybWd340=

QuickEdit merupakan fasilitas dari blogger.com yang berguna untuk mempermudah kita dalam mengedit posting ataupun widget. Biasanya jika di posting, quickedit ditandai dengan sebuah pencil http://img2.blogblog.com/img/icon18_edit_allbkg.gif, dan jika disebuah widget, quickedit ditandai dengan gambar obeng dan tang http://img1.blogblog.com/img/icon18_wrench_allbkg.png. Banyak para blogger yang merasa terganggu dengan penampilan qiuckedit ini, padahal ini sangat bermanfaat jika kita mau mengedit dengan cepat. Tapi apalah artinya cepat jika penampilan kacau balau.
Nah, kali ini kita akan membahas sebuah trik cara menghilangkan tanda-tanda diatas.
Trik ini tidak jauh seperti solusi navbar yang telah saya posting beberapa hari yang lalu. Tidak begitu sulit kalau kita tahu sebenarnya tanda ini ada di sebelah mana atau ada di div yang mana. Tinggal masukan kode CSS nya dan gunakan perintah display: none, maka tanda obeng itu akan menghilang dengan sendirinya. Kita tidak usah membuang dalam kode HTML nya karena takut nanti akan digunakan lagi dan menurut saya, menggunakan kode CSS lebih mudah.

Langkah...
  1. Seperti biasa masuk ke blogger.com dengan account anda
  2. Pilih rancangan atau tata letak.



    pengaturan blog
  3. Klik menu Edit HTML
  4. Cari kode ]]></b:skin> (untuk mempermudah, tekan ctrl+F) dan simpan kode dibawah ini tepat diatas kode ]]></b:skin>
  5. .quickedit {display:none}
  6. Simpan template dan selesai.
Silahkan lihat hasilnya.

Intinya...
Memang, trik mempercantik blog sangat penting untuk berkreasi dan menarik pengunjung. Kita kadang lebih mementingkan penampilan dibanding kecepatan blog. Keputusan ini bisa digunakan sesuai keadaan. CongCot juga sebenarnya mementingkan kecepatan, tapi tentu penampilan juga penting.
Hari Senin, 16 Agustus 2010 dengan 7 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Minggu, 08 Agustus 2010

Membuat Kotak Status, Seperti Kotak Status CongCot

status congcot

Waduh, sebenarnya ini bukan posting yang penting mungkin, tapi tidak ada salahnya berbagi trik walaupun sedikit manfaatnya, yang pentingkan kita bisa mendapatkan ilmu dan mengamalkannya. Hari ini congcot akan membahas tentang cara pembuatan status yang contohnya ada di sebelah kanan atas.
Untuk apa kotak status itu, apa alasanya?
(silahkan pelajari: Kotak status congcot)
Posting ini akan membahas cara membuatnya. So, mari kita mulai.
Seperti biasa masuk ke blogger.com dengan account anda. Kemudian pilih rancangan atau tata letak, dan klik edit html. Cari kode ]]></b:skin> dan simpan kode dibawah ini, tepat diatas kode ]]></b:skin>

#tasstat{background:#E6FFCC;padding:5px;color:#000;width:150px;float:right;text-align:center}
#stat {background:#ADFF5C;padding:2px;color:#000;width:300px;height:90px;font: 13px Verdana;float:right}

Sekarang kita edit HTMLnya. Contoh kali ini kita menyimpan kotak statusnya diatas tempat posting (header). Silahkan cari kode

<div id='tasstat'>Kotak Status CongCot</div>
<div id='stat'>
<div class='admin' style='background:#CF9;padding:2px;margin:2px;'>Admin : Bang Jack or Jacky</div>
<div class='from' style='background:#CF9;padding:2px;margin:2px;'>Blogger From : Jawa Barat Indonesia</div>
<div class='status' style='color:#930;font-height:bold;background:#CF9;padding:2px;margin:2px;'>Status Now : <blink><b>Up to Date</b></blink></div>
<div class='pel' style='background:#CF9;padding:2px;margin:2px;text-align:right;'><a href='http://www.congcot.co.cc/2010/07/mempelajari-kotak-status-admin-congcot.html' style='color:#060;' target='_blank'>Pelajari Tentang Status</a></div>
</div>

Setelah itu simpan template. Selesai dech.

Intinya...
Interaksi sangat penting dalam dunia blogging. Fungsi kotak status ini diantaranya untuk mempermudah pengunjung berinteraksi dengan pemilik blognya itu sendiri. gunakanlah trik ini jika diperlukan.
Hari Minggu, 08 Agustus 2010 dengan 7 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Senin, 02 Agustus 2010

Memperbaiki Ukuran Gambar Auto ReadMore Dengan Kode CSS

Pembahasan tentang cara pembuatan readmore (pelajari: Auto readmore) sudah selesai. Namun ada sedikit masalah dalam aplikasinya, yaitu masalah gambar yang muncul. Munculnya gambar tidak seperti yang kita inginkan karena ada script yang memaksa gambar tersebut untuk diperkecil dengan dimensi yang tidak sesuai aslinya. Buktinya, coba perhatikan gambar dibawah ini:

perbaiki read more

Ini adalah gambar asli yang dimensinya (ukurannya) adalah 320px X 127px.
Jika kita lihat ketika halaman awal (ketika kondisi dalam tampilan readmore) maka tampilannya akan seperti ini:
perbaiki read more

Hasil tampilan gambarnya menjadi berkerut dan dimensinya dipaksa menjadi 137px X 137px.
Tapi jika kita biarkan gambar sesuai aslinya, sedangkan posting bergambar pasti banyak (bagi yang hoby memasukin gambar seperti saya), maka tampilan akan kacau.
Untuk memperbaikinya, kita butuh script agar tampilannya bagus, tapi tidak menghilangkan gambar itu sendiri. caranya sangat mudah, saya dapat dari blognya www.masdoyok.co.cc.

1. Seperti biasa masuk ke www.blogger.com
2. klik rancangan atau tata letak.
3. Pilih edit HTML kemudian centang Expand widget template.
4. Cari kode ]]></b:skin>
5. Simpan kode dibawah ini, tepat diatas kode ]]></b:skin>

.box {
width:120px;
height:120px;
overflow:hidden;
float:none; /* gantilah sesuai dengan posisi yang diinginkan */
}
6. Cari kode readmore seperti dibawah ini:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

7. Ganti dengan kode dibawah:


imgtag = '<div class="box"><img src="'+img[0].src+'" width="300px;" /></div>';
8. Jangan lupa Simpan Template.
9. Selesai.

Lihat hasilnya.
hasil perbaikan

Intinya...
Readmore sangat penting untuk banyak kalangan blogger. Tapi mungkin sedikit masalah diatas, harus diselesaikan dengan baik. Gunakanlah script ini untuk mendapatkan hasil tampilan yang lebih baik. Saya tidak menggunakan cara ini, karena setiap gambar pertama, sudah dibuat agar persegi empat. Kecuali mungkin sebagian, termasuk posting ini, untuk sekedar contoh saja.
Hari Senin, 02 Agustus 2010 dengan 11 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Sabtu, 31 Juli 2010

Membuat Read More Otomatis, Auto Read More dengan Gambar

congcot
Sebelumnya saya sudah memberikan trik supaya tampilan blog di homepage hemat (pelajar: hanya judul posting). Hari ini congcot akan membahas tentang pemasangan read more yang otomatis dari www.o-om.com. Ini berkat pertanyaan dan permintaan teman saya tentunya.
Kenapa perlu menggunakan read more?. Yang jelas read more membantu kita untuk meminimalisir tampilan blog, ketika pertama kali homepage dibuka. Bayangkan jika kita menampilkan posting sebanyak tujuh posting (jumlah ini merupakan pemberian manual dari blogger.com), kemudian postingnya panjang-panjang, apa yang akan terjadi?. semua isi posting yang panjang itu akan terlihat di halaman homepage, dan tentu saja akan sangat mengganggu penampilan blog anda.
kelebihan kode ini diantaranya adalah tampilan gambar disetiap posting yang diberi read more. (lihat gambar blog congcot diatas).
Jangan lupa, congcot memakai cara ini jika belum edit template lebih jauh, jadi saran saya gunakan template yang dari minima blogger.
Nah, mari kita mulai sekarang.

Persiapan...
  1. Seperti biasa masuk ke www.blogger.com.
  2. Pilih rancangan atau tata letak.
  3. Klik edit HTML.
  4. Sebelum melangkah ke pemasangan kode, silahkan download template anda, klik download template lengkap.
  5. Kemudian cheklist Expand widget template.
  6. Cari kode <data:post.body/> (gunakan ctrl+F untuk memudahkan pencarian)
  7. Harus ketemu, kalau sudah ketemu berarti langkah selanjutnya akan sangat mudah.
Pemasangan...
Jika kode diatas sudah ketemu maka silahkan ikuti pemasangan kode dibawah ini.
Cari kode </head> , dan simpan kode dibawah ini tepat diatas kode </head>
Langsung copy paste aja...
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Jika sudah, Sekarang tahap terakhir, cari kode <data:post.body/> dan silahkan hapus, dan ganti dengan kode dibawah ini.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang bercetak tebal sesuai dengan selera anda.
Sekian trik kali ini, mudah-mudahan besok-besok akan ada trik menarik lainnya.


Intinya...
Read more sangat dibutuhkan dalam hal tampilan supaya lebih menarik. Trik ini akan menghemat tampilan blog tapi memberikan informasi dari sebagian posting kita. Gunakanlah jika diperlukan.
Hari Sabtu, 31 Juli 2010 dengan 15 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Rabu, 21 Juli 2010

Mengenal Perbedaan Antara Margin, Border, Padding, Dan Content

Banyak yang bertanya tentang perbedaan margin dan padding. Sebenarnya itu merupakan hal yang tidak begitu sukar untuk dipecahkan, asalkan kita mau mempelajarinya. Posting kali ini, congcot akan coba menjelaskan bagaimana atau apa perbedaan dari margin, padding, border, dan content. Yang harus jelas disini adalah letaknya, karena saya sendiri beberapa hari kebelakang suka tertukar antara dimana tempat margin, dan dimana tempat padding.
Coba perhatikan gambar dibawah ini.
kotak congcot
Sudah jelaskan, dimana tempat margin, dan dimana tempat padding.
Sedikit ulasan
  • Margin - Menghapus sebuah daerah di sekitar perbatasan. Margin yang tidak memiliki warna latar belakang, dan benar-benar transparan.
  • Border - Sebuah perbatasan yang terletak di sekitar padding dan konten. perbatasan ini dipengaruhi oleh warna latar belakang kotak (dapat diberi warna)
  • Padding - Menghapus sebuah daerah di sekitar konten (terletak antara border dan konten). padding ini dipengaruhi oleh warna latar belakang kotak
  • Content - Isi kotak, di mana teks dan gambar muncul
 Sebagai Contoh:

Posting kali ini, congcot akan coba menjelaskan bagaimana atau apa perbedaan dari margin, padding, border, dan content. Yang harus jelas disini adalah letaknya, karena saya sendiri beberapa hari kebelakang suka tertukar antara dimana tempat margin, dan dimana tempat padding.

Kode yang digunakan diatas adalah:
<div style="background:#FF0; border: 20px solid rgb #0F0; color: red; height: 200px; margin: 20px; padding: 20px; width: 200px;"></div>

Mungkin itulah sekilas tentang perbedaan Antara Margin, Border, Padding, Dan Content. Mudah-mudahan bermanfaat untuk semuanya.


Intinya...
Sering terdapat kekeliruan dalam penempatan letak margin dan padding. Kadang kita menganggap letak yang salah, terbalik. Dengan posting ini, diharapkan kesalahan-kesalahan itu hilang, dan tidak ada lagi yang salah dalam penempatannya.
Terima Kasih
Hari Rabu, 21 Juli 2010 dengan 15 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Senin, 19 Juli 2010

Trik Mouseover Gambar Posting Dengan Mode Transparan

Sebenarnya hari ini congcot kurang enak badan. Mohon Doanya saja semoga lekas sembuh. Tapi karena jadwal posting congcot adalah 2 hari sekali, dan sekarang adalah waktunya, maka posting harus tetap dilanjutkan.
Entah apa yang membuat congcot harus posting ini, yang jelas belum ada lagi ide posting lain (kehabisan ide kali, hahaha).
Apa itu mouseover?, mouseover adalah sebuah keadaan dimana mouse berada tepat di wilayah objeck. Oke, untuk memahami judul diatas, Congcot akan memberikan contohnya langsung.

Keadaan #1...
Untuk contoh yang pertama kita akan membuat keadaan, dalam keadaan normal, maka gambarnya biasa, dan jika mouse tepat berada di wilayah gambar, maka gambar itu akan transparan.


Kode yang saya gunakan adalah:
<img onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="Lokasi Gambar" style="opacity: 1;" />

Keadaan #2...
Ynag kedua, kita akan membalikan keadaan, yaitu: dalam keadaan normal, gambar akan transparan, sedangkan jika disorot mouse, gambar akan biasa.


Kode yang saya gunakan adalah:
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="Lokasi Gambar" style="opacity: 0.4;" />

Seluruh Posting...
Tentu pusing kalo setiap posting kita harus membuat script diatas.
Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?
Jawabannya simpel
  1. Masuk Ke www.blogger.com dengan account anda
  2. Pilih Rancangan (tata letak)
  3. Klik edit HTML
  4. Cari kode ]]></b:skin>
  5. Simpan kode dibawah, tepat diatas kode ]]></b:skin>
  6. Simpan Template
  7. Selesai.
Kodenya adalah
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Keterangan:
*Masukan URL gambar anda di Lokasi Gambar
*Contoh Gambar diatas diambil dari Sumber

Intinya...
Keunikan suatu trik sangat berpengaruh terhadap ciri khas blog anda. Gunakan trik ini untuk menambah keunikan dalam trik gambar yang anda posting. Mudah-mudahan bermanfaat. Amin
Terima kasih
Hari Senin, 19 Juli 2010 dengan 10 Koment
Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

Sabtu, 17 Juli 2010

Mengubah Judul Widget (Heading) Agar Tidak Semuanya Huruf Besar

congcot

Ketika Chatting, ada seorang blogger yang menanyakan "bagaimana caranya supaya judul (heading) di sidebar saya tidak semuanya huruf besar / atau ada huruf kecilnya?". Nah, posting kali ini congcot akan membahas tentang judul widget atau bisa disebut heading. Jika anda mau melakukannya, tidak begitu sulit ko, bahkan yang blogger pemula juga pasti bisa melakukannya dengan baik dan tidak akan menanggung resiko templatenya rusak. Asal dengan sungguh-sungguh, hati-hati, dan mau melakukannya.
Sebelumnya, Jika anda masih ada yang bingung, coba dech lihat dulu gambar dibawah ini
congcot

Kemudian coba bandingkan dengan gambar yang paling atas. Tentu ada perbedaannya kan?.
Supaya kita bisa lebih enak memandangnya (bagi sebagian orang) mari kita mulai edit kode CSS nya.

Langkah-langkah...

  1. Masuk ke www.blogger.com dengan account anda.
  2. Pilih rancangan (tata letak)

    congcot
  3. Klik Edit HTML
  4. Cari kode h2 {  (untuk memudahkan pencarian, gunakan Ctrl+F)
  5. Untuk lebih jelas, silahkan lihat gambar dibawah ini
  6. congcot
  7. Hapus kode  text-transform:uppercase; (kode yang ada didalam kurung merah)
  8. Keterangan: kode  text-transform:uppercase; memberikan perintah bahwa tulisan dalam div Heading semua hurufnya harus besar. Dengan menghilangkan kode ini, maka besar kecilnya huruf terserah kita
  9. Jangan lupa Simpan Template
  10. Selesai.
Walaupun trik ini hanya sedikit, tapi mudah-mudahan bermanfaat untuk semuanya. Amin

Intinya...
Sebagian orang tidak suka jika melihat sebuah tulisan sedangkan hurufnya besar semua, termasuk dalam masalah judul. Trik ini memberi kita peluang untuk terus berkreasi bersama sesuai dengan kata hati anda sendiri.
Terima Kasih
    Hari Sabtu, 17 Juli 2010 dengan 15 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

    Kamis, 15 Juli 2010

    Kode CSS Merubah <blog-pager> Pada Blogger Agar Lebih Menarik


    Jangan aneh melihat judul diatas, karena bingung mau seperti apa, akhirnya lahir juga judul itu. Sekarang CongCot akan membahas tentang kode CSS. Sudah tahu tentang kode blog-pager?. Bagi yang belum, Kode blog-pager adalah sebuah kode navigasi yang terdapat didalam tag div blog-pager, berisi  link dan berfungsi untuk menampilkan posting lama dan baru. Lihat gambar dibawah ini:
    Nah, Untuk membuatnya tidak terlalu susah, seperti biasa kita gunakan sebuah kode dan kali ini kita hanya menggunakan kode CSS saja. Dan hanya menggunakan CSS biasa (1)
    Langkah-langkahnya:
    1. Masuk ke www.blogger.com
    2. Pilih Rancangan (Tata Letak)

      congcot
    3. Klik Edit HTML
    4. Cari kode ]]></b:skin> (untuk memudahkan tekan CTRL+F)
    5. Masukan Script dibawah ini tepat diatas kode ]]></b:skin>
    6. .blog-pager {background:#060;padding:10px;border-top:3px solid #F00} .blog-pager a{color:#FF3;}
    7. Keterangan:
      Ganti Tulisan yang bercetak tebal sesuai dengan warna kesukaan Anda
      Background: untuk warna background
      Border: Untuk warna garis yang atas
      Color: Untuk warna tulisan
    8. Simpan Template.
    9. Selesai.

    Bisa dibilang cara sederhana ini baru dibuat, karena saya cari di search engine ternyata untuk mengubah kode ini memang susah didapat, dan saya belum dapat. Sampai akhirnya harus utak-atik kode sendiri.
    Dan akhirnya Alhamdulillah bisa juga.

    Intinya...
    Navigasi blog-pager ini sangat penting. Memberitahu pengunjung untuk menelusuri posting yang sudah lama. Dua hari yang lalu saya sendiri menghilangkan navigasi ini karena ada kesalahan yang sulit saya tebak. Tapi setelah berusaha, akhirnya selesai dan dapat dipecahkan. Terima kasih.
    Hari Kamis, 15 Juli 2010 dengan 26 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

    Selasa, 13 Juli 2010

    Menampilkan Hanya Judul Posting di Beranda / Home Page

    congcot

    Dalam hal penampilan, kadang orang lebih suka simpel, karena dengan simpel, kecepatan blog akan lebih baik. Kesan pandangan pertama ketika melihat blog kita adalah penampilan, dan kesan pertama yang mereka rasakan ketika merasakan blog kita adalah kecepatan. Google juga menerapkan perasaannya dengan mendahulukan kecepatan daripada penampilan.
    Ketika chatting, congcot mendapatkan pertanyaan bagaimana meminimalisir tampilan di homepage (beranda) dengan cara menampilkan posting tapi hanya judulnya saja. Dulu saya berfikir simple dalam penampilan di homepage, sehingga yang tampil hanya kata-kata saya buka posting (lihat QOULY), tapi ternyata penampilan posting pun penting untuk menarik pengunjung, ya walaupun hanya judulnya saja (lihat PEDO).
    Ada dua alternatif yang bisa saya berikan pada kesempatan kali ini, dan mudah-mudahan kedepannya ada cara yang lebih bagus lagi.
    Dengan Kode HTML...
    Yang  pertama kita langsung terjun ke kode HTMLnya, jadi kode yang diperlukan hanya akan disimpan di antara <body> dan </body>.
    Untuk membuatnya, silahkan ikuti langkah-langkah dibawah ini:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Pilih rancangan (tata letak)


      congcot
    3. Klik Edit HTML
    4. Simpan dulu template anda dengan meng-klik Download Template Lengkap
    5. Centang Expand Template Widget (berada diatas kotak kode)
    6. Cari kode <b:include data='post' name='post'/>. (Gunakan Ctrl + F untuk memudahkan pencarian)
    7. Ganti kode diatas dengan kode dibawah ini
    8. <b:if cond='data:blog.homepageUrl == data:blog.url'>      <b:if cond='data:blog.pageType != &quot;item&quot;'>          <a expr:href='data:post.url'>    <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'>          <data:post.title/></div></a>      <b:else/>          <b:include data='post' name='post'/>      </b:if>  <b:else/>      <b:include data='post' name='post'/>  </b:if>
      Silahkan ganti kode yang bercetak tebal, sesuai style yang anda inginkan
    9. Jika sudah, jangan lupa Simpan Template
    10. Selesai.
    Dengan Kode CSS...
    Nah, cara yang kedua ini kita tidak mengubah kode HTMLnya, tapi hanya mengutak-atik kode CSS.
    Biasanya dalam kode CSS untuk menghilangkan suatu kode dalam HTML, cukup dengan {display:none} dengan syarat kode dalam HTML terikat oleh kode CSS (misalkan DIV atau Class)
    Untuk membuatnya, silahkan ikuti lagkah-langkah dibawah ini:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Pilih rancangan (tata letak)
    3. Klik Edit HTML
    4. Cari kode ]]></b:skin>
    5. Masukan kode dibawah ini tepat di bawah kode ]]></b:skin>
    6. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> .post-body { display:none;} </style> </b:if>
    7. Nah, itu hanya postingnya saja, sedangkan tanggal dan lain-lain masih ada.
    8. Jika anda ingin menghilangkan semuanya (tanggal dll), Silahkan memakain kode dibawah ini,
    9. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> .post-body, .post-footer, .jump-link, .post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons { display:none;} </style> </b:if>
    10. Pilih salah satu kode yang akan anda masukan antara langkah 5 dan langkah 7.
    11. Simpan Template, Selesai.
    Itulah cara yang bisa saya berikan hari ini, mudah-mudahan bermanfaat baik untuk congcot, maupun semua pembaca dan yang mempraktekannya.

    Intinya...
    Simple dalam bentuk penampilan memang hebat. Tapi menampilkan posting dalam homepage juga sangat penting. Dari dua blog yang terlihat diatas, anda dapat menyimpulkan, apakah pilih qouly atau pedo?.
    Atau lebih memilih untuk menampilkan postingnya seperti biasa saja?.
    Semuanya terserah anda, karena andalah yang berhak atas blog anda sendiri
    Hari Selasa, 13 Juli 2010 dengan 35 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

    Minggu, 11 Juli 2010

    Membuat: Daftar Isi Blog Dengan Kombinasi Script

    congcot

    Sebenarnya trik ini sudah banyak di posting oleh para blogger khususnya di Indonesia. Tampilan daftar isi yang dibuat oleh Abu Farhan (blogger terkenal dari Indonesia) sangat digemari oleh kebanyakan para blogger.
    Posting ini saya buat karena ada teman blogger yang bertanya bagaimana cara membuatnya. Untuk demo (contoh ketika membuat posting ini), silahkan klik daftar isi congcot.
    Nah, sekarang kita akan membuatnya dengan sedikit berbeda dalam CSS dibanding milik Abu Farhan, Saya tidak berani mengubah kode Java Scriptnya, karena Abu Farhan sendiri melarangnya. Jadi karena congcot suka sekali warna hijau, maka warna yang digunakan identik dengan warna hijau.

    Keunggulan...
    Bermacam-macam kelebihan tampilan daftar isi ini sangat banyak, diantaranya:
    congcot
    • Terdiri dari  judul dan isinya
    • Judul diambil dari label atau kategori blog kita
    • Ketika mulai membuka hanya satu judul yang menampilkan isi
    • Isi tiap baris berbeda warna
    • Posting yang terbaru akan ada tulisan new di akhir kalimat
    • Jika judul yang satu di klik, maka judul yang lain akan sembunyi

    Itulah sebagian keunggulan pembuatan daftar isi menggunakan metode ini

    Kendala...
    Masih ada blogger yang kurang beruntung dalam pembuatan daftar isi ini, bisa dibilang tidak sukses. Saya juga merasakan ketika ada pesan error yang membuat sedikit pusing dan merasa kurang beruntung. Tapi mudah-mudahan dengan metode langkah demi langkah yang diberikan oleh congcot, dapat membuat anda sukses dalam pembuatan daftar isi blog.

    Langkah...
    Ikutilah langkah demi langkah dengan cermat.
    1. Masuk ke www.blogger.com dengan account anda
    2. Pilih Entri Baru

      congcot
    3. Masukan Judul sesuai selera anda
    4. Klik Edit HTML (biasanya ketika membuka halaman posting baru, jendela berada di mode Compose, sekarang kita gunakan mode Edit HTML)

      congcot
    5. Masukan kode dibawah ini di area posting
    6. <link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js"> </script> <script src="http://www.congcot.co.cc/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"> </script> <script type="text/javascript"> var accToc=true; </script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript"> </script>
      Keterangan: ganti huruf yang bercetak tebal (www.congcot.co.cc) dengan nama domain blog anda.
    7. Abaikan jika ada Pesan Error (ada instruksi dibawah). Sampai sini juga sudah berhasil, tapi...
    8. Jika ingin posting ini tidak tampil dihalaman depan, klik Post Options, dalam Post tanggal dan waktu, pilih Dijadwalkan pada: isi tanggal dan waktu yang sudah berlalu, (seminggu yang lalu, atau sebulan yang lalu, atau setahun yang lalu)
    9. congcot
    10. Pilih Terbitkan Entri. Nah, jika ada pesan error seperti dibawah ini, ceklist berhenti menampilkan galat HTML
    11. congcot
    12. Selesai.
    Sekian trik posting kali ini, mudah-mudahan bermanfaat dan sukses untuk di praktekan.

    Intinya...
    Daftar isi merupakan faktor penting menurut saya. Karena dengan daftar isi, posting lama yang sulit dikunjungi pengunjung akan tampil dan tidak menutup kemungkinan akan dikunjungi oleh pembaca blog anda. Kegagalan dalam pembuatan sesuatu bukan sumber putus asa, tapi justru itu adalah awal dari kesuksesan. Kita harus yakin akan sukses. Semangat !.
    Hari Minggu, 11 Juli 2010 dengan 27 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

    Jumat, 09 Juli 2010

    Solusi Navbar Blogger, Menampilkan Atau Menghilangkan

    congcot

    Sesuai janji, saya akan posting kembali setelah dua minggu liburan, :) (permintaan maaf).
    Sekarang saya akan membahas tentang navbar blogger.
    Sudah tahu apa itu navbar?
    Navbar atau Navigasi Bar merupakan fasilitas standar yang dimiliki oleh Blogger.com. Letaknya berada di bagian paling atas dari blog. Berfungsi antara lain untuk mulai melakukan Sign In atau bisa juga membuat Blog baru, melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS Blogger.Com atau hal lain yang dapat dianggap merugikan dunia internet.
    Untuk lebih jelasnya silahkan lihat gambar dibawah ini :

    congcot
     NavBar Blogger
    Nah, pembahasan ini akan sangat panjang jika perselisihan antara boleh dihilangkan atau tidak, belum terpecahkan. Banyak posting yang menjelaskan bahwa menghilangkan navbar melanggar TOS blogger. tapi tidak sedikit pula yang meyakinkan bahwa tidak ada TOS blogger yang memperjelas pelanggaran ini.
    So, bagaimana solusinya?
    Karena menurut kebanyakan orang, navbar ini agak mengganggu penampilan blog, banyak para blogger yang berusaha menghilangkan, menyembunyikan, dan mengubah navbar itu sendiri.
    Kali ini congcot akan memberikan solusi berdasarkan pengalaman. Silahkan pilih salah satunya.

    Lebar...
    Solusi ini yang congcot gunakan (untuk saat ini, karena paling simpel), yaitu hanya mengubah lebar navbar menjadi 0. Caranya:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Masuk ke rancangan (tata letak), dan pilih menu edit html.

      congcot
    3. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>
    4. #navbar-iframe {height:0;}
    5. Simpan Template
    6. Selesai.
    Transparan...
    Solusi yang kedua hanya mengubah navbar menjadi transparan. Caranya:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Masuk ke rancangan (tata letak), dan anda akan memasuki daerah Elemen laman


      congcot
    3. Pilih edit pada navbar yang (backgroundnya) berwarna biru.
    4. Disana ada pilihan, silahkan klik cahaya transparan atau gelap transparan. Anda juga bisa memilih navbar lain sesuai selera.
    5. Klik Simpan, dan Selesai.
    Otomatis...
    Solusi ini yaitu menggunakan cara auto hide, navbar otomatis akan tampil jika krusor mengenai daerah navbar, dan sebaliknya, akan sembunyi jika krusor tidak ada di daerah navbar. Caranya:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Masuk ke rancangan (tata letak), dan pilih menu edit html.
    3. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>
    4. #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
    5. Simpan Template
    6. Selesai.
    Tampilan...
    Solusi selanjutnya adalah dengan memakai kode display:none dan atau visibility:hidden. Caranya:
    1. Masuk ke www.blogger.com dengan account anda.
    2. Masuk ke rancangan (tata letak), dan pilih menu edit html.
    3. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>
    4. #navbar-iframe {height:0px;visibility:hidden;display:none}
    5. Simpan Template
    6. Selesai.
    Itulah sedikit solusi dari congcot, sebenarnya masih ada solusi lain, tapi mungkin akan di posting di lain waktu karena akan sangat panjang jika dibahas sekarang.

    Intinya...
    Navbar merupakan fasilitas yang bagus dari blogger. Tapi kadang untuk sebagian orang, akan mengurangi keindahan tampilan blognya. Masalah mau ditampilkan atau tidak, itu terserah anda. Tidak perlu saling menyalahkan, karena blog anda adalah milik anda, dan andalah yang lebih berhak.
    Hari Jumat, 09 Juli 2010 dengan 37 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.

    Sabtu, 19 Juni 2010

    Optimalkan Luas Blog Dengan Menyembunyikan Widget (Hide/Show)

    congcot.co.cc

    Tips kali ini saya akan share tentang optimalis luas pada blog.
    Blog merupakan salah satu tempat kita yang akan dikunjungi oleh blogger (netter) lain. Mereka akan sangat senang jika pemandangan blog kita bagus. Salah satunya adalah dengan menyembunyikan widget baik isinya berupa iklan, obrolan, menu, link, dan yang lainnya.
    Menyembunyikan widget ini sangat berguna, apalagi untuk wiget yang isinya membuat loading blog kita lambat. Blog kita akan tetap muncul ketika mesin membaca widget yang kita sembunyikan.
    Langsung saja kita akan membuatnya.
    1. Masuk ke blogger dengan account anda, pilih rancangan (tata letak)
    2. congcot
    3. Masuk ke halaman edit laman
    4. Buatlah sebuah widget dengan memilih tambah gadget atau anda juga dapat edit widget yang sudah ada
    5. congcot
    6. Jika memilih tambah gadget, maka akan ada banyak pilihan, silahkan klik HTML/JavaScript.
    7. congcot
    8. Masukan judul terserah anda.
    9. congcot
    10. Copy kode dibawah ini, dan paste di area kode.
    11. <div style="text-align: center;"><div class="button-spoiler"><input value="klik disini untuk ngobrol" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampak&#39;; }" type="button" /></div><div class="spoiler"><div style="display: none;"><div style="text-align:center; font-size: small;"><br />Masukan kode gadget anda disini<br /></div></div></div></div>
      catatan: ganti huruf yang bercetak tebal dengan kata-kata yang anda suka
    12. Klik Simpan
    13. Selesai.
    14. Contoh tampilan dengan kata-kata saya: 
    congcot
       klik disini untuk ngobrol
    congcot
       Sembunyikan
    congcot
    Tampak


    Intinya...
    Optimalkan blog anda, untuk menarik pengunjung, baik dari segi penampilan, kecepatan, isi posting, dan lain sebagainya. banyak pengunjung adalah idaman setiap blogger. Mudah-mudahan kode ini berguna untuk semuanya dan menjadikan daya tarik tersendiri untuk blog anda.
    Hari Sabtu, 19 Juni 2010 dengan 34 Koment
    Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.