Selasa, 30 Juli 2013

Cara Mengedit HTML Template Blogspot 2013 Tampilan Baru

CARA MENGEDIT HTML TEMPLATE BLOGSPOT 2013 TAMPILAN BARU
Cara mengedit html template blogspot tampilan baru - Hari ini saya sedang membuka Google Plus saya dan melihat pertanyaan dari seorang rekan blogger qbenk raflesia yang menanyakan "apakah cara mengedit HTML template di blogspot sudah berubah?". Setelah saya cek, ternyata memang sudah berubah cara mengeditnya.

Blogger kembali membuat tampilan baru untuk mengedit template di bulan APRIL 2013 ini, yang bisa jadi menyulitkan teman-teman blogger pemula karena cara yang lama yang sering menggunakan expand widget template sudah tidak akan berfungsi lagi. Padahal anda akan membutuhkan ini untuk mengedit template blog keren anda menjadi template blog SEO Friendly....
Jadi mari kita pelajari bagaimana cara edit HTML di tampilan baru ini.....

Mengenal tampilan EDIT HTML Blogspot

Secara garis besar semua fungsi tombol masih lengkap, hanya posisinya diubah. Malah saya bisa katakan perubahan ini jauh lebih baik! Untuk lebih jelasnya mari lihat gambar di bawah ini.... (masuk ke menu TEMPLATE dan klik EDIT HTML)

Tampilan baru dari EDIT HTML TEMPLATE BLOGSPOT

Keterangan Gambar:
  • A adalah tombol untuk kembali ke menu TEMPLATE
  • B adalah tombol untuk SIMPAN perubahan pada TEMPLATE
  • C adalah fitur baru yang akan banyak membantu, yaitu LOMPAT ke kode WIDGET
  • D dan E adalah tombol TOGGLE MODE untuk melihat versi HTML dan melihat versi tampilan browser
  • F adalah tombol untuk menghilangkan perubahan yang sudah anda lakukan dalam satu pengeditan
  • H adalah tombol untuk mengembalikan perubahan yang sebelumnya sudah anda lakukan tapi hilang karena pemformatan
  • H adalah tombol untuk mengembalikan widget ke setingan default
Yang perlu teman-teman blogger perhatikan dalam tampilan baru untuk mengedit HTML template blogspot ini adalah dua hal, yaitu tombol lompat ke widget dan panah-panah kecil berwarna hitam pada baris kode.

TOMBOL LOMPAT KE WIDGET
Tombol ini akan sangat membantu anda untuk menuju kode dari suatu widget di template anda. Anda cukup mengklik tombol tersebut dan akan terbuka dropdown untuk melompat ke kode HTML widget yang anda inginkan....
tombol lompat ke widget untuk membantu anda menemukan widget
Yang menjadi masalah adalah saat anda sampai di kode HTML widget tersebut,....anda akan melihat tampilan kode yang dipadatkan dalam lipatan yang ditandai dengan ► ..... lihat gambar di bawah ini....
tombol panah kecil pada EDIT HTML template blogspot untuk mengurai kode
Apakah saudara bisa melihat panah hitam kecil di atas?....

Tombol Panah Hitam Kecil
Tombol ► ini adalah fitur baru yang akan membuka setiap kode menjadi lebih detail lagi. Kalau ternyata setelah anda klik masih ada tombol panah hitam lagi di dalamnya, maka klik lagi tombol panah hitam itu sampai semua kode widget yang anda inginkan terbuka penuh.
Jika sudah terbuka penuh sekarang anda sudah bisa mengedit kode pada widget tersebut.

PENGGANTI EXPAND WIDGET TEMPLATE DI EDIT HTML TEMPLATE BLOGSPOT TAMPILAN BARU

Yang menjadi masalah sekarang adalah anda akan mengalami kerepotan yang cukup mengganggu jika harus mengedit sebuah kode yang sangat panjang dan mempunyai begitu banyak panah kecil hitam. Saat itulah anda pasti berharap tombol expand widget template masih ada di sini.

Apakah tidak ada cara menampilkan semua kode HTML agar proses edit bisa berjalan lebih cepat? Sebenarnya anda bisa membuka semua kode dengan cara yang sangat mudah....
  • Klik kursor di dalam barisan kode mana saja....
  • Tekan CTRL+A untuk menyorot semua kode
  • Tekan CTRL+C untuk mengcopy semua kode
  • Tekan tombol DEL pada keyboard untuk menghapus semua kode, dan
  • Terakhir tekan CTRL+V untuk mempaste semua kode
Kode yang dipaste ini akan terbuka penuh dan tidak ada panah hitam kecilnya, jadi hasilnya kurang lebih sama dengan tombol checkbox EXPAND WIDGET TEMPLATE yang ada pada EDIT HTML template blogspot tampilan lama....

Anda tetap bisa memakai tombol LOMPAT KE WIDGET saat semua kode sudah dijabarkan, jadi ini akan membantu anda untuk mengedit TEMPLATE. Mudah-mudahan Google tidak melakukan perubahan lagi dalam waktu dekat ini, ....soalnya belakangan ini Google seperti sedang berinovasi di sana sini. Agak repot juga kalau EDIT HTML dari menu TEMPLATE ini selalu diubah modelnya.....

UPDATE:
Rupanya banyak teman blogger yang kesulitan mencari kode tertentu di dalam baris kode yang panjang. Sebenarnya caranya sangat mudah....

CARA MENCARI KODE DI EDIT HTML BLOGSPOT TAMPILAN BARU

Anda sudah tidak bisa lagi mencari kode dengan menggunakan CTRL+F pada browser, .... jadi klik dulu di antara barisan kode dan klik CTRL+F, nanti akan muncul kotak pencarian di sudut kanan atas jendela kode HTML.

Di situlah anda memasukkan nama kode yang akan anda cari, dan tekan enter sesudahnya. Jika anda belum menemukan kode yang diinginkan, maka tekan terus enter sampai ketemu. Lebih jelasnya lihat gambar di bawah ini....
cara mencari kode di EDIT HTML BLOGSPOT TAMPILAN BARU

Mudah-mudahan saudara tidak bingung lagi memakai EDIT HTML TEMPLATE BLOGSPOT tampilan baru ini....

Cara Edit Menu Template Blogger

Sebenarnya sudah banyak blogger yang posting cara edit atau membuat menu template di blogspot. Tetapi karena permintaan seorang teman saya mencoba untuk menjelaskan cara edit template dengan mudah, yang biasanya kita download di penyedia template gratisan seperti Zootemplate, Btemplate, Free blogger templates Dan masih banyak lagi. Karena biasanya template yang kita download sudah menyertakan menu navigasi namun terkadang tidak menyertakan cara edit menu navigasi tersebut. 
Cara editnya cukup gampang hanya anda ingat saja judul menu yang akan anda edit seprti contoh gambar dibawah ini:

Sekarang masuk tahap peng-editan menu yaitu masuk ke Dashboard=>Design=>Edit HTML serta jangan lupa untuk checklist Expand Widget Templates kemudian cari kode/judul menu yang anda ingin edit dengan tekan Ctrl+F pada keyboard komputer anda. Jika sudah ketemu seperti gambar di bawah ini:

Ganti kode seperti  yang ada pada gambar dengan  link anda dan judul menu yang yang anda inginkan lalu save templates. Proses ini juga berlaku pada template magazine yang biasa menyertakan gambar slide dengan keterangan dari gambar slide.
Cukup mudahkan cara meng-Edit menu pada template premium free yang kita download. Selamat berkreasi dengan template-template gratisan yang bagus-bagus menurut anda. Dan jika ingin berkreasi dengan menu buatan sendir anda bisa mencobanya dengan menggunakan aplikasi css generator => Download Disini

Cara Menambah Sub-Menu 2013 pada Blogspot


Assalamualaikum,
Kali ini saya berbagi trik atau tips untuk memberi sub menu pada menu di blog kita. Mungkin untuk beberapa kawan-kawan cara ini sudah lama, namun ada baiknya saya menulis ulang bagi kawan-kawan yang belum paham terkait hal ini. Selain itu cara ini juga bisa membantu saya , apabila saya lupa cara menambahkan sub menunya. Awalnya mungkin kita menebak bahwa sub menu ini hanya terdapat pada beberapa template tertentu. Ternyata pemikiran itu tidak sebenarnya salah dan benar, karena template bisa di atur di dalam 'edit HTML'.
Sekarang kita menuju caranya.

1. ubah sesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.
Keterangan : angka 1 menunjukkan 'tab atas' jangan pilih yang 'jangan ditampilkan'. Sedangkan angka 2 menunjukkan menu kita yang tidak memiliki sub menu.

2. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > centang pada ‘Expand Template Widget’ di bagian atas.

3. Cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di ATASnya.


 4. Cari kode <li><a  mungkin anda akan menemukan 2 kode yang sama. Pastikan kode tersebut berkelanjutan seperti :
<li><a expr:href='data:link.href'><data:link.title/></a></li>
Perhatikan di bawah nya akan ada kode <b:/loop>
Copy dan paste kode di bawah ini, di BAWAH kode <b:/loop> tadi.


 5. Simpan Template mu tadi. Lalu coba lihat blog, maka seharusnya akan ada tab bernama "Menu" di bagian atas blog anda beserta Sub Menu 1,2,3. Nah untuk mengganti nama "Menu" dan "Sub Menu 1" tadi, ganti tulisan "Menu" di pada kode <li><a href='#'>Menu</a> di atas dengan nama sesuka anda dan pada kode Sub Menu di atas. Jika anda menginginkan lebih dari 1 menu dengan sub menu, anda tinggal menambahkan kode di atas tadi di bawahnya.

Semoga artikel kali ini bermanfaat bagi kawan-kawan. Barakallahulaum wal ana.
Wassalamualaikum wr wb.

Cara Merubah Menu Template Hasil Download

OK bro kali ini saya akan memberikan toturial cara merubah halaman bawaan template hasil download di blog. Dulu sewaktu saya memulai membuat blog dan menulis artikel saya sangat semangat untuk mengelola blog saya tapi saya cepat bosan template blog tidak nyaman dan kurang menarik segera saya coba mendownload template dan dapat template yang bagi ku menarik seperti dibawah ini :


Tapi saya bingung bagaimana cara merubah atau menghilangkan halaman bawaan template tersebut. seperti dibawah ini sesuai kehendak ku..

Tidak pantang menyerah saya menemukan caranya. Ikuti langkah dibawah ini :
  • login ke dasbord blog anda
  • cari rancangan- edit html
  • jangan lupa centak kotak expand widget template 
  • selanjutnya cari kode <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  • trus lihat kode dibawahnya anda akan menemukan code seperti ini 
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'&gt;Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
  • Code diatas adalah kode yang akan diubah. anda bisa merubah kode sejenisnya diantara kode diatas
  • warna merah bisa anda ganti dengan judul halaman yang lain terserah anda, warna biru adalah anak dari judul halaman warna merah dan hijau anaknya lagi.Sedangkan warna orange link yang akan menunjukkan artikel-artikel dari judul halaman (URL).
  • Sedangkan kode <ul class='children'> digunakan untuk menciptakan anak halaman .anda bisa gunakan kode itu untuk menciptakan anak-anak lainya.
  • Dan jika anda inging mengisi Sub Menu dengan Label silahkan ganti # dengan alamat URL Label anda.
Sekian dari saya. semoga artikel ini bisa bermanfaat.

Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog

Download Download Now
Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog
Saya adalah blogger pemula yang bingung ketika memakai template yang tidak disediakan blogspot atau hasil download. Bagaimana Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog tersebut.
Saya sudah browsing mencari informasinya tetapi tidak ada yang cocok. Saya coba mencari permasalahan dan ternyata berhasil. Kebetulan saya memakai template b-SEO Versi 5. Mudah-mudahan cara ini berlaku untuk semua template hasil download. Dan kali ini saya akan bagikan cara-caranya:
1. Login ke Blogger.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Centang pada bagian kotak Expand Template Widget.
5. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman diatas header).

<div id='NavbarMenuAtas'>
Perhatikan Kode di Bawahnya

<li><a href='/'>Home</a></li>
<li><a href='/p/link-exchange.html'>Sampel Page</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='/p/link-exchange.html'>Link Exchange</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='#'>Pasang Iklan</a></li>

6. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman dibawah header).

<div id='NavbarMenu'>

Perhatikan Kode di Bawahnya

<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Blogging</a>
<ul><li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Widget</a></li>

</ul></li>
<li><a href='#'>Tekno</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Handphone</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Antivirus</a></li>

</ul>
</li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='#'>Kode Warna</a></li>
<li><a href='#'>HTML Parser</a></li>
<li><a href='#'>Meta Tags Generator</a></li>

</ul></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Aneka Remaja</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Foto</a></li>
<li><a href='#'>Google Plus</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Youtube</a></li>

Catatan:
Untuk tulisan berwarna biru adalah URL halaman.
Untuk tulisan berwarna hijau adalah Judul halaman.
Untuk kode yang berlatar abu-abu adalah Sub Menu pada menu di atasnya.

7. Editlah kode-kode halaman di atas sesuai keinginan sobat. Sobat bisa mengganti/memasukan URL halaman, mengganti Judul halaman, menambahkan halaman atau mengahpus halaman yang tidak terpakai.
8. Lihat dulu hasilnya lewat Pratinjau.
9. Simpan Template.

Untuk cara alternatif lebih mudah lagi sob, daripada pusing.
Sobat tinggal masuk ke Template>>Edit HTML. Centang Expand Template Widget. Dan cari salah satu judul laman pada template (gunakan tombol ctrl+f). Setelah ditemukan, maka editlah laman-laman disekitar seperti sudah sebelumnya dijelaskan.
Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog

Semoga sobat mengerti tutorial ini dan semoga cara ini berhasil. Amiien.

Mengedit Top Menu Pada Template Blogger

 ...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat" Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...
2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...
3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 
4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>


Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>
  </div>

ATAU....

>> Contoh II 
1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...
3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>
Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>
</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>
</li>

                </ul>
            </div>

...mudah bukan...