Cara Mengedit Template Blogger Versi Terbaru 2013

Cara Mengedit Template Blogger Versi Terbaru 2013 - Di tahun 2013 ini, tepatnya bulan April 2013, Blogger telah memperbarui Tampilan Edit HTML pada Menu Template. Dengan Tampilan Editor Baru ini tentunya akan membuat kita lebih mudah untuk Mengedit Template Blog kita. Tetapi, ada juga blogger yang masih bingung menggunakan Editor Template Baru ini. Pasalnya banyak sekali perubahan yang terjadi pada Tampilan Edit HTML Terbaru ini, di antaranya adalah Hilangnya tombol 'Expand Template Widget', Hal ini juga menjadi masalah bagi para blogger karena kesulitan untuk mencari sebuah kode. Untuk itu, pada kali ini saya akan membagikan Tutorial Mengedit Template Blogger Versi Terbaru 2013. Sebelumnya, mari kita pelajari terlebih dahulu tentang Edit HTML Template pada tampilan baru ini, berikut penjelasannya.

- (Back) = Tombol untuk kembali ke halaman Template, untuk membatalkan Edit HTML.
- (Save Template) = Tombol untuk Menyimpan perubahan hasil Edit HTML.
- (Jump to Widget) = Tombol untuk mempermudah mencari kode Widget.
- (Edit template) = Halaman untuk Mengedit Template.
- (Preview template) = Tombol untuk mempratinjau/melihat hasil Edit HTML sebelum Menyimpannya.
- (Format template) = Tombol untuk menghilangkan perubahan yang sudah dilakukan dalam satu pengeditan.
- (Revert changes) = Tombol untuk mengembalikan semua perubahan yang sudah dilakukan.
- (Revert widget templates to default) = Tombol untuk mengembalikan tampilan blog ke tampilan semula dan menghilangkan beberapa fungsi yang ada pada template.

Bila masih kebingungan dengan tampilan baru Editor HTML Blogger ini, Anda bisa lihat penjelasan yang mungkin bisa Anda pelajari dibawah ini.




Berikut Cara Mengedit Template Blogger Versi Terbaru 2013 : 

• Mencari Kode HTML

Bagaimana cara mencari kode html pada tampilan terbaru Edit HTML Blogger? Kalau dulu, kita harus klik tombol "Expand Template Widget" untuk mencari kode HTML. Tapi, sekarang kita tidak perlu menggunakan tombol itu, yaitu kita hanya perlu klik (CTRL + F). Pertama-tama, klik kode apa saja pada Edit template, lalu Anda klik (CTRL + F), kemudian Anda ketik kode yang ingin Anda cari. Setelah itu, Anda akan dapat menemukan kode yang Anda cari.

• Mencari Kode Widget dengan 'Jump to Widget'

Kini, blogger telah menambahkan fitur baru untuk memudahkan kita mencari kode Widget, yaitu dengan Tombol 'Jump to Widget'. Dengan adanya fitur 'Jump to Widget' ini, Anda akan lebih mudah untuk menuju ke kode Widget blog Anda. Caranya pun cukup mudah, Anda hanya perlu klik pada Tombol 'Jump to Widget', lalu akan muncul menu dropdown, jika Anda klik salah satu menu tersebut, maka Anda akan langsung menuju ke kode tersebut.

Setelah Anda menemukan kode tersebut, Anda akan menemukan Tanda expand folder '►' yang berguna untuk membuka rangkaian kode dari Widget tersebut.

Demikian Cara Mengedit Template Blogger Versi Terbaru 2013, 

Semoga bisa membantu Anda untuk mempermudah menggunakan Editor HTML Blogger Terbaru 2013 ini.

Download Template Blogger Mirip Yahoo!

Download Template Blogger Mirip Yahoo! - Bagi Anda yang menggemari mengoleksi berbagai Template - template keren, unik, dan menarik tentunya.. bisa Anda Download Template Blogger Mirip Yahoo! ini. Dengan tampilan yang serupa dengan website Yahoo! mulai dari tombol search, menu blog, slideshow dan lainnya. 

DOWNLOAD - DEMO

Untuk melengkapi tampilannya, diperlukan Widget - widget yang mirip seperti situs Yahoo!. Berikut ini kode - kodenya :

1. Search Engine 

 <div style='font:normal 12px arial;padding-left:5px;height:23px;'>
<strong><i>Hi, guest<strong></strong></i> ! </strong> welcome to <strong>Yahoo!</strong>. | <a href='#'>About Us</a> | <a href='#'>Contact</a> | <a href='http://www.blogger.com' title='registered now for free account'>Register</a> | <a href='http://www.blogger.com' title='sign in to blogger to share'>Sign In</a></div>
<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>

2. Slideshow

<div id="gal1" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7IDptP90uZlP2mr_CqsdlamvNppeCTLXWVfu6yc7laBtW_cLYpwMD4QR-PA8mAfjGCyEZSIY6n9CHpNwh3zcGTNVXm1wReanGiariv3kH66htTOauZ7JjtPugr1F1ScInqcc0Nicm473/s1600/lorem+ipsum2.jpg&cat=1&pid=210 7&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Yahoo! Indonesia</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Read the Yahoo! Indonesia</strong></a>
</div>
</div>
</div>
<div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VJjhtbXaefNeC_7oURNSiiIH0W8sZCpvBTYY9jxoYbD6l-EdnWNr9IBQAp9FIU0A1damv_pypSmUmuuJ1gFlMHVWvsHZZ9HQkvqPTUK0LJ5amBgwQmT9qIW8u6i1xDyoUW1JlKqIGaHB/s1600/What+is+a+Blog.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>BASIC KNOWLEDGE</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Basic knowledge, what is a Blog ?</strong></a>
</div>
</div>
</div>
<div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljfeGW07Ii-h-u73tEQCRh2jh1xj9TB6zyfkUXJYipUHm7YEqbYU3FY56Ezzj-P2nUWoblXzlG53xXZmCyOAqqxGRhE_W5xE86Ww1H7VqZcbkbkGFXWkhZHjFilB-KMjdzF2yjoXAiP8P/s1600/Lionel+Messi.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>SPORT NEWS</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Lionel Messi, the legend of the future football</strong></a>
</div>
</div>
</div>
<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HYg3JzOeJTV019mLhxn0bp7QE9sC2CVobv43c_xWcoMYABnHo-5Jd-sZoTrBhDQ2fAWQp9_ZSVxuR0O8ErfhwYAdewidXwjlO_N7EUKKuQianZTyIL2Fql8LmhvJJ6vFQLOu9ErUmHVe/s1600/Font+Style.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>FONT STYLE</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>The Quick Brown Fox</strong></a>
</div>
</div>
</div>
<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGpntCerr0SomcH4YRz1m6P1eQn1DQ4WAsVpzEMP1vwtHRNLbcx2jZ10jLp8MvhnBxYakZM58wTbVBCMgWMdgeEhJ386IF4tNXxkN6Tg4VDLgyvXBot1kX8uSOtyjagL5wuai5wmmA86Y/s1600/Google+Office.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>MAKE MONEY</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Monetize your site with Google Affiliate Network</strong></a>
</div>
</div>
</div>
<div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false); myheads.setselectedClassTarget("link");myheads.ini t(5000)
</script>

3. Menu Blog

<div id='sidebarnavigation'>
<ul>
<li class='about'><a href="#"/>About Us</a></li>
<li class='contact'><a href="#"/>Contact Us</a></li>
<li class='facebook'><a href="#" target="_blank"/> Facebook</a></li>
<li class='twitter'><a href="#" target="_blank"/> Twitter</a></li>
<li class='email'><a href="#" target="_blank"/> Email</a></li>
<li class='video'><a href="#" target="_blank"/> Video</a></li>
<li class='music'><a href="#" target="_blank"/> Music</a></li>
<li class='download'><a href="#" target="_blank"/> Download</a></li>
<li class='data'><a href="#" target="_blank"/> Data</a></li>
<li class='rss'><a href="#" target="_blank"/> RSS Feed</a></li>
<li><a href='#'>Archieves</a></li>
</ul>
</div>
<div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'>
<a href='http://tutorial-blogz.blogspot.com'>More CATEGORIES »</a>
</div>

4. Favorit Saya

<div id='sidebarnavigation'>
<ul>
<li class='msn'><a href="#"/>Msn</a></li>
<li class='yahoo'><a href="#"/>Yahoo</a></li>
<li class='blogger'><a href="#" target="_blank"/> Blogger</a></li>
<li class='gmail'><a href="#" target="_blank"/> Gmail</a></li>
<li class='bing'><a href="#" target="_blank"/> Bing</a></li>
</ul>
</div>
<div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'>
<a href='http://tutorial-blogz.blogspot.com'>More FAVORIT »</a>
</div>

Keterangan : Berikut cara untuk menambahkan widgetnya :
- Login ke Blogger
- Pilih Layout
- Klik Add a Gadget
- Pilih HTML/JavaScript
- Masukkan kode widgetnya
- Save.

Facebook Blogger Template

Facebook Blogger Template - Apakah anda ingin tampilan blog anda mirip dengan tampilan facebook? jangan khawatir, karena sekarang saya akan berbagi Template Blogger Facebook. Facebook Blogger Template adalah template yang cukup unik dan menarik, karena memang template ini sangat mirip dengan tampilan di facebook. Warna biru untuk menu dan latar belakang, fitur read more otomatis, sidebar kanan dan logo yang menarik. 

 

DOWNLOAD - DEMO

Password : tutorialblogz

GamesPark Blogger Template

GamesPark Blogger Template adalah template blogger yang sangat baik dan sangat profesional, dengan warna hitam untuk latar belakang utama, dan memiliki beberapa fitur seperti 2 tata letak, 1 sidebar kanan, slider untuk fitur posting, banner iklan 260x260, desain minimalis membuat tema cepat pada browser dan sangat direkomendasikan tema blogger untuk situs game.

 

DOWNLOAD  -  DEMO

Blue Dream Blogger Template

Blue Dream Blogger Template adalah blogger template yang bagus bagi pribadi, dengan fitur-fiturnya seperti widget slidshow dan warna biru untuk latar belakang utama, tema ini memiliki fitur lain seperti 2 kolom, 1 sidebar kanan, 3 kolom elemen footer, desain yang indah dan sangat elegan dengan ikon social bookmark pada header kanan atas, jadi kamu harus mencoba template yang satu ini untuk blog pribadi.

DOWNLOAD  -  DEMO 

LifeTime Blogger Template

LifeTime Blogger Template adalah kategori template blogger template gratis yang di buat oleh tema WordPress pada template blogger dengan beberapa fitur seperti warna hitam untuk latar belakang utama, 2 kolom, 1 sidebar kanan, menu pagelist untuk navigasi utama, ikon social bookmark seperti facebook, twitter, digg dan Stumbleupon, 3 kolom widget di footer. Bila tertarik, kamu bisa mendownloadnya untuk situs pribadi.

DOWNLOAD  -  DEMO

GamingWeb Blogger Template

GamingWeb Blogger Template adalah template blogger gratis yang mengambil tema dari Game terkenal. Template ini mempunyai banyak fitur seperti desain dinamis, gambar header cantik, 3 kolom di bagian footer, 1 sidebar di menu kanan dan slidshow diatas. Template ini juga di sertai dengan ikon social bookmark dan label otomatis pada bagian menu horizontal, warna biru untuk latar belakang yang sangat terintegrasi dengan baik dengan gambar pada header.

DOWNLOAD  -  DEMO

ElegantZine Blogger Template

ElegantZine Blogger Template adalah blogger template gratis yang dibuat oleh WordPress Theme ke Blogger Template dengan Tata letak sederhana. Fitur Template : Warna dasar putih abu-abu, 2 kolom, 1 sidebar kanan, posting fitur, menu slider, menu dropdown dengan warna abu-abu dan putih, ikon social bookmark di sidebar, tab menu, iklan dan masih banyak lagi. ElegantZine Blogger Template dapat digunakan untuk blog pribadi atau umum.

 

DOWNLOAD  -  DEMO