Minggu, 30 Desember 2012

TBx2 Blogger Template

Template Features
Platform TypeBlogger / Blogspot
Nama Template TBx2 Blogger Template
DeskripsiTBx2 Blogger Template adalah template blogger gratis yang ringan,  simple, motif yang sederhana, dilengkapi dengan social profiles seperti Facebook, twitter, Google plus, dll.
Template Authorhttp://wadahtutorial.blogspot.com/
Instruksi URL Cara Mengganti Template

TBx2 Blogger Template

Sabtu, 29 Desember 2012

Mengatasi Warning: At least one field must be set for HatomFeed

Warning: At least one field must be set for HatomFeed adalah salah satu pemberitahuan dari Rich snippets testing tools tentang kode blog Sobat yang kurang tepat.

Untuk memperbaikinya warning tersebut lakukan langkah dibawah ini :
  • Masuk ke akun blogger anda
  • Klik pada Template. (backup dulu template anda).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Tekan Ctrl + F di keyboard lalu cari kode hfeed, Sobat akan menemukan kode dibawah ini :
    <div class='blog-posts hfeed'>
  • Kalau sudah ketemu hapus hfeed pada kode di atas, jadi hasilnya seperti ini :
    <div class='blog-posts'>
    Biasanya ada dua kode hfeed, hapus aja dua-duanya Sob.
  • Terakhir klik Simpan Template, dan cek di Rich snippet tools.
Hanya itu tips dari saya tentang Mengatasi Warning: At least one field must be set for HatomFeed.

Rabu, 26 Desember 2012

Menghapus / Menghilangkan Navbar Blogger

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping stylenya yang kurang memuaskan bagi para blogger.

Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja.

Berikut salah satu caranya :
  • Masuk ke akun blogger anda
  • Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }
  • Terakhir klik Simpan Template.
Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :
  • Sama seperti cara pertama. Masuk ke akun blogger anda
  • Klik pada Template.
  • Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
    <script type='text/javascript'>
    <![CDATA[
    <!-- /*<body>*/ -->
    ]]>
    </script>
  • Simpan Template Anda.
  • Anda akan melihat gambar konformasi seperti di bawah ini.
    Menghapus / Menghilangkan Navbar Blogger
  • Klik Delete Widget untuk menghapus Navbar.
Jika Anda melakukan cara ini Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus / Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :
 <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       bla...
       bla...
       bla...
</b:widget>
</b:section>
Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus / Menghilangkan Navbar Blogger.

Senin, 24 Desember 2012

TB-Nofx Blogger Template

Kali ini saya ingin berbagi template gratis, TB-Nofx Blogger Template. Template ini bukan template yang keren, karena saya menjaga kesederhanaan pada template ini, namun template ini tergolong ringan karena hampir tidak menggunakan image.

Template Features :
Platform TypeBlogger / Blogspot
Nama Template TB-Nofx Blogger Template
Template Authorhttp://wadahtutorial.blogspot.com/
Instructions URL Cara Mengganti Template

Blogger Template

Jumat, 21 Desember 2012

TB-Neat Blogger template

Template Details :
Platform TypeBlogger / Blogspot
Nama Template TB-Neat Blogger template
DeskripsiTB-Neat Blogger template adalah template blogger gratis dengan sidebar di sebelah kanan dengan motif sederhana, auto readmore, dan social profiles.
Template Authorhttp://wadahtutorial.blogspot.com/
Instruksi URL Cara Mengganti Template

Blogger Template


Minggu, 16 Desember 2012

Menampilkan Share Buttons Bawaan Blogger

Share Buttons ini sangat bermanfaat buat blog karena dapat menjadi sarana bagi pengunjung untuk membagikan postingan kita ke situs-situs jejaring sosial. Share Buttons atau Tombol berbagi bawaan blogger terdiri atas Email, Blogger, Twitter, Facebook dan Google Plus.
Pada template hasil download biasanya tombol berbagi ini tidak di tampilkan, atau sengaja di hapus, karenanya kita harus melakukan beberapa langkah untuk menampilkan kembali share buttons bawaan blogger tersebut.

Buat sobat yang ingin menampilkan kembali share buttons bawaan blogger tersebut, silakan ikuti tutorial berikut:
  • Login ke blogger.com
  • Pada dashboard blogger, pilih Template.
  • Klik pada Edit dibagian bawah posting blog.
    Menampilkan Share Button
  • Beri centang pada Tampilkan Tombol Berbagi, lalu klik Simpan.
    Menampilkan Share Button
Silakan cek di blog sobat, jika share buttonsnya masih belum ada silakan lanjutkan ke langkah berikut :
  • Klik pada Template. Sebaiknya Backup Template sobat terlebih dahulu.
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode <data:post.body/>, jika ada dua pilih yang kedua, lalu letakkan kode berikut di bawahnya :
    <div class='post-share-buttons'>
    <b:include data='post' name='shareButtons'/>
    </div>
    Sobat juga bisa meletakkan kode tersebut dibawah kode <div class='post-footer-line post-footer-line-1'/>, terserah anda mau meletakkan di mana.
  • Simpan Template, dan cek blog sobat.
Jika share buttons masih belum muncul, lanjutkan lagi ke langkah berikut :
  • Cari kode dibawah ini :
    <b:includable id='shareButtons' var='post'>

    bla,, bla,, bla,,,

    </b:includable>
  • Ganti dengan :
    <b:includable id='shareButtons' var='post'>
      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
    </b:includable>
  • Simpan Template, dan cek blog sobat.
Jika sampai langkah ini share buttons masih belum muncul juga, Ane ga tau lagi tu template maunya apa?!?
Happy Blogging...

Kamis, 13 Desember 2012

Cornert Blogger Template

Cornert Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Nama Template Cornert Blogger Template
DescriptionCornert Blogger Template adalah template blogger gratis dengan sidebar di sebelah kanan, simple, ringan dan motif yang sederhana.
Template Authorwww.dotemplate.com
Instructions URL Cara Mengganti Template

Cornert Blogger Template

Selasa, 11 Desember 2012

Memasang Tombol Share +1

Langsung saja Sob, berikut cara pasang tombol share G+1 :
  • Login ke Blogger
  • Klik Tata Letak > Tambah Gadget.
  • Lalu pilih Tombol +1.
    Memasang Tombol Share +1
  • Save dan lihat hasilnya.
Untuk Memasang Widget Google Plus melayang (floating), silakan ikuti tutorial berikut :
  • Login ke Blogger
  • Klik Template > Edit HTML.
    Memasang Tombol Share +1
  • Klik Lanjutkan.
    Memasang Tombol Share +1
  • Beri centang pada Expand Template Widget.
    Memasang Tombol Share +1
  • Cari kode </head> lalu letakkan kode berikut diatasnya.
    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
    untuk Blog berbahasa indonesia gunakan kode berikut.
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js">
      {lang: 'id'}
    </script>
  • Cari kode ]]></b:skin>, lalu letakan kode berikut diatas kode ]]></b:skin>.
    #g_one { position:fixed;_position:absolute; bottom:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  • Selanjutnya cari kode </body> dan letakkan kode berikut di atasnya :
    <div id='g_one'>
    <g:plusone size='tall'/>
    </div>
  • Terakhir klik Simpan Template dan lihat hasilnya di blog sobat.
Segitu aja Sob, semoga bermanfaat...

Kamis, 06 Desember 2012

Serene Blogger Template

Serene Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Nama Template Serene Blogger Template
DescriptionSerene Blogger Template adalah template blogger gratis dengan sidebar di sebelah kanan,  minimalist, simple, dengan motif sederhana.
Template Authorhttp://wadahtutorial.blogspot.com/
Instructions URL Cara Mengganti Template

Serene Blogger Template

Rabu, 05 Desember 2012

Memasang Widget Google Plus

Memasang Widget Google Plus | Tutorial Blog

Google Plus merupakan salah satu media promosi yang paling efektif untuk meningkatkan traffic blog, karena itu akan lebih baik jika kita memasang widget Google plus di blog kita, jika semakin banyak orang di circle atau lingkaran sobat, maka semakin banyak pula link yang mengarah pada postingan sobat, dan itu sangat berpengaruh pada SEO.

Untuk dapat memasang widget Google Plus, terlebih dulu sobat harus meng-Upgrade Profile Blogger Ke Profile Google Plus. Jika sudah sobat dapat mengikuti langkah berikut ini :
  • Login ke Blogger
  • Klik Tata Letak > Tambah Gadget.
  • Lalu pilih Pengikut Google +.
    Memasang Widget Google Plus
  • Save dan lihat hasilnya
Untuk Memasang Widget Google Plus melayang (floating), sobat dapat mengikuti tutorial berikut :
  • Login ke Blogger
  • Klik Template > Edit HTML.
    Memasang Widget Google Plus
  • Klik Lanjutkan.
    Memasang Widget Google Plus
  • Beri centang pada Expand Template Widget.
    Memasang Widget Google Plus
  • Cari kode ]]></b:skin>, lalu letakan kode berikut diatas kode ]]></b:skin>
    #gplus { position:fixed;_position:absolute; bottom:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  • Selanjutnya cari kode </body> dan letakkan kode berikut di atasnya :
    <div id='gplus'>
    KODE WIDGET
    </div>
    Ganti KODE WIDGET dengan kode badge Google +.
    Untuk mendapatkan kode badge Google + silakan klik developers.google.com
  • Terakhir klik Simpan Template dan lihat hasilnya di blog sobat.
Silakan di coba Sob,,, Semoga Berhasil.

Sabtu, 01 Desember 2012

Cara Mengganti Template

Cara Mengganti Template | Tutorial Blog

Tutorial kali ini kita bahas cara untuk Mengganti Template Blog dengan template dari penyedia template gratis, karena selain menggunakan template standart dari blogger, Sobat juga dapat mengganti template blog anda dengan template dari penyedia template, sebelumnya download terlebih dahulu template yang ingin Sobat gunakan, untuk daftar Situs Penyedia Template Blog Gratis, silakan baca di sini : Situs Penyedia Template Gratis.

Berikut tutorial untuk mengganti template dengan template dari Situs Penyedia Template Gratis :
  • Download template yang ingin di gunakan.
  • Ekstrak file yang di download tadi, karena file yang akan kita upload ke blogger hanya file yang berekstensi .xml.
  • Login ke Blogger.
  • Klik pada blog yang akan di ganti templatenya.
  • Klik pada Template.
    Photobucket
  • Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
    Photobucket
  • Untuk jaga-jaga backup template Anda terlebih dulu, klik pada Unduh Template Lengkap.
    Photobucket
  • Klik tombol Browse, pilih file template yang tadi telah diekstrak.
    Photobucket
  • Kemudian klik tombol Unggah.
    Photobucket
  • Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.
Selamat mencoba dan semoga berhasil mengganti template Blog Anda.