April 2012

Membuat Header Animasi Menggunakan JQuery

Bismillah,
Desain header yang keren, cantik pada sebuah blog tentu akan menambah sesuatu gitu...

Nah pada kesempatan ini saya akan berbagi script slide animasi yang sudah sedikit saya modifikasi dan cocok untuk membuat header animasi yang cukup keren, sebenarnya kalau anda pernah mempraktikan tutorial Membuat Slide Show Gambar dengan JQuery di Blogger tutorial ini sama saja, hanya ada sedikit perubahan pada kode CSS yang ada pada animasi slide tersebut. Untuk demo hasil penggunaan script ini, anda bisa lihat di beberapa klien mungbisnis.com disini, atau blog komunitas blogger banjarnegara disini.

Okeh langsung saja, silahkan anda ikuti tutorial berikut dengan seksama, sebagai batasanya script dibawah ini saya buat untuk membuat header animasi dengan ukuran gambar 850px X 175px, tapi nanti anda bisa dengan mudah merubah untuk ukuran header sesuai dengan lebar template anda, sedangkan untuk jenis templatenya saya anggap sudah tersedia fasilitas untuk menambahkan gadget html/javascript dibawah/ diatas header blog anda, contoh tata letak template yang saya maksudkan seperti pada gambar dibawah ini, tata letak seperti ini banyak anda jumpai kalau menggunakan template yang disediakan oleh ourblogtemplates.com, tapi jika anda menginginkan menggunakan template anda sekarang, mungkin anda harus merubah dan menambahkan kolom dibawah header anda, untuk tutorialnya silahkan anda searching di google.

Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
Langsung tuju ke halaman Template, dan klik edit html (Jangan lupa seperti biasa, backup dulu template anda)
Beri centang pada expand Template widget
Letakkan kode berikut di atas kode ]]></b:skin>

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { display:none} .cs-prev, .cs-next { display:none}
Letakkan kode dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 850, height: 175, navigation: false, delay: 3000 }); }); </script>
Width: 850 dan height: 175, silahkan anda sesuaikan dengan ukuran gambar yang akan dijadikan header animasi pada blog anda.
Simpan, kemudian klik tata letak.
Tambahkan gadget html/java script dan letakan di bagian header template anda, kemudian copas kode berikut:

<div style="overflow:none;width:100%;height:175px;padding:0px;border:0px solid #fff">
<div id='coin-slider'>
<a href="/">
        <img src="Link-Lokasi-Gambar-1" />
        <span>
...
        </span>
    </a>

<a href="/">
        <img src="Link-Lokasi-Gambar-2" />
        <span>
...
        </span>
    </a>
</div>
</div>
Silahkan ganti Link lokasi gambar dengan lokasi penyimpanan gambar anda, tutorial cara mendapatkan lokasi penyimpanan gambar bisa anda baca di: http://www.mrmung.com/2010/12/cara-mendapat-hosting-gambar-gratis.html
Simpan dan silahkan nikmati hasilnya.

Untuk hasil terbaik, desain header anda menggunakan software desain grafis seperti Photoshop, desain dengan ukuran yang tepat agar tampil maksimal.

Demikian, semoga bermanfaat.

Selengkapnya »

Download Koleksi Kitab Kuning di Hp

Bismillah....
Kitab kuning, merupakan sebuah kitab tradisional yang berisi pelajaran-pelajaran agama islam mulai dari fiqh, aqidah, akhlaq/tasawuf, tata bahasa arab (`ilmu nahwu dan `ilmu sharf), hadits, tafsir, `ulumul qur'aan, hingga pada ilmu sosial dan kemasyarakatan (mu`amalah). Disebut juga dengan kitab gundul karena memang tidak memiliki harakat (fathah, kasrah, dhammah, sukun), tidak seperti kitab al-Quran pada umumnya, Tapi yang terpenting semoga kitab kuning ini isinya benar-benar bermanfaat dan sesuai dengan Al-Quran dan As-Sunnah.

Okeh, berikut beberapa koleksi kitab kuning versi hp baik yang masih murni berbahasa arab, maupun yanng sudah versi terjemah bahasa indonesia yang sudah saya coba di hp jadul saya dan alhamdulillah berjalan dengan lancar, jadi buat anda yang memiliki hp lebih bagus, tentu bisa berjalan dengan lancar. Kitab kuning versi hp ini saya ambil dari berbagai tempat yang tersebar di internet, kita berdoa saja, semoga ini merupakan amal kebaikan untuk pembuatnya, dan semoga si pembuat aplikasi ini diberi kelapangan Rizki oleh Allah SWT, amiiin....