Cara Mengedit Widget Pada Template Black Transform

Bagi teman-teman yang sudah memakai Template Black Transform, berikut ini adalah tutorial mengenai cara mengedit widget-widget yang disertakan pada template tersebut. Pastikan kalian sudah berada pada menu Edit HTML account blog kalian pada saat mengikuti tutorial ini. Kalo udah, kita langsung ke TKP. Berangkatttt..

***** Mengedit Link Follow Us *****


Cari kode : <div id='header2-wrapper'> , dan perhatikan kode dibawah elemen tersebut :

<h2>Follow Us</h2>
<ul id='soc'>
    <li><a class='facebook' href='http://www.facebook.com/pages/blogger-abstrak/108579879204062' title='Be my facebook fan'>Facebook</a></li>
    <li><a class='twitter' href='http://www.twitter.com/angga_leoputra' title='Folow me on Twitter'>Twitter</a></li>
</ul>

--> Ganti teks berwarna Merah dengan Judul Widget yang kalian inginkan.
--> Ganti teks berwarna Biru dengan alamat situs sosial kalian masing-masing.

***** Mengedit Widget New Articles *****


Widget New Articles berada pada elemen <div id='kolom1'>
1. Untuk merubah judul widget, cari kode :

<h2>New Articles</h2>

--> Ganti teks New Articles dengan judul yang kalian inginkan.
2. Untuk merubah jumlah post yang tampil, cari kode :

numposts = 10;

--> Ganti angka 10 dengan jumlah post yang ingin ditampilkan.
3. Selanjutnya, cari kode :

home_page = &quot;http://anggaleoputra.blogspot.com/&quot;;

--> Ganti teks http://anggaleoputra.blogspot.com/ dengan alamat blog kalian. Format penulisan diakhiri dengan tanda garis miring "/"
***** Mengedit Widget Slideshow *****


Widget Slideshow berada pada elemen <div id='kolom2'>
Cari kode <div id='sizzles'> , dan perhatikan format penulisan kode dibawah elemen tersebut :

    <div id='sizzles'>
<a href='http://anggaleoputra.blogspot.com'><img id='sizzleImg0' src='http://photoserver.ws/images/Mm9T4cc3293f5fc12.jpg'/></a>
<div class='sizzle_title' id='sizzle_title0'>
<a href='http://anggaleoputra.blogspot.com'>Rounded Black</a></div>

--> Teks berwarna Biru adalah Alamat Link Tujuan ketika judul artikel/gambar di klik. Ganti dengan URL tujuan yang kalian inginkan.
--> Teks berwarna Merah adalah Alamat Tempat Foto Kalian Di Upload/Simpan. Ganti dengan URL gambar kalian.
--> Teks berwarna Orange adalah Judul Artikel/Gambar . Ganti dengan judul yang kalian inginkan.

Lakukan hal yang sama pada baris-baris kode berikutnya.

Jangan sungkan untuk bertanya bila mengalami kesulitan dalam mengaplikasikan tutorial diatas

Mengkompres Gambar Agar Blog Tetap Indah dan Ringan

Kehadiran image/gambar dalam sebuah situs memang sangat dibutuhkan. Selain memperindah, sebuah gambar juga mampu berkata lebih banyak ketimbang teks yang berjibun di situs kita. Terlebih jika sebuah situs berfokus kepada konten mengenai tutorial, gambar adalah sebuah konten wajib yang harus ada didalam postingannya.
Tapi permasalahannya menjadi berbeda ketika sebuah situs akhirnya menjadi berat, lantaran gambar-gambarnya yang berukuran besar. Ini bisa dilihat pada situs-situs mengenai tutorial photoshop, seperti psdtuts, photoshoplady, dsb.

Adakah cara mengatasinya?

Untuk yang mempunyai program Photoshop pada komputernya, kalian bisa menggunakan pilihan Save For Web Devices (CTRL+SHIFT+ALT+S) yang sudah ada. Tools yang disediakan ini mampu mengecilkan ukuran file gambar, dengan menurunkan kualitas gambar ke kualitas yang paling mendekati gambar asli.
Berikut adalah contoh hasil gambar yang dikompress menggunakan Save for Web Devices :

  

Gambar disebelah kiri berukuran 30kb, dan setelah dikompress, ukurannya menjadi hanya 14kb saja. Hasilnya tidak terlalu jauh berbeda kan dengan yang aslinya?
Lalu bagaimana dengan yang ngga punya sotosop ? kalian bisa memakai software Image Resizer sebagai alternatif.
Dari hasil uji coba, software yang satu ini bisa menghasilkan kualitas gambar yang ngga jauh beda dengan yang dihasilkan oleh tools Save for Web Devices nya photoshop. Cara pakainya pun mudah koq.
1. Download dulu softwarenya melalui link ini :
http://www.ziddu.com/download/12644093/ImageResizer_Portable_4.0.1.5_Multilingual.paf.exe.html (7mb)
2. Jalankan file installernya.
3. Kalo udah, jalankan deh programnya.

4. Dimenu utama, masukkan file gambar yang ingin kalian perkecil, kemudian tekan tombol next untuk masuk ke pengaturan selanjutnya.

Pada menu pengaturan, pilihan resize yang di berikan sangat lengkap. Kalian bisa merubah ukurannya sesuai dengan standar profile ataupun dengan resolusi yang kalian inginkan sendiri. Kemudian, juga ada pilihan preview untuk melihat bagaimana hasil gambar yang akan dihasilkan nantinya.
Pengen berimprovisasi lebih dengan gambar yang kalian resize tersebut?, kalian bisa memasukkan efek ke dalamnya, dan masih banyak lagi fitur-fitur lainnya. Pokoke, software ini bisa dibilang software wajib untuk kalian yang ingin blognnya tetap ringan walaupun memakai image yang lumayan banyak

Membuat Blog Menjadi Mobile Friendy

Dengan kehadiran handphone-handphone yang lebih banyak difokuskan pada fitur chat dan browsing, Sekarang hampir semua orang udah bisa mengakses internet dengan mudah. Kapanpun dan dimanapun itu. Ya, cukup mengeluarkan dana sebesar 300ribu aja, HP berfitur aplikasi chatting dan browsing udah menjadi milik kita.
Mengakses internet dengan HP pun udah menjadi pilihan banyak orang, karena ringan dan mudah dibawa kemana-mana. Hal ini tentu saja ngga boleh luput dari perhatian kita, para blogger. Kita harus membuat blog kita menjadi "Mobile Friendly" alias "ringan dan sederhana".
Kepuasan para pengunjung yang datang dari browser HP juga perlu kita perhatikan. Tampilan blog yang terlihat bagus pada kompi, belum tentu terlihat sama pada HP. Design yang "Wuah" pada layar kompi, bisa menjadi "Wuekz" pada layar HP.

Bagaimana caranya membuat blog kita menjadi Mobile Friendly ?
Perbedaan yang paling mencolok antara kebutuhan pengunjung yang menggunakan HP dan Detskop adalah masalah Tampilan dan Size. Semakin kecil ukuran sebuah situs, semakin mudah dan murah juga untuk diakses melalui HP. Karena itu, hal terpenting yang harus kita lakukan adalah memperkecil ukuran blog kita.
Coba deh lihat situs-situs besar semacam Facebook dan Twitter. Situs mereka ketika di akses melalui HP dibuat berbeda dengan tampilan untuk browser kompi. Tampilan untuk web jauh lebih sederhana dan ringan. Hal ini tentu saja membuat biaya pemakaian pulsa juga berkurang bagi pengguna handphone.
Melihat data-data diatas, kita bisa menyimpulkan bahwa blog yang Mobile Friendly tentunya harus mengutamakan keringanan dan konten post diatas segala-galanya. Widget-widget bisa kita kesampingkan, karna pengunjung lebih berfokus kepada dua hal tersebut.
Pointnya udah kita dapat. Sekarang kita bisa mengunakan bantuan Google Reader untuk memimalis tampilan blog kita, sehingga menjadi Mobile Friendly.
Google Reader mempunyai kemampuan untuk menghasilkan tampilan versi mobile dari RSS Feed web kita dengan begitu mengagumkan. Yang kita perlukan hanyalah alamat RSS Feed dari situs kita untuk membuat halaman mobile website.
Cukup dengan memasukkan alamat url feed blog kita seperti contoh dibawah ini, maka blog kita udah bisa tampil dalam versi Mobile :
http://www.google.com/reader/m/view/feed/[url_feed_anda]
Teks berwarna merah adalah alamat feed blog kita.
Untuk format penulisannya, kita akan pakai contoh alamat feed blog ini.
http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default
Sampai tahap ini, blog kita sudah 100% Mobile Friendly. Dan yang perlu kita lakukan selanjutnya adalah membuat blog kita bisa mendetect jenis browser yang digunakan oleh pengunjung secara otomatis. Apabila pengunjung datang dari browser HP, maka mereka akan di alihkan ke alamat blog kita via google reader. Sedangkan pengunjung yang datang dari browser detskop, akan tetap menuju blog utama kita.
Caranya?
1. Login ke Account / Dashboard blogger.
2. Masuk ke menu Rancangan / Design, kemudian pilih Edit HTML.
3. Letakkan kode dibawah ini sebelum kode <head>

<script type='text/javascript'>
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,&#39;http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default&#39;);
</script>

4. Ganti teks berwarna merah pada kode diatas dengan alamat url feed blog kalian yang sudah di gabungkan dengan URL Google Reader.
5. Simpan, dan coba akses blog kalian dari HP, atau bisa juga melalui Opera Mini Simulator.
Untuk simulator detskop Opera Mini versi 4.2 , kunjungi http://www.opera.com/mobile/demo/?ver=4
Untuk simulator versi terbaru (versi 5) , kunjungi http://www.opera.com/mobile/demo/
Apa sudah berjalan?
Kalo udah, sekarang saatnya cari ilmu lain lagi.. hehe..
See u..