Membuat Sitemap atau Daftar Isi Accordion pada Blog

Kali ini saya berbagi tutorial untuk meningkatkan Page Rank (Ranking Halaman) pada blog anda.. Pertanyaannya bagaimana cara membuatnya? Mudah saja jawabannya yaitu buatlah sitemap atau daftar isi blog anda. Ketika anda adalah pengguna wordpress maka sangat mudah untuk membuatnya, tetapi jika anda pengguna blogger jangan cemas karena saya akan memberikan trik dan tips cara membuat site map. Site Map yang akan kita buat akan menggunakan Javascript Accordion milik Abu farman. Site Map ini dilengkapi dengan efek SHOW HIDE yang sangat keren. Jadi sekarang saya akan kasih tutorial bagaimana membuat SEO Friendly Sitemap (Tabel Contents) with Accordion untuk blog anda.

1. Masuk ke Blogger
2. Pilih Posting - Edit Laman
3. Pilih Laman Baru, Masukan judul Posting misalnya SITEMAP BLOG TRIK DAN TIPS
4. Terakhir Paste kode dibawah ini:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.blogtrikdantips.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

5. Ubah kode http://blogtrikdantips.blogspot.com dengan url blog anda
6. Terbitkan posting anda lalu lihat hasilnya

Ok itu saja, sangat mudahkan untuk membuatnya! Tentunya dengan sitemap tersebut penunjung anda akan betah di blog sobat dan tentunya blog menjadi lebih SEO Friendly. Terima kasih telah berkunjung ke blog saya, semoga artikel ini bermanfat. Jangan lupa berkomentar ya.....

Animasi , Posting , Tips dan Triks , Widget

Cara Memasang Recommended Slide Out di Blog

Widget Recommended Slide Out dapat membuat pengunjung menyukai situs anda dengan efek animasinya yang keren. Widget semacam ini pernah popular di beberapa situs ternama seperti New York Times, Mashable, Times of India dan lain-lain. Widget ini mengajak pengunjung untuk membaca artikel lainnya di blog anda. Widget jquery ini akan muncul seperti slide ketika pengujung melihat halaman yang paling bawah. Recommended slide out akan menampilkan posting acak pada blog anda. Anda tidak perlu kuatir dengan loading page blog karena widget ini telah dimodifikasi sehingga tidak membuat halaman menjadi berat.

1. Untuk membuatnya silahkan kunjungi situs BloggerPlugins.org atau KLIK DISINI
2. Pada situs tersebut klik icon blogger yang tampak seperti dibawah ini:

3. Akan muncul jendela baru, lalu klik Menambah Widget

Widget anda akan tersimpan pada Elemen Halaman. Jika anda ingin melihatnya, maka buka posting dari halaman anda, lalu scroll ke halaman paling bawah. Anda akan melihat recommended post slideout muncul dari sudut kanan. Selamat mencobanya!

Animasi , Jquery , Posting , Widget

Membuat Recent Post dengan Menggunakan Feed

Ada beragam cara kita bisa membuat Recent Post. Misalnya menggunakan widget yang disediakan oleh blogger, menggunakan script HTML atau Jquery dan bisa juga menggunakan feed. Recent post sendiri memiliki tampilan yang berbeda tergantung script kode yang kita gunakan. Misalnya ada recent post yang menggunakan thumbnail, recent post dengan slider thumbnail, serta ada recent post daftar isi blog. Awalnya saya mencoba memasang recent post dengan menggunakan widget pada blogger namun loading page halaman menjadi lebih lambat serta widget recent post lama ditampilkan. Akhirnya saya mencoba untuk membuat recent post menggunakan feed karena lebih cepat loadingnya. Pengen tau caranya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Elemen Halaman
3. Tambahkan Gadjet anda
4. Pilih Feed
5. Masukan feed blog anda (ganti warna biru dengan url blog anda):
Misalnya feed milik saya http://blogtrikdantips.blogspot.com/atom.xml

6. Klik Lanjutkan
7. Pada Konfigurasi Feed, pilih tampilan yang diinginkan
8. Simpan feed anda.

Dengan mengikuti langkah diatas, anda akan memiliki daftar recent post hanya menggunakan feed. Selamat mencobanya!!!

Feed , Posting , Widget

Cara Membuat Related Post dengan Thumbnails

Trik dan tips kali ini akan membahas cara membuat related post dengan thumbnails. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini akan kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi dari related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Saya kebetulan memperoleh widget ini dari situs Indahnya Berbagi. Jika ingin membuatnya langsung saja menuju TKP:

1. Masuk ke Rancangan ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'>
atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini, dibawah salah satu kode langkah ke.4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

6. Terakhir simpan template anda.

Semoga artikel ini bermanfaat!

Gambar , Posting , Tips dan Triks , Widget

Cara Memasang HTML Encoder di Langsung di Blogspot

Jika sobat menulis artikel mengenai tutorial bloging, maka sobat akan sering menggunakan fasilitas HTML encoder. Selama ini Blog Trik dan Tips menggunakan HTML Encoder yang dibuat sendiri, kalau sobat ingin tau caranya bisa dilihat DISINI.

Tapi kini ada cara lain untuk memudahkan kita menggunakan fasilitas HTML encoder langsung dari situs Blogger-Blogspot. Tentunya hal ini akan memudahkan sobat lebih cepat dan mudah untuk membuat posting jika berurusan dengan kode-kode HTML. Cara memasangnya pada blogspot cukup mudah saja, silahkan dicoba jika tertarik untuk memasangnya. Berikut langkah memasangnya:

1. Download Greasemonkey 0.8.20090123.1 pada situs https://addons.mozilla.org/en-US/firefox/addon/748
2. Instal dan restart browser anda kembali
3. Kemudian install JavaScript http://userscripts.org/scripts/source/42696.user.js
4. Coba lihat di menu posting, pasti akan muncul tombol "HTML Encode Selection".
5. Untuk memparse kode HTML, sobat login ke blogger kemudian buatlah posting baru.
6. Pilihlah tab Edit HTML di samping tab Tulis
7. Untuk memparse kode HTML, maka anda hanya menghighlight kode HTML yang ingin diparse dan klik tombol HTML ENCODE SELECTION

Kode-kode tersebut kemudian akan diparse tanpa sobat menunggu proses loading. Selamat mencoba dan good luck!!!

Posting , Widget

Cara Membuat Emoticon pada Posting

Akhirnya posting menjadi lebih menjadi lebih menyenangkan.....Ini dia yang saya tunggu yaitu membuat emoticon pada posting....dan yang lebih kerennya sambil menulis saya bisa langsung menaruh emoticon hanya dengan sekali klik....

Yang pasti sobat juga penasaran bagaimana cara buatnya......sebelumnya sih saya pikir untuk membuat emoticon harus repot utak taik kode HTML template.....tapi kenyataannya tidak ....dengan menginstal adds-on firefox dibawah ini langsung harapan saya tercapai.

Mau tau nich bagaimana cara membuatnya, ikuti aja langkah dibawah ini.

1. Download Firefox Versi Terbaru..
2. Kemudian yang sobat lakukan adalah menginstal GreaseMonkey Extension untuk Firefox, atau KLIK DISINI
3. Jangan lupa untuk direstart browsernya
4. Selanjutnya install script emoticon untuk blogger atau KLIK DISINI

Coba cek blog anda. Untuk melihat emoticonnya masuk ke Posting lalu pilih tab "Tulis" bukan "Edit HTML"

Untuk menginstal emoticon lainnya dapat diinstal juga:
1. Naruto, download scriptnya disini
2. Kitty, download scriptnya disini
3. Pika, download scriptnya disini
4. Pucca, download scriptnya disini

Sobat nanti akan melihat icon kecil pada bagian kanan bawah layar browser. Untuk menonaktifkan salah satu emoticon pada posting blogger, klik kanan icon tadi dan pilih emoticon yang mau dinonaktifkan.

Langkah terakhir ialah memodifikasi tampilan emoticon agar tidak memiliki garis tepi dengan menaruh kode berikut di atas kode ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Terakhir jangan lupa untuk menyimpan template sobat...Selamat mencoba!

Gambar , Posting

Cara Mencari Orang Yang Menciplak Posting Anda?

Anda pernah membuat artikel dan akhirnya hanya dikopi atau diciplak orang yang tidak bertanggung jawab....Anda pasti ingin mengetahui siapa yang melakukannya. Tentunya ada cara yang mudah untuk mengetahui mereka....Copyspace adalah sebuah layanan online yang melayani deteksi plagiarisme dimana terdapat artikel yang sama pada blog lainnya. Situs ini dirilis pada tahun 2004 oleh Indigo Stream Technologies, Ltd.

1. Kunjungi situs Copyscape atau klik link DISINI.
2. Nantinya anda akan berjumpa dengan sebuah kotak dimana anda perlu menulis alamat website atau blog anda. Kemudian klik Tombol Go
3. Secara langsung web tersebut akan mendeteksi apabila terdapat artikel yang sama dengan blog anda. Anda akan diberi informasi siapa saja yang menjiplak artikel anda.....

Situs ini juga menyediakan banner untuk melindungi hak cipta atas karya anda,.....

Posting

Cara Membuat Read More Versi Lama

Read more memiliki arti bahwa jika anda memiliki posting yang penuh dan menghabiskan banyak ruang maka anda dapat menghemat ruang tersebut dengan memperpendek sebagian posting pada home page. Readmore memiliki dua versi yang berbeda yaitu versi lama dan versi baru. Versi terbaru yaitu sobat tidak perlu membuat script pada posting untuk memunculkan sebagian artikel melainkan script readmore tersebut sudah terpasang pada template dan akan melakukan pemotongan artikel secara otomatis. Pada versi yang lama kita perlu menambah script pada posting untuk memunculkan sebagian artikel pada home page. Berikut ini saya akan memberikan trik bagaimana membuat readmore versi lama.

1. Masuk ke Rancangan, klik pada Edit HTML.
2. Kemudian klik pada Expand Template Widget
3. Cari kode dibawah ini:

< div class='post-body entry-content'>
< data:post.body/>

4. Hapus kedua kode tersebut dan gantikan dengan kode ini:

<div class="'post-body"><b:if cond="'data:blog.pageType"><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style><data:post.body/><a href="'data:post.url'">Read More</a></b:if>

5. Simpan template sobat

Untuk menerapkan readmore pada posting sobat maka ketika sobat menulis artikel, masuk ke bagian Posting -- Edit HTML. Sisipkan kode berwarna merah dibawah ini untuk membuat pemenggalan artikel yang ingin ditampilkan pada home page:

< span class="fullpost">
-- Tulisan sobat yang ingin ditampilkan pada home page (readmore) --
</span>
-- Tulisan sobat yang ditampilkan pada full post --

Selamat mencoba!!!

Posting