Keringat telah di kucurkan, darah telah di tumpahkan, dan semangat akan selalu dikobarkan untuk kemerdekaan Indonesia
Blog kang Rohman mengucapkan Dirgahayu Republik Indonesia Ke 64.
Jaya lah negeriku, Jaya lah Bangsa ku Indonesia.
Minggu, 16 Agustus 2009
Dirgahayu Republik Indonesia Ke 64
Nge-grunge dengan sIFR 2.0 - Free Blogger Template
DemoDownload
'Free Blogger Template' kali ini mencoba konsep 'grunge' dengan menggunakan sIFR 2.0 untuk mengganti jenis Font/Text pada heading, kecuali
h3 pada title postingan, karena sIFR 2.0 tidak mendukung text link (sIFR 3.0 bisa digunakan untuk text link, tapi textnya belum bisa digunakan untuk background transparent). Anda dapat merubah semua jenis font heading yang saya gunakan sesuai selera anda, caranya dapat anda lihat di Menggunakan sIFR 2.0 di 'Blogger Template'. Sip semoga tertarik.
_____
lihat juga berbagai jenis font "grunge" berikut:
76 Dirty, Extreme And Creative Free Grunge Fonts
Kamis, 13 Agustus 2009
Theme WP untuk Kerangka Dasar Desain
Theme WP yang bisa dijadikan kerangka dasar atau 'theme framework' untuk pengembangan desain, selain Starkers yang telanjang itu, juga ada beberapa 'Free Theme WP' yang bisa menjadi pilihan, walau tidak telanjang abis.
Theme WP yang bisa dijadikan kerangka dasar tersebut:
1. Hybrid WordPress Theme Framework
demo:
theme ini menurut saya menjadi pilihan terbaik juga sebab kerangka dasarnya sudah valid HTML/CSS
2. Carrington Text
demo:
Sebenernya Carrington menyediakan 3 jenis 'Theme Framework for WordPress' tapi Carrington Text yang lebih polos dan satu lagi untuk 'mobile'
3. Thematic
demo:
:: lihat juga: How to Create a Minimalist and Typographic Blog Layout From Scratch
Rabu, 12 Agustus 2009
Shortcut buka Link dalam Tab / Jendela Baru
Shortcut buka Link dalam Tab / Jendela Baru - Sebuah Informasi ringan namun mudah-mudahan bisa bermanfaat. Secara default sebuah link apabila di klik maka akan membuka halaman yang di tuju namun halaman yang lama akan hilang yakni di gantikan dengan halaman baru. Akan tetapi ada beberapa webmaster yang tidak menginginkan hal tersebut sehingga link yang mereka pasang disetting agar bisa membuka halaman baru.
Apabila membaca suatu artikel atau tutorial terkadang kita menemukan beberapa link yang dipasang pada artikel tersebut, seringkali kita ingin membuka link tersebut namun tidak menginginkan agar artikel yang dibaca menjadi hilang tergantikan oleh halaman link yang di tuju. Cara yang biasa di lakukan adalah dengan klik kanan pada link tersebut, lalu memilih opsi Open Link In New Tab.
Selain cara di atas, sebenarnya ada cara lain atau shortcut yaitu sambil menekan tombol Ctrl kemudian klik pada link yang ingin di buka ( Ctrl + klik link ). Cara kedua ini di rasa lebih mudah di banding cara yang pertama, namun cara ini memerlukan dua tangan ( kiri dan kanan ) untuk bekerja secara bersamaan.
Jika anda beranggapan bahwa kedua cara di atas kurang nyaman, ada cara lain yang di rasa lebih praktis yaitu anda klik link yang mau di buka dengan menggunakan tombol tengah mouse komputer anda. Dengan menggunakan tombol tengah mouse komputer anda, maka sebuah link yang di klik akan selalu di buka dalam jendela yang baru.
Cara mana yang lebih anda sukai?
Slide Show dengan Caption - jQuery
Demo
Tutorial 'Slide Show dengan Caption - jQuery' dikembangkan oleh serie3 dot info, dengan nama 's3Slider jQuery plugin'. Tahapan tutorial tersebut sangat mudah diterapkan, dan saya mencoba mendokumentasi tutorial 'Slide Show dengan Caption - jQuery' ini di blogger template.
Penerapan Slide Show dengan Caption - jQuery di Blogger Template
1. Masukan script jQuery berikut sebelum
</head> (jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
2. Masukan javascript berikut dibawah script jQuery tadi:
<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>3. Kode HTML berikut dapat anda masukkan di berbagai tempat, baik itu di postingan, gadget (html/javascript), atau langsung di edit HTML.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>>> catatan: ganti setiap alamat image dan keterangannya, sesuai dengan kebutuhan.
4. Masukan kode CSS berikut, di dalam kode css sesudah
<b:skin><![CDATA[ atau sebelum ]]></b:skin> (lihat setiap keterangannya):/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}>> catatan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada
.s3sliderImage span.5. Sip selesai.
:: lihat juga:
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Kumpulan SlideShow / Image Galery - jQuery
Selasa, 11 Agustus 2009
Trik agar bisa Upload Gambar Ukuran besar di blogger
Trik agar bisa upload gambar ukuran besar di blogger - Dalam postring kemarin sudah di tulis bagaimana mendapatkan hosting gambar yang unlimited bandwidth, yaitu dengan memakai blogger. Namun, ada sedikit yang membuat tidak nyaman yaitu kita tidak bisa posting atau upload gambar yang ukurannya lebih dari 400 pixel, karena apabila kita upload gambar yang ukurannya lebih besar dari 400 pixel maka secara otomatis gambar tersebut akan di perkecil menjadi 400 pixel.
Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya :
- Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
- Jika gambar sudah tampil di blog anda, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
- Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang kang Rohman dapatkan seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuVDWxS2uD430NLtnDgdcdOfUB5-j2m5Dry5UUE_EIro5xgBA9u4IhtI5Sp7X3L-IhCHmgkDRz_UxlwM8n-Kn34sdlCsbgVAtrRYrLBVb8i6khZG_WY3jRxZaTBz0PGIeImUsxqb8MzY8/s400/blog-aing.jpg
- Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuVDWxS2uD430NLtnDgdcdOfUB5-j2m5Dry5UUE_EIro5xgBA9u4IhtI5Sp7X3L-IhCHmgkDRz_UxlwM8n-Kn34sdlCsbgVAtrRYrLBVb8i6khZG_WY3jRxZaTBz0PGIeImUsxqb8MzY8/s800/blog-aing.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuVDWxS2uD430NLtnDgdcdOfUB5-j2m5Dry5UUE_EIro5xgBA9u4IhtI5Sp7X3L-IhCHmgkDRz_UxlwM8n-Kn34sdlCsbgVAtrRYrLBVb8i6khZG_WY3jRxZaTBz0PGIeImUsxqb8MzY8/s1600/blog-aing.jpg
Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :
Coba bandingkan dengan yang ini :
Bandingkan juga dengan yang ini :
Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJb95t_DOgmnqrfQhO9_mt0bPj8EtK3Adf_-LZiRb_7SMl1_FUKjJvenN9_ChRrAsH7WsWOFCIJTOtFZPiscvuAooF8Qv0XlMx5owiDUhcA13FhHdW9pevW_dJ6quaEonpQ8-xK_b8dmg/?imgmax800
Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJb95t_DOgmnqrfQhO9_mt0bPj8EtK3Adf_-LZiRb_7SMl1_FUKjJvenN9_ChRrAsH7WsWOFCIJTOtFZPiscvuAooF8Qv0XlMx5owiDUhcA13FhHdW9pevW_dJ6quaEonpQ8-xK_b8dmg/?imgmax1600
Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.
Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?
Selamat mencoba!
Senin, 10 Agustus 2009
Cari Hosting Gambar Unlimited Bandwidth? Pakai Blogger Saja!
Cari Hosting Gambar Unlimited Bandwidth? Pakai Blogger Saja! - Ingin mencari hosting gratisan untuk menyimpan gambar yang unlimited bandwidth? jangan pusing-pusing mencari ke sana kemari, pakai saja blogger! Bagaimana caranya? cara praktis adalah dengan membuat sebuah blog di blogger khusus untuk menyimpan gambar. Ini sudah lama kang Rohman lakukan terutama gambar yang di pakai untuk free template yang kang Rohman buat, karena semakin banyak template tersebut di pakai maka semakin besar bandwidth yang dibutuhkan.
Caranya sangat sederhana, buatlah sebuah blog untuk gallery gambar anda. Postinglah gambar yang anda butuhkan pada blog tersebut, kemudian untuk mengambil alamat URL gambar tersebut adalah seperti ini :
- Arahkan mouse komputer anda ke gambar yang sudah di posting.
- Klik kanan, lalu pilih Copy Image Location ( untuk fire fox ). ingat, bukan copy Link Location, tapi Copy Image Location.
-
Kemudian paste pada pada text editor semisal "NotePad", "WordPad" atau yang lainnya. Contoh URL gambar yang di dapat seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY43wRBOR6lyctQA5DcHhgi1ska5MIgme5kW6iRf_U9Gsl4Ad4VxnmGQ0VmKMLZrOyYPkfBqsTvRJpajocG8qjsWIT8UG08qjGOR7inBMZ4Cc4gjoRvOvXPMd18Md19INUnXBecDnzU8s/?imgmax=800
( contoh format URL gambar di atas mungkin akan berbeda dengan milik anda nantinya karena saya memposting gambar tersebut dengan menggunakan Windows Live Writer )
Selamat mempunyai Hosting gambar gratisan yang unlimited bandwidth!
