Cara mendaftar adf.ly

Berburu Dollar dari adf.ly - Salah satu lagi cara untuk menghasilkan uang yang baru-baru ini sering digunakan oleh para Blogger adalah dengan menggunakan situs adf.ly. Situs ini terbukti akan memberikan kita dollar setiap link yang kita buat diklik oleh seseorang. Cara kerja situs ini sangatlah mudah, anda hanya diharuskan memasukkan link yang ingin anda jadikan sebagai penghasil uang, lalu Adf.ly akan memberikan link baru alias link pengganti yang jika diklik, kita akan mendapatkan dollar, piye? mudah to?. Misalkan saja seperti ini, saya mempunyai link download

http://www.microsoft.com/downloads/details.aspx?FamilyID=a1a48de1-e264-48d6-8439-ab7139c9c14d&displaylang=id

Lalu link tersebut saya masukkan ke adf.ly, maka adf.ly akan memberikan link baru yang jika diklik, kita akan mendapatkan dollar. Link yang diberikan oleh adf.ly lebih pendek, seperti http://adf.ly/Aqu. Jadi intinya adf.ly ini juga digunakan untuk memperpendek suatu link dan menyembunyikan link aslinya, seperti tinyurl dan usercash. Tapi kehebatan adf.ly daripada yang lain adalah, seperti diatas tadi, kita akan dibayar setiap link kita diklik. O'iya, jika anda ingin menggunakan layanan ini, sebelumnya anda harus mendaftar atau membuat akun di adf.ly. Jangan cemas, karena jika anda mendaftar, anda langsung mendapatkan bonus $5.

Dan berikut ini adalah detail tentang adf.ly:

• Setiap kita mendaftar,kita akan langsung mendapatkan bonus $5
• Setiap link yang di klik pengunjung site kita, akan mendapatkan $0.001
• Pembayaran apabila mencapai $20
• Pembayaran menggunakan paypal dan akan di proses setelah 48 jam – 72 jam

Bagaimana Cara Mendaftar? Mendaftar ke adf.ly sagatlah mudah, caranya:

1. buka adf.ly
2. Lalu klik 'Join Now'




3. Anda akan disuruh untuk mengisi formulir pendaftaran

• Your Name: Silakan isi dengan nama anda
• E-mail: masukkan alamat e-mail anda (nanti akan digunakan untuk konfirmasi)
• Retype E-mail: diisi dengan e-mail sekali lagi
• Password: isikan dengan password yang anda inginkan
• Retyper password: isi dengan password yang telah anda buat tadi
• Account type: pilih Link Shriker juka anda ingin menjadi penyebar link

4. jika semua sudah terisi, klik 'Join Now'



5. Sekarang cek E-Mail. adf.ly akan mengirimkan email konfirmasi kepada anda. Coba cari di inbox, jika tidak ada, mungkin email masuk ke spam. Jika sudah ketemu, langsung dibuka saja emailnya. Anda akan menemui kode konfirmasi dan link untuk pergi ke halaman aktifasi pada email tersebut.



6. Blok kode konfirmasi dan copy ke halaman aktifasinya.
7. Nah, berarti anda sudah terdaftar ke adl.fy

Log In ke adf.ly

Sebelum membuat link dan menghasilkan uang, anda diharuskan untuk log in atau mesuk ke akun adl.fy masing-masing. Caranya sagatlah mudah, buka http://adf.ly/. Lalu coba lihat pada bagian bawah halaman, anda akan menemui form untuk login ke adlfy. Lalu tinggal memasukkan alamat email dan password yang telah anda buat tadi. Terakhir, klik login.

Membuat link agar menghasilkan dollar

OK, sekarang kita akan langsung membuat link tersebut, langkahnya:

1. Login dulu ke adf.ly
2. Persiapkan link yang akan dijadikan mesin penghasil dollar
3. Copy link tersebut dan pastekan ke textbox di bagian atas halaman, contohnya saja seperti gambar dibawah ini



4. Klik "Shrink!"
5. Jreeeng, link akan menjadi pendek (jika link tersebut diklik, maka secara otomatis anda akan mendapatkan dollar).
6. Copy link tersebut dimana-mana

Nb: Sekedar tips saja, untuk memasarkan link yang telah diconvert ini bisa dilakukan dengan cara memasangkannya di facebook, twitter, forum dan lain sebagainya.

Read more

Membuat Efek Gelembung Pada Blog

Membuat Efek Gelembung Pada Blog. Mungkin artikel ini sudah di bahas di blog para blogger yaitu kalo ngga salah yaitu Tentang cara membuat efek hujan di blog,efek hujan salju atau daun yang jatuh berguguran, tapi kali ini saya berbagi sebuah tips tentang cara membuat efek gelembung yang bertaburan di blog,wuihhh...! keren kaya acara pesta atau konser hi..hi...hi....,oke langsung saja saya tidak akan banyak bicara lagi, jika kamu ingin mencobanya silakan ikuti langkah berikut ini :

1. Pertama masuk dulu ke akun blogger kamu
2. Masuk rancangan
3. Edit HTML
4. Cari kode
   
   

   <body>
   

5. Lalu copy script di bawah ini lalu pastekan di bawah kode <body>
   
   

   <script src="http://clief.googlecode.com/files/bubble.js"></script>

6. Setelah itu simpan template deh...
7. Dan sekarang lihat blog kamu ada gelembung yg betaburan di blog kamu.

Read more

25 Situs yang Mau Membayar Tulisan Blogger

Motivasi seseorang ngeblog bisa berbeda-beda. Karena hobi, menjalin silaturahim, atau sekedar mencurahkan uneg-uneg misalnya, dapat menjadi pemicunya. Jika kegiatan ngeblog itu kemudian dibayar, mau nggak? Ada 25 situs di internet yang terbukti sudah membayar dan bersedia melakukan itu.

Bagi yang hobi menulis, kegiatan ngeblog sangat menyenangkan karena sebagian besar yang dilakukan blogger memang menulis. Jangankan dibayar, mengeluarkan biaya untuk ke warnet saja dengan senang hati dilakukan. Jadi, mengapa tidak kita monetisasikan saja hobi menulis yang kita miliki itu? Sambil menyelam minum air. Artinya, nggak bisa berenang.
Berikut ini situs-situs yang mau membayar kita para blogger. Mau anda apakan, silakan. Sebagai media berlatih menulis sambil mencari uang boleh, dijadikan sumber penghasilan tambahan juga sah-sah saja. Yang perlu diketahui, tidak semua situs mau menerima tulisan berbahasa Indonesia. Situs yang mau di antaranya Review Me, Shvoong, Sponsored Reviews, Blogsvertise, dan satu situs lokal ReviewMu.

1. Review Me
2. Shvoong
3. Sponsored Reviews
4. Blogsvertise
5. ReviewMu (situs lokal)
6. Link Post
7. Smorty
8. PayPerPost
9. 451 Press
10. Be A Guide (About.com)
11. BlogBurner
12. Bloggerwave
13. Blogitive
14. Blog To Profit
15. BOTW Media
16. Creative Weblogging
17. DayTipper
18. Digital Journal
19. Helium
20. In Blog Ads
21. LoudLaunch
22. Squidoo
23. Weblogs Inc
24. b5media
25. Wise Bread

Sumber :  BlogGor

Read more

Protes SOPA: Blackout Campaign

Kebijakan Stop Pembajakan Online (SOPA) yang dirumuskan oleh Kongres banyak menuai kecaman, salah satunya Wikipedia. Tepat pada hari ini, Wikipedia melakukan protes dengan “menutup” sementara aksesnya (khusus untuk versi English) dan menggantinya dengan halaman yang berisikan pesan “Imagine a World without Free Knowledge”. Protes ini juga dilakukan oleh banyak website lain, diantaranya WordPress, Modzilla, BoingBoing, TheHuffington Post, dsb.

Blackout BoingBoing.net

Protes Modzilla

Protes WordPress.com

Blackout HP

Google Tell Congress

Sumber : Padmanegara

Read more

Membuat Button Follow dan Dashboard ala Tumblr

Sekarang orang bisa mudah untuk follow (mengikuti) blog yang disukanya. Mengikuti berarti berlangganan tulisan-tulisan yang ada di blog itu. Salah satu media (tool) untuk mengikuti sebuah blog bisa lewat google friend connect. Biasanya widget ada berupa kotak dengan tombol join this site. Itu tersedia bagi blogspot.

Nah, kali ini kita akan membuat button follow yang meniru seperti Tumblr. Tumblr adalah satu platform untuk ngeblog. Jika melihat blog di bawah layanan Tumblr maka di pojok kanan atas selalu ada button follow dan dashboard. Contoh blog itu bisa dilihat di sini.

Sekarang kita akan membuat button seperti yang ada di blog Tumblr. Dengan button tersebut akan mempermudah dan lebih menarik pengunjung blog untuk follow atau mengikuti. Tentunya follow itu lewat google friend connect (GFC). Itu artinya cara baru untuk gabung ke GFC dari blog milik kita. Semakin banyak yang mengikuti blog kita bisa menjadi parameter kebermanfaatan dan kepopuleran sebuah blog. Tentunya selain itu semakin banyak yang follow semakin banyak yang berlangganan semakin banyak pengunjung.

Cara Membuat Button Follow dan Dashboard ala Tumblr
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode berikut ini

<div style="position: fixed; top: 5px; right: 93px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=7786425643110570352" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:5px;"><a class="linkopacity" href="http://tb-tutor.blogspot.com" target="_blank" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

5. Kode berikut 7786425643110570352 adalah blog ID yang mana setiap blog berbeda. Ganti kode tersebut dengan blog ID mu sendiri. Bisa kita ketahui dari addres bar saat kita membuta entri baru (misalnya; http://www.blogger.com/post-create.g?blogID=5069428392280954069)

6. Untuk button Dashboard link tersebut (http://tb-tutor.blogspot.com) bisa kita arahkan ke halaman utama blogger.com tapi saya lebih memilih mengarahkannya ke halaman utama blog.

Sumber : Kurnia Septa

Read more

Cara Membuat blockquote- Blogger

TB - TUTOR -  hai Sobat TB - pada kesempatan ini saya akan sharing tentang Membuat Blockquote (  POSTINGAN DI KOLOMIN ) . Tadi Sobat saya Yuswan Menannyakan ini dan ian menyuruh saya untuk membuat dan mudah mudahan ini bermanfaat

Untuk Demo Bisa Di lihat disini
Simak Yu

Caranya :
1. Buka Akun Blogger anda
2. Klik Rancangan > Pilih Tambah Gadget > HTML
3. Masukan Kode Berikut :

}blockquote {background: #f4f8fc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwv26Qqvz2kJRiKFjVrijkWUhBkTcjZsFK-xxS12KqWClYBSF8VnZEdot5KIr-XrfrSxf2RaW2KvWBH6ioUA2n34zwe9Zqukl5mtfwl5aUrFVwrl6-rYJ1ilN8lApnSeY2-aRltAZYTsMa/s1600/papers.jpg) repeat;
border-top:2px solid #ccc; border-left:4px solid #cd5a1b; border-right:1px solid #ccc; border-bottom:1px solid #ccc;
color:#000000; line-height:18px; margin:10px; overflow:auto; padding:10px 10px 15px; width:autopx; max-height: 250px;padding-top: 15px; }
blockquote:hover{background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhca0LlRAc1JOE1HO-J7Ga7Fcg-kO5oSNLeJo4AW4M8UQwludFh_6O4rjcESnNen4Dz8wyG2DAF5QE9TVqZhPbXK_dKitgyhzLX0-0OL-8I4kx-TzUQ1GD2oFnreynBNKBlfHG5jP2DkQ/s1600/notepaper.png) repeat ;}
.pullquote_left { width: 200px; margin: 5px 15px 5px 15px; padding: 12px 0; border: 3px double #dddddd; border-width: 3px 0; font-size: 1.4em; text-align: center; font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; color:#555555; float: left; }
.pullquote_right { width: 200px; margin: 5px 15px 5px 15px; padding: 12px 0; border: 3px double #dddddd; border-width: 3px 0; font-size: 1.4em; text-align: center; font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; color:#555555; float: right; }
.post-details {float:left; padding:5px 8px; background:#f4f9fd; clear:both; border-left:1px solid #dadada; border-bottom:1px solid #dadada; border-right:1px solid #dadada;}
.edit-link a{float:left; padding:5px 8px; text-decoration:none;}

Untuk memanggilnya, silahkan simpan kode berikut pada edit html posting kawan :
Panggil Di pas Buat POSTINGAN

<blockquote><span class="opening"></span>Masukkan teks disini<span class="closing"></span></blockquote>

  
Lihat deh Hasilnya
semoga bermanfaat di Artikel " Cara Membuat blockquote ( POSTINGAN DI KOLOMIN ) - Blogger " Salam Sukses

Nantikan Artikel Berikutnyaa!

Read more

Like FaceBook - Melayang

TB - TUTOR - hai Sobat TB - pada kesempatan ini saya akan sharing tentang Memmbuat  Like Facebook Melayang . Tadi Sobat saya Yuswan Menannyakan ini dan ian menyuruh saya untuk membuat dan mudah mudahan ini bermanfaat

Yukk Simaak --

 -

Caranya :
1. Buka Akun Blogger anda
2. Klik Rancangan > Pilih Tambah Gadget > HTML
3. Masukan Kode Berikut :

<center><a href="http://www.blogger.com/LINK%20KALIAN">NAMA BLOG KALIIAN</a></center>

<div class="clr">
</div>
<div class="module">
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

<script type="text/javascript">
//<!--

$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->
</script>


<style type="text/css">
.floatinglikebox{background: url("http://1.bp.blogspot.com/-ORRNsu8Rqjs/TuCmb4OZG3I/AAAAAAAAAmA/QtBKRmOuH2c/s1600/okeee.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}


MASUKAN KODE HTML DARI DEVELOPER FB KALIAN


MASUKAN KODE HTML DARI DEVELOPER FB KALIAN

Get  Widget - TB-Tutor

4. SAVE

Lihat deh Hasilnya
semoga bermanfaat di Artikel " Like  FaceBook - Melayang " Salam Sukses

Read more

Alasan pentingnya Membalas komentar

Jika Anda membuat suatu posting, Anda pasti berharap banyak pembaca blog Anda yang berkomentar di posting tersebut. Sama halnya dengan Anda melakukan presentasi di hadapan orang banyak dan berharap presentasi Anda diperhatikan dan dipahami dengan baik. Namun sebuah presentasi tidak akan ada artinya jika Anda mengabaikan setiap komentar dari audiens Anda. Begitu pula komentar di posting blog Anda, Anda harus menjawab komentar-komentar tersebut.

GUEST BLOG: Penulis dibalik Artikel ini:
Musa Abdul Hamid | kangmusa.com

Kebanyakan blogger berasalan tidak mempunyai waktu untuk menjawab komentar. Namun jika Anda terus beralasan dengan hal tersebut, maka selamanya Anda tidak akan mempunyai waktu untuk membalas komentar. Luangkan waktu 10 menit saja setiap harinya untuk membalas komentar yang datang ke blog Anda. Dengan membalas komentar tersebut, Anda akan mendapatkan banyak keuntungan seperti yang akan saya jabarkan di bawah ini.

Mendorong orang lain untuk berkomentar
Biasanya seseorang setelah meletakkan komentar akan langsung pergi. Namun dengan membalas komentar tersebut, orang lain tidak akan segan untuk kembali ke blog Anda dan meninggalkan komentar lainnya.

Menambah kualitas dari posting Anda
Dengan membuat balasan komentar dan melakukan beberapa perbincangan kecil dengan pengunjung blog Anda akan menambah kualitas konten Anda secara keseluruhan. Beberapa poin-poin kecil yang terlewat biasanya akan lebih mudah terungkap dalam perbincangan ini. Dengan begitu, pengunjung yang baru datang ke blog Anda akan merasa beruntung karena mendapatkan informasi yang berkualitas dan lengkap.

Dapat membantu aktivitas SEO
Dengan melakukan perbincangan kecil di bagian komentar posting secara tidak langsung akan membantu aktivitas SEO Anda. Karena dalam komentar-komentar tersebut keyword-keyword yang Anda tembak pasti akan muncul lebih banyak karena digunakan oleh banyak orang. Dengan begitu search engine akan dengan mudah memunculkan konten blog Anda jika dimasukkan keyword yang Anda bidik di kotak pencarian.

Menambah kepercayaan orang lain terhadap Anda
Membuat balasan komentar, bisa menambah kepercayaan Anda di mata orang lain. Pengunjung blog Anda akan berasumsi bahwa Anda benar-benar ahli di bidang niche blog Anda. Hal ini akan membangun brand dan kredibilitas Anda di mata orang lain akan semakin kuat.
Selain itu jumlah komentar Anda juga akan berlipat ganda. Misalnya seperti ini, Anda mempunyai 15 komentar di posting Anda, jika semua komentar tersebut Anda tanggapi, maka Anda akan mempunyai 30 komentar. Tentu ini hal yang menarik bagi setiap orang yang baru mengunjungi blog Anda dikarenakan jumlah komentar yang begitu banyak.

Pesan dari Admin TB- Tutor :
Mohon maaf saya sebagai admin TB-Tutor.blogspot.com tidak bisa membalas semua komentar yang masuk karena kesibukan admin sendiri di bisnis offline, tapi saya tetap berusaha untuk membalasnya walaupun gak bisa cepat :) Thanks

Read more

Menampilkan Gambar Profile dihalaman Hasil Pencarian Google

Bisa dipastikan robot Google sekalipun tidak mungkin bisa menentukan keaslian suatu artikel, yang mungkin bisa tentu saja hanya penulis artikel itu sendiri. Tapi dengan hadirnya fasilitas untuk menampilkan gambar Profile Anda dalam hasil pencarian tentu ini akan menjadi cerita lain, selain terlihat bahwa Anda adalah penulis sebenarnya dan itu juga menjadi kesan profesional buat Anda. Coba saja Anda mencari artikel yang menarik di Google, Anda tentu akan melihat 10 hasil pencarian pertama dan bisa dipastikan semuanya mempunyai judul yang hampir mirip bahkan sama persis, lalu bagaimana jika di antara 10 hasil pencarian tersebut terpajang wajah tampan Anda, tentu si pencari akan melirik Anda terlebih dahulu walapun artikel blog Anda sendiri hanya berada pada urutan ke 6, itu karena halaman Google sering berisi penuh dengan teks dan dengan demikian orang mungkin akan tertarik lebih ke arah hasil yang memiliki beberapa elemen visual (foto penulis) yang melekat padanya. Asalkan bukan artikel COPAS aja ya tar malah malu2in, udah copas nampang pula hehehe


Cara menampilkan gambar Profile dihalaman hasil result Google:

CARA I:

1. Pertama, silahkan buat satu halaman "About me" di blog Anda, untuk pengguna blogger Anda bisa membuatnya melalui halaman Statis Page atau bisa juga menggunakan halaman Standar Post. Agar lebih mudah Anda bisa melihat halaman "About me" milik saya disini.

2. Buat satu Text Link yang mengarah ke halaman URL Profile Google+ Anda dan jangan lupa menanamkan satu Tag rel="me" (ingat hanya satu tag saja) dalam link tersebut.

<a href="https://plus.google.com/ID_Anda" rel="me">Naufal Rasyid</a>

3. Ini sangat penting, pastikan semua artikel diblog Anda terkait kehalaman "About me". Caranya sangat mudah, Anda tinggal memasang saja link "About me" di menu, saya sendiri memasangnya di halaman About dalam widget saya (lihat paling bawah di blog ini ditandai dengan text link Read more ), dan pastikan Anda memasang Tag rel="author" pada link tersebut.

<a href="http://www.blog-Anda.com/p/about-me.html" rel="author">About me</a>

4. Langkah terakhir silahkan masuk ke halaman profile Google+ Anda disini https://plus.google.com dan tuju ke tombol "Edit Profile" kalau sudah silahkan tuju ke pengeditan "Profile lainnya", biasanya Anda diminta untuk memasukan alamat blog Anda, nah disini Anda tinggal memasukan Link "About me" saja beserta URL-nya.

Sampai tahapan ini sebenarnya sudah selesai dan biarkan google merayapi halaman Anda terlebih dahulu. Perlu juga diketahui bahwa tidak ada jaminan gambar anda akan tampil, semua tergantung analisa google itu sendiri setelah merayapi halaman anda.

CARA II:Cara yang kedua jauh lebih praktis dimana Anda tinggal menambahkan satu badge icon profile saja, caranya silahkan langsung menggunakan Profile Button Creator dialamat ini http://www.google.com/webmasters/profilebutton
Pastikan cara kedua ini tidak berlaku jika Anda sudah menggunakan cara pertama, jika tidak akan terjadi duplikat Profile Author.


Verifikasi Author
Agar gambar Profile Anda bisa tampil dan berjalan dengan sempurna sebaiknya Anda perlu melakukan verifikasi dengan mengujicobanya terlebih dahulu.
1. Silahkan buka Rich Snippets Testing Tool

2. Masukan salah satu link artikel (posting) Anda yang terbaru.
3. Jika tidak ada masalah maka gambar profile beserta nama Anda akan muncul dan ditandai dengan nilai verifikasi yang bener.

Tips jika ada kesalahan
1. Pastikan Anda hanya menggunakan kedua tag rel="me" dan rel="author" diatas satu kali saja jangan sampai ada duplikat.
2. Pastikan Anda benar-benar memasukan gambar Anda pada Profile Google+, sebaiknya termasuk dengan Isi biodata Anda secara lengkap.
3. Pastikan halaman profile Google+ Anda benar-benar terkait dengan halaman blog Anda, termasuk halaman About me tadi.
4. Google akan memilih thumbnail gambar dari halaman Profil Google+ Anda, sebaiknya gunakan gambar yang sebenarnya dari diri Anda sendiri (bukan ikon). Gambar harus terlihat baik bahkan ketika dikompresi menjadi gambar thumbnail 50x50.

Silahkan baca dokumentasi selengkapnya disini

Semoga tutorial diatas berguna :)

Read more

Mohon maaf !

Mohon Maaf

 

 Mohon Doa Restu

 Pembangunan BLog

---------------------

Mohon maaf Jika Kunjungan anda kurang nyaman dikarenakan Blog ini sedang di Edit Lagi
Untuk Memberikan tampoilan terbaik bagi kaliaan!!

Terima Kasih atas Perhatiannya !
Salam Tutor _

Tertanda
Athor TB-Tutor

Mohon Doa Restu

 Pembangunan BLog

---------------------

Mohon maaf Jika Kunjungan anda kurang nyaman dikarenakan Blog ini sedang di Edit Lagi
Untuk Memberikan tampoilan terbaik bagi kaliaan!!

Terima Kasih atas Perhatiannya !
Salam Tutor _

Tertanda
Athor TB-Tutor

Read more

Kompres CSS Untuk Mempercepat Loading Blog

Kompres Code CSS Untuk Mempercepat Loading Blog, kiranya itulah yang akan saya bahas malam ini, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog With CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.

Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:

• Seperti biasa, Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Pilih Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Perhatikan Langkah-langkah berikut ini

1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.

• Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
• Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
• Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:

<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

• Buka situs CSS compressor disini
• Setting pengaturannya seperti berikut:

Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'

Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

• Terakhir klik Simpan

Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.


2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML

Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:

Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:

• Blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
• Buka situs CSS compressor disini
• Settingnganya rubah seperti berikut:

Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'

• Kemudian tempatkan hasil kompresannya diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

• kemudian potong kembali pada kode diantara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

• Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
• Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>

• Terakhir klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan Alhamdulillah tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS Untuk Mempercepat Loading Blog yang saya lakukan.
Selamat mencoba Sobat... Semoga bermanfaat.

Sebelum di Kompres Di Backup dulu Ya

Read more

Recent Post Dengan Thumbnail

Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi.
Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini .

Pada menu Dashboard klik menu "Design - > Page Elements"

Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

Dan taruh script dibawah ini kedalamnya.

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";

imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";

imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";

imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";

imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";

showRandomImg = true;

boxwidth = 230;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "transparent";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://tb-tutor.blogspot.com/";

</script>

<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "http://sangmerak.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

Nah kalau sudah tinggal SAVE.

Sekian sobat blogger, semoga tutorial ini dapat anda gunakan dan bermanfaat bagi Anda. Sampai jumpa lagi di lain kesempatan.

Read more

Cara Mendaftarkan Blog Di Search Engine

Banyak usaha kita untuk mempopulerkan atau mempromosikan blog kita diantaranya adalah sering berkunjung ke blog orang lain dan Blog Walking atau sering berkomentar dan meninggalkan pesan di shoutbox dengan mengisi data dengan link blog kita (cara membuat Shoutbox). Tapi jika ingin Lebih efektif adalah mendaftarkan blog kita ke Search engine. Misalnya di Google, Yahoo!, MSN dan masik banyak yang lokal maupun Interlokal. Nah jika anda tidak mendaftar mana mungkin anda terdaftar jadi anggota Search engine tersebut maka anda harus mendaftar pada pemilik Search Engine.

Maka dari itu saya akan membagi sedikit ilmu tentang cara mendaftarkan blog kita ke Search engine, berikut adalah cara dan penjelasanya.

Daftar Search engine Google
google adalah search engine paling terkenal jadi mendaftar di google adalah hal yang wajib untuk mempopulerkan Blog anda. Ini adalah link untuk mendaftar search engine google http://www.google.com/addurl/
Cara mendaftarkan di google sangatlah mudah seperti halnya membalikkan tangan tinggal isi URL blog anda trus isi cooment yang berhubungan tentang blog anda dan isi code vertifikasinya kemudian tekan tombol Add URL beres dah.

Daftar Search engine Yahoo!
Ehm... yahoo! juga search engine terkenal yang banyak digunakan oleh orang-orang lo... makanya daftarkan juga di Yahoo!.
Ini Alamat untuk daftar di Yahoo! https://siteexplorer.search.yahoo.com/submit
namun Mendaftar di Yahoo ada persyaratan khusus yaitu sudah punya Account di Yahoo! jika belum punya diharapkan mendaftar dahulu. Jika sudah punya silahkan Log In dan anda akan sisuguhi Form yang harus anda isi yaitu Submit website dan Sumbit Site Feed.
Sumbit Website isi saja dengan URL blog anda misalnya punya gw http://tutorial-jitu.blogspot.com, Submit Site Feed isikan saja alamat feed anda atau anda bisa tambah dengan atom.xml misalnya http://tutorial-jitu.blogspot.com/atom.xml

Daftar Di MSN
Daftar di MSN juga sama seperti di google mudah tinggal isi Form yang disediakan dan Submit URL. Ni alamatnya buat Daftar Di MSN http://search.msn.com/docs/submit.aspx?FORM=WSDD2

Daftar Menggunakan Bantuan Web Submitter
Web Submitter membantu kita mendaftar Sekaligus banyak di search engine bisa 40 sampai 50 search engine sekaligus. Gimana anda mau coba... kan lumayan nggak menguras waktu betul gak ni kamu aku kasih tau.
http://freewebsubmission.com/
http://websitesubmit.hypermart.net/
>http://www.submitexpress.com/

Tips: Daftarkan juga ke Search engine lokal...
http://www.indocenter.co.id/reg.php

Read more

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' 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:include name='quickedit'/>

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

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Read more

Menambahkan Gadget di Header

Kita bisa menambahkan elemen gadget di sidebar kiri atau kanan, dan post area. Kadang kita ingin menambahkan gadget di area header, tapi tidak bisa. Sekarang kita akan belajar untuk mengedit template blog sehingga bisa menambahkan elemen gadget di bawah atau atas judul blog.


Cara Menambahkan Gadget di Header
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut;

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Verdienen (Header)' type='Header'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>

6. Hapus kode maxwidgets='1' dan ganti showaddelement='no' dengan showaddelement='yes'
7. Simpan template jika suda selesai.

Sekarang di halaman Rancangan > Elemen Laman, kita sudah bisa menambahkan gadget.

Read more

Membuat tampilan berbeda pada halaman blog

Selamat pagi dan selamat beraktifitas, saya akan berbasa-basi terlebih dahulu tentang tulisan saya kali ini. Posting kali ini akan membahas cara untuk membuat tampilan berbeda-beda pada blog sobat saat tampilan home dengan tampilan saat kita berada di halaman posting artikel. Yang saya pakai bukan menggunakan inline style menggunakan <style> Css </style> yang ditanamkan di dalam edit html posting. Yang saya gunakan adalah Tag conditional <b:if>.

Langsung saja coba simpan kode berikut di atas kode </head>:

<!-- kondisi home -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style type='text/css'>

.contoh {

      background: #ffffff;

}

body {

      background: #000000;

}

</style>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 350; summary_img = 400; img_thumb_height =0; img_thumb_width =0; </script>

</b:if>

</b:if>

<!-- /kondisi home -->

Keterangan:

• Yang berwana orange Itu adalah Tag conditional tampilan saat di home saya biasa pakai jika menyimpan scipt jquery yang saya gunakan jika hanya akan dipanggil saat di home saja sekedar contoh jika ingin menyisipkan java script pada tag conditional saat di home tsb.
• Yang berwarna biru adalah css yang diinginkan tinggal ganti sesuai keinginan tidak digunakan jg tidak apa-apa jika sudah ada css nya pada template, kalau saya biasa menggunakannya jika ada Sidebar gadget yang tidak ingin saya tampilkan saat di home menggunakan css display:none.

Nah yang kedua Tag conditional untuk menyimpan style atau java script   yang diingnkan saat di halaman Posting artikel.




Simpan tag conditional berikut diatas kode </head> :

<!-- kondisi artikel pada halaman posting -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

body {

background: #3a78ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjVrE73iBWTymebfdEdRjfR03s8tEUx8a940hxQZofOqBPdqWLxuAZjBb8elwLIqytmkohVpExrXhoxWUSxhfLWyk5BE1it1e4lsqLt5lzuZ8-lim8luf1NqjTeRSX53qd75aBGtZOCiv/s1600/pattern3.png) repeat;


}

#sidebar-wrapper {

display: none;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

    $(&quot;.tombol-komentar&quot;).click(function(){


        $(&quot;#komentardisqus&quot;).slideToggle(&quot;slow&quot;);

        $(this).toggleClass(&quot;active&quot;);

        return false;

    });


});

</script>

</b:if>

<!-- /kondisi artikel pada halaman posting -->

Keterangan

• Yang berwarna Biru dan Orange hapus ataupun ganti sesuai kebutuhan, itu sekedar contoh jika ingin menyimpan java script atau css saja.

Selesai, semoga bermanfaat dan bisa dikembangkan.

Read more

Membuat tampilan blank/default avatar image di menu komentar

Sekarang yang saya post adalah bagaimana caranya kita menambahkan Membuat tampilan blank/default avatar image di menu komentar atau jelasnya jika sobat blogger yang membuat menu komentar dengan setting Siapa pun - termasuk Pengguna Anonim yang berkomentar, saat pengomentar menggunakan Name/URL pastinya image avatarnya tidak akan tampil, yang tentunya mengurangi keindahan dari menu komentar tersebut.

Untuk bisa membuat dari user anonim itu memiliki avatar Default caranya simpel saja, coba ikuti langkah-langkah berikut:

1. Login blogger
2. Rancangan, Edit Html
3. Download Template Lengkap
4. Centang menu Expand Template Widgets
5. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

/* Avatar Img Default */

.avatar-image-container img {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw8Jiz-_rUH1zJ5XTR1GAL5mLn5FSjuPq1VeBmRK66OOS8eGEVQVZQqn_7VGyYswOmqMZn-v-aDCs5z9ODpg8vh9SVcLT89r4fZzFMTdasSGWfa6JpU8BtiLhyDWhne0DOQ3ZMA_PToYjV/s320/AvatarBlogger.png);

width:35px;

height:35px;

}

6. Selanjutnya cari kode <a expr:name='data:comment.anchorName'/> dan ganti dengan :

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

</b:if>

7. Simpan template dan lihat hasilnya.

Read more

Shadow Efek Link

TB-Tutor.Blog - Dihari yang mulia ini saya akan share sebuah tutor blogger yang sangat dicari-cari oleh sobat-sobat blogger. Sebenarnya dulu sudah share tutor ini,tapi pada tutor kali ini agak sedikit berbeda, menurut saya lebih baik menggunakan tutor yang ini dari pada yang dulu saya share. Nah seperti apa sih cara membuatnya langsung saja jangan pakai basa basi lagi cekidot...

Langkah-langkah:

1.Masuk ke:

• Untuk Dashboard Baru Masuk : Blogger

3.Ganti kode tersebut menjadi kode dibawah ini

a:hover{color:#FF0000;text-shadow: 0 0 0.5em #FFEE00,0 0 0.5em #FFEE00;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

4.Kemudian Simpan dan liat hasilnya



Keterangan:

1.Semakin banyak kode 0 0 0.5em #FFEE00 Akan semakin tebal Shadow/Bayangan yang dikeluarkan contoh:

a:hover{color:#FF0000;text-shadow: 0 0 0.5em #FFEE00,0 0 0.5em #FFEE00,0 0 0.5em #FFEE00,0 0 0.5em #FFEE00;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

Jangan lupa menbahkankan tanda 'KOMA' yang bewarna biru




Semoga tutor ini bermanfaat

Read more

Membuat Readmore Otomatis

cara membuat readmore otomatis bloggersudah banyak berkeliaran di dunia maya, maka Blogtegal akan langsung menuju ke pusat sasaran.
Tapi sebelumnya Blogtegal akan memberitahu apa kegunaan dan manfaat readmore otomatis untuk SEO pada suatu blog.

Kegunaan dari pada readmore otomatis yakni membuat readmore secara otomatis tanpa harus kita menulis manual kode readmore <!--more-->pada saat menulis.
Manfaat dari pada readmore otomatis untuk SEO yakni sangat berperan penting, yg akan membuat suatu blog menjadi ringan loading saat di akses oleh pengunjung. Ini termasuk salah satu SEO template. Untuk membuatnya tak usah panjang lebar, langsung ke sasaran.

1. login ke dashboard blogger.
2. pilih Rancangan »» edit HTML
3. Tandai kotak kecil pada tulisan Expand Template Widget.
4. Tempatkan script berikut dibawah kode </head>
5. Scriptnya
   

   <script type='text/javascript'> 
   var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 440; summary_img = 344; img_thumb_height = 100; img_thumb_width = 120; </script> 
   <script src='http://blogtegal.googlecode.com/files/readmore-otomatis.js' type='text/javascript'/>

6. Selanjutnya cari kode <data:post.body/> atau kode <p><data:post.body/></p> sama saja.
7. ganti kode diatas dengan kode berikut » 
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'> 
   <data:post.body/></div> 
   <script type='text/javascript'> 
   createSummaryAndThumb (&quot;summary<data:post.id/>&quot;); </script> 
   <span class='rmlink' style='float:right; padding-top:20px;'> 
   <a expr:href='data:post.url'>&#187;&#187; Baca selengkapnya..... </a></span> </b:if> 
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

8. Terakhir Save Template

pada tulisan yg berwarna merah bisa di ganti sesuai selera, misal read more, lengkapnya disini, lanjutkan baca, Jika anda ingin mengganti atau meng-upload sendiri kode pemanggil javascript seperti pada tulisanhttp://blogtegal.googlecode.com/files/readmore-otomatis.js silahkan copy dan paste alamat di atas pada address bar, kemudian pada jendela munculan copy seluruh kode-nya dan pastekan pada notepad atau wordpad dan simpan dg berextensi ( .js ) . untuk lebih jelasnya silahkan baca artikel blogtegal tentang Alternatif hosting javascript dan CSS

Read more

Mengganti Readmore dengan Gambar

Sebelumnya saya telah jelaskan pada postingan terdahulu bagaimana membuat read more atau baca selengkapnya pada blogger. Jika anda ingin membacanya kembali silakan klik link ini Cara Membuat Read More Blogger, karena pada postingan tersebut ada keterkaitan dengan postingan yang akan saya sajikan kali ini. Baiklah, jika kita lihat biasanya di penghujung pemotongan artikel suatu blog dapat anda temukan link yang bertuliskan read more atau baca selengkapnya. Sebagai contoh coba anda lihat link read more pada blog saya yang ini. Pada blog tersebut ada link yang bertuliskan baca selengkapnya, tapi di sampingnya juga terdapat sebuah gambar icon read more. Saya akan jelaskan saja cara mengganti tulisan link read more dengan gambar dan untuk selanjutnya terserah anda, apakah tulisan read more benar-benar mau diganti atau hanya ditambahkan gambar icon di samping tulisan tersebut. 

Berikut penjelasan singkat untuk mengganti link read more dengan gambar atau icon pada blogger:

1. Seperti biasa Log in terlebih dahulu ke account blogger anda, kemudian pilih menu Design >Edit HTML, jangan lupa untuk centang Expand Widget Templates dan temukan kode yang ditandai di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

2. Bagaimana? Sudah dapat? Ganti tulisan Read More... dengan kode ini:

<img border="0" src="http://urlgambarreadmorebloggeranda.com"/ >

Atau ganti tulisan yang ditandai berwarna merah di atas dengan url gambar read more anda. Anda juga dapat gunakan gambar yang telah saya sediakan berikut, silakan dipilih salah satu:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7bldY9jcgimhBmKMxGbBojRisoa4NSgjKmV8-3qaqJWUNf_KPBIa4hjmUbg2sR0oonv_VMN4N12c0J5r3s-tTI3EI-n7QOH05mMHnY84gt26MjBDsmpPKFKaQWq5q6rZDJz6cpqqMSM/s1600/readmore.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglrZHtxeC1-xPLZAUo2nc8h6aBIfy-dCUXnxvnA-RIXIit54D7LMdKTReJ1NIswIuKmfwlpm5cmpVCPwv0dYeNu-yVfLbtecWfUsNIqq-LCpYb04Me8uOfR6SAddp7yurjZSSnUoaIfI/s1600/more+button.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSt-nwO2ZysxXGkbhraO0VnBWH4LLSuO64XhzwgZ8I6Ikj5AlSiQEc99lMtoL00giwijevvAK3daYHngqlxX-eqDEo-U-6JFECMvBRhUzjdZ1ayxlTPLF9JBfUceJDdIhNhqQS_mkw5I/s1600/readmore.png"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6DVZweKNqGBfn0YbHKwD8SMQ1-vw3hDHcuX6QzJtJH0gtET5_jfuOekEj9E8plr2DMTa85gM6CmLWgJHc3uxbEt5bwwkpLbM6zL8iK4cwqpF61o9f_FPu7HXfN_X53y518LiJrilAX8/s1600/read+more+arrow.png"/ >

3. Langkah akhir tinggal klik Save Template dan lihat hasilnya.

Read more