Membuat Daftar Isi Dengan jQuery Accordion

Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Kali ini saya akan berikan cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.

Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini.

Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama

1. Login dulu ke blogger anda
2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Kemudian copas kode dibawah ini dan taruh diatasnya
   

   #dafis-acc{
   font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#333;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJD54cCGm-ZH__F8XM6d-aE7ypWhQMnEefBLfBkiqextAS9ky8i1Sule7_nG0IOVNqh23ehh6CDw9KFrMF_3uvmuaylupeNHX8VgUmClDUkLd10r4k4_p5pswc98p7uWcd1cKo0fEqss/d/bg5.gif) repeat-y scroll left center #E7F7FB;
   padding:2px 0;
   border:1px solid #89ADFA;
   }
   .dafis-label{
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETMO4uVzP0iZ8ERzbsFnBju-DrxI5jSjq-iPHVoYtSGp77WdmVIDFb4kVQwMqE5ysT_9vHSKz9FgiNTk4F3x3qj9fJO5obB0vEbAHUt7NChRvJYBjgiXKF7inP9fCZoz9Zba8BeOfpFs/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
   font-weight:bold;
   line-height:1.4em;
   overflow:hidden;
   white-space:nowrap;
   vertical-align: baseline;
   margin: 1px 3px;
   outline: none;
   cursor: pointer;
   text-decoration: none;
   padding: 2px 10px;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   border:1px solid #2F94BA;
   }
   .dafis-label:hover{
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfR_n3JbWvDC5prpTYdi8_ieSH1m-isdUKQd-d_Izdcm2CZUJPpZLkQMhaED2BVi77yZqO6NviuNb2SaMn1MnUF7Z808uKCyZUTfpLuyKmvQUIXduZvf7ajMpbtkQorV5pvz9Za6oeZ8/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
   color:#003366;
   }
   .dafis-daf ol{
   margin:0 0 0 30px !important;
   padding:0 !important;
   }
   .dafis-daf ol li{
   background-color:#D0DFFD;
   line-height:1.5em;
   margin:1px 3px !important;
   white-space:nowrap;
   text-align:left;
   border:1px solid #89ADFA;
   }
   .dafis-daf ol li a{
   text-decoration: none !important;
   color:#333 !important;
   display:block;
   padding-left:10px;
   }
   .dafis-daf ol li a:hover{
   background: #BED2FC;
   border-left: 5px #333 solid;
   padding-left: 5px;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   }

5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
   
   
   

   1. <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas 

1. Kemudian Klik Simpan Template.

Langkah Kedua

1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
   
   

   1. <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>  
   2. <script src="http://namablogsobat.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
3. Ubah namablogsobat dengan url blog anda
4. Selanjutnya Klik Publish Post.

Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.

Daftar Isi Blog Lengkap

Fungsi-Fungsi Menu Setting Blog

Pertama kali kita membuat blog dengan menggunakan fasilitas blogspot, kita mungkin akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal. Pada postingan kali ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.

1. Menu Settings -> Basic

• Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)
• Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)
• Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog
• Add your blog to our listing: untuk mengatur apakah blog anda mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak
• Let search engines find your blog: Untuk mengatur apakah blog anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak
• Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog
• Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email
• Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak
• Select Post Editor: untuk memilih jenis post editor yang ingin anda gunakan
• Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.

2. Menu Setting -> Publishing

• Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll
• Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)
• Word Verification: kode verifikasi

3. Menu Setting -> Formatting

• Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog
• Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting
• Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar
• Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan
• Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia
• Language: untuk memilih bahasa yang mau digunakan
• Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.
• Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja
• Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja
• Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar
• Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting

4. Menu Setting -> Comments

• Comments: untuk menampilkan kotak komentar
• Who Can Comment: untuk menentukan siapa yang boleh memberi komentar
• Comment Form Placement: untuk menentukan dimana letak kotak komentar
• Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak
• Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak
• Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak
• Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada kotak komentar
• Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar
• Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting
• Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam
• Show profile images on comment: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger
• Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar

5. Menu Settings -> Archiving

• Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan
• Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel

6. Menu Settings -> Site Feed

• Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email
• Post Feed Redirect URL: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja
• Post Feed Footer: untuk mengisi teks tambahan pada feed

7. Menu Settings -> Email & Mobile

• Blogsend Address: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.
• Email posting address: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.
• Mobile Devices: Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca disini

8. Menu Settings -> OpenID

• OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini aja ya

9. Menu Setting -> Permissions

• Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite
• Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog Anda

Nah itu tadi penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda.  Semoga bermanfaat.

Membuat Tab View Menu Tanpa Edit HTML

Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:

• Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna biru merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat !

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <b:include data='feedLinks' name='feedLinksBody'/>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <div class='feed-links'>
   <data:feedLinksMsg/>
   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Semoga bermanfaat.

Mengedit Template HTML Blogger Secara 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 fitur edit 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, dan eksternal, 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:

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.

Mengganti Favicon di Blog

Cara Mengganti Favicon di Blog - Cara mengubah/merubah favicon/favorite icon di blogger.

Favicon merupakan singkatan dari favorite icon, yaitu foto kecil yang berupa icon yang muncul di browser di depan setiap url blog. Ohya, beberapa waktu lalu saya juga telah memposting artikel yang berhubungan dengan foto yang ada di blog, yaitu cara mengganti foto akun blogger. Silahkan dibaca jika tertarik. Oke, lanjut.. Kebanyakan blogger banyak yang mengganti favicon blog mereka, mungkin mereka menganggap favicon default yang disediakan oleh blogger kurang menarik dan mereka ingin tampil beda. Oke langsung saja, bagi yang ingin mengganti favicon favicon blognya juga, silahkan ikuti langkah-langkah cara mengubah favicon di blogger berikut ini:

Cara 1.

1. Silahkan buat dulu gambar yang ingin dijadikan favicon dengan bentuk persegi, misalnya ukuran 100x100 atau 16x16 terserah yang penting persegi.

2. Silahkan masuk ke dasbor blog kalian.

3. Klik menu Rancangan.

4. Klik Edit di sebelah tulisan Favicon. Perhatikan gambar di bawah:

5. Klik Browse dan pilih gambar yang telah dibuat pertama tadi.

6. Simpan

Tapi sobat, untuk lebih memantapkan pemasangan favicon sehingga lebih kuat dan stabil, silahkan ikuti lagi langkah-langkah berikut:

Cara 2.

1. Silahkan upload gambar sobat ke internet, misalnya di picasa atau photobucket.

2. Masih di menu Rancangan, silahkan klik tab Edit HTML (jangan lupa centang expand template widget)

3. Cari kode berikut:

<b:skin><![CDATA[

4. Letakkan kode di bawah tepat di atas kode no. 3 di atas

<link href='url_gambar_sobat' rel='icon' type='image/gif'/>

5. Simpan Template sobat.

6. Silahkan lihat hasilnya.

Nah, akhirnya selesai juga posting mengenai cara mengganti favicon di blog ini. Semoga bermanfaat..