Trik Upload Image di Header BlogTrik Upload Image di Header Blog

Ada sebuah fitur yang disediakan blogger untuk upload image guna memasang/membuat sebuah background image di header blog. Anda dapat mengupload baik dari folder PC ataupun dari image yang tersimpan di image hosting (URL). Sedikit trick ini perlu disampaikan karena saat upload dari URL sering kali bikin bingung karena image tak dapat segera terupload dan muncul di header blog. Ini sangat berbeda dengan kita menggunakan upload image yang berasal dari folder PC.

Blogger Hack fixed width & height header inner Blogger Template DesignerBlogger Hack fixed width & height header inner Blogger Template Designer

Header blog di Blogger Template Designer (Perancang Template Blogger) memang dibuat fleksibel. Ketinggian header blog sangat bergantung kepada variabel yang ditampilkan di header seperti image yang diupload melalui halaman Tata Letak » Elemen Laman (Page Elemen), Ukuran font yang digunakan, panjang pandeknya nama blog, dan deskripsi blog.
Beberapa blogger ingin hanya menampilkan image dalam ukuran kecil di header blog yang diupload melalui elemen header di halaman Tata Letak, namun ketika image berhasil diupload, maka lebar blog title dan header blog description tiba-tiba ikut menyempit hingga justru terlihat meninggi disebelah kiri halaman blog. Dengan trik dibawah ini, semua permasalahan diheader blog akan teratasi dengan melakukan beberapa penambahan kode di bagian body. Perubahan memang terpaksa harus dilakukan melalui bagian ini karena semua pengaturan header berkaitan dengan penambahan image di blogger template designer tidak dilakukan melalui kode css yang ada diantara tag pembuka dan penutup head.

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>

Membuat Link Title & Open in New Tab di Tab Menu BloggerMembuat Link Title & Open in New Tab di Tab Menu Blogger

Jika anda sudah membuat tab menu horizontal blogger (navigasi menu horizontal) memanfaatkan fitur Laman atau Pages yang terdapat di dasbor (dasboard), maka di bawah header atau di atas post title akan terdapat sebuah navigasi menu horizontal yang berisi link ke posting di halaman static atau ke blog/web lain. Dalam tab horizontal ini sebenarnya tetrsedia kemungkinan untuk menampilkan link title saat cursor diarahkan ke setiap menu (muncul dalam bentuk tip) dan bisa juga dibuat menjadi open in new tab (dg kode target="_blank"), cuma kita harus melakukan penambahan kode di bagian body setelah dilakukan Expand Template Widget.

Buat Tab Horizontal Blogger dg Fitur Laman/PagesBuat Tab Horizontal Blogger dg Fitur Laman/Pages

Klik gambar agar anda bisa melihat screenshots dalam ukuran yang lebih besar!Horizontal Tabs Menu atau Tab Navigasi Horizontal Blogger merupakan sebuah daftar menu yang terletak di bawah header blog atau di atas halaman posting. Tabs ini memuat link atau hyperlink yang dapat berisi daftar posting di halaman statis dan alamat blog/web lain. Dengan memanfaatkan fitur "Laman" atau "Pages", sebuah tabs horizontal dapat dibuat tanpa perlu menambah kode css baru. Blogger telah menyediakan semua kebutuhan kode berkaitan dengan terbentuk dan berfungsinya tabs/navigasi horizontal ini. Anda bisa langsung membuatnya melalui halaman "Dasbor/Dasboard" - "Laman/Pages", kemudian memasukkan "Nama dan Link" untuk "tabs dengan alamat blog/web lain" dan "membuat posting beserta judulnya" saat ingin menampilkan "judul posting halaman statis" di tabs horizontal. Agar lebih jelas silahkan klik gambar di atas dan ikuti tutorialnya.

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.

Trik sembunyikan Navbar Blogger dg css3 transitionTrik sembunyikan Navbar Blogger dg css3 transition

Dengan css3 transition, selain navbar hilang total dari pandangan dan body blogger benar-benar bisa mepet di bagian atas tanpa menyisakan sedikitpun ruang, navbar ini masih tetap bisa digunakan karena dengan sedikit sentuhan hover seluruh bagian navbar akan dimunculkan. Fixed position membuat munculnya navbar tak merubah tatanan blog. Bagian atas tetap rapat dan anda bisa menggunakan navbar sebagaimana layaknya navbar blogger.
Selain fungsi utamanya sebagai "penghilang navbar", css3 transition juga menciptakan animasi indah saat navbar muncul dan menghilang. Tentu saja hal ini akan membuat blog jadi semakin menarik.

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 Button Reply Comment css3 di Blogger Threaded CommentTrik membuat Button Reply Comment css3 di Blogger Threaded Comment

Button replay comment css3 untuk blogger threaded comment bukan sekedar button replay comment biasa karena button replay comment ini akan memperlihatkan animasi perubahan warna background dan warna teks ketka cursor diarahkan di atasnya. Untuk mendapatkan efek animasi pada button replay digunakan property css3 transition yang memungkinkan terjadinya transisi perubahan warna, background serta background position. Agar button reply comment terlihat lebih menarik, sebuah background image gradasi yang transparan dengan format file png kita manfaatkan.

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.

Trik merubah icon Author Comment jadi teks berjalan di Blogger Threaded CommentTrik merubah icon Author Comment jadi teks berjalan di Blogger Threaded Comment

Blogger hack kali ini mencoba merubah icon blog author yang terletak di kotak komentar (di atas teks komentar author/penulis) yang bertanda "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." menjadi sebuah teks berjalan memanfaatkan kode css3 animation. Efek teks berjalan pada icon blog author blogger threaded comment tak memungkinkan untuk dibuat menggunakan kode html marquee sehingga kita gunakan css3 animation. Fungsinya akan tak berbeda karena dengan css3 animation ini maka teks akan berjalan dari kanan ke kiri dengan kecepatan yang dapat diatur juga.

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

Blogger Hack: Create a message in Blogger Comment BoxBlogger Hack: Create a message in Blogger Comment Box

Selain memanfaatkan fitur yang telah disediakan oleh blogger, untuk membuat pesan di kotak komentar blogger dapat juga dilakukan dengan cara yang lain. Sebuah cara yang lazim dikenal sebagai hack. Pembuatan pesan dilakukan dengan menambah kode html yang terletak dibagian body diantara tag pembuka (<body>) dan tag penutupnya (</body>). Jika hanya menggunakan fitur yang telah disediakan blogger, tampilan pesan hanya akan terlihat sesuai kode default blogger, sedang jika melakukan perubahan dan penambahan kode html (hack) maka tampilan pesan dapat dibuat sesuai selera. Anda dapat merubah ukuran font, warna teks, memilih jenis font, membuat link yang "open in new tab" dengan kode "target="_blank" atau bahkan jika dikehendaki anda dapat menampilkan background atau pesan dalam bentuk image.

Create a message/membuat pesan in Blogger Comment BoxCreate a message/membuat pesan in Blogger Comment Box

Klik untuk melihat screenshot dalam ukuran yang lebih besar!Blogger menyediakan sebuah fitur dalam dasbor yang memungkinkan pengguna untuk membuat sebuah pesan atau kalimat pribadi untuk ditampilkan di kotak komentar. Bahkan, teks atau kalimat/pesan ini dapat dibuat sebagai sebuah hyperlink yang dapat anda isi dengan alamat web/blog lainnya. Pesan pribadi ini mungkin dapat anda isi dengan sebuah kalimat ucapan terimakasih atau kalimat lain yang memberi dorongan agar pembaca tidak sungkan untuk menuliskan sebuah komentar yang bermanfaat bagi SEO. Ya..., semakin banyak komentar masuk tentunya akan membuat popularitas blog semakin terangkat.

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

Menambah Navigasi Angka u lengkapi Newer-Older BloggerMenambah Navigasi Angka u lengkapi Newer-Older Blogger

Membuat sebuah navigasi halaman blogger baru yang dengan mudah bisa menampilkan beberapa posting sekaligus, seperti yang ada di homepage sangat penting karena akan membuat pengunjung lebih mudah menelusuri data posting yang ada di blog. Kemampuannya untuk diatur dalam menampilkan jumlah posting juga membuat widget ini sangat menarik dan mempunyai nilai lebih. Anda bisa mengatur jumlah posting yang ditampilkan dalam jumlah yang diinginkan, sekaligus juga bisa mengatur berapa banyak angka navigasi yang akan digunakan. Menggunakan navigasi angka ini juga sangat baik untuk melengkapi navigasi blogger default yang hanya ditampilkan di halaman posting yang berfungsi untuk mengakses posting yang lebih baru dan lebih lama (newer & older post). Agar beban loading tidak terlalu berat ketika pengunjung memanfaatkan fasilitas navigasi yang baru ini, sebaiknya anda mengatur jumlah tampilan posting disetiap halaman dalam jumlah yang tidak terlalu banyak. Menggunakan readmore menjadi sebuah keharusan agar tidak semua materi posting ditampilkan secara utuh yang pada akhirnya hanya akan menjadi beban lebih bagi loading blog.

Menampilkan Label Posting di atas Post Title (Breadcrumb)Menampilkan Label Posting di atas Post Title (Breadcrumb)

Navigasi Breadcrumb adalah sebuah hiearchy label posting yang diawali dari homepage. Link homepage berada diujung paling kiri baru kemudian diikuti induk label hingga yang terakhir adalah anak terkecil label. Sebuah hal yang sementara ini masih mustahil untuk ditampilkan secara sempurna karena blogger masih belum menggunakan hiearchy label seperti halnya yang digunakan di widget arsip. Sekalipun demikian, menampilkan label posting di atas setiap judul posting (hanya di post page) tetaplah sangat berguna. Selain membuat blog menjadi lebih menarik, menampilkan label posting di atas judul posting akan lebih mempermudah pembaca untuk mengakses posting berdasar label.

D E M O

Anda bisa melihatnya di atas judul posting.

Cara membuat

1. 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)
   • Expand Widget Template
   • Cari Kode : <b:includable id='post' var='post'>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Ganti kode tersebut dengan xHTML yang tersedia di bagian bawah.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog halaman Posting untuk melihat hasilnya.

xHTML

<b:includable id='post' var='post'>
<div style='padding:5px 10px 5px 10px;margin: 0 0 10px 0;font-size:90%;line-height:1.2em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObOUtoyc75QTDpT9svVftM9a86VNnx4T5kFhww9ZNvp4K9ZSHjMarJooE4j20HZ1a6u5VyIJqNEaDvmeZPYeyrQZ2U4W3WKOF_sCrCK-fTYlJ56c858fynzrBXU01lH0IXycwBfBC494N/s1600/gradient-transparent-WG.png) top left repeat-y;border-top:1px dotted #888;border-bottom:1px dotted #888;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:href='data:blog.homepageUrl' rel='tag'> Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
<br/><i><data:post.title/></i>
</b:if>
</div>

Membuat 5 Elemen Baru di atas Footer BloggerMembuat 5 Elemen Baru di atas Footer Blogger

Klik untuk memperbesar gambar!Tak ada elemen blogger yang berukuran kecil karena jumlah maksimal elemen yang telah disediakan blogger melalui pilihan yang tersedia di "Perancang Template Blogger - Tata letak hanya berjumlah 3 elemen di bagian footer. Anda bisa melihatnya melalui Dasbor - Templpate - Ubahsuaian - Tata Letak (perancang Template Blogger).
Membuat elemen baru yang lebih kecil memungkinkan kita membuat 5 atau lebih elemen dalam deret horizontal. Anda bisa menggunakan elemen baru ini untuk memuat widget/gadget baru dalam ukuran yang relatif kecil sehingga dalam satu deret horizontal akan bisa ditampilkan beberapa widget sekaligus. Ukuran yang lebih kecil seperti ini bisa dimanfaatkan untuk box adsense/iklan, misalnya, atau anda bisa manfaatkan juga sebagai box widget bagi kode2 css, javascript.

Menghilangkan Overflow pada Body (Halaman Blog)Menghilangkan Overflow pada Body (Halaman Blog)

Meniadakan atau menghilangkan overflow body (yang terlihat di halaman blog bagian bawah) bertujuan untuk membuat blog terlihat lebih rapi sekaligus membuat seluruh bagian blog selalu terlihat tanpa perlu menarik2 scrollbar pada bagian horizontal. Ada beberapa cara untuk membuat kondisi seperti ini. Tentu saja cara yang pertama dengan memanfaatkan fitur pengaturan yang telah disediakan blogger. Cara yang lain adalah dengan menambahkan kode css di atas kode ]]></b:skin> yang letaknya sedikit di atas tag penutup head (</head>).

Trik Merubah Nama Author (Penulis) di Post Footer BloggerTrik Merubah Nama Author (Penulis) di Post Footer Blogger

Yang dimaksudkan sebagai Nama Author (Penulis) di Post Footer adalah sebuah teks atau teks link yang berisi nama penulis posting (author) dan biasanya terletak di bawah posting (di homepage/beranda dan halaman posting). Anda akan melihatnya terletak tepat tepat di atas kolom komentar ketika yang dibuka adalah post page (halaman posting).

Trik mengganti nama penulis (author) di post footer blogger adalah sebagai sebuah upaya untuk membuat tampilan blog yang unik dan berbeda dibandingkan dengan blog lain. Diluar hal tersebut, dengan trik ini juga diharapkan menjadi sebuah panduan bagi blogger untuk lebih mengenal kode html yang digunakan ditemplate. Seperti pepatah mengatakan "Tak kenal, maka tak sayang", oleh karena itu semoga berbagai tips dan tutorial blogger yang terpostingkan dalam blog ini akan semakin membuat anda lebih mengenal desain blog, sekaligus lebih memahami berbagai kode yang digunakan sehingga memunculkan rasa sayang dan kecintaan untuk terus berkarya dengan posting-posting yang baru.

Trik Merubah Posisi Readmore di Kanan, Kiri & TengahTrik Merubah Posisi Readmore di Kanan, Kiri & Tengah

Readmore tidak harus selalu di kiri halaman blog, di kanan atau ditengah-tengah. Anda bisa merubahnya sesuka hati disesuaikan dengan kenyamanan hati saat melihatnya atau agar lebih terlihat pas di blog. Trik merubah posisi readmore blogger ini didasarkan pada kode html yang digunakan di New Blogger Template. Selain merubah posisi, dengan sedikit menambahkan kode yang lain, bahkan anda bisa merubah ukuran teks link readmore atau jika dikehendaki dapat pula dirubah warna tampilannya. Semua perubahan hanya dilakukan melalui kode css, sehingga tak perlu merubah xHTML yang terdapat diantara tag pembuka body & tag penutupnya. Sebuah trik yang sangat praktis dan dipastikan dapat dilakukan dengan mudah oleh siapapun juga.

Teks & Image dg Efek Kedip (Blink Effect) css3 AnimationTeks & Image dg Efek Kedip (Blink Effect) css3 Animation

Sekalipun dengan mudah kita dapat membuat efek berkedip dengan menggunakan blink efek melalui text-decoration property (blink), namun efek kedip ini hanya bisa digunakan pada teks. Dengan memanfaatkan kode css3 animation, sebuah efek kedip bisa digunakan untuk semua hal. Anda bisa menerapkannya pada image, teks, box atau yang lainnya. Membuatnya terhitung cukup mudah dan kode yang digunakanpun tidak terlalu banyak. Anda bisa memanfaatkannya melalui "class", "id" atau menggunakan "syntax bebas" yang saat ini juga didukung oleh semua browser.

Tips Penataan Link/Styling LinksTips Penataan Link/Styling Links

Link berfungsi untuk menghubungkan sebuah bagian blog/web dengan bagian yang lain dari blog atau dengan bagian blog/web yang lain. Link bisa berbentuk teks (teks link) atau link image/gambar (image link). Jika dalam bentuk teks, biasanya link dibuat dalam rupa berbeda dengan teks yang laian. Bisa dengan menggunakan warna berbeda, ditambahkan sebuah background, garis bawah (text-decoration:underline), bentuk huruf atau yang lebih tebal. Ciri utama sebuah link adalah berubahnya bentuk cursor ketika diarahkan tepat di atasnya. Link dibentuk menggunakan kode css link property untuk menndukung kode html tag "a" agar mampu memberikan sebuah "tanda link" secara maksimal. Agar penanda ini bekerja secara optimal, aturan baku harus diterapkan pada setiap bagian (elemen) css link property. 4 bagian property link yang harus ditata secara berurutan adalah sebagai berikut:

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

Animasi Hover Link Widget Archive Blogger dg css3 AnimationAnimasi Hover Link Widget Archive Blogger dg css3 Animation

Animasi link di widget archive bisa dibuat dengan beberapa cara dan dalam berbagai bentuk yang berbeda (dg kode css atau javascript). Setelah di posting sebelumnya "Animasi Link Widget Archive dg css3 TransitionKlik disini untuk mengikuti panduan cara membuat animasi hover link dg css3 transition di widget archive blogger ", kita akan membuat animasi yang jauh lebih menarik dengan kode css3 animation. Sedikit yang membedakan terutama pada animasi gerak link. Jika di posting sebelumnya saat cursor menyentuh link di widget archive animasi yang terjadi berupa pergeseran link ke kiri, maka melalui kode css3 animation bentuk animasinya berupa pergerakan link ke arah kanan yang dibarengi dengan perubahan teks link dalam bentuk transparan, baru kemudian link akan terlihat kembali bersamaan dengan pergeseran ke kiri.

D E M O

Silahkan lihat widget arsip melalui link di bawah ini, kemudian arahkan cursor diatas setiap link widget arsip.
Demo Animasi Link Widget Archive Blogger dg css3 AnimationSilahkan klik di link ini untuk melihat bagaimana bentuk animasi link di widget archive blogger yang diciptakan dengan css3 animation.

Kode CSS untuk membuat Animasi Hover LInk di Widget Archive Blogger

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}

Cara menggunakan kode CSS animasi widget archive blogger

1. 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.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan Animasi Widget Archive blogger anda!

Posisi kode css di template :

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}
]]></b:skin>

Animasi Link Widget Archive dg css3 TransitionAnimasi Link Widget Archive dg css3 Transition

CSS3 animation menjadi sebuah pilihan yang sangat menarik untuk pengembangan desain blog. Disamping mudah dipelajari, perkembangan yang terjadi pada css3 transition, transform dan css3 animation memungkinkan banyak fungsi yang sebelumnya hanya bisa dibangun dengan javascript, kini cukup dilakukan dengan kode css. Salah satu yang akan kita buat adalah animasi link di widget archive blogger. Dengan css3 transition sebuah link di widget archive bisa bergerak ke arah kanan atau kiri dalam bentuk animasi. Gerakan pergeseran dapat diatur dengan durasi kecepatan tertentu dalam hitungan detik (second atau milisecond).

Membuat List di Widget Archive/Arsip BloggerMembuat List di Widget Archive/Arsip Blogger

Membuat list di widget arsip blogger sangat bermanfaat karena memudahkan pembaca membedakan setiap item dari deret judul posting yang ditampilkan. List menjadi sebuah penanda setiap judul posting, dimana bentuk list dapat kita pilih dari beberapa yang tersedia, seperti misalnya circle, decimal, square, disc dan georgian. Untuk list dalam bentuk icon/gambar lebih banyak pilihan yang dapat dilakukan. Anda bisa membuatnya atau browsing untuk mendapatkan berbagai macam image/icon list. Kode CSS pembentuk list sangat simpel karena hanya menggunakan satu deret kecil kode css. Kode ini bisa disimpan di atas kode ]]></b:skin>.

Automatic thumbnail on Blogger Readmore - Menampilkan Thumbnail di ReadmoreAutomatic thumbnail on Blogger Readmore - Menampilkan Thumbnail di Readmore

Contoh penggunaaan Automatic Thumbnail on Blogger Readmore.Jika anda menginginkan sebuah thumbnail selalu ditampilkan ketika readmore digunakan, ini akan menolong anda. Cara ini adalah sebuah pilihan menggunakan readmore tanpa javascript yang memungkinkan anda untuk tetap bisa mengatur seberapa banyak teks yang akan ditampilkan melalui readmore. Tentu saja kita harus menggunakan cara manual dengan memasukkan kode jump break. Menggunakan cara seperti ini adalah sebuah solusi ketika kita melihat bahwa "Auto Readmore with Thumbnail" tanpa script hanya menampilkan karakter posting sangat terbatas (sejumlah 140 karakter) sehingga readmore akan menyisakan ruang kosong yang cukup besar.

Trik Menggunakan Kode CSS di bagian tertentu blogTrik Menggunakan Kode CSS di bagian tertentu blog

Trik ini dimaksudkan untuk membuat fungsi baru kode css. Anda dapat membuat kode css yang benar-benar baru dan mempunyai fungsi tertentu, meniadakan fungsi kode css yang telah ada agar tidak berfungsi dibagian tertentu blog atau hanya merubah beberapa variabel tertentu dari kode css agar dibagian tertentu dari blog ditampilkan berbeda dari bagian blog lainnya. Agar lebih jelas, sebagai contoh misalnya anda ingin dihalaman utama (homepage) hanya ditampilkan judul posting (post title) tanpa konten sama sekali, menghilangkan sidebar di homepage, merubah warna link di homepage dan post page menjadi berbeda, membuat background homepage berbeda dengan post page, menggunakan font berbeda di posting tertentu (berdasar URL posting) serta berbagai perubahan dan perbedaan lainnya. Anda bisa mengembangkan trik ini untuk membuat blog menjadi jauh lebih berbeda & jauh lebih menarik.

Animasi Image Profil Blogger dg css3 AnimationAnimasi Image Profil Blogger dg css3 Animation

Kini sudah saatnya para blogger untuk menggunakan kode css3 transisiton, css3 transformation dan css3 animation untuk mengembangkan desain blog agar menjadi lebih menarik. Hanya melalui css3 transition & css3 transformation berbagai fungsi menarik & cantik sudah bisa dibuat, apalagi jika kita menggabungkannya dengan css3 animation. Anda bisa melihat salah satu hasil penggunaan css3 animation yang digabungkan dengan css3 transition, css3 transformation dan beberapa css property lainnya melalui demo animasi image profil blogger di bawah. Animasi pada image profil blogger murni menggunakan kode css dan sama sekali tanpa javascript. Kode CSS animasi seperti yang digunakan dalam image blogger dalam demo dapat anda lihat dan gunakan. Silahkan copy dan mungkin bisa anda kembangkan untuk mendapatkan bentuk animasi yang berbeda.

Menampilkan Deskripsi Blog melalui Attribute TitleMenampilkan Deskripsi Blog melalui Attribute Title

Trik menghilangkan dan mengganti Icon Bogger di Widget profileTrik menghilangkan dan mengganti Icon Bogger di Widget profile

Jika mungkin anda tertarik untuk menghilangkan atau mengganti icon blogger di widget profile blogger, inilah cara yang paling tepat. Anda hanya perlu menambah sedikit kode CSS di atas kode ]]></b:skin>, maka dalam sekejap ucon blogger akan hilang atau berganti dengan icon baru. Bahkan, jika ingin menambah daya tarik tampilan widget profle, anda bisa menggunakan sebuah image/gambar animasi (bergerak), seperti misalnya bendera negara atau emoticon dan berbagai gambar animasi lain dengan ukuran kecil. Gunakan icon pengganti dengan ukuran lebar max 20px dan tinggi 20px.

Trik merubah Image Profil Blogger menjadi berbentuk bulatTrik merubah Image Profil Blogger menjadi berbentuk bulat

Semua image profile blogger yang ditampilkan di halaman blog sebagai pelengkap widget profile (About me atau Tentang saya) ditampilkan dalam bentuk kotak dengan ukuran tinggi atau lebar sebesar 80px. Bentuk profile image tak harus selalu dalam bentuk bujur sangkar (segi 4 sama sisi), namun bisa juga meninggi atau melebar dengan salah satu sisi 80px dan sisi yang lain kurang dari 80px, yang bergantung pada bentuk & ukuran image profile yang diupload melalui halaman dasbor blogger (seperti dalam gambar di samping.

Trick Membuat Hyperlink Blog Title di HomepageTrick Membuat Hyperlink Blog Title di Homepage

Sebuah celah pada Blog Title atau Nama Blog bisa dimanfaatkan sebagai sebuah hyperlink dengan memasang sebuah alamat blog atau web yang berbeda. Celah ini bisa kita dapatkan di homepage (halaman utama blog) dimana blog title hanya ditampilkan sebagai teks biasa (bukan link). Hyperlink baru kita buat dengan menambahkan html baru berupa sebuah tag "a" yang dilengkapi dengan link title. Trik ini sudah dicoba di New Blogger template dengan hasil sempurna. Selain membuat blog menjadi lebih menarik, namun melalui hyperlink ini diharapkan mampu mendatangkan lebih banyak pengunjung di blog/web kita yang lain.

Membuat Post Title atau Judul Posting sebagai HyperLinkMembuat Post Title atau Judul Posting sebagai HyperLink

Jika anda mencermati post title atau judul posting yang ada di halaman posting, maka akan terlihat perbedaan dengan yang terdapat di homepage (halaman utama blog). Post title tersebut bukanlah sebuah link sehingga ketika anda mencoba mengarahkan cursor di atasnya (menyorot dg cursor) sama sekali tak ada reaksi apapun. Ini akan berbeda dengan yang kita jumpai di homepage karena post title yang tertuliskan disini merupakan sebuah link. Link yang berfungsi mengarahkan kita ke halaman posting (alamat) sesuai dengan post title yang terlihat.

Akan sangat bermanfaat jika post title di halaman posting kita rubah menjadi sebuah hyperlink. Dengan perubahan ini post title bukan lagi sebuah teks biasa, namun merupakan sebuah hyperlink yang bisa membuat pengunjung kita bawa untuk berkunjung di blog atau web lain. Sebuah tag "a" kita tambahkan pada kode html yang terletak di bagian body, dimana sebuah alamat tertentu (URL) kita tambahkan di dalamnya.

Trik menampilkan Widget Blogger di Halaman TertentuTrik menampilkan Widget Blogger di Halaman Tertentu

Untuk menampilkan widget agar hanya ditampilkan di halaman tertentu kita perlu menambahkan kode html baru. Kode ini digunakan blogger untuk melakukan pengaturan tampilan blog sehingga beberapa bagian dari blog dapat ditampilkan hanya dibagian yang ditentukan. Banyak yang dapat kita manfaatkan dari kode ini, diantaranya bisa untuk membuat sebuah widget hanya terlihat di homepage, post page, halaman static, diposting tertentu (menggunakan URL posting). Selain untuk hal seperti di atas, kode html ini juga bisa digunakan untuk sesuatu yang lebih ekstrim seperti misalnya menyembunyikan sidebar blog, menyembunyikan header blog atau footer blog di halaman tertentu. Sebagai contoh misalnya membuat homepage dalam bentuk tanpa sidebar sementara di halaman posting ditampilkan sidebar blog.

Readmore Otomatis tanpa ThumbnailReadmore Otomatis tanpa Thumbnail

Mungkin saja anda menginginkan halaman utama blog (home page) bersih dari image atau gambar, sehingga yang terlihat hanya teks semata. Ada sebuah cara untuk menciptakan kondisi seperti ini dengan membuat sebuah readmore otomatis yang sekaligus akan memperingan pekerjaan karena anda tak perlu memasukkan kode readmore secara manual. Readmore automatis tanpa thumbnail bekerja dengan memanfaatkan kode snippet dan hanya dibuat dengan sedikit merubah kode html template. Karena hanya memanfaatkan kode snippet default blogger, maka readmore otomatis ini hanya akan menampilkan teks di home page berkisar 140 karakter.

Readmore Otomatis dg Posting Terbaru Tanpa ReadmoreReadmore Otomatis dg Posting Terbaru Tanpa Readmore

Readmore otomatis dg thumbnail dan tanpa thumbnail (gambar berukuran kecil) ini dibuat tanpa menggunakan javascript ataupun jquery. Readmore otomatis ini hanya dibuat dengan merubah kode html template memanfaatkan kode snippet. Yang membuat readmore ini sangat spesial adalah kemampuannya untuk membuat posting terbaru ditampilkan tanpa readmore sementara seluruh posting yang lain tetap ditampilkan dengan bentuk readmore otomatis. Ada dua versi kode readmore otomatis yang dapat kita manfaatkan.

Auto Readmore dg Thumbnail tanpa Script - Read More Otomatis BloggerAuto Readmore dg Thumbnail tanpa Script - Read More Otomatis Blogger

Readmore otomatis tanpa javascript dengan thumbnail (image atau gambar berukuran kecil) mampu membuat sebuah fungsi readmore otomatis yang dilengkapi dengan sebuah thumbnail, baik untuk posting yang didalamnya menyertakan gambar ataupun tidak (jika posting tanpa gambar maka dalam homepage akan disertakan thumbnail default readmore otomatis). Jika posting menyertakan gambar maka thumbnail akan mengambil dari salah satu image (jika ada banyak posting image). Blogger secara otomatis akan memotong image dalam ukuran yang telah ditentukan menjadi sebuah thumbnail yang menyertai fungsi auto readmore. Melalui kode css posisi thumbnail dapat diatur (di kanan atau kiri).

Cara Backup Template di New Blogger Interface - Antarmuka Blogger BaruCara Backup Template di New Blogger Interface - Antarmuka Blogger Baru

Backup template merupakan sebuah proses sederhana untuk menyimpan file template di folder pc. File ini sangat berguna karena bisa digunakan untuk mengembalikan desain blog kembali keadaan semula sbelum berbagai perubahan kode html dilakukan. Berbagai kesalahan memang sangat memungkinkan terjadi saat penambahan atau pengurangan kode yang bertujuan untuk modifikasi blog. Banyak blogger yang sering mengabaikan prosedur standart ini karena menganggap backup template sebagai proses yang buang-buang waktu atau kadang terlalu percaya diri bahwa proses modifikasi pasti akan berjalan dengan mudah. Tindakan seperti ini adalah tindakan yang sangat ceroboh dan sangat berisiko. Mengabaikan proses sederhana ini bisa menjadi bumerang ketika kesalahan terjadi. Desain blog yang rusak atau berubah tak sesuai harapan menjadi lebih sulit dipulihkan karena harus melakukan pengeditan ulang sementara berbagai data yang diperlukan mungkin saja hilang.

Trik Buat Read More Otomatis tanpa JavascriptTrik Buat Read More Otomatis tanpa Javascript

Membuat readmore otomatis bertujuan untuk mempermudah posting & untuk membuat semua posting terlihat rapi di home page. Menggunakan readmore juga berujuan untuk memperingan loading blog saat dibuka, terlebih jika home page berisi beberapa posting sekaligus.

Berbagai trik membuat readmore otomatis dapat kita jumpai melalui berbegai tutorial blogger, baik berbahasa Indonesia ataupun Inggris. Ada yang menggunakan javascript, jquery atau hanya menggunakan kode css & xHTML. Ada dua pilihan tampilan saat menggunakan auto readmore.