Sabtu, 29 Desember 2012

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

By Adam04.40Seo, Tips Dan Trik, Tutorial BlogspotNo comments

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.

Menghapus / Menghilangkan Navbar Blogger

By Adam21.00Seo, Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

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[

]]>
</script>
Simpan Template Anda.
Anda akan melihat gambar konformasi seperti di bawah ini.
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.

Menampilkan Share Buttons Bawaan Blogger

By Adam21.21Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

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.
Beri centang pada Tampilkan Tombol Berbagi, lalu klik Simpan.

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 + "&target=email"' 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 + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&target=twitter"' 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 + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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 + "&target=orkut"' 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...

Memasang Tombol Share +1

By Adam00.20Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Langsung saja Sob, berikut cara pasang tombol share G+1 :

Login ke Blogger
Klik Tata Letak > Tambah Gadget.
Lalu pilih Tombol +1.
Save dan lihat hasilnya.

Untuk Memasang Widget Google Plus melayang (floating), silakan ikuti tutorial berikut :

Login ke Blogger
Klik Template > Edit HTML.
Klik Lanjutkan.
Beri centang pada Expand Template Widget.
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...

Memasang Widget Google Plus

By Adam05.17Seo, Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

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 +.
Save dan lihat hasilnya

Untuk Memasang Widget Google Plus melayang (floating), sobat dapat mengikuti tutorial berikut :

Login ke Blogger
Klik Template > Edit HTML.
Klik Lanjutkan.
Beri centang pada Expand Template Widget.
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.

Cara Mengganti Template

By Adam01.10Blogger Templates, Tutorial BlogspotNo comments

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.
Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
Untuk jaga-jaga backup template Anda terlebih dulu, klik pada Unduh Template Lengkap.
Klik tombol Browse, pilih file template yang tadi telah diekstrak.
Kemudian klik tombol Unggah.
Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Selamat mencoba dan semoga berhasil mengganti template Blog Anda.

Mempublish posting Google+ ke Twitter

By Adam02.22Seo, Tutorial BlogspotNo comments

Mempublish posting Google+ ke Twitter | Tutorial Blog

Google+ memang belum menshare API Google+ sehingga para developer belum dapat mengembangkan aplikasi untuk menghubungkan atau melakukan autopost dari Google+ ke social media lain, namun sobat dapat mengakalinya dengan menggunakan layanan tertentu yang memungkinkan sobat untuk Mempublish postingan Google+ ke Twitter.

Aplikasi yang saya maksud adalah ManageFlitter, Aplikasi ini sebenarnya tidak menggunakan API, melainkan berlangganan posting user di Google+ dan meneruskannya menjadi tweet di Twitter.

Buat Sobat yang ingin mencobanya silakan ikuti tutorial berikut :

Masuk ke manageflitter.com.
Klik Try it for FREE.
Klik Connect to Twitter, lalu sign in dengan akun twitter sobat.
Pilih Free, klik Select Plan.
Klik Dashboard.
Pada Google+ To Twitter, klik Turn on/off Google+ sharing
Hubungkan dengan Google+ anda. Masukkan url id Google +, pastikan akhiri dengan /posts.

Url ID Google Plus dapat dilihat pada halaman profil Google+. Copy url ID pada bagian address bar. Setelah mendapatkan urlnya + diakhiri /posts.
Klik Start Sharing.
Jika sudah berhasil Anda akan melihat tampilan seperti berikut.
Setelah proses selesai, maka post/status Google+ akan terkirim secara otomatis ke Twitter sebagai tweet. Pastikan post G+ anda di set ke public karena ManageFlitter hanya akan memposting post yg demikian.

Selamat mencoba dan semoga berhasil Mempublish posting Google+ ke Twitter

Cara Mengganti Template Blog

By Adam03.58Blogger Templates, Tutorial BlogspotNo comments

Cara Mengganti Template Blog | Tutorial Blog

Template blog atau website adalah desain halaman blog / website beserta seluruh komponennya seperti gambar, stylesheet, dsb, baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.

Dulu saya pernah bikin postingan mengganti template blog, namun karena sekarang Blogger menggunakan Tampilan Baru, jadi saya bikin lagi tutorialnya yang baru.

Di blogger Sobat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan sobat. Anda dapat menggunakan template buatan Anda sendiri untuk blog anda, bisa juga anda mengganti template blog dengan template dari penyedia template gratis. Namun, jika sobat masih belum bisa dalam membuat template, pihak blogger sendiri sudah menyediakan beberapa template yang bisa anda pilih.

Berikut ini cara mengganti Template dengan template yang disediakan blogger :

Login ke blogger.
Pada Dashboard Blogger pilih Blog yang ingin anda ganti templatenya.
Klik Template.
Klik tombol Sesuaikan.
Klik pada pilihan template yang tersedia.
Anda dapat melakukan pengaturan tampilan pada menu di sebelah kiri.
Jika sudah cocok dengan salah satu template, klik Terapkan ke Blog.
Selesai.

Untuk mengganti template dengan template dari penyedia template gratis, berikut caranya :

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 Template.
Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
Untuk jaga-jaga backup template Anda terlebih dulu, klik Unduh Template Lengkap.
Klik tombol Browse, pilih file template yang tadi telah diekstrak.
Kemudian klik tombol Unggah.
Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Untuk lebih jelasnya silakan baca Cara Mengganti Template.

Sekian tutorial tentang Cara Mengganti Template Blog.

Menampilkan Postingan Blog di Google Plus

By Adam00.26Seo, Tutorial BlogspotNo comments

Menampilkan Postingan Blog di Google Plus | Tutorial Blog

Salah satu cara untuk meningkatkan traffic, popularitas, dan visibilitas blog yaitu dengan menampilkan postingan blog ke jejaring sosial, seperti Menampilkan Posting Blog ke Twitter dan Facebook, dan lain-lain.

Pada tutorial kali ini akan saya share cara untuk menampilkan postingan blog di Google plus, Google + merupakan salah satu jejaring sosial yang sedang berkembang saat ini, dengan menampilkan postingan di Google plus maka akan meningkatkan visibilitas blog di hasil pencarian Google.

Untuk dapat menampilkan postingan blog di Google plus, Sobat terlebih dahulu harus mengUpgrade profile Blogger Sobat ke profile Google plus, jika belum tau caranya silakan baca Upgrade Profile Blogger Ke Profile Google Plus.

Jika profile Blogger Sobat sudah di upgrade, untuk menampilkan postingan blog ke Google plus silakan ikuti tutorial berikut ini :

Masuk ke dashboard blogger, lalu klik Posts.
Pilih Postingan yang ingin di tampilkan, pada bagian bawah postingan tersebut klik pada Share.
Selanjutnya klik Bagikan.
Postingan tersebut sudah di share di Google plus, silakan di cek di akun Google plus Sobat.

Gampang kan Sob, silakan di coba dan semoga berhasil Menampilkan Postingan Blog di Google Plus

Menampilkan Photo Profil di Google Search

By Adam08.00Tutorial BlogspotNo comments

Menampilkan Photo Profil di Google Search | Tutorial Blog

Fitur yang satu ini memang sangat menarik karena photo profil G+ kita akan tampil di hasil penelusuran Google. Caranya lumayan mudah kita cuma perlu melakukan settingan di akun Google Plus, kali ini saya akan share Cara Menampilkan Photo Profil di Google Search, memang agak repot dan munculnya di google juga sampai 3-4 hari setelah di setting.

Berikut Cara Menampilkan Photo Profil di Google Search :

Buat Halaman About Me atau Tentang Blog atau apalah di blog Sobat, yang pasti pada halaman tersebut sobat sisipkan link Google Plus milik sobat, misal :

<a href="https://plus.google.com/nomor-id-google-plus/" rel="author" target="_blank"> Akun Google Plus </a>

Ini bertujuan agar link profil G+ anda tampil di semua posting blog, sehingga akan mempercepat terindex.
Login ke plus.google.com, lalu klik ikon Profil.
Klik Edit Profil.
Pada bagian bawah Klik Kontributor untuk.
Klik Tambahkan tautan khusus.
Isi Label dengan nama Blog Sobat.
Pada URL masukkan alamat Blog Anda.
Klik Simpan.
Selanjutnya masuk ke Edit HTML Templete sobat dan letakkan kode berikut Setelah kode <head>
<link href='https://plus.google.com/116336255430619189673' rel='author'/>
<link href='https://plus.google.com/116336255430619189673' rel='publisher'/>
Ganti 116336255430619189673 dengan kode profil G+ Anda.
Selesai.

Untuk Memeriksa berhasil atau tidak silahkan cek di richsnippets, masukkan url blog/site kamu. misal, http://wadahtutorial.blogspot.com/.

Selamat mencoba dan semoga berhasil Menampilkan Photo Profil di Google Search.

Upgrade Profile Blogger Ke Profile Google Plus

By Adam03.10Tutorial BlogspotNo comments

Upgrade Profile Blogger Ke Profile Google Plus | Tutorial Blog

Google+ adalah salah satu social media yang terus berkembang, dan hebatnya lagi, memiliki keunggulan dalam hal peningkatkan visibilitas di hasil pencarian Google.

Pada Tutorial kali ini saya akan berbagi cara meng-Upgrade Profile Blogger Ke Profile Google Plus. Dengan meng-Upgrade Profile Blogger kita mendapatkan beberapa manfaat, antara lain :

Menambah jumlah teman di Google Plus dengan cepat.
Meningkatkan traffic blog.
Interaksi antara kita dan pengunjung blog kita sangat penting, maka menggunakan akun Google plus menjadi salah satu solusi yang tepat.
Kita dapat dengan mudah berbagi posting, juga menshare artikel kita pada google plus. Share box secara otomatis akan muncul ketika Anda mempublikasikan posting, Anda dapat segera berbagi konten dengan orang lain.
Sobat bisa membuat efek bintang google snippet, atau menambah photo Anda di sebelah kiri hasil penelusuran google.

Jika sobat tertarik untuk meng-upgrade profile blogger ke Profile Google Plus, silahkan ikuti langkah-langkah berikut :

Login blogger
Pada dashboard blogger pilih Google+
Lalu Klik upgrade to Google+.
Centang pada kotak I've read the above and ....... lalu Klik switch now.
Kemudian Klik Add Blogs.
Selesai.

Silakan di coba Sob, semoga berhasil.

RSS Feeds Dari Google Plus

By Adam00.19Seo, Tutorial BlogspotNo comments

RSS Feeds Dari Google Plus | Tutorial Blog

Google Plus merupakan salah satu jaringan sosial yang sedang ramai di gunakan oleh blogger-blogger untuk sekedar mencari teman atau untuk mempromosikan artikel blog. Saya akan berbagi tentang RSS feed dan perangkat gratis untuk menambahkan fitur di jaringan Google Plus. Ini akan mempermudah membaca RSS Feeds melalui Google+ to RSS.

Google+ to RSS adalah alat online gratis yang memungkinkan sobat menghasilkan RSS feed dari Google+ akun sobat.

Berikut cara mendaftar di Google+ to RSS :

Masuk ke akun Google Sobat.
Silahkan sobat kunjungi situs Google+ to RSS.
Pada halaman awal klik Login Via Google +.
Lalu Klik Izinkan Akses.
Setelah selesai, maka Google+ to RSS otomatis akan membuat RSS feed dan lihat hasil RSS dari Google Plus.

Silahkan dicoba dulu Sob, dan semoga berhasil.

Membuat Text Area dengan Tombol Highlight All

By Adam02.30Tutorial BlogspotNo comments

Membuat Text Area dengan Tombol Highlight All | Tutorial Blog

Tutorial kali ini saya akan coba berbagi tentang cara Membuat Text Area dengan tombol Highlight All. Dengan menggunakan Highlight All akan lebih memudahkan mengcopy kalimat/kode script yang ada di dalam text area.

Untuk membuatnya cukup mudah, silahkan copy kode dibawah ini :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL"><a href="http://banjarinfo.blogspot.com/" rel="dofollow" target="_blank">Tutorial Blog</a></textarea></div>
</form>
</div>

Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan. hasilnya akan seperti dibawah ini :

Sekian penjelasan singkat mengenai cara Membuat Text Area dengan tombol Highlight All.
Semoga bermanfaat . . .

Membuat Efek Daun Berjatuhan di Blog

By Adam05.46Tips Dan Trik, Tutorial BlogspotNo comments

Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

Login ke dashboard blogger anda.
Klik Template > Edit HTML.
Lalu klik Proceed dan centang Expand widget template.
Cari kode </head> pada template dengan menggunakan Ctrl+F.
Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

Memberi Efek Hujan Salju di Blog

By Adam06.31Tutorial BlogspotNo comments

Memberi Efek Hujan Salju di Blog | Tutorial Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

Login ke dashboard blogger sobat.
Pilih Layout > Add gadget > HTML/JavaScript.

Spoiler :
Letakkan script dibawah ini pada gadget.
<script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
Save dan lihat hasilnya.

Spoiler :

Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

Menu Dropdown dengan Background

By Adam21.18Tutorial BlogspotNo comments

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

Login ke blogger Anda, klik menu Design > Edit HTML.
Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>
Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
Lalu klik Save Template.
Kemudian klik menu Design > Page Element > Add a Gadget.
Pilih HTML/Javascript, lalu masukkan kode berikut ini :
<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Optimasi SEO Menggunakan Anchor Text

By Adam21.38Seo, Tips Dan TrikNo comments

Optimasi SEO Menggunakan Anchor Text | Tutorial Blog

Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. Anchor Text dapat meningkatkan pageview, memperbanyak backlink dan meningkatkan trafik. hal tersebut dapat membuat sebuah situs memiliki tempat penting pada halaman Search Engine Result Page (SERP).

Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti.

Berikut beberapa contoh penulisan kode html untuk membuat anchor text :

Membuat Anchor Text sesuai judul Blog.
<a href="http://banjarinfo.blogspot.com/">Tutorial Blog</a>
Membuat Anchor Text untuk salah satu artikel.
<a href="http://banjarinfo.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a>
Membuat Anchor Text pada image.
<a href="http://banjarinfo.blogspot.com/"><img alt="Tutorial Blog" border="0" src="Url Image" />Tutorial Blog</a>

Beberapa hal yang perlu diperhatikan dalam penggunaan anchor text :

Kerapatan keyword dalam sebuah postingan. Beberapa forum SEO menyarankan kerapatan anchor teks yang baik minimal 300 karakter terdapat 1 anchor text.
Jumlah karakter anchor text maksimal 60 karakter, karena search engine biasanya mengambil 60 karakter terdepan dari keyword. Jika lebih terkadang search engine tidak mampu mengindeks keywordnya.
Anchor text untuk link di dalam blog sebaiknya berhubungan dengan judul postingan atau lebih baik jika keyword yang di gunakan juga terdapat di judul postingan, meta tag, judul blog, nama domain dan deskripsi blog agar robot searcgh engine memberi bobot relevansi yang tinggi. Jika halaman target di luar blog Anda sebaiknya gunakan keyword yang berhubungan dengan judul halaman yang akan di link.
Perhatikan pesaing Anda di google search, jika kita menggunakan blog yang masih rendah Pageranknya, sebaiknya lakukan optimasi dari keyword yang rendah saingannya. contoh: keyword Bisnis Online lebih ketat persaingannya dibanding keyword Teknik Bisnis Online, Bisnis Online untuk pemula. Usahakan mendapatkan backlink dengan keyword yang anda optimasi tersebut agar cepat muncul di halaman pertama mesin pencari.
Optimasi keyword seiring dengan peningkatan trafik, jika di dalam sebuah blog terlalu banyak link tetapi jumlah kunjungan berkurang, maka akan menyebabkan pagerank halaman tersebut berkurang. Dan bisa mempengaruhi google pagerank blog secara keseluruhan. Semakin banyak keyword yang anda pasang maka semakin banyak trafik yang dibutuhkan untuk mengimbangi, agar pagerank halamannya bisa bertahan atau meningkat.(sebagai catatan: setiap halaman mempunyai pagerank sendiri).
Anda bisa melakukan rotasi anchor teks, misalnya dalam 3 bulan pertama gunakan Cara Mudah Belajar Bisnis Online untuk pemula, kemudian 3 bulan berikutnya ganti dengan Teknis Bisnis Online, dalam melakukan rotasi sebaiknya gunakan potongan dari keyword awal, dengan catatan anda harus menambah kalimat baru untuk menempatkan keyword baru tanpa mengubah struktur kalimat lama.
Terus membuat keyword baru pada postingan baru, karena search engine senang jika mendeteksi update pada blog/website.
Anchor text Anda perlukan untuk membangun backlink, bisa dengan melakukan link antar halaman dalam sebuah blog, atau link dari blog lain ke blog anda.
Hindari penggunaan anchor teks yang kurang tepat, misal : d@wnload (kombinasi simbol dan alfabet), dan kata tidak baku lainnya.
Hindari menggunakan keyword yang tidak dikenali oleh search engine. misalnya dalam pertukaran link menggunakan kata : Namapemilikblog, url tetap terindeks, tetapi penempatan keywordnya yang kurang tepat,karena mungkin 50% pengguna internet jarang mencari nama atau url di search engine saat mencari blog, terkecuali jika blog anda sudah terkenal maka biasanya banyak pengunjung yang mengetikkan nama anda untuk menemukan blog.

Semoga artikel ini bermanfaat buat kita dalam optimasi blog.

Menampilkan Tag Clouds di Blogger

By Adam21.11Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Menampilkan Tag Clouds di Blogger | Tutorial Blog

Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.

Berikut cara Menampilkan Tag Clouds di Blogger :

Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget.
Kemudian pilih Label. Pada display ganti dari Daftar menjadi Cloud.
Lalu klik Save.

Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :

Klik Design > Edit HTML, beri centang pada Expand Template Widget.
Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin>
/* Label Cloud Styles */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Copy kode dibawah ini, letakkan tepat di bawah kode ]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Simpan template Anda dan lihat hasilnya!.

Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

Optimasi SEO pada Image

By Adam21.08Seo, Tips Dan TrikNo comments

Optimasi SEO pada Image | Tutorial Blog

Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan.

Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar.

Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :

Jangan gunakan "gambar1.png" atau "gambar2.jpg" sebagai nama file. Cobalah gunakan nama file Anda sebagai kata kunci atau keyword, contoh, "seo-on-page.png" atau "alt-tag.jpg"
Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam
Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text
Format gambar dengan jenis file - JPEG, GIF, PNG, dan BMP
Simpan semua gambar dalam direktori yang sama.

Contoh penggunaan Alt tag pada Image / gambar

Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

Membuat Recent Comments Blogger dengan Avatar | Tutorial Blog

Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML. Untuk postingan ini saya buat singkat saja.

Berikut caranya :

Buat widget HTML/JavaScript.
Beri judul Recent Comments atau apalah terserah Anda.

Lalu masukkan kode berikut :

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://banjarinfo.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Keterangan :

numComments : 5, jumlah komentar yang ditampilkan

avatarSize : 30, ukuran avatar dalam pixel

characters : 60, jumlah karakter yang ditampilkan

banjarinfo.blogspot.com ganti dengan URL blog Anda.

max-results=5, jumlah komentar yang ditampilkan, ganti sesuai keinginan Anda.

Terakhir klik Save. Selesai...

Selamat mencoba Membuat Recent Comments Blogger dengan Avatar.

Menampilkan Smiley Pada Postingan Blogger

By Adam04.00Tips Dan Trik, Tutorial BlogspotNo comments

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog

Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau.

Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti Menampilkan Smiley Pada Postingan

dan lain lain.

Caranya gampang Sob, silakan ikuti tutorial berikut :

Login ke blogger trus pilih Layout > Edit HTML.
Beri tanda centang pada Expand Widget Templates.
Cari kode ini ]]></b:skin> .
Masukkan script berikut ini dibawah kode ]]></b:skin>
<script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
Terakhir klik Save Template. Selesai...