Memberikan Gaya Pada Link di Blogger

Memberikan Gaya Pada Link

Pasti kalian pernah melihat link yang seperti diatas bukan...??

Ya..!!! Di samping linknya terdapat icon-icon jenis file linknya. Seperti icon zip, doc, pdf, atau bahkan html. Dengan menampilkan icon file tersebut maka itu akan lebih menjelaskan jenis file yang akan di download. Dan tentunya itu menjadi lebih menarik dibandingkan dengan hanya tulisan saja.

Agar setiap link yang berekstensi .zip .pdf .doc dapat menampilkan icon sesuai filenya, maka berikut caranya :

1). Pastekan code dibawah ini setelah code

2). Cari kode //]]>

3). Copy lalu pastekan code dibawah sebelum kode //]]>

.pdf {
padding-left: 20px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGH2dLi0JzI_PnW2olZ9TYSyUdL14pdVboewwthSYAVmPhzuJsu6JdsRUHeFh752UR0pDS48lLo8QQESlX5_yqq-zFlf2eK3zASryw1ML7ZYqgs2Bcz8wyIOoGmEse0xozgzQ1HnDEVGg/s144/icon-pdf.png) left top no-repeat;
}

.zip {
padding-left: 20px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq31HJ3a5z1hi7GXrnYA0nv4fZyGunQ28TmCNrQRhkmmSQsm1SBqbH1fnuxKBjvo583zTH3VJdp06qR6S2X_JjRb_oH4DvbPNny3W2SJn11GI6XvmQJEUBDAQnY2ybYbmW51BmrNeAdNY/s144/icon-zip.png) left top no-repeat;
}

.doc {
padding-left: 20px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigIyIxfbMRxZP7HCuZfb3BA5K0Dieu2rv1gLqZ2JeEMiS9xAks_3f1AccWpPHPN3jkOIHJfuvcM295ImNpVkfQkkk63fgosLPD1JIrL3RgYiA-l8Cs2IK-A5AvF6WUtpifYO2ghJg0Rfs/s144/icon-doc.png) left top no-repeat;
}

4). Save template

Bagaimana coba kamu buat link untuk file zip atau pdf. apa iconnya muncul disamping link atau tidak...

Kalo memang belum muncul pastikan kembali apa ada yang salah...

Sumber: http://www.andystonecold2009.blogspot.com

Menambahkan Widget Komentar Terbaru (Recent Comment) pada Blogger

Langsung saja ya, Login ke blogger kamu. Pilih Rancangan, lalu tambah gadget, pilih HTML/Javascript
. Lalu masukkan code berikut:

<script style="text/javascript" src="http://crowja.googlecode.com/files/recCom.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://crowja.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan:

1. Ubah kode berwarna MERAH, dengan jumlah maksimum komentar terbaru yang akan ditampilkan
2. Ubah kode berwarna KUNING, dengan jumlah karakter maksimum komentar yang akan ditampilkan
3. Ubah kode berwarna BIRU dengan alamat blog sobat

Sudah?, coba lihat hasilnya....

Tips Agar Blog Dapat Dengan Mudah Diakses Ponsel

Ketika sobat membuka blog sobat di komputer, rasanya memang sedikit cepat. Tetapi saya pernah mengalami masalah yaitu ketika blog di akses lewat ponsel tidak bisa dibuka dengan alasan "Halaman yang anda tuju terlalu besar", atau terkadang bisa diakses tapi sangat lambat. Jika sobat mengalami masalah yang sama seperti saya, sobat perlu melakukan optimalisasi terhadap template blog sobat. Siap bertempur? yuk kita ngaciiiiir.





1. Buka blog, pilih "Rancangan" lalu "Edit HTML"
2. Cari kode berikut

<b:include data='blog' name='all-head-content'/>

3. Pastekan kode berikut dibawah kode tadi.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Selesai, sekarang ponsel akan lebih mudah meload blog sobat dengan kecepatan yang tinggi.

Menambahkan Tombol Back To Top Pada Blogger

Jika blog sobat termasuk kedalam blog yang "Panjang", hehehe. Menambahkan tombol back to top pasti akan lebih mempermudah pengunjung blog sobat ketika akan scolling ke batas atas blog sobat. Ketika pengunjung selesai membaca postingan sobat, lalu menekan tombol ini maka dalam sekejap pengunjung blog sobat akan kembali ke batas atas blog. Menarik bukan?






Beginilah screenshot nya:

Caranya mudah saja


1. Buka "Rancangan" lalu "Edit HTML"
2. Cari kode berikut

</body>

3. Letakkan kode dibawah ini diatas kode tadi.

<a href="#" id="backtotop"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtJjbtW1kmOtqbfh1JrO_n8wuMYVZNy6Pld_saVwdmoYt2qsDdYZo2SWd7WYqXuWJJu4F0wWTZYrrX2yNHlgh1VLWQcl9stdICFExPY70MLF1bcXztOVwqn_x8HXpgT_7PQC0i14Jl8m7/s800/backtotop_www.cr0wja.co.cc.png'/></a>

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

<script type='text/javascript'>

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

*Scroll to top


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



$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>

4. Cari kode berikut

</b:skin>

5. SIsipkan kode berikut diatasnya

#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

6. Simpan template, lalu lihat hasilnya. Jika sobat mengalami kesulitan, tanyakan saja dengan berkomentar. OK

Menambahkan Widget Translator Dukungan Bahasa Yang Banyak Pada Blogger

Kebanyakan tips-trik memberikan cara menambahkan widget translator dengan icon bendera negara tetapi dukungan bahasanya sedikit. Menurut saya itu percuma, karena walaupun sedikit pasti akan memperlambat proses load blog akibat gambar benderanya. Padahal yang kita inginkan adalah fungsi mentranslate, bukan hiasan bendera. Jadi yang kita dapatkan cenderung tampilan, bukan fungsinya. Bagaimana jika bahasa pengunjung blog sobat tidak ada di translator bendera sobat?, tentu pengunjung itu sedikit kecewa karena tidak bisa menterjemahkan isi blog sobat. Jika sobat berpikir sama seperti saya, gunakanlah widget translator yang ringan tapi mempunyai dukungan bahasa yang banyak. Nah, saya akan meberikan sedikit tips nya.



1. Buka blogger
2. Lalu masuk ke tab "Rancangan", lalu klik "Tambah Gadget"
3. Pilih "HTML/JavaScript"
4. Beri nama gadget, misal Translator
5. Lalu masukkan kode berikut pada kontennya

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js">
</script>

Jika sudah, sobat bisa lihat hasilnya seperti widget di blog ini.