Rabu, 03 Juni 2015
Rabu, 23 Mei 2012
Mengedit Template HTML Blogger / blogspot Mudah dan Aman
Blogger adalah layanan blog gratis yang memberikan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fituredit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.
Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.
Beberapa kasus saya temui dari pengunjung dan beberapa teman blogger (khususnya newbie) yang mengeluh karena gagal memasukkan hack/script tambahan, tidak menemukan kode tertentu seperti yang ada di tutorial, bahkan ada pula yang templatenya "kacau" karena salah mengedit template HTMLnya.
Tips ini saya buat untuk memberi masukan dan ide dalam melakukan editing Template HTML agar hasilnya sesuai dengan yang diinginkan. Semoga bermanfaat.
1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:
a. HTML/XML tag, yang menandakan bagian dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.
b. Head tag, merupakan bagian dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.
c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.
d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bagian head. Pada beberapa kasus kode CSS juga dimasukkan tepat di atas </head> sebagai aturan tambahan.
e. Javascript, merupakan elemen yang sebenarnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen tambahan seperti popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host langsung di Blogger, daneksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.
2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan seperti semula.
3. Perhatikan benar-benar tutorial yang dibaca, jangan sampai ada yang terlewatkan. Sebagai contoh, jika harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut adalah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger karena memang ditujukan untuk keamanan.
4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bagian script sudah tercopy atau jangan ada bagian selain dari script yang ikut ter-copy.
5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melakukan pengubahan script dan memastikan semuanya beres, baru masukkan script tersebut ke template HTML.
6. Agar lebih mudah dan cepat mencari kode tertentu seperti yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan kode yang ingin dicari dan tekan next (enter).
7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, dia tetap dibaca dari kiri ke kanan. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jika harus memasukkan tag/kode baru <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga<data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/><data:adStart/>
atau,<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>
8. Jika memang masih belum yakin dan terbiasa, buatlah blog baru yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda bisa dengan bebas melakukan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar hasilnya akurat, gunakan jenis template yang sama seperti blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script baru sehingga bisa dengan bebas melakukan apapun tanpa rasa khawatir.
9. Khusus untuk hack/script tertentu di mana tampilannya bisa langsung dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan langsung di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, baru lah di-save.
10. Pada beberapa template, ada yang bagian tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga ketika bagian tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis seperti ini, jangan menyerah terlebih dahulu.
Contoh:
Contoh:
Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> ketika mencari (Ctrl + F), cukup gunakan data:post.body saja.
Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk agar lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat mengembangkan dan membiasakan diri dengan template dan template editor Blogger serta melakukan editing secara mandiri (Do It Yourself [DIY]). Keep on learning and learning.
Salam.
BUAT MENU HORISONTAL di BLOGGER
Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.
Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktik kan.
Oke langsung saja.
Panduan membuat menu horizontal blogger
Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)
Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktik kan.
Oke langsung saja.
- Login ke dashboard blogger
- Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
- Klik Add Gadget / Tambah Gadget.
- Pilih/klik opsi HTML/Javascript
- Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
- Klik Save / Simpan
- Selesai
Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>
Keterangan.ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.Selamat mencoba dan semoga berhasil
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.
Cara Menghilangkan TandaObeng dan tang serta Pensil Di Blog
Cara menghilangkan tanda obeng dan tang serta pensil di blog
1. Masuk ke akun blog anda
2. Untuk tampilan akun blogger lama masuk ke tab edit html, sedangkan untuk tampilan akun blogger baru, masuk ke tab template-edit html-lanjutkan
3. Centang Expand Template Widget
4. Copy kode di bawah ini
]]></b:skin>
5. Kemudian pada akun anda tekan Ctrl+F dan paste, untuk mempermudah pencarian kode diatas
6. Kemudian copy kode di bawah ini, dan paste tepat di atas kode diatas tadi
.quickedit{
display:none;
}
7. Selesai. Lihat saja , tanda obeng dan tang serta pensil pasti sudah sirna dari pandangan anda
Mudah bukan?? Semoga bermanfaat bagi teman-teman sekalian. :D
Trims.
Senin, 14 Mei 2012
Panduan Dasar Membuat Blog di Blogspot.com
Internet merupakan media online yang menyediakan berbagai informasi untuk masyarakat dunia. Apa saja yang ingin kita temukan melalui internet dengan kata kunci/keyword pada search engine akan muncul ribuan bahkan jutaan yang ditampilkan. Selain untuk memperoleh informasi, kita sebagai pengguna internet dapat memberikan informasi yang bisa diakses seluruh dunia dengan menuangkannya kedalam blog.
Blog merupakan tempat untuk menulis karya atau apapun yang ingin diposting sesuai dengan minat, hobi yang ingin dibagi (sharing) kepada pengguna internet secara online. Selain itu, blog bisa dijadikan sarana untuk mempromosikan diri, group atau kumpulan serta berbagai bisnis agar diketahui masyarakat. Untuk memiliki sebuah blog, kita harus memiliki domain dan hosting agar bisa mempublish artikel yang ditulis. Untuk memiliki sebuah domain dan hosting, sekarang telah banyak situs yang menyediakannya secara gratis seperti : blogspot.com, wordpres.com, co.cc. Pada artikel kali ini akan dibahas bagaimana cara membuat blog dengan menggunakan domain blogspot.com, dimana pada akhiran domain yang kita buat akan diikutsertakan blogspot.com. Misalnya kita ingin membuat blog dengan domain "karyavictor" maka url (alamat) blog nya http://karyavictor.blogspot.com.
Untuk membuat sebuah blog diblogspot.com, langkah-langkah yang harus diperhatikan adalah :
1. Login ke http://www.blogspot.com
2. Pilih Buat Blog, maka akan muncul tampilan sebagai berikut :
3. Pada kolom yang telah disediakan masukkan alamat email, kata sandi dan sebagainya dengan benar, kemudian klik " Lanjutkan.
4. Halaman ini anda dituntun untuk mengisi kolom yang disediakan dengan : Nama Blog,Alamat Blog atau url (terlebih dahulu cek url apakah masih tersedia dengan cara "klik ketersediaan (available), kemudian klik "Lanjutkan".
5. Pada halaman ini, kita disuruh memilih jenis tampilan yang sering disebut "template" untuk Blog yang disukai, apabila telah memilihnya klik "lanjutkan"
6. Muncul halaman baru dengan bacaan "blog anda telah diciptakan", itu tandanya blog kita sudah jadi, maka klik "Mulai Posting" untuk memulai aktifitas ngeblog dengan cara menulis artikel (posting) ke blog yang baru saja dibuat.
Sekarang kita telah memiliki blog, langkah selanjutnya adalah menulis artikel pada blog. Bagaimana cara untuk memposting artikel pada blog agar diminati masyarakat pengguna internet yang membutuhkannya, pelajari tutorial "Memulai Posting Pada Blog".
Blog merupakan tempat untuk menulis karya atau apapun yang ingin diposting sesuai dengan minat, hobi yang ingin dibagi (sharing) kepada pengguna internet secara online. Selain itu, blog bisa dijadikan sarana untuk mempromosikan diri, group atau kumpulan serta berbagai bisnis agar diketahui masyarakat. Untuk memiliki sebuah blog, kita harus memiliki domain dan hosting agar bisa mempublish artikel yang ditulis. Untuk memiliki sebuah domain dan hosting, sekarang telah banyak situs yang menyediakannya secara gratis seperti : blogspot.com, wordpres.com, co.cc. Pada artikel kali ini akan dibahas bagaimana cara membuat blog dengan menggunakan domain blogspot.com, dimana pada akhiran domain yang kita buat akan diikutsertakan blogspot.com. Misalnya kita ingin membuat blog dengan domain "karyavictor" maka url (alamat) blog nya http://karyavictor.blogspot.com.
Untuk membuat sebuah blog diblogspot.com, langkah-langkah yang harus diperhatikan adalah :
1. Login ke http://www.blogspot.com
2. Pilih Buat Blog, maka akan muncul tampilan sebagai berikut :
3. Pada kolom yang telah disediakan masukkan alamat email, kata sandi dan sebagainya dengan benar, kemudian klik " Lanjutkan.
4. Halaman ini anda dituntun untuk mengisi kolom yang disediakan dengan : Nama Blog,Alamat Blog atau url (terlebih dahulu cek url apakah masih tersedia dengan cara "klik ketersediaan (available), kemudian klik "Lanjutkan".
5. Pada halaman ini, kita disuruh memilih jenis tampilan yang sering disebut "template" untuk Blog yang disukai, apabila telah memilihnya klik "lanjutkan"
6. Muncul halaman baru dengan bacaan "blog anda telah diciptakan", itu tandanya blog kita sudah jadi, maka klik "Mulai Posting" untuk memulai aktifitas ngeblog dengan cara menulis artikel (posting) ke blog yang baru saja dibuat.
Sekarang kita telah memiliki blog, langkah selanjutnya adalah menulis artikel pada blog. Bagaimana cara untuk memposting artikel pada blog agar diminati masyarakat pengguna internet yang membutuhkannya, pelajari tutorial "Memulai Posting Pada Blog".
Membuat Kotak Iklan pada Banner Pada Blog
Tren pada blog sekarang ini adalah menyediakan beberapa kotak sebagai sarana untuk menempatkan Link Banner. Setiap kali berkunjung ke blog para sahabat blogger, blog mereka juga menyediakan kotak untuk ditempatkan link banner, baik itu link banner milik pribadi maupun link banner milik sahabat blogger lain yang direntalkan (seperti mobil aja nich di rental-rental... haa...haa...haa.....). Mungkin anda bingung, gimana bentuk kotak iklan link banner tersebut. Contohnya dapat dilihat pada blog karyavictor ini yang terletak di header blog. Coba lihat gambar di bawah ini :
Nah, itulah bentuk kotak iklan link banner dan kotaknya akan tersusun rapi sesuai dengan berapa jumlah dan besar kotak iklan link banner tersebut yang ingin ditampilkan. Jika blog kalian ingin dipasang kotak iklan link banner caranya sangat gampang, ikuti tutorial dan petunjuk berikut ini dengan benar.
1. Masuk ke acount blogger anda
2. Pilih Tata Letak --> Edit Html
3. Cari kode berikut ini :
]]></b:skin>
4. Copy kode berikut kemudian tempatkan persis diatas kode tersebut.
#Banner-ads {
margin:0px;
padding: 5px;
text-align: center;
width : 960px;
}
#Banner-ads img {
margin: 7px 4px 4px 0px;
padding: 3px;
width : 125px;
height : 125px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Banner-ads img:hover {
margin: 7px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}
5. Copy semua kode dibawah ini :
<div id='Banner-ads'>
<a hight='100' href=' http://www.tdwuniversity.com/launch/?id=6628/' target='_blank' width='100'><img alt='ads' border='0' src='http://www.TDWUniversity.com/launch/images/125x125.gif'/></a>
</div>
Keterangan :
1. Masuk ke acount blogger anda
2. Pilih Tata Letak --> Edit Html
3. Cari kode berikut ini :
]]></b:skin>
4. Copy kode berikut kemudian tempatkan persis diatas kode tersebut.
#Banner-ads {
margin:0px;
padding: 5px;
text-align: center;
width : 960px;
}
#Banner-ads img {
margin: 7px 4px 4px 0px;
padding: 3px;
width : 125px;
height : 125px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Banner-ads img:hover {
margin: 7px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}
5. Copy semua kode dibawah ini :
<div id='Banner-ads'>
<a hight='100' href=' http://www.tdwuniversity.com/launch/?id=6628/' target='_blank' width='100'><img alt='ads' border='0' src='http://www.TDWUniversity.com/launch/images/125x125.gif'/></a>
</div>
Keterangan :
---> tulisan berwarna merah ganti dengan "url web/blog" anda
---> tulisan berwarna biru ganti dengan "url gambar" anda
---> untuk memperbanyak jumlah kotak iklan link banner paste kan saja kode tersebut
6. Kemudian letakkan persis di atas kode berikut :
<div id='main-wrapper'>
7. Simpan Perubahan.
6. Kemudian letakkan persis di atas kode berikut :
<div id='main-wrapper'>
7. Simpan Perubahan.
Jika telah mengikuti tutorial diatas dengan benar, maka kotak iklan link banner akan muncul pada blog anda.
Langganan:
Postingan (Atom)