Membuat Related Posts dengan Thumbnail

Hai sobat nanda apa kabar baik kan? sebelumnya saya sudah share cara membuat Related Post yg hanya menampilkan list judulknya saja. Nah ali 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/AVvXsEisW2rUSQqhQ45HuMOnrPWSVcRIHrSrr5_W4Lz2yVu_PbKXg1g2VHbjliUUSq82APsMuHXpgW0pdAW-W_44gsgesOEIExui3TVvNzJeemjZzCluDraO-LJfcxg-gWUwcJNo61AuLQRHknSM/g";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="You might also like:";

</script>

<script src='http://hbhost.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/AVvXsEisW2rUSQqhQ45HuMOnrPWSVcRIHrSrr5_W4Lz2yVu_PbKXg1g2VHbjliUUSq82APsMuHXpgW0pdAW-W_44gsgesOEIExui3TVvNzJeemjZzCluDraO-LJfcxg-gWUwcJNo61AuLQRHknSM/" 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.

source: hermanblog

Read More

Apa Itu Autoblog?

Mungkin banyak dari kalian yang pernah dengar istilah autoblog. Apa itu autoblog? Sejatinya autoblog adalah blog yang membahas tentang dunia mobil (otomotif) :p
Namun sekarang saya tidak membahas tentang dunia mobil melainkan membahas tentang sesuatu yang menarik, fully automatic, dan berbau cheat... :D

Memang isitlah autoblog selalu menimbulkan ambigu. Di satu sisi artinya bisa menuju pada dunia otomotif sedangkan di sisi yang lain menjadi situs yang melakukan posting konten secara otomatis.

Anda para blogger pasti pernah membayangkan betapa mudahnya mengelola blog tanpa harus susah payah melakukan posting, biar orang lain yang "posting" buat blog kita. Begitulah tujuan autoblog itu.


Autoblog merupakan blog yang melakukan posting secara otomatis melalui RSS feed blog-blog lain yang dikehendaki pemilik blog. Setiap blog tersebut update maka postingan dari feed akan ditransfer secara otomatis ke blog kita lalu di publish.

Autoblog bisa dilakukan dengan cara-cara sederhana sampai dengan tahap yang lebih efektif seperti menggunakan software. Software autoblog paling terkenal adalah autoblog samurai(ABS), yang memiliki fitur lebih banyak ketimbang yang lain, setara dengan harganya yang mahal. Ada juga wp robot yang ditujukan untuk platform wordpress. Saya sendiri belum pernah mencoba keduanya jadi belum bisa sharing tutorial mengenai software-software ini.

Apa konsekuensi menggunakan autoblog?
Segala sesuatu yang instan pastilah memiliki dampak negatif. Google akan menganggap blog anda spam karena masalah duplicate content yang ujung-ujungnya bisa dihapus blogger.

Sebagai pelengkap anda bisa baca postingan autoblogging itu menyebalkan. titik!
Jadi, apakah anda masih menginginkan autoblog? semua terserah pada anda... :D
Bagi yang mau untuk sekedar mencoba bagaimana autoblog itu, bisa ikuti postingan saya selanjutnya.

Read More

Membuat Tombol Minimize Maximize di Blog

Sudah tau kan tombol minimize dan maximize ?  Pastilah.. tombol itu hampir dimiliki semua software ataupun aplikasi komputer lainnya.  Namun pernahkah kalian melihat tombol itu terletak di blog ?  Aku sudah punya dari dulu neh sobat.. tapi baru bisa share sekarang ^_^ 


Bisa lihat di bagian Chat Box blog ini untuk melihat contohnya.  Gimana?  Indah kan? ^_^ .. Mau tau caranya?  Oke dah.. ikuti langkah - langkah berikut ini :

1. Login ke blogger
2. Ke 'Design' > Edit HTML > Centang 'Expand Widget Templates'
3. Ganti kode <h2 class='title'><data:title/></h2> dengan kode berikut :

<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd;
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

 NB : sesuaikan dengan judul widget yang ingin di beri tombol minimize maximize

4. Lalu letakkan kode berikut diatas kode  </b:includable> :

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

NB : letak ini masih berada di dalam kode judul yang ingin di beri tombol minimize maximize

5. Save Template dan lihat hasilnya...

Kalau ada masalah, saran, kritik dan sebagainya.. kasih komentar yakk.. jangan di pendam sendiri ^_^ 

Read More

Apa Fungsi Labels

Bagi para blogger yang masih pemula. Mungkin masih asing dengan kata ini. Dan akan bertanya apa sih gunanya labels? Secara singkat labels itu adalah kategori yang befungsi untuk mengelompokkan artikel atau postingan yang berhubungan.

Nah tujuannya adalah supaya pengunjung bisa lebih mudah untuk menemukan artikel yang ingin dicari. selain itu, labels juga bisa berfungsi untuk memudahkan mesin pencari mengindeks artikel kita lho.. So berilah labels pada setiap artikel Anda.

Untuk memberi labels atau kategori pada artikel caranya sangat mudah. Cukup ketikkan labels atau kategori pada kotak "Label for this post" lalu klik Publish Post. Selesai.

Sebagai contoh, saya memberi labels atau kategori untuk artikel ini dengan Dasar Blogger. Maka setiap kali Anda mengklik kata Dasar Blogger pada menu Kategori blog saya. Artikel ini akan ditampilkan.

Cara menampilkan menu Labels atau kategori pada blog:
Secara umum, menu labels ini akan muncul pada menu Sidebar blog Anda setelah anda memberi label pada postingan Anda. Jika tidak muncul, kemungkinan blog anda belum dipasangi widget Labels. Anda memasang widget labels pada blog anda dengan cara berikut:

1. Klik Layout -> Page Elements
2. klik Add a Gadget 
3. Klik pada tulisan Labels
4. Beri judul pada title. Misalnya Kategori, Daftar Isi atau lainnya. Kemudian klik Save.
5. Klik View Blog untuk melihat tampilannya

Read More

Cara mengganti Template di Blogspot

Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan. Selain itu, anda dapat pula mengunduh atau
mendownloadtemplate blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis.

Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti template dengan template yang didapat dari penyedia template. kita. Berikut ulasannya :

Mengganti Template dengan Template yang disediakan blogger 

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda. 
2. Klik Rancangan.

3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.

4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6 template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik Apply To Blog.

5. Selesai. 

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogger templates.
2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip. 

3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik Rancangan.

6. Klik menu Edit HTML. 

7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

8. Klik tombol Browse pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.

9. Apabila ada muncul peringatan tentang widget, klik pada tombol Pertahankan Widget.

10. Selesai. 

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya 

Selamat mencoba!

Read More

Cara menghilangkan Navbar Blogger

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?

Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?

Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> : 

<style type='text/css'>

#navbar-iframe {display:none;}

</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini : 

Untuk template klasik

Sign in di blogger

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman

Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data

Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Klik tombol Simpan Template

Selesai.

Read More

Cara menghapus Gadget yang tidak bisa di hapus di Blogger

Baru bisa nge-blog rasanya pengen banget ganti-ganti tema, pasang widget macam-macam dari yang berguna sampai yang gak tau artinya buat apa, tujuannya untu memperindah tampilan blog yang baru saja dibuat.
Kebingunggan mulai muncul saat saya mencoba mengganti tema dengan sebuah tema yang baru saja saya download, saat saya akan mengedit bagian widget/gadget loch kok ada beberapa widget/gadget yang tidak bisa dihapus, karna masih barusaya cukup binggung dan bertanya ke teman yang lebih senior.


Langsung saja, kira-kira langkahnya seperti ini,


1. login ke blog anda,
2. masuk ke menu rancangan,
3. masuk lagi ke bagian Edit HTML,
4. kemudian jika anda menggunakkan mozilla sebagai browser anda klik pada keyboard ctrl+f untuk menampilkan fasilitas search yang di sediakan mozilla dan pada kolom search ketik code ini locked='true' jika sudah ditemukan ubah menjadi locked='false' . Maka widget/gadget yang dilock tadi akan menjadi unlock dan bisa dihapus.


Jika anda mau yang lebih simpel lagi, maka anda bisa langsung menghapus seluruh code yang digunakkan widget/gadget tersebut.
Misal jika anda hendak menghapus widget followers yang saat itu tidak bisa terhapus anda lakukan langkah 1-4 yang saya tulis di atas kemudian hapus kodenya dari awal sampai code penutup, kira-kira seperti ini codenya:

Hapus kode tersebut dari awal sampai code penutup maka widget Followers akan hilang dari blog anda.
Semoga bermanfaat.

Read More

Cara Membuat Link Menjadi Warna-Warni di Blog

 

Cara Membuat Link  Menjadi Warna-Warni di Blog  - Udah pernah liat link yang berwarna-warni seperti pelangi (rainbow) ketika disorot kursor ? Ya sebenarnya itu adalah salah satu trik sederhana yang menggunakan javascript. Cara membuatnya pun sangat mudah dan GPL alias gak pake lama, asal sudah tau script yang mau dipake maka ngga sampe 5 menit proses membuat link di blog menjadi berwarna-warni seperti pelangi itu pun akan segera terwujud.
Cara membuat link berwarna-warni :
1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.    Copy kode javascript dibawah ini dan paste pada gadget.

<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>

4.    Selesai dan silahkan diliat hasilnya.
5.    Cara lainnya adalah sobat bisa meletakkan script tadi pada template tepatnya diatas kode <body> , masuk ke menu Edit HTML, letakkan scriptnya dan save template anda.


Benar kan ngga sampai 5 menit ? Nah selamat mencoba cara membuat link menjadi warna-warni ini, semoga sobat puas dengan hasilnya.

Read More