Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Cara Mengatasi Masalah Pada Kode Read More

Beberapa hari yang lalu saya pernah memposting tentang cara menambahkan kode read more pada blogger. Dan cara tersebut yang saya gunakan pada blog saya. Namun setelah saya coba ternyata ada kelemahan dari metode ini dimana setiap kali saya mau memposting artikel. Saya harus memindahkan kode dibawah potongan artikel yang mau ditampilkan dan memindahkan kode di akhir artikel.

Jika saya lupa untuk memindahkan kode tersebut setelah memposting maka link read morenya akan muncul pada akhir artikel. Dan meskipun posisi kode read more sudah diperbaiki, link read morenya tetap muncul pada akhir artikel.

Masalah ini timbul dikarenakan ada kode atau yang dobel pada kotak posting Edit HTML. Untuk mengatasi masalah ini saya harus menghapus kode tersebut hingga tinggal satu kode dan pada kotak posting.

Cara ini sangat merepotkan karena biasanya kode ini akan menjadi sangat banyak. Sehingga sangat memakan waktu. Bagi anda yang juga mengalami masalah ini bisa mengatasinya dengan cara berikut:

1. Pada menu Blogger. Klik Settings lalu klik Formatting.
2. Hapus kode dan pada kotak "post template" lalu klik Save Settings.
3. Selesai.

Sekarang Anda tidak perlu khawatir lagi jika Anda lupa untuk mengatur posisi kode read morenya pada kotak posting Edit HTML saat memposting. Anda cukup mengetikkan sendiri kode dibawah teks yang mau ditampilkan dan kode pada akhir artikel.

Catatan:
Cara ini hanya sebagai tambahan saja dari saya. Jika cara ini lebih merepotkan daripada cara sebelumnya silahkan gunakan cara yang awal saja.

Semoga postingan ini bisa bermanfaat bagi teman-teman yang mempunyai masalah seperti saya.

Cara Membuat Widged Related Post V2

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:

widget related posts
Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
#related-posts a:hover{
color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }
5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>
7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<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&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Cara Mengecek Blog Dofollow atau Nofollow di Berbagai Browser

Jika anda mencari informasi tentang tips meningkatkan pagerank blog biasanya salah satu tips yang disarankan adalah berkomentar di blog dofollow. Memang benar berkomentar di blog dofollow bisa meningkatkan google pagerank karena blog dofollow adalah blog yang telah menghilangkan atau melepaskan atribut nofollow dari form komentarnya sehingga jika ada pemilik blog yang meninggalkan komentar di blog tersebut, maka ia akan mendapat backlink dari empunya blog dengan catatan si pemilik blog harus berkomentar sebagai name/URL atau mencantumkan link blognya disana.

Bagi anda yang belum tahu apa itu Nofollow? Nofollow adalah atribut HTML yang berfungsi untuk memberi perintah kepada search engine untuk tidak menelusuri suatu link pada halaman blog sehingga google search engine tidak akan menganggap link tersebut sebagai backlink. Cara ini dibuat pertama kali oleh Matt cutts dan Jason Shellen pada tahun 2005 untuk mencegah pemilik blog melakukan spam dengan berkommentar sebanyak-banyaknya di blog ber PR tinggi.

Contoh kode link nofollow:

<a href="http://www.contoh.com/" rel="nofollow">bogger tips n tutorial</a>
Secara default, blog blogspot menggunakan sistem nofollow pada form komentarnya. Namun tidak sedikit pula blogger yang menerapkan sistem dofollow dalam comment formnya.

Untuk menemukan blog-blog mana saja yang menggunakan sistem dofollow, anda bisa googling dengan kata kunci 'dofollow blog list' atau 'daftar blog dofollow'. Ada banyak situs yang membuat daftar blog dofollow di situsnya.

Nah sekarang pertanyaannya adalah apakah blog tersebut masih menganut sistem dofollow? Sebab tidak sedikit blog yang awalnya memang bersifat dofollow tapi sekarang sudah tidak lagi. Untuk mengetahuinya, gunakan cara berikut:

Browser Firefox
Ada 2 cara yang bisa digunakan:

1. Melihat properties linknya
Ini adalah cara klasik yang sering digunakan blogger atau webmaster untuk mengecek status link. Caranya, klik kanan pada link yang berada pada kolom komentar lalu pilih Properties jika muncul tulisan relation: nofollow berarti blog tersebut bersifat nofollow.



2. Menggunakan addons Firefox
Ada banyak addons Firefox yang mampu mendeteksi link nofollow, salah satunya adalah SearchStatus. Dengan addons ini anda bisa melihat apakah suatu link dofollow atau nofollow dalam waktu yang bersamaan. sehingga lebih cepat. Anda bisa instal addonsnya disini. Setelah instal, aktifkan fitur pendeteksi nofollow dengan cara klik kanan pada logo SearchStatus yang terletak dipojok kanan bawah layar lalu pilih Highlight Nofollow Links. (Jika anda ingin menonaktifkan fitur ini cukup hilangkan centang pada 'Highlight Nofollow Links').


Jika link dihighlight merah berarti blog tersebut bersifat nofollow.



Browser Google Chrome
Instal Chrome SEO disini. Setelah itu, aktifkan fitur pendeteksi nofollow dengan cara klik logo Chrome SEO yang terletak di pojok kanan atas. kemudian tunggu beberapa saat hingga menu Chrome SEO muncul selanjutnya klik link Show Nofollow.



Browser IE
Untuk pengguna IE, caranya cukup mudah anda tinggal copas kode dibawah ini ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript: var anchors;anchors = document.getElementsByTagName("a");var anchorIndex;for(anchorIndex = 0;anchorIndex < anchors.length;anchorIndex++) { if(anchors[anchorIndex].getAttribute("rel") && anchors[anchorIndex].getAttribute("rel")=="nofollow") anchors[anchorIndex].style.backgroundColor="red";} void(0);

Jika blog tersebut bersifat nofollow maka link akan dihighlight merah seperti gambar berikut.



Browser Safari
Caranya hampir sama dengan browser IE yaitu tinggal copas kode ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript:var%20a=document.getElementsByTagName('a');for(var%20z=0;z%3Ca.length;%20z++){if(a[z].rel==’nofollow’){a[z].style.border=’1px%20solid%20%23F00';}}

Semoga bermanfaat..!

Cara Mengimport Feed Blog ke Digg V4

Kabar baik buat teman-teman yang menggunakan layanan Digg untuk mempromosi artikel blog anda. Kini anda tidak perlu lagi repot untuk mensubmit artikel anda satu per satu satu ke Digg karena melaui fitur baru Digg V4 yaitu Import feed, sekarang anda dapat mengimport feed blog anda ke Digg sehingga setiap kali anda memposting artikel baru, artikel tersebut akan secara otomatis dikirim ke Digg tanpa campur tangan dari kita.

Dengan adanya fitur ini, tentu akan mempermudah pemilik blog yang ingin mempromosikan artikel blognya di Digg.

Bagaimana Cara Mengimport Feed Blog ke Digg?

1. Login ke akun Digg anda.
2. Jika diminta untuk follow digger lain dan invite friend, abaikan saja dengan klik Next Step
3. Setelah masuk ke halaman akun anda. Pilih Setting -> Import Feeds
4. kemudian anda akan dibawa kehalaman seperti berikut.

digg import feeds
5. Isi alamat feed blog anda.Contoh http://namabloganda.com/feeds/posts/default atau http://feeds.feedburner.com/idanda jika anda menggunakan layanan feed dari feedburner dan pilih topik yang sesuai lalu klik tombol Add Feed

6. Setelah itu, anda akan diminta untuk memverifikasi blog anda. Copy kode yang diberikan dan letakkan diatas postingan terbaru anda lalu klik Veriry Now. (Anda bisa menghapus kodenya setelah proses verifikasi selesai). Jika berhasil maka akan muncul status verified seperti gambar dibawah ini.

digg import feed verified
7. Dan semua artikel anda akan muncul di halaman 'My News' dalam waktu kurang dari 24 jam. Berikut adalah contoh tampilan artkel blog saya yang muncul dihalaman Digg setelah melakukan import feeds.



Selamat mensubmit artikel blog anda ke Digg... Semoga bermanfaat

Membuat Navigasi Breadcrumb di Blogger

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:
navigasi breadcrumb
Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Cara Memasang Tombol Facebook Share Dalam Postingan Blog

tombol facebook shareSelain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu Facebook share.

Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

Lalu apa bedanya antara Facebook like dan Facebook share?


Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

Agar lebih jelas perhatikan screenshot berikut:

Contoh tampilan posting yang dibagikan melalui facebook like

facebook like
Contoh tampilan posting yang dibagikan melalui facebook share

facebook share
Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

1. Buka blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada 'Expand widget templates'

3. Cari kode <data:post.body/>

4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter

tombol fshare tanpa counter

Kode:
<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


Tombol Fshare dengan counter diatas

tombol fshare dengan counter diatas




Kode:
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping

tombol fshare dengan counter disamping

Kode:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

6. Jika sudah simpan template anda dan lihat hasilnya.

10 Gadget Menarik dari Google Friend Connect

google friend connectSebagai pengguna blogger, anda tentu sudah tidak asing lagi dengan gadget Follower yang dapat ditemukan pada halaman blogger gadget.

Gadget ini merupakan salah satu gadget populer dari Google friend connect yang memungkinkan pengunjung untuk bergabung dan berlangganan blog kita.

Selain Follower sebenarnya masih banyak gadget Google friend connect lainnya yang tidak kalah bagus dan menariknya seperti Newsletter Subscription, Social bar, Screensaver, dan masih banyak lagi. Hanya saja gadget tersebut tidak ditambahkan pada halaman blogger gadget sehingga banyak pengguna blogger yang tidak mengetahui keberadaan mereka.

Agar lebih jelas berikut saya cantumkan 10 gadget yang menurut saya cukup menarik dari Google Friend Connect. Untuk melihat lebih banyak gadget-gadget lainnya, silahkan kunjungi http://google.com/friendconnect/

1. Social bar
Gadget berbentuk toolbar yang menampilkan opsi join site, isi komentar, jumlah follower, dan lain-lain.

social bar








2. Comments
Memungkinkan pembaca untuk komentar pada postingan atau link video kita

comments










3. Rating and reviews

Memperbolehkan pembaca memberi rating dan mereview konten pada blog kita.

rating and reviews









4. Newsletter subscription

Memperbolehkan pengunjung untuk berlangganan newsletter anda melalui email

newsletter subscription





5. Iphone

Gadget Follower dengan tampilan iPhone. Cocok untuk blog yang berhubungan gadgets.

iphone









6. Recent Visitor

Hampir sama dengan widget recent visitor milik Mybloglog. Hanya yang ini dilacak berdasarkan id Google

recent visitor








7. Screensaver
Memungkinkan anda untuk menampilkan screensaver di blog anda yang gambarnya diambil dari komunitas anda. Pengunjung dapat mengklik pada gambar member untuk menjadi temannya.

screensaver









8. Top 10 members
Menampilkan 10 top member di blog anda berdasarkan jumlah kunjungannya

top 10 members















9. Get Answer
Mirip dengan yahoo answer dimana pembaca dapat bertanya, menjawab pertanyaan dari member lain dan memberi voting terhadapt jawaban yang menurut mereka bagus

get answer










10. Cloud
Gadget follower versi cloud dimana nama follower akan berotasi saat disorot mouse. Mirip dengan label cloud.

cloud









Untuk cara pemasangannya sangat mudah, cukup klik link Get this gadget pada masing-masing gadget yang ingin anda pasang kemudian atur tampilan yang anda inginkan dan klik tombol Generate Code. Copas kodenya ke blog anda. Selesai.

Semoga informasi ini bermanfaat untuk anda.

Pasang Avatar di Kotak Komentar Blogger

avatar on blogger comment formBerkat fitur Show your face dari Blogger kini kotak komentar blogger sudah dapat menampilkan gambar atau foto dari pengunjung yang memberi komentar di blog.

Untuk menampilkan avatar, caranya sangat mudah. Anda cukup mengaktifkannya dengan masuk ke menu Setting -> Comments lalu pada bagian "Show profile images on comments" pilih YES. Beres..

Hanya saja cara ini hanya berlaku untuk template tertentu saja khususnya template yang disediakan oleh blogger dan hasilnya kurang optimal dimana avatar hanya muncul jika pengunjung memberi komentar dengan blogger id. Sedangkan yang berkomentar dengan openid atau anonymous, avatar tidak muncul.


Meskipun demikian, anda juga dapat memunculkannya dengan melakukan sedikit pengeditan pada kode template anda sehingga hasilnya menjadi seperti ini.

avatar on blogger comments

Untuk mengimplementasikannya:

1. Pertama-tama masuk ke menu Setting->Comments. Pilih lalu YES pada bagian "Show profile images" dan tekan Save.

2. Setelah itu, masuk ke menu Design-> Edit HTML

3. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda.

4. Cari kode berikut:


<dl id='comments-block'>
5. Ganti kode tersebut dengan kode ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
6. Setelah itu cari kode berikut

<a expr:name='data:comment.anchorName'/>
7. Ganti kode tersebut dengan kode berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
8. Setelah itu tambahkan kode css berikut diatas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nFYiYTM57blLwmE9XyaUItDd2rAKGh89yNVZfrCL-faKAyn8GApsJgRLfXRGzD7TnM_hQ1XngFWz2cSJ78aJmjCgoBBWLG4WMP64DSF-4Hjl2CH6WZBtJzW7E0ChUfP7C4Y5UvgsnIFP/s1600/oavatar.jpg) no-repeat left top;
width:32px;
height:32px
}
Keterangan:
Teks yang berwarna merah merupakan alamat gambar untuk avatar anonymous. Sedangkan teks yang dicetak tebal merupakan ukuran avatar. Anda bisa ganti sesuai keinginan.

9. Kalu sudah simpan template anda. Selesai


Selamat mencoba. Semoga berhasil senyum

Google Code - Alternatif Hosting File Javascript di Google

project hosting on google codeBagi anda yang sedang mencari tempat hosting javascript yang handal dan terpercaya maka Google code adalah jawabannya. Google Code merupakan layanan hosting milik Google sehingga soal kredibilitas sudah tidak perlu diragukan lagi.

Melalui project hosting dari Google code, anda bisa menyimpan file Javascript, PHP, Ajax, Flash, CMS, dan lain-lain secara gratis di Google Code. Kapasitas yang diberikan tidak tanggung tanggung yakni 2GB dan unlimited bandwith sehingga anda tidak perlu khawatir bakal kehabisan bandwith :D

Sebenarnya layanan hosting yang mendukung file javascript sudah dihadirkan oleh Google melalui Google Sites. Hanya saja berdasarkan pengalaman pribadi, file javascript yang disimpan di Google sites tidak bekerja jika kita tidak sedang login di akun Google Sites.

Saya tidak tahu apakah anda juga mengalami masalah yang sama dengan Google sites jika iya maka Google Code bisa menjadi alternatifnya.

Berikut cara menyimpan file javascript di Google Code:

1. Pertama login ke akun Google anda kemudian kunjungi http://code.google.com/hosting/

2. Klik create a new project
3. isi data-data sesuai yang diminta lalu klik Create Project.



4. Pilih tab 'Download' dan klik New download

5. Klik Browse dan pilih file javascript yang ingin upload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.


6. Sekarang file javascript anda akan diupload ke Google code.

7. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) seperti contoh.

Cara Membuat Related Post dengan Thumbnail

related-post
Sebelumnya saya sudah pernah memposting mengenai cara membuat related post untuk menampilkan list judul postingan yang berhubungan dengan postingan utama. Sehingga memudahkan pembaca untuk mencari topik yang berkaitan. Untuk mengetahui lebih banyak tentang related post baca disini.

Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.


Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:

1. Buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widgets Templates"

3. Letakkan kode berikut diatas </head>


<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6uu7Lo1Z236cgc9cwVvfQesSH3y0zR86hIc_L-cENu-NZK56NrUMLM5hu2xmd6MDRZtbjqGztbwO7EtLsV7RKjx69_dEQ6Kxz_ys8D6qKKK2sBZcrQgYyHKaOgXTJYyWnwu152JR8_SJ/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Lalu cari <p class='post-footer-line post-footer-line-1'/>

5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut dibawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Kalau sudah Save template anda.

Keterangan:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6uu7Lo1Z236cgc9cwVvfQesSH3y0zR86hIc_L-cENu-NZK56NrUMLM5hu2xmd6MDRZtbjqGztbwO7EtLsV7RKjx69_dEQ6Kxz_ys8D6qKKK2sBZcrQgYyHKaOgXTJYyWnwu152JR8_SJ/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com

2. Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan
Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3. Klik Get Widget

4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda.

Cara Cepat dan Mudah Backup Gambar Dari Picasa Web Album

picasa backup

Apa yang ada dibenak anda saat ingin backup blog? Saya yakin yang terpikir oleh anda adalah backup template, widget dan backup posting. Tidak salah memang tapi masih kurang.

Saat anda melakukan backup template yang terbackup hanya data template blog anda saja begitu juga backup posting, yang tersimpan hanya posting blog. Lalu bagaimana dengan gambar yang anda upload dalam postingan anda?

Seperti yang kita ketahui, gambar yang diupload melalui blogger post editor akan tersimpan di picasa web album maka pada kesempatan ini saya akan membahas cara backup gambar dengan mendownload gambar dari picasa web album.

Ada beberapa cara untuk download gambar dari picasa web album, pertama dengan mendownload satu persatu dari situs picasa. Tapi cara ini tentu sangat memakan waktu. Kedua dengan menggunakan software picasa. Cara ini lebih cepat tapi kurang praktis karena anda harus mendownload dan menginstal software picasa yang ukurannya lumayan besar.

Karena itu, berikut saya akan membagikan cara yang lebih mudah dan cepat dalam backup gambar dari picasa yaitu menggunakan addons dari firefox yang bernama DownThemAll.

Untuk dapat menggunakan cara ini tentu saja anda harus memiliki browser Firefox. Jika belum punya silahkan download terlebih dahulu di situs resminya.

Kalau sudah ikuti langkah-langkah berikut:

1. Install DownThemAll disini.

2. Setelah itu, restart firefox anda. Login ke situs picasa web album

3. Pilih album yang mau dibackup kemudian klik link RSS yang terletak disebelah kanan layar.



4. Anda akan masuk kehalaman RSS feed dari album tersebut. Klik kanan dihalaman tersebut kemudian pilih DownThemAll. Sebuah menu popup DownThemAll akan muncul yang berisi semua link gambar yang siap didownload.




5. Klik logo browse untuk memilih lokasi download lalu klik tombol Start. Tunggu hingga proses download selesai.

Selamat mencoba. Semoga bermanfaat.

Memasang Tombol Like Facebook di Blog

facebook likeBeberapa waktu yang lalu saya pernah mengulas tentang cara mempromosi blog dengan memasang feed blog di Facebook.

Dengan cara ini maka semua postingan blog anda akan muncul di halaman profil Facebook sehingga dapat dinikmati oleh teman facebook anda.

Pada postingan ini saya akan membahas tentang teknik lain untuk menyebarkan artikel blog anda di Facebook yaitu dengan memasang tombol like Facebook pada postingan blog anda.

Keuntungan memasang tombol like ini adalah pembaca dapat dengan mudah berbagi postingan yang mereka sukai kepada teman facebook mereka hanya dengan satu klik. Dan sebagai pemilik blog, anda juga mendapat keuntungan berupa tambahan trafik dari pembaca yang mengelink artikel anda di profil Facebook mereka.

Nah bagi anda yang tertarik memasang tombol like ini, silahkan ikuti langkah- langkah dibawah ini:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode <data:post.body/>

4. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan kode berikut ini dibawah <data:post.body/> jika anda ingin memasang tombol like dibawah posting atau letakkan diatas <data:post.body/> jika anda ingin memasang tombol like diatas posting

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

6. Lalu Save template anda.

Hasilnya akan seperti ini





Kalau anda ingin membuat tombol like dalam bentuk ini




maka ganti standard dengan button_count

Anda juga dapat mengganti warna background tombol menjadi gelap dengan mengganti light menjadi dark.


Selamat mencoba. Semoga bermanfaat...

Cara Memodifikasi Email Subscribe Form

Untuk menempati janji saya pada postingan sebelumnya tentang cara membuat email subscribe form maka pada kesempatan ini saya akan mengulas cara memodifikasi form email subscription agar menjadi lebih menarik.

Sebagai bahan studi, saya telah menyiapkan sebuah form seperti berikut.

hermanblog subscription form
Form tersebut nanti bisa anda modif dengan mengganti gambar, teks, dan tata letaknya sesuai keinginan. Ok mari kita mulai...

Untuk membuat form ini ada beberapa bahan yang harus disiapkan yakni:

1. Gambar latar belakang dan icon RSS yang berukuran 16x16 pixel. Jika belum punya anda bisa cari di internet atau gunakan saja icon pack yang saya sediakan dibawah ini. Klik pada masing-masing gambar untuk download icon pack-nya.


Fresh, Free and Gorgeous RSS/Feed Icons

























Free web 2.0 RSS icons









15 Free RSS Icons











Setelah mendownload icon gambar yang di inginkan. Upload icon tersebut ke situs image hosting yang sering anda gunakan. Saya sendiri menguploadnya di Picasa web album. Setelah itu, copy url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMv4hoSosWuQSJWH2igqXLRyHAuyjh5D0E8DvBklPtTqMkjHMYW117sqlkWttQxQwNd3cGQb9dABNIQ3k5wd9PefkVbanD0w5VR1bO_y_ouqlcRtDGDv15xspV-o8lQniiI7DTsFrbnpkV/

2. Id feedburner anda. Contoh, http://feeds.feedburner.com/idanda. Tulisan yang dicetak tebal itulah id feedburner anda.

Bagaimana cara mengetahui id feedburner saya?

Caranya sangat mudah, login ke akun feedburner anda kemudian arahkan kursor mouse anda pada logo feed yang terletak disamping judul feed seperti yang dilingkari garis merah pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah. Tulisan yang berada dipaling belakang itulah id feedburner anda.


3. Aktivasi feed count
Feed count adalah sebuah widget mungil yang menampilkan jumlah subscriber atau feed reader anda dalam bentuk angka. Untuk dapat menikmati fitur feed count ini anda harus mengaktifkannya terlebih dahulu. Caranya, buka id feedburner anda lalu pilh tab Publicize. Pada bagian Service pilih Feed count, kemudian klik tombol Active. Selesai.

feedburner feed count

Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog anda. Ikuti langkah-langkah berikut:

1. Buka Blogger. Masuk ke menu Design -> Page Elements
2. Klik Add a Gadget lalu pilih HTML/Javascript
3. Copy kode dibawah kedalam kotak

<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:380px; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMv4hoSosWuQSJWH2igqXLRyHAuyjh5D0E8DvBklPtTqMkjHMYW117sqlkWttQxQwNd3cGQb9dABNIQ3k5wd9PefkVbanD0w5VR1bO_y_ouqlcRtDGDv15xspV-o8lQniiI7DTsFrbnpkV/") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/hermanblog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKcRwDJll23Rl216Muj3eBluJoDND6wo4SSXKpx_Dx_kLQrYcQVVc1HyPaXLD3FM1GtgssLMvwSyYZxjMtEDbV1EmsoUlmQ7PySAqaWlXvkyzjPFMz8ZF5PTY8ZZEKK8x3oLafzH3K2Dhs/s800/005.png" /></a> <a href="http://feeds.feedburner.com/hermanblog">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HermanBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="HermanBlog" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/HermanBlog"><img src="http://feeds.feedburner.com/~fc/HermanBlog?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan warna:

Biru: keterangan dari kode html tersebut
Hijau: posisi gambar background. Anda bisa mengganti posisinya dengan paduan berikut

Top right: Kanan atas
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah
Merah: alamat url gambar background
Merah bold: id feedburner. Ganti dengan id milik anda
Ungu: alamat url gambar icon rss
Hitam bold: kalimat dalam form. Ganti jika anda ingin menggunakan kata-kata lain
Orange: nama tombol
Orange bold: warna feed counter

4. Jika sudah, klik Save. Selesai

Sekedar Info: Jika anda tidak ingin menggunakan feed counter cukup hapus kode yang berkedip. Beres!

Selamat berkreasi...