Cara Menyimpan Kode HTML di Template » Edit HTML "New Blogger Interface"

Perubahan tampilan baru blogger dalam bentuk "New Blogger Interface" atau "Antarmuka Blogger Baru" membawa berbagai perubahan baik bentuk, kelengkapan ataupun tata cara penggunaan fiturnya. Salah satu yang berubah adalah langkah "Edit Template" atau "Edit html". Tak terlalu banyak memang perubahan yang terjadi, namun demikian agar tutorial semakin lengkap dan tak ketinggalan jaman (selalu up to date), kita akan lengkapi juga dengan panduan langkah menyimpan kode html melalui box Edit HTML di "New Blogger Interface".

Upgrade "Old Blogger Interface" ke "New Blogger Interface"

Create 404 error page in Blogger with simple flash game - Membuat halaman error 404

Menampilkan game flash sederhana di halaman Error 404 Blogger.

Banyak hal dapat kita lakukan "di halaman dengan alamat tak jelas" atau "halaman error 404" yang juga disebut sebagai "404 error page". Halaman yang akan dijumpai di blogger ketika sebuah alamat tak bisa ditemukan karena beberapa sebab, seperti misalnya:

1. Seseorang menuliskan alamat (URL) secara tak benar.
contoh:
- http://gubhugreyot.blogspot.com/2010/08/juery-lightbox.html harusnya:
- http://gubhugreyot.blogspot.com/2010/08/create-juery-lightbox.html
2. Judul posting yang telah di hapus. Alamat sebuah posting sekalipun telah di hapus akan tetap tersimpan dalam mesin pencari google, sehingga ketika posting dihapus alamat ini akan tetap ada sedangkan postingnya takkan pernah ditemukan lagi.
Contoh silahkan buka link berikut:
- http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button_12.html

Membuat halaman error 404 (halaman tak ditemukan) menjadi sebuah bagian yang menarik dari sebuah blog bisa membuat seorang pengunjung menjadi semakin tertarik untuk membuka lebih banyak lagi posting. Anda sebaiknya menampilkan kata-kata yang bersahabat dan membuat pengunjung merasa nyaman sekalipun halaman yang di cari tak ditemukan. menampilkan sebuah file flash dalam halaman error 404 adalah sebuah improvisasi yang bisa lebih dikembangkan lagi. Dalam posting ini telah kita sediakan kode css berikut xHTML untuk membuat halaman error 404 yang didalamnya disertakan game sederhana dalam bentuk file flash. Anda dapat memilih menggunakan kode css dan xHTML-2 atau hanya menggunakan xHTML-1. Jika anda gunakan xHTML-1, maka anda tak perlu lagi menggunakan kode css. Semua sudah tersimpan dalam javascript yang didalamnya berisi file game flash serta kode css. D E M O

Cara membuat halaman error 404 dengan game flash-1:

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "Tutorial Blogger | gubhugreyot ini kita akan membuatnya hanya menggunakan kode CSS.

Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!

Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.

Trick Buat Blog/Template jadi Threaded Comments

Yang dimaksud membuat template atau blog menjadi blog dengan system threaded comment adalah apabila blog/template yang anda gunakan belum dilengkapi dengan button teks yang berfungsi untuk "membalas komentar". Button teks ini terletak tepat di bawah komentar dalam comment box. Threaded Comment adalah barang yang masih cukup baru bagi blogger/blogspot. Threaded Comment kini membuat comment box blogger menjadi sama seperti yang ada di wordpress.

Threaded comment sudah disertakan pada Blogger Template Designer (New Blogger Template). Untuk Template Tata Letak (Layout Template) dan Template Klasik dan beberapa template diluar template blogger (hasil download free blogger template) masih belum menggunakan system threaded comment. Agar template menjadi threaded comment beberapa kode css dan xHTML harus di tambahkan (modifikasi template).

D E M O

Anda bisa melihat dan sekaligus mencoba threaded comment hasil modifikasi yang dilakukan terhadap blog ini dengan cara memberi tanggapan komentar melalui button text "balas" (Modifikasi dilakukan terhadap Template Tata Letak - Layout Template - Template Lama yang sudah digunakan sejak tahun 2009).

Template non-Threaded Comment :

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!

D E M O - 1D E M O - 2

Tambahkan 2 CSS 3 property dan Wow .... Keren....!!!!

Ya... hanya 2 (dua) css3 property dan semua berubah dengan luar biasa. Kita hanya akan gunakan css3 text-shadow property dan css3 transition property. Text shadow berfungsi memberi efek bayangan pada teks dan css3 transition akan kita gunakan pada setiap link blog agar menampilkan transisi warna ketika cursor berada di atasnya (disorot, kang! He... pakai senter, lagi... ha... ha...).

D E M O

Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.

D E M O

Trick Buat & Ciptakan Page peel di Blogger

Mengapa aku katakan sebagai tips atau trik buat & ciptakan page peel? Mengapa tidak kita sebut saja "Tutorial Blogger cara membuat page peel di Blogger Template Designer?" atau mungkin "Panduan cara membuat dan memasang page peel?" He... he.. sampeyan tak perlu memikirkannya terlalu dalam. Ini hanyalah sekedar tips dan trick saja agar lebih banyak "teks" yang dapat dibaca mesin pencari. Bukankah lebih banyak diantara sampeyan semua yang menggunakan kata atau kalimat seperti "tutorial", "cara membuat" , "cara pasang" dan "panduan ....." saat melakukan pencarian (browsing)? Diluar itu ...? Ha... ha... tentu saja memang ada trick yang harus dipatuhi untuk membuat page peel.

Page peel yang pada dasarnya merupakan sebuah halaman berisi link dan biasa diletakkan pada pojok blog (atas, kanan, bawah, kiri) disertai animasi gerak melalui image dan file flash ini memang tak sekedar desain biasa. Desain page peel yang dibuat dalam bentuk iframe seperti yang akan kita buat ini memang membutuhkan penanganan khusus.

1. Harus menggunakan image dengan ukuran yang tepat.
2. Semua file flash (.swf) dan image harus diupload di file hosting. Anda bisa gunakan google sites (untuk file flash) dan di halaman posting blogger (file image).
3. Javascript yang digunakan harus dalam bentuk link sehingga sampeyan harus mengupload javascriptnya terlebih dahulu di file hosting (dapat dilakukan di google code atau google sites ).
   

D E M O

Agar lebih jelas bagaimana sebenarnya page peel yang akan kita buat, sampeyan bisa lihat demo-nya. Dalam demo telah disertakan juga javascript beserta link file flash dan image yang diperlukan untuk membangun page peel secara lengkap. Silahkan download file-file teersebut kemudian upload untuk digunakan di blog.

DEMO Page peel

Membuat - Memasang Scroll Box Widget Popular Posts Blogger

Ada dua cara untuk membuat atau memasang scroll box pada widget popular posts blogger plugins.

1. Menggunakan kode CSS
2. Menggunakan kode html di bagian body.

Ke dua cara di atas menghasilkan fungsi yang sama, hanya cara yang digunakan berbeda. Jika kita gunakan kode CSS maka kode bisa kita simpan dalam template melalui add a gadget atau disimpan di atas kode ]]></b:skin>, sedangkan untuk xHTML kita harus menyimpan di antara tag pembuka body (<body>) dan tag penutup </body> melalui halaman "Edit HTML".

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Pilihan lain untuk membuat Ticker Popular Posts Blogger Plugins Widget dapat dibuat juga dengan menggunakan javascript. Tak banyak berbeda dengan ketika kita menggunakan kode html marquee hanya jika kita menggunakan javascript tag marquee tak lagi digunakan. Javascript dalam bentuk link sudah tersedia hingga jika tak mau terlalu repot bisa langsung kalian pakai. Hanya sekedar saran, jika ingin lebih aman dan lancar javascript ini bisa kalian upload di file hosting sehingga tak ada orang lain yang menggunakan link-nya. Kode CSS dalam ticker ini sudah dilengkapi dengan kode CSS yang berkaitan dengan widget popular post hingga memungkinkan ticker popular posts blogger plugin ditampilkan lebih sempurna. Jika ingin penampilan berbeda silahkan tambah dengan css lain atau bisa juga modif dibeberapa kode css yang sudah disertakan.

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Creating a special ticker Popular Posts Blogger Widget Plugins

Tak perlu harus pakai javascript atau kode html yang njelimet tetapi sebuah ticker spesial dapat kita buat pada widget popular posts blogger plugin. Ticker yang memanfaatkan efek marquee ini berfungsi untuk membuat seluruh popular post berputar ke arah atas dimulai dari popular post pertama hingga yang terakhir dan selalu berulang seperti itu. Dengan efek yang seperti ini tentu saja kita tak perlu sebuah box yang besar atau tinggi. Dengan box ticker berukuran 200px atau mungkin lebih sedikit maka berapapun jumlah popullar post semuanya akan dapat ditampilkan satu semi satu secara sempurna. Dengan bantuan sedikit script yang menyatu dengan tag marquee, pergerakan memutar popular post dapat dihentikan dengan mengarahkan cursor ke dalam box popular posts blogger plugin. Agar lebih jelas, silahkan lihat di demo berikut:

Membuat Animasi Background Berjalan (Bergerak)

Yang ini juga asli product dalam negeri. Dengan hanya secuil javascript sebuah background animasi yang selalu bergerak bisa menjadi bagian dari blog sampeyan. Menempatkannya sebagai background header menjadi sebuah pilihan tepat hingga terlihat sangat atraktif. Membuatnya juga sangat simple karena hanya perlu menyimpan script pertama di bagian header di bawah tag pembuka header (<head>) dan script kedua di atas tag penutup body (</body>). Perlukah kode css untuk animasi background bergerak ini? Yah, tentu saja jika dipandang perlu sampeyan bisa buat tambahan kode css agar bisa ditampilkan lebih cantik di blogger atau blogdetik sekaligus penyesuaian dengan kode html di template. O..., ya ... xHTML yang nantinya dipergunakan bisa sampeyan lihat di bawah ini.

Hidden Calendar-Clock Using CSS3-Javascript

Hidden Calendar-Clock adalah sebuah gabungan kerja antara kode CSS3 yang membentuk fungsi hide & show serta sebuah javascript sederhana pembangun Calendar-Clock. Posisi/letak Hidden Calendar-Clock dapat diatur di kanan-atas, kanan-bawah, kiri-atas atau di kiri-bawah blog. Calendar-Clock menampilkan secara lengkap hari, tanggal, bulan, tahun serta am/pm serta digital clock di ujung paling kanan. Pada demo akan diperlihatkan dimana calendar clock hanya akan terlihat ketika cursor berada di halaman blog. Hidden Calendar-Clock akan menghilang lagi saat anda berpindah ke halaman web/blog yang lain. Muncul dan menghilangnya Calendar-clock mempunyai jeda waktu 1 (satu) detik setelah cursor anda aktif ataupun meninggalkan halaman blog. Hmmm... seperti halnya kata pepatah, tong kosong nyaring bunyinya yang artinya banyak berkata-kata banyak pula muncrat air ludahnya, jadinya aku rasa lebih baik segera lihat saja demonya.
NB: Harap diperhatikan, karena keternatasan dhuwit dan tak mampu bayar hosting atau beli domain sndiri maka jika demo-1 tak bekerja sampeyan dipersilahkan buka demo yang ke-2! Oye?!

Cara Memodifikasi Search Form Blogger Plugins

Tutorial blogger ini mencoba memberikan sebuah trick bagi blogger untuk merubah bentuk dan tampilan search form (orang sering juga menyebutnya sebagai search engine atau dikenal juga sebagai kotak penelusuran) agar terlihat lebih cantik dan menarik. Tak banyak kode css yang diperlukan. Kita hanya butuh satu deret kode CSS saja dan siapapun dapat membuat berbagai gaya yang berbeda. Hal yang penting setelah sampeyan mencoba menggunakan kode CSS ini, segeralah upload background imagenya di blogger agar loading selalu dalam keadaan terjaga. Atau mungkin jika ingin menyesuaikan background search form dengan background halaman blog, cobalah untuk merubah background-nya dengan image berbeda.

Kode CSS

jQuery Loader: Preload your blog

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

Cara membuat Reply Comment di Blogger

Posting ini dimaksudkan untuk semakin melengkapi posting yang sudah ada. Kita akan membuat sebuah fungsi reply comment atau sebuah text link yang difungsikan untuk membalas komentar. Letak teks link dengan bentuk [Reply] ini nantinya berapa diujung terbawah sebuah komentar, tepatnya berada di bawah tanggal saat komentar diterima. Jika sampeyan tak begitu suka dengan link dalam bentuk teks, silahkan ganti teks link tersebut dengan image. Menggantinya cukup mudah karena tinggal hapus [Reply] kemudian tempatkan sebuah link image dalam bentuk kode : <img src="image-reply.jpg" width=".." height=".." border="0" /> pada kode yang dihapus tersebut.

Untuk membuat Reply Comment kita harus membongkar kode html template dengan melakukan "Expand Widget Templates" karena disinilah posisi kode harus ditambahkan. Sebagai tindakan preventif agar template tak rusak ketika terjadi kesalahan saat penambahan kode baru dilakukan, maka sebelum menambahkan kode baru proses backup template wajib/harus dilakukan. Silahkan buka tutorial tentang backup templates dan cara cepat mencari kode html yang terletak di "Special Tutorials" (menu sebelah kiri!) baru lemudian melanjutkan membuat reply comment.

Panduan blogdetik: Cara Memasang, Menyimpan Kode CSS, Javascript dan xHTML di Template BlogDETIK

Khabar gembira ini kiranya patut untuk diketahui semua blogger dan khususnya d'blogger. Yah ...., meski sedikit terlambat tak apalah. Eee ...mungkin saja beberapa sobat ngeblog ada yang blom dengar beritanya.

Sejak beberapa waktu belakangan ini banyak sesuatu yang baru terjadi di blogdetik, seperti halnya tampilan dasbor yang baru serta kebijakan baru yang telah diberikan kepada seluruh d'blogger dimana masing-masing kini bebas untuk memasang, menambah atau menyimpan kode HTML baru yang berupa kode CSS, javascript ataupun xHTML. Banyak hal kini bisa kita lakukan terhadap template. Beberapa perubahan dan penambahan kode HTML baru memungkinkan d'blogger untuk merubah desain blogdetiknya hingga wajah yang terlihat baru dan sama sekali berbeda dengan blog bawaan blogdetik bisa kita ciptakan. Jika selama ini sampeyan tak mungkin merubah cursor default menjadi cursor image atau animasi yang dibangun dengan javascript, kini semua itu bisa kita lakukan dengan mudah. Yah ... semudah kita membuatnya di blogspot atau

Special Tab View Untuk Widget di Blogger Baru dan Blogger Lama

Ini adalah Tab View atau Tab Content yang memang didesain secara khusus untuk widget di blogger atau blogspot. Sampeyan dapat menyimpan semua jenis widget yang tersedia tanpa kecuali. Semua widget seperti labels, archive, profile, recent posts hingga widget follower dapat dimasukkan dalam tab hingga halaman blog sedikit lebih simple karena 3 widget langsung terwadahi dalam sebuah tab. Tentang penampilan tab kita tak perlu kuwatir karena tab untuk widget ini telah dipermak sedemikian rupa hingga tak akan terlihat mengecewakan ketika dipajang di blog. Desain tab telah dilengkapi dengan beberapa background image hingga membuat tampilannya terlihat cantik.

Karena ada perbedaan dalam penggunaan tab di blogger lama (template tata-letak) dan di blogger baru (new blogger templates), maka kita akan coba bahas 2 cara yang harus dipergunakan di ke-2 template tersebut.

Page Navigation for Blogger using CSS3 and Javascript

Mengapa membuat navigasi halaman Blog kita sebut paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang berfungsi untuk pengaturan jumlah posting yang akan ditampilkan setiap lembarnya! He ... he ... nggak ribet, khan?! Satu kelebihan lain dari navigasi halaman untuk blogger ini adalah pada penggunaan kode CSS3 yang berfungsi untuk menimbulkan beberapa efek pada background, warna teks/font, warna border dan transparansi (opacity effects). Menarikkah? Cantik nggak klo dipasang di blog sampeyan? Ho ... ho ... mana aku tahu! Coba saja, dah, biar jadi ngerti cocok nggaknya! Yang jelas model beginian blom satupun yang pernah buat. Nggak percaya? He ... he ... coba saja browsing sebentar. Yah ... klo ada aku kasih bonus, dah! Wisata gratis ke Mars naik kuda kepang atau sapunya si Sirik! Hua ... ha ... biar kesurupan dan pintar menangkap meteor yang lagi terbang di langit sono !!!!

Optimalkan Search Engine (SEO) dengan Merubah Tag Title Blog

Trik ini sebenarnya sudah banyak digunakan blogger untuk mengoptimalkan daya tangkap mesin pencari terhadap judul posting yang kita buat. Yah ..., karena judul posting inilah sebenarnya yang menjadi sasaran pencarian netter dikala browsing. Upaya optimalisasi dilakukan dengan perubahan kode HTML (tag style) yang terdapat di template bagian atas. Perubahan tag style dimaksudkan agar judul posting lebih mudah ditangkap (terindeks) mesin pencari.

Bagaimana memahami kaitan perubahan tag title, search engine dan browsing para pengguna internet dengan SEO?

Kemudahan dan kecepatan sebuah "data yang berupa teks" untuk terindeks oleh mesin pencari sangat bergantung kepada