Cara Membuat Recent Comment With Thumbnail

Assalamualaikum Wr. Wb.

     Berminat dengan gambar yang diatas :/ ? ayo! ikuti langkah-langkah berikut :

✔ Login Blogger
✔ Masuk Ke Blog Sobat
✔ Pergi ke Tata Letak
✔ Klik Tambahkan Gadget atau Add a Gadget
✔ Pilih HTML/JavaScript
✔ Masukkan kode berikut :

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_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;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_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 = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 250,
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-nZ8lcfOrPqUtciSJG_Hdm2cHl7TJiLlWP5BQMzejbi0ELp6_xb8fdnL0KxWm6_gOLff729TyORNh2mDQlFN4ZOdPNsqTxbWeSdWrlBmBapgh9bjObV_WJHPS2i2iAMCzrlKGOA4nu5sT/s1600/gravatar.jpg",
hideCredits = true; 
maxfeeds=20,
adminBlog='Enziie Gekhizakii';
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://enziiegekhizakii.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

Keterangan :

• Warna Abu-abu adalah jumlah komentar yang ingin ditampilkan.
• Warna Hijau adalah ukuran gambar avatar yang ditampilkan (pixel).
• Warna Biru adalah batas maksimum karakter yang ingin ditampilkan.
• Warna Merah adalah gambar untuk Anonim/Anonymous.
• Warna Kuning adalah Nama Author Blog Sobat.
• Warna Aqua adalah alamat url blog sobat.

✔ Jika ingin membuat scrollnya tambahin aja kode berikut di atasnya :

<div style='height:200px;overflow:auto;'>

✔ Lalu Diakhiri dengan Kode :

</div>

     Gimana sob ? mudah kan ? So.. Pasti! Sekian dulu dari saya yah sobat ;) sampai bertemu kembali di lain waktu, jika ada pertanyaan silahkan berkomentar. Monggo ^o^)~

Wassalamualaikum Wr. Wb.

Cara mudah membuat scroll pada widget standar blogger

Assalamualaikum Wr. Wb.

     Cara mudah membuat scroll pada widget standar blogger - Terkadang saat kita pingin bikin menambahkan manfaat scroll pada widget standar blogger yang kita pasang tak tahu dihalaman sidebar serta footer layaknya arsip situs, artikel popular serta atau yang lain, bikin kita bingung bagaimana langkah memodifikasi tiap-tiap daftar widget tersebut ? supaya seluruh widget ada keseragaman serta hingga penampilan halaman situs (blog) kita lebih terkesan menarik dilihat.

     Disamping itu juga karenanya ada manfaat scroll pada tiap-tiap widget dapat menghemat area dihalaman sidebar atau pada halaman footer blog yang memanjang kebawah. lantas untuk memodifikasi seluruh widget yang sudah kita pasang pada mulanya, butuh dikerjakan sebagian trik yang amat sederhana. oleh sebab itu, untuk mengaplikasikan trik tersebut, silakan saudara ikuti uraian singkat di bawah ini : 

✔ Masuk terlebih dulu ke blog blogger yang anda kelola, apabila sebelumnya sudah masuk, pada halaman draft blogger klik menu Template.
✔ Backup template, untuk menjaga kemungkinan terjadi eror.
✔ Lalu klik Edit HTML.
✔Kemudian cari nama widget yang akan diberi fungsi scroll, caranya adalah sebagai berikut :

• Tekan Ctrl F pada keyboard, lalu ketik nama widget. Sebagai contoh : daftar widget Artikel Populer, maka lihat nama widget pada blog yang anda kelola untuk mencari pada editor template.

• Contoh struktur widget artikel populer pada editor template Blog ini adalah sebagai berikut :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>

Rangkaian kode disini :

</div>
</b:includable>
</b:widget>

• Atau contoh widget Like, Follow & Review seperti pada halaman sidebar disamping, struktur rangkaian kode dalam editor template blog ini adalah sebagai berikut :

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

</b:includable>
</b:widget>

• Apabila telah menemukan nama widget yang ingin anda tambahkan fungsi scroll, letakkan kode berikut :

<div style='overflow:auto; width:auto; height:250px;'>

tepat dibawah kode <div class='widget-content popular-posts'> atau <div class='widget-content'>.

• Kemudian scroll kebawah cari lagi kode </b:includable> atau untuk mempermudah jika dalam editor template anda terdapat kode <b:include name='quickedit'/>, letakkan kode

</div> 

tepat diatas kode tersebut, sehingga terbentuk seperti struktur kode dibawah :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>    <=== perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>

Rangkaian Kode disini :

</div>
</div>
</b:includable>  <=== perhatikan bagian ini.
</b:widget>

Atau seperti contoh dibawah

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>   <=== perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>
<data:content/>
</div>

</div>
</b:includable>  <=== perhatikan bagian ini.
</b:widget>

✔ Untuk melihat hasilnya klik tombol Pratinjau.
✔ Jika sudah, Simpan Template anda dan Tutup kembali editor template.
✔ Selesai.

Keterangan :

• Untuk mempermudah cara mencari nama widget selalu gunakan Ctrl F, lalu ketik nama widget seperti pada contoh uraian diatas.

• 250px adalah tinggi scroll, anda bisa menyesuaikan dengan kebutuhan, misalnya menjadi 100px, 150px atau 200px.

• <div class='widget-content'>, sebagai kunci utama untuk meletakkan kode pembuka <div style='overflow:auto; width:auto; height:250px;'>, dibawahnya. Anda bisa melihat perbedaannya pada contoh struktur widget Artikel Populer dan Like, Follow & Review.

• </b:includable> dan <b:include name='quickedit'/> sebagai tempat penutup kode </div>, diatasnya.

• Jika sebelumnya anda pernah menghapus kode <b:include name='quickedit'/>, letakkan kode penutup </div> tepat diatas </b:includable>, seperti pada contoh diatas.

OK, semoga bermanfaat untuk anda, dan terima kasih sudah mau berkunjung dan membaca artikel...

Wassalamualaikum Wr. Wb.

Cara mudah membuat scroll pada widget standar blogger

Cara membuat link download di Ziddu

Assalamualaikum Wr. Wb.

     Cara membuat link download di Ziddu - Ziddu adalah file sharing yang memiliki banyak kelebihan antara lain: proses penguploadan sangat cepat dibanding yang lain, kemudian jarang ada file yang rusak atau diblokir di ziddu, dst. Okelah tak perlu basa-basi lagi ya, kita langsung menuju pokok dari postingan blog ini yaitu membuat link download di ziddu. Dibawah ini adalah langkah-langkah untuk membuat link download di ziddu, silahkan:

• Sign up ziddu. 
• Masukkan data-data anda yang diminta yang meliputi nama, email, password, dan kode verivikasi.
• Centang saya setuju syarat dan ketentuan/i agree terms and condition lalu klik submit/menyerahkan.
• Kemudian sobat akan melihat tampilan berikut yang menandahkan akun sobat sudah jadi.

• Klik pada go to my account dan sobat akan langsung menuju ke halaman upload file.
• Untuk meng-upload file, tentuka dulu jumlah file yang ingin anda upload pada tulisan multiple files upload . kemudian klik browse dan pilih file yang akan anda upload.
• Kemudian klik upload, tunggu beberapa saat hingga proses meng-upload selesai.
• Setelah upload selesai, anda akan langsung mendapat url file (link download) yang tadi di upload. 
• Selesai.

     Nah, setelah membuat link download di ziddu, sekarang kita tinggal memasukkan link download yang tadi di download di blog. Menurut saya, ada 3 model download

• <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><b>DOWNLOAD</b></a>

Nanti akan jadi seperti yang dibawah ini :

DOWNLOAD

• <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UOtTqdqV3bpAaqBAeDmFFgd8R4o5YypABBhs4U9vCGvJCLJb1X6uISX89LV-Z699cY1QDiZRbgfohRGPy0wZj7wks1x4vc3vzqdE5fWI33hAguH0LBSBCRhWVCuyqnqZibLSiFujJ3mK/s1600/download-button.jpg" /></a>

Nanti akan jadi seperti yang di bawah ini :

 

• <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><img alt="Download Button" src="http://maruf-blog.blogspot.com/-d94UwjQPxh8/T3plWl6fZNI/AAAAAAAAAyw/W_EAtXrMGY0/s1600/download-button.jpg" /></a>

Nanti akan jadi seperti yang di bawah ini :

 

NB : Warna merah adalah link download yang tadi didapatkaan dari ziddu.

Cara pemasangan di blog :

• Pilih salah satu model download di atas.
• Setelah anda memilih salah satu, kemudian salin/ copy kode html diatas.
• Setelah di copy, masuk ke buat entri baru.
• Kemudian klik HTML di sebelah compose.
• Pastekan kode HTML model download tadi disitu.
• Simpan.

dan .. Lihat hasilnya :D kalau masih belum bisa, tinggalkan komentar yang ada dibawah, saya secepatnya akan membalas komentar anda. Itulah tips yang saya berikan  kepada kamu, saya rasa cukup sampai disini, kalau ada waktu kujung kesini lagi. Happy blogging.


Wassalamualaikum Wr. Wb.

Cara Mengoptimasi Gambar Di Blog

 

Assalamualaikum Wr. Wb.

     Cara mengoptimasi gambar di blog sebenarnya cukup mudah. Optimasi ini bisa meningkatkan relevansi blog anda pada google, dan gambar yang anda buat bisa tampil bagus di google image. Jadi, rugi jika tidak mengoptimasi gambar. Ini juga termasuk dalam optimasi Onpage SEO. Untuk mengenal lebih dalam mengenai optimasi SEO, bisa anda baca: 2 Teknik SEO Search Engine Optimizatio.

     Untuk melakukannya silahkan ikuti langkah-langkah berikut :

• Gunakan Nama Gambar Yang Sesusai Dengan Keyword

Jika nama gambar sesuai dengan keyword anda maka semakin mudah blog anda ditemukan oleh pengguna search engine. Lalu, bagaimana cara menggantinya ? Saat kalian mendownload atau mengunduh sebuah gambar, apa nama gambar tersebut ? Pastinya seperti image01, index, dll. Nah, jangan menggunakan nama tersebut, kalian harus menggantinya seperti contoh : tutorial blog, tips-seo dan yang lainnya.

• Re-size Gambar Dengan Benar

Pada umumnya mere-size gambar ini berfungsi agar artikel blog kita terlihat rapi. Tapi, sebagian blogger termasuk saya, mere-size gambar di artikel menggunakan menu small, medium, large dan X-large yang terdapat di bawah gambar. Tetapi, cara tersebut justru membuat gambar tidak berkualitas. Lalu bagaimana caranya ? Sebaiknya crop atau kecilkan ukuran gambar terlebih dahulu sebelum diupload menggunakan photoshop atau editor foto lainnya.

• Pasang Alt Text dan Title Pada Gambar 

Apa gunanya memasang ini ? Ini sangatlah penting, karena jika tidak memasang Alt Text dan Title, robot google akan kesulitan untuk meng-index gambar kita. Bagaimana cara memasangnya ? Kita lihat di bawah ini

• Upload dulu gambar di artikel blog
• Klik pada gambar
• Klik properties
• Lalu akan muncul sebagai berikut

klik gambar jika ingin melihat lebih jelas

• Isi title text dan alt text sesuai dengan kata kunci yang anda targetkan.

     Setelah anda sudah mengoptimasi gambar, ada baiknya anda juga harus mengetahuk hal yang harus diperhatikan dalam optimasi gambar.

• Ukuran Gambar.

Ukuran suatu gambar harus diperhatikan. Mengapa ?? karena pemakain ukuran gambar yang tepat sangatlah penting dalam menjaga loading halaman tetap ringan. Loading berat akan mempengaruhi pengunjung, tentu pengunjung akan merasa jengkel berada di halaman tersebut. Pastilah halaman anda mendapatkan posisi yang buruk, begitu juga gambar yang berada di halaman tersebut juga akan mendapat posisi yang buruk di Google Image.

Halaman yang berat juga dapat membuat bounce rate. kenapa demikian? karena jika ada pengunjung yang tidak suka dengan halaman anda karena berat dan kemudian pengunjung itu mencari blog lain. Maka bounce rate anda bertambah. Jadi, semakin banyak bounce rate maka semakin jelek blog anda di mata search engine.

Saya disini menyarankan kepada anda untuk memakai ukuran yang sedang, dan gunakan berbagai tools untuk mengcompress gambar tersebut tanpa mengurangi kualitasnya agar loading halam menjadi ringan.

• Kualitas Gambar

Kualitas gambar juga menjadi prioritas Google Image untuk menempatkan suatu gambar dalam penilaiannya. Google memberikan data data kepada pembaca dari yang paling baik kualitasnya, sama hal nya dengan Google Image juga memberikan hasil pencarian dengan kualitas yang paling baik.

Buatlah gambar semenarik mungkin, ini bisa saja menjadi peluang sobat untuk menjaring visitor dari Google Image.

• Memberikan Credit Gambar.

jika anda mengambil gambar dari situs penyedia gambar, maka sobat harus memberikan kredit kepada pencipta gambar tersebut. Dengan melakukan ini kita akan menghormati pencipta gambar dan anda akan berada di tempat yang aman setelah memberi credit pada gambar.

Saya katakan berada di tempat yang aman karena beberapa gambar memiliki hak cipta dan sobat bisa berada dalam kesulitan saat menggunakan gambar tersebut dalam konten blog sobat tanpa izin. Jadi hargailah mereka (pencipta gambar).

• Relevansi Gambar Pada Konten.

Saya telah melihat banyak blogger yang menggunakan gambar tidak relevan dalam artikel. Sebagai contoh sobat membuat konten tentang Blogging Tips, tetapi memakai gambar "Doraemon" apakah relevan ??? TIDAK.
Jadi, pakailah gambar yang relevan !!!...

Terima kasih sudah datang berkunjung dan membaca artikel ini ^o^)~
 
Wassalamualaikum Wr. Wb.

Cara mengoptimasi gambar di blog?