3 Cara Simple Membuat Sitemap / Daftar Isi

Dalam Sebuah Blog atau Website sering dikenal yang namanya Sitemap atau dibilang daftar isi. Ini bertujuan agar pengunjung lebih mudah dalam mencari isi yang terkandung dalam blog. Kebanyakan meraka pengguna blog menampilkan sitemap ini pada halaman posting.



Live Demo

Pada kesempatan akhir Tahun 2011 ini Kang Fathur akan memberikan tips mudah untuk membuat semua ini. Ikuti langkahnya sebagai berikut :

• Login Blogger anda;
• Pilih Posting dan pilih tab Entri Posting;
• Jangan lupa pilih Edit HTML;
• Copy paste kode dibawah ini

<script src="http://zonaonline.googlecode.com/files/sitemap_1.js">
</script><br>
<script src="http://kang-fathur.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

• Terbitkan Entri

Catatan : Ganti http://kang-fathur.blogspot.com dengan URL Blog anda

Semoga bermanfaat bagi anda pengunjung setia blog Kang Fathur ini. Happy New year  2012

Selengkapnya: Cara Simple Membuat Sitemap / Daftar Isi

2 Menampilkan dan Menyembunyikan Widget Pada Blog

Para pekerja blogger kebanyakan akan terus berkreasi dari hasil hasil yang berhasil diketahui, baik dari dunia online, bertanya kepada teman ataupun saran yang berhasil dibaca dari ebook yang dibeli.

Hal ini memang mengasyikkan terlebih saat kita memodifikasi template blog yang kita sayangi. untuk itu, pada tutorial kali ini akan dibahas tentang memodifikasi blog dengan menghilangkan widget atau gadget pada halaman tertentu. Suatu contoh yang pernah saya bahas pada artikel sebelumnya disini.

Akan tetapi pada tutorial tersebut cuma dibahas cara menyembunyikan saja. Kali ini akan diberikan Tips dan Trik menghilangkan serta menampilkan widget dari halam yang kita tentukan.

1. Menampilkan Widget Hanya Pada Homepage/Halaman Utama :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
==WIDGET ANDA===
</b:if>

2. Menyembunyikan Widget Pada Homepage/Halaman Utama :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
==WIDGET ANDA===
</b:if>

3. Menampilkan Widget hanya Pada Itempages/Post :

<b:if cond='data:blog.pageType == "item"'>
==WIDGET ANDA===
</b:if>

4. Menyembunyikan Widget Pada Itempages/Post :

<b:if cond='data:blog.pageType != "item"'>
==WIDGET ANDA===
</b:if>

5. Menampilkan Widget hanya Pada Archivepages :

<b:if cond='data:blog.pageType == "archive"'>
==WIDGET ANDA===
</b:if>

6. Menyembunyikan Widget Pada Archivepages :

<b:if cond='data:blog.pageType != "archive"'>
==WIDGET ANDA===
</b:if>

7. Menampilkan Widget hanya Pada Staticpages :

<b:if cond='data:blog.pageType == "static_page"'>
==WIDGET ANDA===
</b:if>

8. Menyembunyikan Widget Pada Staticpages :

<b:if cond='data:blog.pageType != "static_page"'>
==WIDGET ANDA===
</b:if>

9. Menampilkan Widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url == "Alamat Postingan"'>
==WIDGET ANDA===
</b:if>

10. Menyembunyikan Widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url != "Alamat Postingan"'>
==WIDGET ANDA===
</b:if>

Catatan : Untuk tulisan Alamat Postingan silakan ganti dengan alamat URL postingan yang diinginkan anda.

Semoga bermanfaat bagi anda semua.

Selengkapnya: Menampilkan dan Menyembunyikan Widget Pada Blog

1 Wartawan Vs Hukumnya

Banyak kalangan yang kadang ketar ketir menghadapi wartawan (jurnalis). Kenapa begitu? Ini fakta yang terjadi di daerah kota santri Situbondo. Akan tetapi, tidak semua jurnalis itu jahat, pemeras, dan bahkan premanisme yang diterapkan dalan dunia persurat kabaran. Meskipun pernah saya bahas tentang jurnlais pada artikel sebelumnya.

Untuk itu, jika anda yang masih belum tahu tentang hukum yang menaungi pers atau jurnalis, mari kita download ebooknya disini untuk sekedar kita paham dan ngerti apa sih wartawan itu.

Paling gak, dengan kita membaca ebook yang disediakan oleh Kang Fathur ini memberikan anda pencerahan makna dan arti wartawan dalam kehidupannya dimata hukum yang berlaku. Jika masih penasaran dengan hukmnya silakan download Hukum Pers

Semoga bermanfaat bagi anda semua.

Bagi anda yang ingin mendownload berbagai macam Materi  dengan fomat MS PowerPoint (*ppt) silakan klik

Selengkapnya: Wartawan Vs Hukumnya

1 Pentingnya Profil Desaku

Pernah suatu ketika saya mendapatkan tugas untuk memberikan suatu meteri tentang proil desaku dalam sebuah peltihan PNPM Mandiri Perdesaan ditingkat kecamatan. Tepatnya di salah satu aula yang ada di Desa Kesambirampak, Kecamatan Kapongan Kabupaten Situbondo, Jawa Timur.

Mau tidak mau harus dilaksanakan karena ini amant yang harus menjadi tanggung jawab saya selaku kader pemberdayaan masyarakat. Apa jadinya? Aya terus dan terus mencari refensi-referensi yang berkaitan dengan materi tersebut.

Akhirnya, saya dapat melaksanakan dengan sempurna walau itu versi Kang Fathur saja. Lah, pada artikel ini hanya ingin membagikan materi bagi temen-temen yang mungkin dapat berguna pada anda semua.

Pada materi ini saya bagikan dalam bentuk Microsoft Office PowerPoint yang bisa anda edit sendiri jika materi tersebut dianggap kurang memenuhi apa yang menjadi materi anda.

Mungkin sekedar diketahui tentang sedikit isi dari Ebook yang saya bagikan disini.

Latar Belakang Perlunya Profil Desa dan Kelurahan

1. Kesimpangsiuran data yang kurang akurat yang dilakukan banyak pihak seperti LSM maupun pemerintah pusat.
2. Klaim banyak pihak yang mengaku memiliki data yang terkini, akurat dan muktahir
3. Otonomi Daerah

Dasar Hukum

1. Pp 38/2007 Ttg Pembagian Urusan Pemerintahan Antara Pemerintah, Pemda Provinsi, Dan Pemda Kab/Kota: Psl 7 Ayat 2 Huruf U Bid Pemberdayaan Masyarakat Sub Bid Penguatan Kelembagaan Dan Pengembangan Partisipasi Masyarakat Sub Sub Bid Pemantapan Data Profil Desa Dan Kelurahan
2. Pp 41/2007 Ttg Organisasi Perangkat Daerah: Psl 22 Ayat 5 Huruf H Perumpunan Urusan
3. Permendagri 12/2007 Ttg Penyusunan Dan Pendayagunaan Data Profil Desa Dan Kelurahan

Untuk lebih jelasnya silakan download materi tersebut disini.
semoga bermanfaat bagi anda semua.

Bagi anda yang ingin mendownload berbagai macam Materi  dengan fomat MS PowerPoint (*ppt) silakan klik

Selengkapnya: Pentingnya Profil Desaku

0 Slider Popular Post Pada Blog

Banyak kita jumpai dalam dunia blog ataupun website yang menggunakan animasi slider pada entri populer atau banyak yang bilang Popular Post. Pada tutorial sebelumnya pernah Kang Fathur bahas juga tentang penggunaan artikel terpopuler yang sering dibaca oleh pengunjung.

Animasi ini saya dapatkan pada blognya bos Abu Farhan, hanya saja saya modifikasi sesuai dengan kemauan saya. Minat untk menggunkannya diblog anda?

Anda bisa lihat pada gambar berikut, betapa variatifnya modifikasi yang Kang Fathur terapkan pada widget tersebut.

Live Demo

Jika berminat, ikuti langkahnya :

• Login Blogger anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;

<style>.theme-orman.slider-wrapper{background:#FFF;border:1px solid #3D85C6;height:250px;margin:0px auto;position:relative}.theme-orman .nivoSlider{position:relative;width:460px;height:250px;margin-left:0px;background:url(http://mail.yimg.com/ok/u/assets/img/spinner-32x32-anim.gif) no-repeat 50% 50%}.theme-orman .nivoSlider img{position:absolute;top:0px;left:0px;display:none;width:460px;height:250px}.theme-orman .nivoSlider a{border:0;display:block}.theme-orman .nivo-controlNav{display:none}.theme-orman .nivo-directionNav a{display:block;width:25px;height:250px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpqznM5doxyn2OpfUmNOB90NepR0NuOblYexPQHdqZcrhpMGS7ppezTqNgFsd8vrrwUp2c1zX3Pl8_Z_p6w6Uf5UkPWQjbETgMhiq_g_goMSiqgpU-s9ZyJIJBcYSjy9UqcWpZpyXIuEg/s1600/arrows.png) no-repeat 0% 50%;text-indent:-9999px;border:0;top:40px}.theme-orman a.nivo-nextNav{background-position:100% 50%;right:0px;padding-right:0px}.theme-orman a.nivo-prevNav{left:0px;padding-left:0px}.theme-orman .nivo-caption{font-family:Helvetica,Arial,sans-serif}.theme-orman .nivo-caption a{color:#fff;border-bottom:1px dotted #fff}.theme-orman .nivo-caption a:hover{color:#fff}.theme-orman .ribbon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XnhXumKepOMQvz8vwWFlO7HzO7LypEheJ8Oi2nR5mtrIWcam_KVU4z8WUrJIMr4Y0qAhg_s4utSKVfYZiuH0FN2MPW8pVPDKXwjBJr9sQmxdCZ_OA-REI6h6j-KUEJdfAgZ5ycw4xcE0/s1600/ribbon_karaks.png) no-repeat;width:111px;height:111px;position:absolute;top:-3px;left:-3px;z-index:300}.nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0px;left:0px}.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}.nivo-slice{display:block;position:absolute;z-index:5;height:100%}.nivo-box{display:block;position:absolute;z-index:5}.nivo-caption{position:absolute;left:0px;bottom:0px;background:#9fc5e8;color:#00F;opacity:0.8;width:100%;z-index:8;font-weight:bold}.nivo-caption p{padding:5px;margin:0}.nivo-caption a{display:inline !important}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0px}.nivo-nextNav{right:0px}.nivo-controlNav a{position:relative;z-index:9;cursor:pointer}.nivo-controlNav a.active{font-weight:bold}.theme-default #slider{margin:100px auto 50px auto;width:290px;height:200px}.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper{}.clear{clear:both}<style>

• Tambahkan JavaSCRIPT ini sesudah kode diatas

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

• Dan tambahkan kode berikut

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height =250; //image height
var image_width = 460; //image width
</script>
<script src="http://karak-situbondo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

• Simpan Gadget yang baru dibuat.

Catatan :

1. Seuaikan huruf yang berwarna Merah dengan template anda.
2. Ganti angka "6" jika anda ingin mengubah banyaknya artikel atau postingan yang ditampilkan pada slider ini.
3. Ganti http://karak-situbondo.blogspot.com dengan URL blog anda.

Selamat mencoba...!!!!

Selengkapnya: Slider Popular Post Pada Blog

9 Belajar CSS, HTML Menggunakan Offline HTML Editor

Masalah terbesar yang dihadapi oleh sebagian besar blogger pemula seperti Kang Fathur untuk mengedit template blogger. setelah survey yang telah dilakukan, kurangnya kesadaran dengan bahasa browser seperti CSS, XML, HTML, JavaScript dll. Meskipun ada beberapa situs online yang memiliki tutorial di bidang ini dan salah satu situs tersebut adalah www.w3schools.com Website ini sangat populer karena memungkinkan anda bermain dengan kode.

Ini memiliki Alat Editor online HTML yang memungkinkan anda melihat langsung (live preview) dari kode yang anda gunakan. Banyak pengembang menemukan tool ini sangat berguna namun memiliki seseorang pernah membayangkan bahwa anda benar-benar dapat menyalin alat ini keluar dari W3Schools dan menggunakannya offline untuk berlatih coding saat offline? Nah untungnya setelah beberapa trial and error yang kami dapat berhasil membuat alat serupa yang kami beri nama PIO HTML Editor yang berhasil saya modifikasi dari blogger luar Mohammad Mustafa Ahmedzai. Semua blogger yang memiliki kesempatan untuk bersenang-senang bermain dengan kode penting seperti CSS, HTML dan JavaScript dan belajar coding penting dalam cara yang lebih menarik.

Sekarang Anda benar-benar dapat menguji kode sebelum menambahkannya ke blogger. Intinya, anda bisa melihat terlabih dahulu blog yang dimaksudkan.

1. Alat ini tersedia sebagai perangkat lunak, serta memiliki keunggulan berikut :
2. Ia bekerja Offline di browser yang tersedia
3. Memakan waktu kurang dari sepersekian detik untuk menunjukkan live preview
4. Ukurannya sama dengan kacang yaitu 2,32 Mb
5. Kode otomatis tersimpan di browser jika PC Anda sengaja di shutdowns
6. Anda dapat kembali (undo) beberapa kali menggunakan Ctrl + Z dan maju (Redo) menggunakan Ctrl + Y

Cara Mendownload

• Klik link ini >> PIO HTML Editor
• Jendela PIO HTML Editor akan terhubung
• Sekarang anda dapat mulai menggunakannya Viia Online
• Tetapi untuk bekerja secara Offline anda perlu menyimpannya terlebih dahulu.

Untuk menyimpannya ditunjukkan pada gambar berikut

• Selesai

Petunjuk Untuk Menggunakan PIO HTML EDITOR

Alat ini terdiri dari dua ruang yaitu ruang kiri dan ruang kanan. Seperti yang ada pada gambar berikut,

Ruang kiri adalah area di mana anda dapat menambahkan kode anda dan ruang kanan adalah area dar hasil tampilan dari kode yang dimasukkan pada ruang kiri. Kode CSS ditambahkan hanya antara <style> dan </ style> dan kode HTML ditambahkan tepat di bawah </ style>

Contoh Permainan Kode ala HTML Editor Kang Fathur

Pada contoh kali ini, Kang Fathur akan menggunakan menggunakan Trik Gambar dengan Efek Keburaman (Mouse Hover) artinya, image atau gambar yang sudah diuplod akan tampak buram jika didekati oleh mouse.

img {
filter: alpha (opacity = 100);
-moz-opacity: 1.0;
opacity: 1.0;
border: 0;
}
img: hover {
filter: alpha (opacity = 30);
-moz-opacity: 0,30;
opacity: 0,30;
border: 0;
}

Sekarang untuk menerapkan efek ini untuk gambar kita akan membutuhkan kode HTML seperti di bawah ini,

<img class="kangfathur" src="https://lh5.googleusercontent.com/-t_Xzph8zlKY/TutEpnNfr7I/AAAAAAAAA6I/bxyNsHO-NDk/s400/kang_fathur.png" />

Untuk menghasilkan yang terbaik, tambahkan Kode CSS hanya antara <style> dan </ style> dan Kode HTML di bawah </ style>. Tekan tombol Lihat danlihat hasilnya di ruang kanan.  Screen shot kira-kira seperti ini,

Beberapa Tips Penting: ~

1. Undo, klik Ctrl + Z
2. Redo, klik Ctrl + Y
3. Untuk mendapatkan URL dari gambar yang disimpan dalam hard drive anda misalkan Drive F, membuka kembali Firefox browser dan ketik F: di address bar dan tekan enter. Drive yang akan terbuka dan sekarang hanya browse ke gambar itu dan klik kanan di atasnya dan kemudian klik pada Copy Link Location. Aduh! Anda punya URL. Sekarang gunakan URL ini dimanapun diperlukan selama offline anda mengedit kode.
4. Setelah anda puas dengan kode yang anda siapkan maka cukup paste kode CSS di atas ]]></ b: skin> dalam template blogger Anda dan kode HTML di mana anda ingin efek yang akan dilihat yaitu posting atau sidebar

Harapannya, bagi yang blogger pemula ini, sebaiknya menggunakan tool ini untuk tahap belajar

Semoga ini bermanfaat bagi anda semua, dan jangan lupa klik Google + dipojok kanan atas untuk membagikan artikel ini.

Selengkapnya: Belajar CSS, HTML Menggunakan Offline HTML Editor

0 Free Banner Exchange For You

Sehubungan dengan banyaknya temen-temen blogger yang mengajak tukeran banner sebagai bentuk saling silaturrahmai sesama blogger. Untuk itu, Kang Fathur telah menyediakan tempat untuk saling bertukeran banner. Dan jika anda ingin bertukeran Link silkan kunjungi disini.

Sebab banyak yang menyebutkan, semakin kita sering menukerkan link / banner maka kita akan mendapatkan backlink yang sangat berpengaruh pada SEO (Search Engine Optimization) walau kita tau bahwa SEO adalah Misteri

Aturannya :

• Banner anda berukuran 125 x 125 px (jika banner anda tidak berukuran tersebut, maka admin akan tetep memasangnya dengan ukuran yang sudah ditentukan)
• Banner tidak mengandung SARA, Pornografi serta lainnya (tidak melanggar hukum)
• Memasang Banner Kang Fathur di blog anda (akan dihapus jika dikemudian hari banner Kang Fathur tidak ada diblog anda)
•  Tidak merubah semua kode HTML yang  Kang Fathur tentukan

Jika anda berminat silakan copy paste kode berikut dan konfirmsaikan dikolom komentar. Trims atas kepercayaan anda memasang Link / Banner Kang Fathur di blog anda.

================================================================

Jika Latar belakang blog anda
WARNA TERANG
script-nya yang ini :

Jika Latar belakang blog anda
WARNA GELAP
script-nya yang ini :

================================================================

Banner Anda

Selengkapnya: Free Banner Exchange For You

5 Blogger VS Photoshop and CorelDRAW

Akankah Blogger, Photoshop dan CorelDRAW saling berkaitan?
Setelah survey dari berbagai blogger, baik di indonesia ataupun blogger luar (internasional) jawaban yang diperoleh hampir 95% mereka mengatakan saling berkaita. Kita sepakat untuk mengatakan iya juga, gimana?

Begitu juga Kang Fathur selalu mendesign blogger blog Zona Online ini dengan Adobe Photoshop dan dipadukan dengan CorelDRAW. Menurut saya, hampir setaiap design-design gambar yang akan ditampilkan diblog perlu dimodifikasi sesuai keinginan anda. Anda dan saya jelas berbeda keinginan serta kesuakaannya.

Pada tutorial kali ini, saya akan membuat ikon RSS Feed yang berkaitan langsung dengan blogger anda.

• Langkah 1

Buatlah dokumen baru lebar 200px tinggi 200px warna latar belakang putih. Jika belum paham silakan lihat ukuran-ukran tentang photoshop disini.

• Langkah 2

Sekarang pilih Rounded Rectangle Tool dan pastikan anda memiliki pilihan set seperti gambar dibawah

• Langkah 3

Set warna Foreground menjadi #d9600f tekan dan tahan pergeseran menggambar bentuk sebagai besar sebagai dokumen seperti gambar dibawah

• Langkah 4

Sekarang tekan Ctrl + J atau klik kanan layer dan pilih berbentuk duplikat layer dari menu kecil untuk menduplikasi layer berbentuk sekarang anda harus memiliki 2 lapisan di jendela lapisan anda seperti yang dipraktekan pada contoh dibawah

• Langkah 5

Pastikan anda memiliki lapisan yang paling atas dipilih kemudian pergi ke menu utama dan pilih Edit > Free Transform atau hanya tekan Ctrl + T sekarang mengubah pengaturan untuk lebar dan tinggi sampai 97 seperti ini

• Langkah 6

• Langkah 7

Sekarang klik pada stroke dan menggunakan pengaturan berikut

• Langkah 8

Anda sekarang harus memiliki gambar berikut

• Langkah 9

Sekarang anda dapat mendownload bentuk ini saya membuat atau menggambar Anda sendiri setelah anda memiliki bentuk beban di Photoshop dan tekan D maka X pada keyboard anda untuk me-reset warna foreground menjadi putih memegang pergeseran berikutnya pada keyboard anda klik dan drag untuk menggambar bentuk seperti dibawah

• Langkah 10

Sekarang anda memiliki sendiri RSS Feed ikon yang vektor. Berarti Anda dapat mengubah ukuran tanpa kehilangan kualitas. Langkah selanjutnya adalah opsional

• Langkah 11

Untuk membuat ikon sedikit lebih menarik Kang Fathur menambahkan sinar menjadi berkilap. jika Anda ingin melakukan hal yang sama mengikuti bersama dengan langkah berikutnya. Tekan Ctrl dan klik Layer tengah disorot di bawah ini untuk membuat bagian sekitarnya

• Langkah 12

Buat Layer Baru kemudian mengisinya dengan putih dan tekan Ctrl + D untuk hapus bagian gambar anda sekarang dan jendela akan terlihat seperti lapisan.

• Langkah 13

Sekarang pilih Pen Tool dan menggunakan pengaturan berikut

• Langkah 14

Klik sekali pada sisi kiri gambar dan tahan Shift pada keyboard anda dan klik sekali di sebelah kanan sehingga anda memiliki garis lurus seperti gambar berikut

• Langkah 15

sekarang pilih Direct Selection Tool dan klik kanan serta pilih baris Add Anchor Point membuat dua seperti dibawah

• Langkah 16

Sekarang dengan Direct Selection Tool dipilih langsung klik dan tarik salah satu New Anchor Points dan memindahkan mereka satu per satu seperti dibawah ini.

• Langkah Terakhir

Sekarang klik kanan dan memilih Make Selection dari menu kecil yang muncul anda harus memiliki pilihan. Sekarang pergi ke menu utama dan pilih Select> Inverse atau tekan Shift + Ctrl + I untuk Invers Seleksi sekarang pastikan anda telah mengisi putih dari fill layer selected (lapisan paling atas) dan tekan delete pada keyboard anda dan tekan Ctrl + D untuk hapus seleksi.

Gilirannya Opacity ke bawah sekitar 20 untuk lapisan ini sekarang anda harusmemiliki sesuatu seperti gambar akhir

Selengkapnya: Blogger VS Photoshop and CorelDRAW

0 Memasang Twitter 'Burung Terbang' Untuk Blogger

Cara ini banyak dishare-kan temen-temen blogger yang lainnya, apalagi para mater-mater blogger. Ya, jujur aja, dari pada gak menulis artikel sama sekali disaat google akan melakukan update pagerank, mendingan tulis artikel walau gak bermutu.

Live Demo

Akan tetapi jika kita melihat social bookmark seperti twitter akan sangat berpengaru pada traffick blog kita. Untuk itu, jika ingin memasang flying twitter di blog yang kita sayangi, ikuti cara-caranya berikut.

• Buka http://www.blogger.com
• Login akun anda;
• Pilih Rancangan dan langsung menuju Edit HTML;
• Cari kode </body>
• Copy Paste kode berikut sebelum </body>

<script type="text/javascript" src="http://zonaonline.googlecode.com/files/twitter_fly.js"> </script> <script type="text/javascript"> var twitterAccount = "zonaonline"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script>

• Catatan :ganti zonaonline dengan username twitter anda
  
• Simpan template

Semoga bermanfaat bagi anda.

Selengkapnya: Memasang Twitter 'Burung Terbang' Untuk Blogger

2 Sejarah Islam Semenjak Zaman Nabi Muhammad SAW

Sejarah Islam merupakan hal yang fardu untuk dikenang dalam benak kita yang terdalam. Sejarah Islam dari zaman Nabi Muhammad SAW hingga masa turki usmani – Perkembangan islam sudah berlangsung ribuan tahun dan mungkin saja pengunjung blog Kang Fathur ada yang belum paham sejarah perkembangan islam itu sendiri. dari sumber wikipedia yang saya kutip yaitu;

Sejarah Islam adalah sejarah agama Islam mulai turunnya wahyu pertama pada tahun 622 yang diturunkan kepada Rasulullah di Gua Hira, Arab Saudi sampai dengan sekarang.

Dan perkembangan islam selanjutnya setelah era rosul muhamad dilanjutkan dengan era-era dibawah ini:

Sejarah Islam masa Khulafaur Rasyidin

• 632 M – Wafatnya Nabi Muhammad dan Abu Bakar diangkat menjadi khalifah. Usamah bin Zaid memimpin ekspedisi ke Syria. Perang terhadap orang yang murtad yaitu Bani Tamim dan Musailamah al-Kadzab.
• 633 M – Pengumpulan Al Quran dimulai.
• 634 M – Wafatnya Abu Bakar. Umar bin Khatab diangkat menjadi khalifah. Penaklukan Damaskus.
• 636 M – Peperangan di Ajnadin atas tentara Romawi sehingga Syria, Mesopotamia, dan Palestina dapat ditaklukkan. Peperangan dan penaklukan Kadisia atas tentara Persia.
• 638 M – Penaklukan Baitulmuqaddis oleh tentara Islam. Peperangan dan penkalukan Jalula atas Persia.
• 639 M – Penaklukan Madain, kerajaan Persia.
• 640 M – Kerajaan Islam Madinah mulai membuat mata uang Islam. Tentara Islam megepung kota Alfarma, Mesir dan menaklukkannya.
• 641 M – Penaklukan Mesir
• 642 M – Penaklukan Nahawand, kerajaan Persia dan Penaklukan Persia secara keseluruhan.
• 644 M – Umar bin Khatab mati syahid akibat dibunuh. Utsman bin Affan menjadi khalifah.
• 645 M – Cyprus ditaklukkan.
• 646 M – Penyerangan Byzantium di kota Iskandariyah Mesir.
• 647 M – Angkatan Tentara Laut Islam didirikan & diketuai oleh Muawiyah Abu Sufyan. Perang di laut melawan angkatan laut Byzantium.
• 648 M – Pemberontakan menentang pemerintahan Utsman bin Affan.
• 656 M – Utsman mati akibat dibunuh. Ali bin Abi Talib dilantik menjadi khalifah. Terjadinya Perang Jamal.
• 657 M – Ali bin Abi Thalib memindahkan pusat pemerintahan dari Madinah ke Kufah. Perang Siffin meletus.
• 659 M – Ali bin Abi Thalib menyerang kembali Hijaz dan Yaman dari Muawiyah. Muawiyah menyatakan dirinya sebagai khalifah Damaskus.
• 661 M – Ali bin Abi Thalib mati dibunuh. Pemerintahan Khulafaur Rasyidin berakhir. Hasan (Cucu Nabi Muhammad) kemudian diangkat sebagai Khalifah ke-5 Umat Islam menggantikan Ali bin Abi Thalib.
• 661 M – Setelah sekitar 6 bulan Khalifah Hasan memerintah, 2 kelompok besar pasukan Islam yaitu Pasukan Khalifah Hasan di Kufah dan pasukan Muawiyah di Damsyik telah siap untuk memulai suatu pertempuran besar. Ketika pertempuran akan pecah, Muawiyah kemudian menawarkan rancangan perdamaian kepada Khalifah Hasan yang kemudian dengan pertimbangan persatuan Umat Islam, rancangan perdamaian Muawiyah ini diterima secara bersyarat oleh Khalifah Hasan dan kekhalifahan diserahkan oleh Khalifah Hasan kepada Muawiyah. Tahun itu kemudian dikenal dengan nama Tahun Perdamaian/Persatuan Umat (Aam Jamaah) dalam sejarah Umat Islam. Sejak saat itu Muawiyah menjadi Khalifah Umat Islam yang kemudian dilanjutkan dengan sistem Kerajaan Islam yang pertama yaitu pergantian pemimpin (Raja Islam) yang dilakukan secara turun temurun (Daulah Umayyah) dari Daulah Umayyah ini kemudian berlanjut kepada Kerajaan-Kerajaan Islam selanjutnya seperti Daulah Abbasiyah, Fatimiyyah, Usmaniyah dan lain-lain.

Sejarah Islam Masa Kerajaan Bani Ummaiyyah

• 661 M – Muawiyah menjadi khalifah dan mndirikan Kerajaan Bani Ummaiyyah.
• 669 M – Persiapan perang melawan Konstantinopel
• 670 M – Penaklukan Kabul.
• 677 M – Penyerangan Konstantinopel yang pertama namun gagal.
• 679 M – Penyerangan Konstantinopel yang kedua namun gagal karena Muawiyah meninggal di tahun 680.
• 680 M – Kematian Muawiyah. Yazid I menaiki tahta. Peristiwa pembunuhan Saidina Hussein.
• 685 M – Khalifah Abdul Malik menjadikan Bahasa Arab sebagai bahasa resmi kerajaan.
• 700 M – Tentara Islam melawan kaum Barbar di Afrika Utara.
• 711 M – Penaklukan Sepanyol, Sind, dan Transoxiana.
• 712 M – Tentara Bani Ummayyah ke Spanyol, Sind, dan Transoxiana.
• 713 M – Penaklukan Multan.
• 716 M – Serangan kepada Konstantinopel.
• 717 M – Umar bin Abdul Aziz menjadi khalifah. Pembaharuan yang hebat dijalankan.
• 725 M – Tentara Islam melawan Nimes di Perancis.
• 749 M – Kekalahan tentera Ummayyah di Kufah, Iraq ditangan tentara Abbasiyyah.
• 750 M – Damaskus ditaklukkan oleh tentera Abbasiyyah. Runtuhnya Kerajaan Bani Ummaiyyah.

Sejarah Islam Masa Kerajaan Bani Abbasiyyah

• 752 M – Berdirinya Kerajaan Bani Abbasiyyah.
• 755 M – Pemberontakan Abdullah bin Ali. Pembunuhan Abu Muslim.
• 756 M – Abd ar-Rahman I mendirikan Kerajaan Bani Ummaiyyah di Spanyol.
• 763 M – Pendirian kota Baghdad. Kekalahan tentara Abbasiyyah di Spanyol.
• 786 M – Harun al-Rasyid menjadi Khalifah.
• 792 M – Penyerangan selatan Perancis.
• 800 M – Aljabar diciptakan oleh Al-Khawarizmi.
• 805 M – Perlawanan atas Byzantium. Penyerangan Pulau Rhodes dan Cyprus.
• 809 M – Kematian Harun al-Rasyid. Al-Amin diangkat menjadi khalifah.
• 814 M – Perang saudara antara Al-Amin dan Al-Ma’mun. Al-Amin terbunuh dan Al-Ma’mun menjadi khalifah.
• 1000 M – Masjid Besar Cordoba siap dibangun.
• 1005 M – Multan dan Ghur ditaklukkan.
• 1055 M – Baghdad diserang oleh tentara Turki Seljuk. Pemerintahan Abbasiyyah-Seljuk dimulai, yang berdiri sampai tahun 1258 ketika tentara Mongol memusnahkan Baghdad.
• 1085 M – Tentara Kristen menyerang Toledo (di Spanyol).
• 1091 M – Bangsa Norman menyerang Sicilia, pemerintahan Islam di sana berakhir.
• 1095 M – Perang Salib pertama dimulai.
• 1099 M – Tentara Salib menaklukkan Baitul Maqdis. Mereka membunuh semua penduduknya.
• 1144 M – Nuruddin Zengi menaklukkan Edessa dari tentera Kristian. Perang Salib kedua berlaku.
• 1187 M – Salahuddin Al-Ayubbi menaklukkan Baitulmuqaddis dari tentera Salib. Perang Salib ketiga berlaku.
• 1194 M – Tentera Muslim menaklukkan Delhi, India.
• 1236 M – Tentera Kristen menaklukkan Cordoba (di Spanyol).
• 1258 M – Tentera Mongol menyerang dan memusnahkan Baghdad. Ribuan penduduk terbunuh. Runtuhnya Baghdad. Tamatnya pemerintahan Kerajaan Bani Abbasiyyah-Seljuk.
• 1260 M – Kebangkitan Islam. Kerajaan Bani Mamluk di Mesir (merupakan pertahanan Islam yang ketiga terakhir setelah Makkah & Madinah) pimpinan Sultan Saifuddin Muzaffar Al-Qutuz menewaskan tentera Mongol di dalam pertempuran di Ain Jalut.

Sejarah Islam Masa Kerajaan Turki Utsmani

• 1243 M – Bangsa Turki yang hidup secara nomad menetap secara tetap di Asia Kecil.
• 1299 M – Sebuah wilayah pemerintahan kecil Turki di bawah Turki Seljuk didirikan di barat Anatolia.
• 1301 M – Osman I menyatakan dirinya sebagai sultan. Berdirinya Kerajaan Turki Usmani.
• 1345 M – Turki Seljuk menyeberangi Selat Bosporus.
• 1389 M – Tentara Utsmani menewaskan tentara Serb di Kosovo.
• 1402 M – Timurlane, Raja Tartar (Mongol) menumpaskan tentera Uthmaniyyah di Ankara.
• 1451 M – Sultan Muhammad al-Fatih menjadi pemerintah.
• 1453 M – Constantinople ditaklukkan oleh tentara Islam pimpinan Sultan Muhammad al-Fatih. Berakhirnya Kerajaan Byzantium.
• 1520 M – Sultan Sulaiman al-Qanuni dilantik menjadi sultan.
• 1526 M – Perang Mohacs
• 1529 M – Serangan dan kepungan ke atas Vienna.
• 1571 M – Perang Lepanto terjadi.
• 1641 M – Pemerintahan Sultan Muhammad IV
• 1683 M – Serangan dan kepungan ke atas Vienna untuk yang kedua kalinya.
• 1687 M – Sultan Muhammad IV meninggal dunia.
• 1703 M – Pembaharuan kebudayaan di bawah Sultan Ahmed III.
• 1774 M – Perjanjian Kucuk Kaynarca.
• 1792 M – Perjanjian Jassy.
• 1793 M – Sultan Selim III mengumumkan “Pentadbiran Baru”.
• 1798 M – Napoleon mencoba untuk menaklukkan Mesir.
• 1804 M – Pemberontakan dan kebangkitan bangsa Serbia pertama.
• 1815 M – Pemberontakan dan kebangkitan bangsa Serbia kedua.
• 1822 M – Bermulanya perang kemerdekaan Greece.
• 1826 M – Pembunuhan massal tentara elit Janissari. Kekalahan tentera laut Uthmaniyyah di Navarino.
• 1829 M – Perjanjian Adrianople.
• 1830 M – Berakhirnya perang kemerdekaan Greece.
• 1841 M – Konvensyen Selat.
• 1853 M – Dimulainya Perang Crimea.
• 1856 M – Berakhirnya Perang Crimea.
• 1878 M – Kongres Berlin. Serbia dan Montenegro diberi kemerdekaan. Bulgaria diberi kuasa autonomi.
• 1912 M – Perang Balkan pertama.
• 1913 M – Perang Balkan kedua.
• 1914 M – Kerajaan Turki Utsmani memasuki Perang Dunia I sebagai sekutu kuasa tengah.
• 1919 M – Mustafa Kemal Atatürk mendarat di Samsun.
• 1923 M – Sistem kesultanan dihapuskan. Turki menyatakan sebagai sebuah Republik.
• 1924 M – Khalifah dihapus. Berakhirnya pemerintahan Kerajaan Turki Utsmani.

Demikian seputar sejarah islam yang bisa Kang Fathur haturkan, semoga artikel ini bermanfaat. Wassalam

Selengkapnya: Sejarah Islam Semenjak Zaman Nabi Muhammad SAW

0 Design Undangan Portrait MS Office Word

Anda bisa menyimak undangan sebelumnya yang pernah Kang Fathur bagikan untuk anda. Kali ini tetap dengan format Microsot Office Word yang bisa anda manfaatklan untuk membuat undang yang simple dan menarik.

Bagimana pendapat anda tentang design-design undangan sebelumnya dan saat ini?

1. Design Undangan 1000 Hari Part 1

2. Design Undangan 1000 Hari Part 2

3.Design Undangan Merried

Semoga bermanfaat ya?

Bagi anda yang ingin mendownload berbagai macam Undangan dengan fomat MS Word (*doc) silakan klik

Selengkapnya: Design Undangan Portrait MS Office Word

0 Design Undangan yang Menarik

Banyak hal yang kita lakukan dalam dunia sosial kemasyarakatan, salah satunya adalah banyaknya undangan yang datang pada kita. Kita sebagai manusai yang bersosial dimasyarakat bisa dibilang kewajiban yang tidak bisa ditinggalkan untuk hadir dalam acara tersebut.

Contohnya, hajatan pernikahan, selametan kehamilan, dan lain sebagainya. Dari pemaparan tersebut sebaiknya kita selalu mengedepankan sosial dimasyarakat sesuai azas ancasila yang menyarankan kita untuk bergotong royong.

Dibawah ini merupakan beberapa contoh design undangan yang bisa anda manfaatkan dalam hal yang disebut diatas. Dan semuanya bisa anda edit karena format yang dibagikan secara free disini masih berbentuk format Microsoft OfficeWord (.doc)

1.Design Undangan Walimatul Ursy (Selametan Pernikahan)-1

2. Design Undangan Walimatul Ursy (Selametan Pernikahan)-2

3. Design Undangan Walimatul Hamli (Selametan Kehamilan)

Semoga bermanfaat bagi anda yang bersosial,,,,!!!!

Bagi anda yang ingin mendownload berbagai macam Undangan dengan fomat MS Word (*doc) silakan klik

Selengkapnya: Design Undangan yang Menarik

2 Free Design Ornament Butterfly

==================================================================
Bagi temen-temen yang mau donwload kupu-kupu kuning diatas, silakan klik Download Free
==================================================================

Pertama-tama kami selaku admin blog Kang Fathur ini mengucapkan salam kepada desgner-designer handal. Yang mana pada kesempatan ini, kami tidak ada maksud untuk menggurui untuk urusan design grafis baik Photoshop, CorelDRAW ataupun Blogger.
Kami hanya sekedar membagikan pengalaman dibidang design (tapi pemula... hehehehe). Untuk itu, jika para pengunjung berkenan untuk membuat ornament-ornament pada design anda, gak ada salahnya jika Kang Fathur memberikan 5 Ornament Butterfly (kupu-kupu) untk anda semua.

Download	Download
Download	Download

Udah dulu ya? semoga bermanfaat.

Bagi anda yang belum mempunyai program Adobe Photoshop Silakan Download

Selengkapnya: Free Design Ornament Butterfly