28 Jul 2012

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

Membuat 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

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

27 Jul 2012

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

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

26 Jul 2012

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

Trik 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

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

25 Jul 2012

Trik membuat Button Reply Comment css3 di Blogger Threaded CommentTrik membuat Button Reply Comment css3 di Blogger Threaded Comment

Trik 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

Trik 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

Trik 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

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

24 Jul 2012

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

Blogger 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

Create 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

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

23 Jul 2012

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

Trik 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

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