Menampilkan icon/image bulat di header blogMenampilkan icon/image bulat di header blog

Bukan sebuah image, icon, photo atau gambar yang sebelumnya sudah berbentuk bulat dengan format gif atau png, namun image ini berbentuk bujursangkar (kotak sama sisi) yang dibuat menjadi bulat dengan menggunakan border-radius property. Image juga bukan hasil upload melalui elemen header yang ada di "Dasboard » Page Element, namun sebuah image yang benar-benar baru dan untuk memasangnya di header blog dilakukan dengan menambah atau membuat kode css baru. Ukuran image dapat anda sesuaikan dengan tinggi header dan bisa berupa gambar apa saja.

Pasang Photo atau Image di Header BlogPasang Photo atau Image di Header Blog

Memasang atau menampilkan foto blogger, profil blogger atau image dalam bentuk apapun di header blog dapat dengan cepat dilakukan menggunakan kode css. Dengan menambahkan sebuah property background yang dilengkapi dengan pengaturan posisi dan pengatur ukuran maka sebuah tampilan baru yang lebih cantik bisa terjadi di blog anda. Image yang akan dipasang sebagai background ini sebenarnya tak dibatasi hanya dalam bentuk photo profil blogger, namun anda bisa bebas menampilkan gambar apapun. Yang terpenting saat menampilkan sebuah gambar di header blog adalah pada pengaturan ukuran dan posisi yang sekaligus juga telah disertakan kodenya.

New Blogger Template/Template Blogger Baru

Kode yang dipergunakan di template blogger baru dan template lama (tata letak & klasik) tidaklah sama, oleh karena itu dalam tutorial ini disertakan 2 (dua) macam bentuk kode untuk blogger baru dan blogger lama. Kode untuk blogger lama juga bannyak dipergunakan di template hasil download.

header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Atau bisa juga dalam bentuk seperti ini:

.header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

.Header{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

.Header-outer{
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Old Blogger Template/Template Blogger Lama

Template blogger lama seperti template "Minima Blue, Minima Dark, Harbor, Debim, Rounders. Kode ini juga sering digunakan dibanyak template hasil download. Untuk template download ada yang menggunakan bentuk syntax berbeda misalnya #header-wrap atau #header dan beberapa bentuk lainnya.

#header-wrapper {
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Keterangan:

• Ganti https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg dengan URL image atau photo yang ingin anda tampilkan di header blog.
• Gunakan image dengan ukuran yang tidak terlalu besar, kira-kira seukuran tinggi header agar loading blog tidak terlalu terbebani.
• background-size:...px ...px: untuk mengatur lebar dan tinggi image. Gunakan satuan px(pixel). Anda juga bisa merubahnya menjadi background-size:..px auto; jika diinginkan tingginya mengikuti perbandingan lebar (width), atau background-size:auto ..px; ketika akan dibuat lebar otomatis dan tinggi yang ditentukan dalam nilai px.
• background-position:98% 10%; artingya:
  berjarak senilai 98% dari kiri dan 10% dari atas. Jika anda ingin merubahnya di posisi sebelah kiri maka nilai 90% bisa diperkecil hingga 2% s/d 10%. Semakin besar nilai prosentase maka gambar semakin ke kanan atau semakin kebawah.
• background-repeat:no-repeat; untuk membuat gambar tidak berulang (hanya ditampilkan satu gambar). Jika anda ingin gambar berulang, misalnya yang digunakan bukan photo melainkan sebuah background untuk memenuhi seluruh header maka no-repeat dirubah menjadi repeat.

Cara Menyimpan/menggunakan kode css

1. Login ke BloggerKlik untuk login ke Blogger!
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Letakkan kode css di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai! Silahkan coba cek hasilnya dengan membuka blog anda!

Catatan/Keterangan:

Jika anda ingin menggabungkan kode css untuk menampilkan image seperti yang ada di atas dengan kode default blog (kode yang sudah ada di blog), maka carilah syntaxnya yang sama, kemudian kode css di jadikan satu dan diletakkan di bawah kode yang sudah terpasang.

Contoh kode default blog:

#header-wrapper {
        width:860px;
        margin:0 auto 10px;
        border:1px solid $bordercolor;
}

Bentuk kode yang diperbarui dengan tambahan kode css baru:

#header-wrapper {
        width:860px;
        margin:0 auto 10px;
        border:1px solid $bordercolor;
        background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
        background-repeat:no-repeat; /* atur pengulangan background */
        background-position:98% 10%; /* 90% jarak dari kiri, 10%  jarak dari atas */
        background-size:100px 100px; /* untuk mengatur width dan height */
}

Buat & rubah posisi Blog Title di kiri, tengah (Center) dan kananBuat & rubah posisi Blog Title di kiri, tengah (Center) dan kanan

Blog title atau nama blog default blogger berposisi di sebelah kiri header blog. Perubahan untuk membuat tampilan blog lebih menarik sering harus melibatkan perbahan posisi blog title ini. Posisi di sebelah kiri yang memang merupakan posisi default bisa dengan mudah dirubah menjadi di kanan atau ditengah (center) dengan menambahkan kode css. Kode css dapat ditambahkan secara langsung di syntax .Header h1 yang bentuknya seperti contoh di bawah ini:

.Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 {
      font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #3399bb;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}

atau dengan membuat syntax baru yang sama dengan penambahan property css yang diperlukan yang diletakkan di atas kode ]]></b:skin>

Blogger Hack Ganti Nama Autor di Post Footer & Commnt BoxBlogger Hack Ganti Nama Autor di Post Footer & Commnt Box

Dengan trik ini anda dapat menampilkan nama berbeda, baik nama yang lebih panjang ataupun lebih pendek, atau bahkan nama yang berbeda dari nama yang selama ini ditampilkan blogger sebagai nama tampilan/user. Nama author yang akan kita rubah ada di halaman posting pada bagian post footer yang terletak tepat di bawah materi posting, dalam boks yang di dalamya juga berisi hari & tanggal posting, serta daftar label posting. Juga akan terlihat di setiap komentar yang diberikan oleh author. Letaknya di sebelah kanan icon author comment.

CSS Hack buat komentar Admin tampil beda di Blogger Threaded CommentCSS Hack buat komentar Admin tampil beda di Blogger Threaded Comment

Klik untuk perbesar gambar!Hanya dengan kode css! Trik yang sama sekali berbeda dengan apa yang selama ini anda jumpai diberbagai tutorial (berbahasa Inggris atau Indonesia). Blogger hack kali ini akan mengetengahkan sebuah trik memanfaatkan sedikit celah yang ada dalam kode html blogger di New Blogger Threaded Comment. Anda hanya perlu menambah beberapa kode css. Ya... hanya kode css dan sama sekali tak ada secuilpun javascript. Sangat aman untuk loading blog!
Cara membuat tampilan berbeda pada author comment memang dikenal dengan dua cara:

• Menggungkan javascript:
  Trik ini dengan mudah akan anda jumpai karena hampir semua tutorial untuk membuat komentar admin berbeda sudah mengupasnya secara tuntas. Semua tutorial memanfaatkan jQuery untuk membuat sebuah background baru untuk komentar author/admin. Background yang berbeda dengan komentar pengunjung ini juga disertai border yang style dan warna serta ukuran tebalnya bisa dirubah.
• Menggunakan kode css:
  Trik yang belum banyak digunakan dan sementara ini tutorialnya hanya ada di gubhugreyot. Sebuah trik yang teramat sederhana dengan mengekplorasi kemampuan kode css serta celah yang ada. Bagi anda yang blognya tidak/belum menggunakan jQuery, akan lebih menguntungkan jika menggunakan trik ini. Anda tak perlu menggunakan jQuery hanya sekedar untuk background komentar admin!

Trik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded ComentTrik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded Coment

Menampilkan setiap icon pemberi komentar dalam bentuk bulat yang diberi border ternyata membuat tampilan semakin menarik. Dengan menambah sedikit kode css yang diletakkan di atas kode ]]></b:skin>, maka icon di blogger comments yang sebelumnya berbentuk kotak (bujur sangkar) akan terlihat berbeda dengan bentuk barunya. Akan lebih manis jika anda juga menambahkan efek shadow melalui kode css box-shadow property.

Ganti Icon Author Comment di Blogger Threaded CommentGanti Icon Author Comment di Blogger Threaded Comment

Icon blog author di blogger threaded comment berfungsi sebagai penanda bahwa si pembuat komentar adalah author/penulis. Bentuk icon tersebut seperti ini "Icon blog author yang digunakan di blogger threaded comment. Icon berukuran 18px x 18px dan digunakan sebagai penanda bahwa si pemberi komentar adalah author atau penulis.". Icon blog author akan terlihat di kotak komentar, tepatnya di atas teks komentar dan hanya akan muncul ketika komentar dibuat oleh author. Jika melihat icon ini mungkin beberapa orang masih "bingung" dengan maksud symbol tersebut, sehingga mungkin akan lebih menarik dan lebih mudah dipahami jika anda menggantinya dengan icon profil author sesungguhnya. Agar bisa merubah icon ini menjadi icon author, anda harus membuat sebuah icon bergambar profil anda dalam ukuran kecil sebesar 18px s/d 30p (dibatasi maksimal 30px agar tidak terlalu besar).

Trik Buat Background di Blogger Comment EditorTrik Buat Background di Blogger Comment Editor

Tak banyak yang dapat kita lakukan di blogger comment editor, namun sekalipun demikian satu atau dua perubahan kecil diharapkan bisa memberi sebuah sentuhan bagi keindahan blog. Blogger comment editor atau boks yang biasa digunakan pengunjung untuk menuliskan komentar tak melulu harus ditampilkan polos seperti saat anda membuat blog di blogger atau seperti saat ini ketika anda belum terpikirkan untuk membuatnya terlihat berbeda dan lebih menarik. Sebuah background color atau background image dapat menciptakan perubahan yang cukup drastis dari blogger comment editor. Trik yang akan kita sertakan dalam posting ini menyertakan dua macam kode css, yang masing-masing menggunakan background color dan background image. Jika anda ingin menggunakan bentuk background image berbeda, silahkan ganti URL background image yang telah disertakan di kode css-2.

Trik Merubah Posisi Blogger Comment Editor di Kiri, Kanan & Tengah/CenterTrik Merubah Posisi Blogger Comment Editor di Kiri, Kanan & Tengah/Center

Posisi Boks Blogger Comment Editor selalu terletak di sebelah kiri karena setting defaultnya memang seperti itu. Merubah Comment Editor di posisi yang berbeda, seperti misalnya di kanan atau tepat ditengah-tengah (center of position) mungkin sedang anda pikirkan. Tentu saja ada hal yang cukup menarik dengan melakukan pengaturan posisi seperti ini. Posisi center mungkin satu penataan yang paling diminati, sekalipun tak menutup kemungkinan meletakkannya disebelah kanan bisa saja menjadi pilihan unik yang membuat blog menjadi berbeda dengan blogger manapun.

Trik Mengatur Lebar/Width Blogger Comment EditorTrik Mengatur Lebar/Width Blogger Comment Editor

Blogger Comment Editor adalah sebuah box yang berfungsi sebagai tempat pengunjung untuk menuliskan komentar. Box ini dihasilkan melalui sebuah iframe dimana di dalamnya terdapat textarea yang kemudian ditampilkan sebagai comment editor. Blogger Comment Editor mempunyai tinggi box yang sudah diatur pada ketinggian tertentu, sedang lebarnya bersifat fleksibel dan dapat diatur hingga lebarnya sebesar lebar halaman posting. Pengaturan lebar pada comment box editor memberi peluang bagi blogger untuk melakukan beberapa modifikasi penataan kolom komentar. Anda bisa membuat berbagai posisi penempatan boks comment editor, misalnya (di kanan, kiri atau ditengah-tengah halaman/center).

Change Text Selection ColorChange Text Selection Color

Jika anda mencoba untuk mengcopy text pada sebuah blog/web, maka bagian teks yang anda pilih akan berubah background dan warnanya. Dengan memanfaatkan kode css, background dan warna default text selector ini dapat dirubah sesuai selera. Anda bisa merubah warnanya saja atau sekaligus background-nya. Kode css simpan di atas kode ]]></b:skin> yang letaknya sedikit di atas tag penutup head (</head>).

Kode Paling Tepat Menghilangkan Navbar BloggerKode Paling Tepat Menghilangkan Navbar Blogger

Ada banyak sekali tutorial tentang cara menghapus atau menghilangkan navbar blogger. Di New Blogger Template ternyata tak sepenuhnya berhasil diterapkan. Jika anda mengalami hal seperti itu, dimana sekalipun navbar tak terlihat, namun masih menyisakan ruang kosong di atas header blog, silahkan untuk menggunakan kode css di bawah ini. Hanya satu kode CSS tanpa perlu menambah attribute !important, namun ditanggung navbar iframe blogger akan lenyap tanpa sisa dalam bentuk apapun. Silahkan kode css disimpan di atas ]]></b:skin> yang posisinya beberapa baris di atas kode </head>.