Ardianzzz! What are you Doing??

Anywhere Demo

2010-04-25T06:13:00.000-07:00

Ini adalah Demo Twitter @Anywhere

Tutorial Lebih Banyak di http://ardianzzz.blogspot.com

Lightbox Effect Pada Kotak Komentar

Sexy Bookmark A-la CSS3

Membuat blog bergaya blogazine

Membuat Animasi Pada Navbar

2010-03-17T23:04:00.000-07:00

Iframe

2010-03-16T23:46:00.000-07:00

Home
Lihat Komentar
Tinggalkan Komentar

15 Icon Cantik Dengan Gaya Yang Berbeda, Gratis!

2010-03-11T05:53:00.000-08:00

Koleksi icon sangat diperlukan bagi seorang web desainer karena selain sebagai design resource juga dapat menjadi sumber inspirasi. Kita telah sering melihat icon dengan desain yang glossy, simple, dan elegan. Akan tetapi, icon-icon tersebut terlihat kurang sesuai jika digunakan untuk desain tertentu. misalnya desain dengan nuansa grungey.

Berikut ini adalah 15 koleksi icon cantik yang memiliki gaya yang berbeda, yaitu terkesan ngasal, sedikit kotor, colorful dan tentu saja cantik yang mungkin cocok dengan desain anda.

1. Wooden Badges

2. Handycons 2

3. Handy

4. Social Icons Hand Drawn

5. RM Kute Toolbar Icons

6. Natsu Icon Set

7. Red Little Shoes Icon Set

8. Hand Drawn Doodle Icons

9. ICon Pack

10. Sketchy Icons

11. Extreme Grunge Garment Icons

12. Woven Fabric Social Media Icon Set

13. Grunge Peeling Stickers Social Media Icons

14. Sketchy Web Icons

15. Old Bottle Crowns

Icon

2010-03-09T21:31:00.000-08:00

1. Mippin

2. No Spam

15 Contoh Penulisan Dengan Georgia

2010-03-09T00:32:00.000-08:00

Georgia adalah salah satu font yang paling banyak dipakai pada sebuah web/blog. Menurut smashing magazine, Georgia adalah font tipe serif yang paling populer digunakan pada konten dan headline. Berikut ini adalah 15 contoh styling Georgia menggunakan CSS.

1. Ukuran Ekstra Besar Normal

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

font-family: Georgia, serif;
font-size: 41px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.2em;

2. Ukuran Ekstra Besar Normal

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

font-family: Georgia, serif;
font-size: 44px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: -3px;
line-height: 1.2em;

3. Ukuran Besar Normal Italic

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

4. Ukuran Besar Normal

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

font-family: Georgia, serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.2em;

5. Ukuran Besar Normal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

font-family: Georgia, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

6. Ukuran Menengah Normal Uppercase

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.7em;

7. Ukuran Menengah Normal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

8. Ukuran Menengah Normal

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.6em;

9. Ukuran Menengah Bold

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: 0.2px;
line-height: 1.5em;

10. Ukuran Menengah Normal

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

font-family: Georgia, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

11. Ukuran Menengah Normal

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;

12. Ukuran Kecil Normal Uppercase

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;

13. Ukuran Kecil Normal Italic

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.42em;

14. Ukuran Kecil Normal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

font-family: Georgia, serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

15. Ukuran Kecil Bold

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ont-family: Georgia, serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

sumber: Typechart

Bookmark Menu a-la CSS3

2010-03-04T16:12:00.000-08:00

Kita tahu bahwa keberadaan Social Bookmark dapat digunakan untuk meningkatkan trafik web/blog dengan cukup efektif. Biasanya, untuk memudahkan pengunjung melakukan bookmarking, banyak pengelola web/blog yang menyediakan menu social bookmark pada web/blog mereka. Kebanyakan menggunakan gambar daripada link teks karena dirasa lebih komunikatif dan lebih bagus tentunya.

Nah berikut ini adalah tutorial singkat membuat bookmark bar yang cantik pada blogspot dengan CSS3

1. Langkah Awal
Selalu diingat bahwa sebelum melakukan editing pada template, hendaknya kita melakukan backup terlebih dahulu untuk mengantisipasi hal-hal yang tidak diinginkan. Setelah itu, pilih opsi Expand Template Widget

2. CSS
Mesukkan kode CSS berikut ini. Jika belum tahu, letakkan saja sebelum tag ]]></b:skin>

/* BookmarksBar
----------------------------------------------- */
ul.socials {

}

ul.socials li {
display: inline;
}

ul.socials li img{
width:48px;height:48px;
}

ul.socials a {
background:transparent;
display: inline;
float: left;
margin: 0 0 27px 10px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333;
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transform: rotate(-2deg);
}

ul.socials img {
display: block;
}

ul.socials a:after {
content: attr(title);
}

ul.socials li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}

ul.socials li:nth-child(3n) a {
-webkit-transform: none;
position: relative;
top: -5px;
-moz-transform: none;
}

ul.socials li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
position: relative;
right: 5px;
-moz-transform: rotate(5deg);
}

ul.socials li:nth-child(8n) a {
position: relative;
right: 5px;
top: 8px;
}

ul.socials li:nth-child(11n) a {
position: relative;
left: -5px;
top: 3px;
}

ul.socials li.messy a {
margin-top: -375px;
margin-left: 160px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}

ul.socials li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

2. HTML
Masukkan kode HTML berikut ini pada bagian post-footer blog. Jika kesulitan, carilah kode <div class='post-footer-line post-footer-line-'>
biasanya, pada template default, terdapat tiga baris footer. Letakkan pada baris yang disuka.
Jika menginginkan icon yang berbeda, gantilah tulisan yang berwarna merah dengan alamat gambar yang dikehendaki.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49HnFq7hyI/AAAAAAAABPg/7hhSAKnRCck/s400/1267557422_facebook.png'/></a></li>

<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://2.bp.blogspot.com/_fD0JUTei5H8/S49ImNoQFdI/AAAAAAAABPw/vXKwNIs7JxU/s400/1267557431_twitter.png'/></a></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49IlyNUsxI/AAAAAAAABPo/meQjq-OoeoM/s400/1267557426_reddit.png'/></a></li>

<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49ImVV2kbI/AAAAAAAABP4/FQeEcQRm38A/s400/1267557435_delicious.png'/></a></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49Im75MrnI/AAAAAAAABQA/h8Ys5DiZSJk/s400/1267557438_technorati.png'/></a></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://4.bp.blogspot.com/_fD0JUTei5H8/S49InNLmWAI/AAAAAAAABQI/rNwyFghjcqw/s400/1267557441_digg.png'/></a></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://2.bp.blogspot.com/_fD0JUTei5H8/S49QYWo_HEI/AAAAAAAABQQ/f1XJy4unu-o/s400/1267557447_stumbleupon.png'/></a></li>
</ul>
</div>
</b:if>

4. Demo

▪ Lihat Demo ▪

Perlu diperhatikan, karena trik ini menggunakan CSS3 (seperti -moz-transform, -webkit-animation, dsb), maka efek animasi hanya dapat ditampilkan pada browser tertentu saja. Paling baik jika dilihat menggunakan browser berbasis wbkit seperti Safari 4 dan Google Chrome 3+. Tetapi masih cukup bagus bila menggunakan Firefox 3.6.

Sangat mudah sekali bukan? Selamat mencoba!

Social Media Love Icons

2010-03-03T21:38:00.000-08:00

Redesain

2010-03-02T21:13:00.000-08:00

Setelah hiatus lebih dari 3 bulan terhitung sejak posting terakhir yang berjudul "happy new year (31-12-09), akhirnya saya memutuskan untuk melakukan desain ulang terhadap blog ini. Seperti kita ketahui bahwa layout blog memiliki kontribusi yang cukup besar dalam menjaring pengunjung selain konten. Beberapa poin penting yang mendasari desain blog ini adalah:

1. Desain yang sederhana tetapi unik
Seperti kita ketahui, bahwa desain yang sederhana jauh lebih menyenangkan daripada yang rumit dan memusingkan kepala. Saya memiliki keyakinan bahwa pengunjung akan lebih menyukai blog yang 'bersih', tertata dengan rapi, dan tentu saja 'unik'

2. Fokus kepada konten
Tak dapat dipungkiri bahwa jika kita ingin serius ngeblog, kita harus berfokus pada konten tertentu. Jika ada yang mengatakan bahwa content is th king, mungkin ada benarnya juga. Seperti kita tahu, blog dengan tampilan yang bagus belum tentu memiliki pangunjung yang banyak

3. Mudah dan enak dibaca
Seperti pada poin 1, selain mengenai desain layout, tulisanpun juga harus diperhatikan. Pada layout ini, saya memutuskan menggunakan font Gill Sans. Saya tahu bahwa font tersebut tidak termasuk dalam "web-safe" font. Tetapi tidak menjadi masalah karena font ini terdapat pada sebagian besar (atau semua) komputer yang menggunakan windows XP.

Sampai pada tulisan ini dibuat, proses editing layout masih belum memasuki tahap final, atau dengan kata lain belum selesai. Masih harus melakukan beberapa perbaikan terutama pada CSS dan JavaScriptnya dan saya membutuhkan lebih banyak inspirasi untuk menyelesaikannya. Untuk itu, saya mengharapkan masukan, ide, kritik, dan sarannya.

Terimakasih

Happy New Year!

2009-12-30T21:30:00.000-08:00

Yeah akhirnya sampai juga kita semua di penghujung tahun 2009 ini. Mungkin ini adalah saat yang cukup tepat untuk sekedar melakukan refleksi dan introspeksi diri. Atas apa yang telah kita lakukan dan dapatkan selama setahun penuh.

Pastikan roda kehidupan itu tidak hanya berputar... tapi juga berjalan...

Selamat Tahun Baru

gambar:http://wcaithedaily.wordpress.com

Background Yang berbeda Untuk Tiap Posting

2009-11-12T18:34:00.000-08:00

Saya menerapkan beberapa trik sederhana agar blog ini terkesan unik dan lain dari kebanyakan blog. Salah satunya adalah menggunakan background yang berbeda untuk tiap-tiap posting. Jika tertarik, langsung saja saya jelaskan triknya.

Caranya cukup sederhana, dengan menggunakan HTML dan CSS tanpa ada embel-embel JawaScript. Teorinya, background digantikan menggunakan div dengan width sebesar 100% dab height sebesar 100%, div tersebut diletakkan pada posisi dibawah content (z-index rendah). Untuk lebih mudahnya, copi & paste code HTML dibawah ini dan letakkan di dalam posting.

<div style="position: fixed; top: 0pt; left: 0pt; width: 100%; height:100%; background: url(http://URLgambarlatarmu/background.jpg); text-align: center; z-index: -5;">
</div>

Gantilah http://URLgambarlatarmu/background.jpg dengan alamat gambar yang dikehendaki. Jika tidak ingin menggunakan gambar sebagai background, dapat juga menggunakan warna.

Penting!
Cara di atas adalah murni sebuah trik yang telah berhasil saya terapkan pada blog ini. Sejauh ini, trik tersebut dapat berjalan dengan baik jika dikombinasikan dengan JavaScript readmore (karena script tersebut mematikan fungsi HTML tiap-tiap posting pada halaman utama). Jika anda mencoba trik ini tanpa mengkombinasikannya dengan script readmore tersebut, kemungkinan efeknya akan mengacaukan halaman utama.

Saran
Letakkanlah kode HTML tersebut pada bagian akhir posting.

Trik ini dapat berjalan di browser-browser terbaru. Saya telah mengujinya pada Firefox 3.x, Safari 4, Chrome 3, dan Opera 9. Akan tetapi tidak dapat berjalan bagus untuk IE 6.
Untuk demo, dapat dilihat pada blog ini.
Selamat mencoba..

Animasi jQuery Untuk Navbar Blogger

2009-11-05T22:50:00.000-08:00

“Blogger meluncurkan navbar baru!”

Sepertinya kita (pengguna blogger) telah mengetahui hal tersebut. Blogger telah menambahkan 2 navbar yang bergaya transparan. Kebanyakan yang telah mereview fitur terbaru ini beranggapan bahwa blogger melakukan hal tersebut agar navbar yang disediakan menjadi lebih diminati karena dapat tampil lebih matching dengan template yang digunakan. Tetapi selama saya menyambangi blog-blog sahabat (pengguna blogspot) kebanyakan dari mereka memilih menghilangkan navbar termasuk saya sendiri.

Saat ini, banyak sekali blog yang membahas bagaimana memodifikasi navbar blogger agar menjadi lebih menarik misalnya navbar auto-hide agar navbar tidak mengganggu penampilan blog.

Kita dapat membuat semacam auto-hide pada navbar menggunakan jQuery. Metode ini memanfaatkan JavaScript untuk membuat efek transparansi pada navbar. Kita dapat mengatur transparansi navbar mulai dari 0% (normal) hingga 100% (tidak kelihatan) atau dengan kata lain Navbar akan kelihatan jika kita meletakkan pointer di atasnya.

Caranya sangat mudah yaitu tinggal copy & paste kode di bawah ini dan letakkan sebelum tag </head>

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

<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.1);
});
});
</script>

Nah, pada kode JavaScript di atas, dapat kita lihat huruf yang berwarna merah (0.1) berarti transparansi navbar sebanyak 90%. Jika menginginkan navbar tidak tampak samasekali, gantilah nilai 0.1 menjadi 0.0.
Jika menginginkan navbar tetap transparan saat mouseover, ubahlah nilai pada angka yang berwarna biru (1.0) menjadi 0,75 (untuk transparansi 25%).

Sangat mudah sekali bukan, selamat mencoba...

§ Live Demo

Minima

2009-11-05T00:08:00.000-08:00

Yes! this template is Minima,
Just press Ctrl+U and you'll see

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
-----------------------------------------------

Yes! I love Minima!

Lorem Ipsum Dollar Sit Amet Constectueir g

2009-10-31T00:25:00.000-07:00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lacus leo, tristique ut, sagittis in, rutrum vel, nibh. Curabitur id tellus vitae lacus scelerisque porta. Sed non enim non mauris feugiat ullamcorper. Nulla facilisi. Vivamus ac quam. Sed venenatis vehicula metus. Maecenas scelerisque risus ac arcu. Integer magna nisi, ornare at, sodales pellentesque, iaculis vel, nulla. Pellentesque a nibh ac dolor rhoncus volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer suscipit bibendum mauris.

Nunc mauris. Praesent nec justo vel ligula sollicitudin ullamcorper. Quisque non massa vitae nisi tristique ultrices. Etiam et nisl sed sem consectetuer hendrerit. Maecenas ligula nisl, volutpat at, facilisis in, posuere in, nibh. Nullam vitae justo id eros pharetra volutpat. Aliquam neque ante, dignissim et, porttitor non, ullamcorper non, sem. Cras nec mi sit amet enim facilisis commodo. Duis egestas, velit non cursus porttitor, ligula nibh faucibus arcu, et venenatis nisl dui quis massa. Nullam tortor. Sed pharetra. Vestibulum lacinia, nibh egestas imperdiet vehicula, ante nisi porttitor lorem, eget convallis turpis lacus vitae arcu. Nam et justo ut nisi semper auctor. Nulla aliquet placerat ante.

Tipografi Untuk Blog

2009-10-30T00:20:00.000-07:00

aat ini banyak sekali website terutama blog yang mengandalkan tipografi sebagai desain utama. Hal ini dapat dijumpai pada blog-blog dengan template yang relatif sederhana yang sekarang lagi trend di era web2.0. Terdapat beberapa teori tentang penggunaan tipografi dalam dunia web desain mulai dari penggunaan font, ukuran font, warna font, spasi, dan lain-lain yang tujuannya antara lain agar pengunjung merasa nyaman saat membaca konten atau dengan kata lain menjadi lebih enak dibaca.

Mungkin selama ini kita kurang memperhatikan hal tersebut. Pengalaman saya sendiri, saat saya blogwalking di beberapa blog (yang umumnya menggunakan template buatan sendiri) masih kurang memperhatikan masalah tipografi ini. Coba kita bayangkan, membaca tulisan berwarna biru tua (#0000EE) dengan background berwarna hitam (#000) dengan font Tahoma berukuran 12 pixel, Kalau saya pribadi jelas malas membacanya karena membuat mata sakit.

Lorem Ipsum Dolar Sit Amet...

Coba bandingkan saat kita membaca tulisan dengan warna latar yang cukup kontras dengan warna font (biasanya latar berwarna cerah) dengan ukuran font antara 12-14 pixel, dengan letter space yang tidak terlalu renggang dan tidak terlalu rapat, pasti kita akan lebih betah membaca artikel dalam blog tersebut. Imbasnya, komentar ngawur bernada spam bisa berkurang. Hal ini pula yang (menurut saya) template-template blog yang minimalis semacam Simpla, BlogTXT, white as milk, dll. bisa menjadi template yang terkenal dan terkesan professional. Kita tahu bahwa template-template tersebut tidak mengandalkan gambar-gambar dan hanya mengandalkan desain berbasis web tipografi.

Lorem Ipsum Dolar Sit Amet...

Sekarang saatnya berbicara statistik, menurut smashingmagazine.com terdapat beberapa poin penting dalam web design typography antara lain adalah:

Font yang digunakan
Background yang digunakan dan warna font
Ukuran font
Spasi atar baris (line height)

Berikut ini adalah data statistik yang diperoleh yaitu:

1. Font yang digunakan

60% website menggunakan sans-serif (font tidak berkaki) untuk headline semacam Arial, Verdana, Lucida Grande, dan Helvetica.
Hanya 34% website menggunakan font tipe serif sebagai font konten
Font tipe serif yang paling populer untuk headline adalah georgia (28%) dan Baskerville (4%) (blog ini menggunakan Georgia)
Font tipe serif yang paling populer untuk konten adalah georgia (32%) dan Times New Roman (4%)
Font tipe sans-serif yang paling populer untuk headline adalah Arial (28%) Helvetica (20%) and Verdana (8%).
Font tipe sans-serif yang paling populer untuk konten adalah Arial (28%), Verdana (20%) and Lucida Grande (10%). (blog ini menggunakan Georgia)

2. Background yang digunakan

Kita dapat menggunakan backround berwarna terang atau gelap. Sebagian besar website dengan konten tulisan akan memilih warna terang dengan tulisan berwarna gelap. Beberapa website memilih backround gelap kemungkinan karena alasan konten yang ditampilkan. (misal: postsecret). Yang perlu diperhatikan adalah jangan sampai warna background menyebabkan tulisan susah untuk dibaca. Contohnya adalah menggunakan warna hitam(#000) untuk background dan warna abu-abau (#222) untuk font. Hal ini jelas membuat tulisan sukar dibaca. Selain itu hindarilah kontras yang berlebih. Misalnya font berwarna hitam aseli (#000) dipadu dengan background putih alami (#FFF) hal ini juga kurang baik. Banyak desainer yang memilih menurunkan kontras antara background dengan kontent. Misalnya menggunakan background putih (#FFF) dan font abu-abu (#222, #333, #444 dll).

3. Ukuran font rata-rata

Beberapa ukuran yang populer digunakan unutk headline berkisar antara 18 hingga 29 pixel, dengan 18-20px dan 24-26px adalah yang paling populer.
Ukuran yang sering digunakan untuk font konten berkisar antara 12-14 pixel. yang paling populer (38%) adalah ukuran 13px.

Terdapat beberapa studi yang menyebutkan bahwa perbandingan antara font hedline dan font body (konten) merupakan hal yang perlu diperhatikan. Perbandingan raa-rata yang baik untuk digunakan adalah antara ukuran headline dan konten adalah 1.96. Karena saya menggunakan pixel (bukan ems) dalam satuan ukuran, maka saya mengasumsikan perbandingannya adalah 2.

4. Spasi antar baris (line-height)

Perbandingan line height ÷ ukuran fon konten =1.48/1.5
line length (pixels) ÷ line height (pixels) = 27.8
Spasi anttar paragraf ÷ line height (pixels) = 0.754
space between paragraphs (pixels) ÷ line height (pixels) = 0.754

Begitulah kira-kira beberapa aturan yang biasa diterapkan dalam membuat desain web berbasis tipografi. Saya rasa informasi ini masih sangat terbatas dan saya sarankan anda untuk mencari lebih banyak informasi tentang tipografi dan desain web (blog) agar perkembangan dunia blog di Indonesia tidak tertinggal dengan negara lain. Sekedar masukan dari saya, perlu kita ingat bahwa blog adalah sesuatu yang unik yang (bisa dikatakan) merepresentasikan pemiliknya baik dari desain maupun konten yang terdapat di dalamnya. Kita mungkin dapat dengan mudah membedakan blog milik orang yang menyukai musik rock dan blog milik seorang penggila dangdut. Karena itu berkreasilah dengan bebas untuk mengekspresikan diri melalui blog. Saya menampilkan data di atas hanya sekedar ingin berbagi ilmu pengetahuan tentang dunia web desain dan tidak berarti saya menganggap blog yang bagus adalah yang mengikuti 'pakem' tersebut. Dan jika ada masukan yang membangun akan saya terima dengan senang hati.....

Syntax Highlighter

2009-09-07T23:09:00.000-07:00

Pada postingan sebelumnya telah saya jelaskan bahwa saya akan mulai (belajar) menulis tutorial tentang blogging dan script. Saya rasa sebelum saya mulai menuliskan artikel tentang kesemuanya itu, saya akan mereviev sedikit tentang penggunaan syntax highlighter dan sekaligus instalasinya.

Syntax highlighter berfungsi untuk melakukan highlight pada kode tertentu sehingga memudahkan dalam membacanya sekaligus memercantik tampilan blog. Sebagai contoh, di bawah ini adalah hasil dari pekerjaan syntax highlighter untuk kode CSS:

tanpa syntax highlighter (dengan blockquote biasa):

/* Use this with templates/template-twocol.html */
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
background-color: #000000;
color: #eee;
font-family: Trebuchet MS;
font-size: 12px;
}
a:link {
color: #FF3366;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FF3366;
}

dengan syntax highlighter:

/* Use this with templates/template-twocol.html */
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
background-color: #000000;
color: #eee;
font-family: Trebuchet MS;
font-size: 12px;
}
a:link {
color: #FF3366;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FF3366;
}

/* Use this with templates/template-twocol.html */<br />body {<br />margin-left: 0px;<br />margin-top: 20px;<br />margin-right: 0px;<br />background-color: #000000;<br />color: #eee;<br />font-family: Trebuchet MS;<br />font-size: 12px;<br />}<br />a:link {<br />color: #FF3366;<br />text-decoration: none;<br />}<br />a:visited {<br />text-decoration: none;<br />color: #990000;<br />}<br />a:hover {<br />text-decoration: none;<br />color: #FF0000;<br />}<br />a:active {<br />text-decoration: none;<br />color: #FF3366;<br />}<br />

Dapat kita lihat perbedaannya bukan?

nah langsung saja, bagi pengguna Blogspot cara instalasi syntax highlighter sangat mudah. Pertama, download dahulu syntax highlighter generator (untuk blog ini saya menggunakan static syntax highlighter dari relic19 yang cukup menggunakan CSS (bukan javascript) sehingga lebih cepat dan mudah. Download static syntax highlighter maka kita akan mendapatkan generator syntax highlighter yang berfungsi untuk mengubah kode yang kita masukkan menjadi kode HTML.

Selanjutnya, masukkan kode CSS di bawah ini kedalam template blogger (letakkan sebelum kode ]]>).

.dp-highlighter
{
font-family: "Consolas", "Courier New", Courier, mono, serif;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

.dp-highlighter<br />{<br /> font-family: "Consolas", "Courier New", Courier, mono, serif;<br /> font-size: 12px;<br /> background-color: #E7E5DC;<br /> width: 99%;<br /> overflow: auto;<br /> margin: 18px 0 18px 0 !important;<br /> padding-top: 1px; /* adds a little border on top when controls are hidden */<br />}<br /><br />/* clear styles */<br />.dp-highlighter ol,<br />.dp-highlighter ol li,<br />.dp-highlighter ol li span <br />{<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br />}<br /><br />.dp-highlighter a,<br />.dp-highlighter a:hover<br />{<br /> background: none;<br /> border: none;<br /> padding: 0;<br /> margin: 0;<br />}<br /><br />.dp-highlighter .bar<br />{<br /> padding-left: 45px;<br />}<br /><br />.dp-highlighter.collapsed .bar,<br />.dp-highlighter.nogutter .bar<br />{<br /> padding-left: 0px;<br />}<br /><br />.dp-highlighter ol<br />{<br /> list-style: decimal; /* for ie */<br /> background-color: #fff;<br /> margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */<br /> padding: 0px;<br /> color: #5C5C5C;<br />}<br /><br />.dp-highlighter.nogutter ol,<br />.dp-highlighter.nogutter ol li<br />{<br /> list-style: none !important;<br /> margin-left: 0px !important;<br />}<br /><br />.dp-highlighter ol li,<br />.dp-highlighter .columns div<br />{<br /> list-style: decimal-leading-zero; /* better look for others, override cascade from OL */<br /> list-style-position: outside !important;<br /> border-left: 3px solid #6CE26C;<br /> background-color: #F8F8F8;<br /> color: #5C5C5C;<br /> padding: 0 3px 0 10px !important;<br /> margin: 0 !important;<br /> line-height: 14px;<br />}<br /><br />.dp-highlighter.nogutter ol li,<br />.dp-highlighter.nogutter .columns div<br />{<br /> border: 0;<br />}<br /><br />.dp-highlighter .columns<br />{<br /> background-color: #F8F8F8;<br /> color: gray;<br /> overflow: hidden;<br /> width: 100%;<br />}<br /><br />.dp-highlighter .columns div<br />{<br /> padding-bottom: 5px;<br />}<br /><br />.dp-highlighter ol li.alt<br />{<br /> background-color: #FFF;<br /> color: inherit;<br />}<br /><br />.dp-highlighter ol li span<br />{<br /> color: black;<br /> background-color: inherit;<br />}<br /><br />/* Adjust some properties when collapsed */<br /><br />.dp-highlighter.collapsed ol<br />{<br /> margin: 0px;<br />}<br /><br />.dp-highlighter.collapsed ol li<br />{<br /> display: none;<br />}<br /><br />/* Additional modifications when in print-view */<br /><br />.dp-highlighter.printing<br />{<br /> border: none;<br />}<br /><br />.dp-highlighter.printing .tools<br />{<br /> display: none !important;<br />}<br /><br />.dp-highlighter.printing li<br />{<br /> display: list-item !important;<br />}<br /><br />/* Styles for the tools */<br /><br />.dp-highlighter .tools<br />{<br /> padding: 3px 8px 3px 10px;<br /> font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> color: silver;<br /> background-color: #f8f8f8;<br /> padding-bottom: 10px;<br /> border-left: 3px solid #6CE26C;<br />}<br /><br />.dp-highlighter.nogutter .tools<br />{<br /> border-left: 0;<br />}<br /><br />.dp-highlighter.collapsed .tools<br />{<br /> border-bottom: 0;<br />}<br /><br />.dp-highlighter .tools a<br />{<br /> font-size: 9px;<br /> color: #a0a0a0;<br /> background-color: inherit;<br /> text-decoration: none;<br /> margin-right: 10px;<br />}<br /><br />.dp-highlighter .tools a:hover<br />{<br /> color: red;<br /> background-color: inherit;<br /> text-decoration: underline;<br />}<br /><br />/* About dialog styles */<br /><br />.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }<br />.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }<br />.dp-about td { padding: 10px; vertical-align: top; }<br />.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }<br />.dp-about .title { color: red; background-color: inherit; font-weight: bold; }<br />.dp-about .para { margin: 0 0 4px 0; }<br />.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }<br />.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }<br /><br />/* Language specific styles */<br /><br />.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }<br />.dp-highlighter .string { color: blue; background-color: inherit; }<br />.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }<br />.dp-highlighter .preprocessor { color: gray; background-color: inherit; }<br />

Nah, selesai sudah. Untuk menampilkan posting berupa kode semacam CSS atau JavaScript, tinggal melakukan copy & paste dari generator syntax highlighter. dan jika menginginkan tampilan yang berbeda tinggal diedit aja CSS nya. itu saja.

Terimakasih telah membaca..
:)

Ipsum

2009-06-21T21:25:00.000-07:00

Nunc mauris. Praesent nec justo vel ligula sollicitudin ullamcorper. Quisque non massa vitae nisi tristique ultrices. Etiam et nisl sed sem consectetuer hendrerit. Maecenas ligula nisl, volutpat at, facilisis in, posuere in, nibh. Nullam vitae justo id eros pharetra volutpat. Aliquam neque ante, dignissim et, porttitor non, ullamcorper non, sem. Cras nec mi sit amet enim facilisis commodo. Duis egestas, velit non cursus porttitor, ligula nibh faucibus arcu, et venenatis nisl dui quis massa. Nullam tortor. Sed pharetra. Vestibulum lacinia, nibh egestas imperdiet vehicula, ante nisi porttitor lorem, eget convallis turpis lacus vitae arcu. Nam et justo ut nisi semper auctor. Nulla aliquet placerat ante.

Duis egestas, velit non cursus porttitor, ligula nibh faucibus arcu, et venenatis nisl dui quis massa. Nullam tortor. Sed pharetra. Vestibulum lacinia, nibh egestas imperdiet vehicula, ante nisi porttitor lorem, eget convallis turpis lacus vitae arcu. Nam et justo ut nisi semper auctor. Nulla aliquet placerat ante.

Pellentesque semper tortor sit amet risus consequat porta. Morbi rutrum quam et nisl. Praesent dapibus volutpat dui. Donec eu nibh. Quisque elit. Morbi diam mi, luctus id, fringilla in, convallis sed, massa. In euismod rhoncus metus. Mauris eget pede. Maecenas ullamcorper sollicitudin neque. Cras sit amet tellus eu est luctus sollicitudin. Cras vitae mauris in quam venenatis placerat. Aenean consectetuer augue egestas enim.

Lorem

2009-06-18T21:04:00.001-07:00

Duis egestas, velit non cursus porttitor, ligula nibh faucibus arcu, et venenatis nisl dui quis massa. Nullam tortor. Sed pharetra. Vestibulum lacinia, nibh egestas imperdiet vehicula, ante nisi porttitor lorem, eget convallis turpis lacus vitae arcu. Nam et justo ut nisi semper auctor. Nulla aliquet placerat ante.

Jatimulyo

2009-06-13T06:36:00.000-07:00

Pagi ini cukup dingin ketika aku terbangun. Cuaca agak mendung berkabut, tetapi tidak hujan. Saat keluar dari kamar, kulihat gorengan dan teh panas telah tersedia di meja sangat cocok untuk menemani pagi..

Sebuah suasana pagi yang khas di desa Jatimulyo, sebuah desa yang terletak di daerah pegunungan menoreh di kabupaten Kulonprogo Yogyakarta. Dengan hidangan pagi yang juga khas yaitu teh gula jawa yang dihidangkan dengan segala keramahtamahan yang seharusnya menjadi kebanggaan negeri ini.

Desa Jatimulyo terletak di bagian utara kabupaten Kulonprogo, lokasinya cukup jauh dari daerah perkotaan. Daerah ini menyimpan semua potensi yang dimiliki Indonesia seperti yang digambarkan pada buku-buku Pendidikan Pancasila, Kewarganegaraan, Bahasa Indonesia, Sejarah, Sosiologi, Geografi, Buku Musik Lagu Wajib dan Nasional, serta buku Biologi. Dimana buku-buku tersebut menceriterakan sebuah negeri yang kaya dan makmur. Desa-desanya sangatlah permai, tanahnya subur dengan segala sumberdaya yang ada, penduduknya ramahtamah dan giat bekerja. Alangkah indahnya Indonesia pikirku ketika membaca semua literatur tentang negeri ini.

Semaikin derasnya arus kemajuan jaman dan perkembangan kota mengakibatkan desa-desa yang permai semakin menjadi langka saja. Dusun Sukomoyo yang terletak di desa Jatimulyo misalnya, untuk mencapainya kita harus melakukan perjalanan kurang lebih sejauh 50km dari kota yagyakarta. Melewati jalan kecil dengan aspal yang tidak dapat dikatakan bagus yang berkelok-kelok melintasi pagunungan menoreh dengan lembah-lembahnya yang curam. Lokasi desa terletak di dekat kompleks wisata gua kiskendo yang berdekatan dengan perbatasan antara kabupaten kulonprogo dan purworejo jawa tengah.

Meskipun untuk sampai kesana memerlukan energi yang tidak sedikit, tetapi kita akan mendapati suasana pedesaan yang permai, pemandangan alam pegunungan yang indah disertai udara segarnya yang menyehatkan, dan penduduknya yang ramah tamah.

Sebuah konsep tentang pariwisata pedesaan telah diterapkan di desa Jatimulyo ini. Banyak sekali hal yang dapat ditawarkan. Mulai dari Agrowisata, Outbond, Birdwwatching, Interaksi sosial budaya, Bahkan wisata minat khusus seperti penyusuran goa dan sebagainya.

Untuk agrowisata, daerah ini memiliki andalan yaitu kakao, kopi dan salak. Masih ditambah dengan peternakan kambing ettawa yang menjadi tulang punggung perekonomian masyarakat. selain itu, alam pegunungan dan hutan yang masih asri sangat cocok untuk kegiatan outbond dan birdwatching mengingat daerah ini sangat kaya dengan satwa liar terutama burung.

Warga desa tidak menyediakan penginapan khusus atau hotel untuk menunjang pariwisata di desa ini. Tetapi mereka menyediakan rumah-rumah mereka untuk menginap wisatawan. Sebuah konsep yang cukup unik, karena wisatawan akan lebih merasa sebagai warga desa biasa daripada sebagai turis. Sehingga kita akan dapat benar-benar menghayati kehidupan yang sederhana dan menyenangkan di sebuah desa yang permai...

Ardianzzz! What are you Doing??

Anywhere Demo

Iframe

15 Icon Cantik Dengan Gaya Yang Berbeda, Gratis!

Icon

15 Contoh Penulisan Dengan Georgia

Bookmark Menu a-la CSS3

Social Media Love Icons

Redesain

Happy New Year!

Background Yang berbeda Untuk Tiap Posting

Animasi jQuery Untuk Navbar Blogger

Minima

Lorem Ipsum Dollar Sit Amet Constectueir g

Tipografi Untuk Blog

Syntax Highlighter

Recent Post Widget

Ipsum

Lorem

Jatimulyo