Kamis, 06 Februari 2014

3 PUISI MAULID NABI MUHAMMAD S.A.W (TOP)

Berikut ini adalah 3 puisi Maulid Nabi Muhammad S.A.W yang di kirim oleh pembaca puisina , mudah mudahan puisi ini bisa memberi manfaat kepada kita semua, bisa menambah kecintaan kita pada beliu Nabi Akhir Zaman , Nabi Panutan  amin.....

Allahuma Solli Ala Muhammad
Semoga Shalawat itu akan tetap berdengung
Hingga akhir masa nanti . 

Ber abad-abad sudah berlalu
Namun namamu masih melekat di hatiku
Tak pernah aku bertemu atau berjumpa denganmu
Tak pernah aku melihat langsung dakwahmu
Namun sinar cahayamu itu mampu menembus ruang dan waktu
Menembus perbedaan di antara seluruh umat manusia
Cahaya itu tidak pernah redup sampai akhir jaman
Rasulullah S.A.W , Begitu agung namamu
Bergetar hati ini, menangis, rindu bertemu denganmu
Rindu pada suri tauladan yang kau berikan
Rindu pada kesederhanaan dan kepedulianmu
Rindu pada kedamaian yang kau ciptakan
Rasulullah SAW, Rindu pada kepemimpinanmu
Cinta dan sayangmu tiada tara
Rahmatal lil alamin , memang itulah dirimu
Umatmu sudah banyak yang menjauhi suri tauladanmu
Banyak yang sudah berubah dari koridor garis awal
pun saya merasa demikian
Rasulullah SAW, aku rindu padamu
Kami rindu padamu
Rasulullah Nabi Muhammad SAW
Aku yakin sinar yang kau bawa tak akan pernah padam
Allahuma Solli Ala Muhammad
Semoga Shalawat itu akan tetap berdengung
Hingga akhir masa nanti .

Ya nabi ya Rasulullah
Cahaya hati kami, Kekasih Allah
Anta Syamsun, Anta Badrun
Anta Nurun Fauqo Nuri
Kaulah surya yang menyinari kelamnya hati manusia
Kaulah purnama penerang gelapnya jiwa manusia
Engkaulah cahaya di atas cahaya
Ya Nabiyallah, Ya Habiballah
Bagai cahaya kemuliaan al-quraan
Besarnya perjuanganmu menegakan agama
Agungnya cintamu menyayangi sesama
Harum senyummu pada wajah dunia
Betapa ramah sikapmu tertanam dalam jiwa
Ya Nabiyaallah Ya Habiballah

Betapa indah akhlakmu
Bagai cahaya keindahan al-qur'an
Rindu kami padamu sepanjang waktu
Engkaulah cermin bagi hidup kami
Engkaulah petunjuk perjalanan kami
Engkaulah mata hati dan pikiran kami
Wahai teladan yang tak pernah padam
Ya nabiyallah, Ya Habiballah
Betapa suci ahklakmu
Bagai cahaya kesucian al-quran
Hadirkanlah cintamu dalam ibadah kami
Ajarkanlah  ketabahanmu dalam doa kami
Mengalirlah jihadmu dalam hati kami
Anta Syamsun, Anta Badrun
Anta nurun , Fauqo Nuri
Engkaulah Surya , Engkaulah Purnama
Engkau Cahaya di atas Cahaya

Ya Rasulullah 
Ajarkan ketabahanmu dalam do'a kami
Alirkan jidahmu dalam hati kami
Tumbuhkan Ahklakmu dalam hidup kami
Ya nabi ya Rasulullah
Pujaan hati kami , Kekasih Allah
Anta Syamsun, Anta Badrun
Anta nurun , Fauqo Nuri
Engkaulah Surya , Engkaulah Purnama
Engkau Cahaya di atas Cahaya

Cara Membuat Tautan Otomatis Untuk Link Artikel Yang Akan Diterbitkan

Keyword Dengan Internal Links
<a expr:href="data:post.url">keyword</a>. Apabila kode seperti contoh tersebut diterapkan dalam template, maka secara default akan menghasilkan sebuah tautan otomatis untuk artikel yang diposting. Dan biasanya cara seperti ini dimanfaatkan dalam membuat suatu permalink dengan tujuan untuk membangun internal link (sebagai contoh misalnya seperti yang pernah saya uraikan dalam artikel sebelumnya yang berjudul “Cara Membuat Catatan Pesan Himbauan Dengan Internal Links Di Atas Kolom Kotak Komentar Blog”).

Namun, perlu diketahui bahwa sebenarnya terdapat banyak cara yang dapat ditempuh untuk membangun internal link dalam sebuah blog, dimana salah satunya adalah dengan cara membuat permalink dalam baris kata kunci seperti yang tampak pada gambar di atas. Apabila dalam artikel sebelumnya yang berjudul “Cara Membuat Link Otomatis Dalam Artikel Yang Akan Diposting” pernah saya uraikan teknik membuat internal link dengan cara menyisipkan kode tersebut ke dalam artikel yang akan diposting dengan disertai kata kunci yang digunakan untuk artikel yang dimaksud, maka perlu diketahui bahwa teknik tersebut sudah tidak berlaku lagi.

Hal tersebut baru saya ketahui ketika menerbitkan artikel sebelumnya yang berjudul “Cara Membuat Bingkai Daftar Artikel Terkini Pada Blog Seluler Dengan Memakai Kode CSS”, saya mendapati bahwa kode <a expr:href="data:post.url">keyword</a> sudah tidak dapat digunakan lagi untuk membuat link otomatis dalam artikel yang diterbitkan, karena setelah artikel diterbitkan ternyata kode tersebut tidak lagi membentuk live link sebagaimana umumnya dalam sebuah internal link. Sehingga saya menyimpulkan bahwa besar kemungkinan Blogger telah melakukan pembaruan dukungan untuk penggunaan kode tersebut. Jika sebelumnya kode tersebut juga dapat diimplementasikan dengan cara menyisipkannya dalam kode HTML artikel yang akan diterbitkan, maka sekarang kode tersebut hanya dapat digunakan di dalam template saja.

Lantas bagaimana jika kita ingin membangun internal link untuk blog yang kita kelola dengan menggunakan cara yang serupa, apabila sekarang pada kenyatannya pemakaian kode <a expr:href="data:post.url">keyword</a> tidak dapat lagi diterapkan dalam artikel yang akan diterbitkan? Setelah melakukan analisa, ternyata untuk menunjukkan link artikel yang diterbitkan, maka kode yang dapat digunakan untuk disisipkan ke dalam HTML artikel adalah href="" tanpa disertai URL di dalamnya.

Sehingga apabila sebelumnya kita dapat membuat internal link dalam baris kata kunci (seperti yang tampak pada gambar di atas) dengan menggunakan kode <a expr:href="data:post.url">keyword</a>, maka sekarang kode yang digunakan adalah<a href="">keyword</a>. Dan untuk mengantisipasi agar apa yang kita lakukan dengan menggunakan teknik tersebut dalam membangun internal link tidak dianggap sebagai tindakan spamming, maka ada baiknya menambahkan rel="tag" ke dalam kode tersebut, sehingga akhirnya menjadi <a rel="tag" href="">keyword</a>.

Sedangkan cara penerapannya adalah dengan menyisipkan kode tersebut ke dalam artikel yang akan diterbitkan, dalam hal ini pada mode HTML seperti halnya penerapan kode sebelumnya. Sebagai contoh misalnya apabila saya menuliskan: Kata kunci: <a rel="tag" href="">cara membuat permalink</a>, <a rel="tag" href="">cara membuat internal link</a>,<a rel="tag" href="">cara membuat link otomatis</a>, maka terbentuklah internal link seperti yang tampak pada kata kunci di bawah ini.

CARA MEMBUAT DROP DOWN MENU DI BLOG

Cara membuat drop down menu di blog sebenarnya sangat mudah. Saat ini semakin banyak blogger pemula yang tertarik untuk belajar dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya hendak berbagi cara membuat drop down menu yang horizontal. Menu ini bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.

Lalu bagaimana cara membuat menu drop down horizontal ini? Sebenarnya anda bisa menggunakan CSS yang sangat sederhana untuk melakukan ini. Untuk memasang Drop down menu horizontal ada dua langkah yang harus dilakukan, yaitu:

MEMASANG CSS MENU DROP DOWN DI BLOG

  • Login ke dalam akun blogger anda
  • Pilih blog yang akan dipasangi
  • Pilih Menu Template
  • Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN
  • Carilah kode ]]></b:skin>
    Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi...
#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
 
#Rickybox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch {
 
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}
  • Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode di bawah ini:
Menu Hitam
warna1 = #555555
warna2 = #FFFFFF


Menu Biru
 
warna1 = #66bbdd
warna2 = #004661


Menu Hijau
 
warna1 = #38761d
warna2 = #FFFFFF

Menu Abu-abu
 
warna1 = #d4d4d4
warna2 = #555555


Menu Kuning
 
warna1 = #ffd966
warna2 = #d4812a
  • Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE....

 MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG

    • Sekarang masuk ke Menu TATA LETAK atau LAYOUT
    • Klik  ADD A GADGET atau TAMBAH GADGET
    • Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia
    <div id="RickyMenu">
           <div id="Rickybox">
          <ul id="punch">
            <li><a href="#">Home</a></li>
            <li>
              <a href="#">Sample Page</a>
              <ul>
                <li>
                  <a href="#">Sub Page #1</a>
                  <ul>
                    <li><a href="#">Sub Sub Page #1</a></li>
                    <li><a href="#">Sub Sub Page #2</a></li>
                    <li><a href="#">Sub Sub Page #3</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Page #2</a></li>
                <li><a href="#">Sub Page #3</a></li>
                <li><a href="#">Sub Page #4</a></li>
                <li><a href="#">Sub Page #5</a></li>
              </ul>
            </li>
            <li><a href="#">Sample Post</a></li>
            <li><a href="#">Blog Page</a></li>
          </ul>
        </div>
      </div>
    • Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
    • Klik SIMPAN
    • Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.
    Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal dropdown menu di tempat yang anda inginkan. Bentuknya kurang lebih seperti gambar di bawah ini.
    Menu horizontal dropdown

    Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
    • Silahkan cari pada bagian akhir ada kode seperti ini:
    <li><a href="#">Blog Page</a></li>
          </ul>
    • Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU">TEKS BARU</a></li>
          </ul>
    • Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU 1">TEKS BARU 1</a></li>
    <li><a href="LINK BARU 2">TEKS BARU 2</a></li>
    <li><a href="LINK BARU n">TEKS BARU n</a></li>

    </ul>

    • Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU 1">TEKS BARU 1</a></li>
    <li><a href="LINK BARU 2">TEKS BARU 2</a> 
            <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>
            <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>
    </li>
    <li><a href="LINK BARU n">TEKS BARU n</a></li>  
          </ul>

    Ok, silahkan divariasikan sendiri cara untuk menambah dan mengurangi item pada drop down menu horizontal di atas pada blog anda. Jika anda tertarik untuk menggunakan dropdown menu yang dibuat dengan basis CSS3. Silahkan baca artikel di blog ini, cara membuat dropdown menu CSS3. Mudah-mudahan membantu mempercantik blog saudara....

    Poto Kegiatan Siswa













    Rabu, 05 Februari 2014

    Cara Membuat Horizontal Link Tab Menu Blog

    Sistem navigasi yang baik dalam blog sangatlah diperlukan yang jelas2 dapat mempermudah pengunjung blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal Tab ini?

    horizontal menu

    Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman

    blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.

    1. Langkah pertama, masuk ke Layout > Edit HTML.

    2. Masukkan kode CSS ke dalam template, gampangnya letakkan di atas kode ]]></b:skin>

    #navigation{font-size:110%;
    height:2.2em;
    line-height:2.2em;
    margin:0 1px;
    color:#999;
    }
    #navigation li{
    float:left;
    list-style-type:none;
    border-right:1px solid #ccc;
    white-space:nowrap;
    }
    #navigation li a{
    display:block;
    padding:0 10px;
    font-size:0.8em;
    font-weight:normal;
    text-transform:uppercase;
    text-decoration:none;
    background-color:inherit;
    color: #999;
    }
    * html #navigation a {width:1%;}
    #navigation a:hover{
    background:#ccc;
    color:#fff;
    text-decoration:none;
    }

    3. Selanjutnya cari kode ini:

    <b:section class="header" id="header" maxwidgets="1" showaddelement=”no”>

    Kalo engga ketemu cari section dengan class="header".
    Lalu ubah menjadi:

    <b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

    Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.

    4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. PilihHTML/JavaScript

    5. Masukkan kode2 ini ke dalamnya:

    <div style="text-align: center;">
    <div id="navigation">
    <ul>
    <li class="selected">
    <a href="http://blogkamu.blogspot.com/">Home</a></li>
    <li><a href="http://blogger-holic.blogspot.com/search/label/LABEL" >Link Label</a></li>
    <li><a href="http://blogger-holic.blogspot.com/">Blogroll Links</a></li>
    </ul>
    </div>
    </div>

    6. Klik save.


    Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.

    Pas lagi2 jalan ke blognya O-OM, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal apalagi. Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak.


    Update:
    Ok, menu sudah terpasang, terus bagaimana caranya nambah isi link ke dalam menunya?
    Caranya mudah aja koq..
    tinggal tambahkan:

    <li><a href="LINK_YANG_DIINGINKAN" >Anchor text</a></a></li>

    diantara <ul> dan </ul>. Ubah LINK_YANG_DIINGINKAN dengan link yang akan dimasukkan ke dalam menu dan ubah Anchor text sesuai link yang dituju. 

    MEMBUAT KATEGORI LABEL PADA BLOG

    Untuk mempermudah pengunjung menavigasi guna mencari artikel berdasarkan kelompok, sejenis atau terkait, kita harus mengumpulkan artikel berdasarkan kategori.

    Cara membuat kategori label ini sebenarnya tidak begitu sulit, karena blogger atau blogspot telah menyediakan fasilitas ini.
    Hanya saja kemungkinan Anda yang baru membuat blog di blogger bisa saja menemukan sedikit kendala, karena belum begitu akrab dengan blogger.

    Jika Anda menemukan sedikit kesulitan bisa ikuti langkah-langkahnya di bawah ini.
    Pertama yang harus Anda lakukan adalah memasang widgetnya.
    Caranya:

    • Login ke blog Anda.
    • Pilih blog yang ingin Anda beri kategori label.
    • Pilih tata letak atau layout.
    • Pilih tambah gadget.
    • Jika muncul pop up, pilih labels.
    • Beri judul dengan kategori label, atau terserah Anda.
    • Kemudian simpan.
    Dari tahap ini widget sudah terpasang pada blog Anda dengan judul kategori label. Akan tetapi kategorinya belum muncul karena Anda belum mengelompokkan artikel Anda berdasarkan kategori. Sekarang yang harus Anda lakukan adalah mengelompokkan sesuai kategorinya. Jika Anda sudah terlanjur posting banyak artikel, maka Anda harus edit artikel Anda satu-persatu.
    Caranya:
    • Pilih posts.
    • Pilih judul artikel yang ingin Anda beri label, maka Anda akan di bawa pada halaman posting artikel.
    • Arahkan mouse Anda pada sisi kanan, maka akan tampil seperti gambar di bawah ini.


    • Pilih labels.
    • Isikan atau tulis judul label yang Anda inginkan, sesuai kategorinya.
      Misal: internet, blogging tips, sofware dll.
    • Jika sudah pilih done.
    • Setelah itu baru update.
    • Selanjutnya Anda bisa pilih artikel lain yang berhubungan untuk dijadikan satu kelompok.
    • Anda juga bisa membuat beberapa judul label untuk di jadikan kategori.

    Cara Membuat Label atau Kategori di Blog

    Cara Membuat Label atau Kategori di Blog. Label atau kategori di blog yang berarti mengelompokan jenis artikel berdasarkan pembahasan yang berkaitan antara satu dan lainnya. Misalnya kita punya 3 artikel dengan judul ayam jantan, ayam hias dan ayam kampung, maka dari ketiga judul tersebut kita kelompokan menjadi satu jenis, yaitu ketegori ayam. Jadi ketika orang buka label/kategori ayam, maka ketiga judul tersebut akan tampil dalam satu halaman.


    Itulah sedikit penjelasan apa yang dimaksud dengan label atau kategori. Untuk lebih jelasnya bisa kalian lihat di Kategori sebelah kiri blog ini. Klik salah satu kategori, maka akan terbuka halaman baru, dengan isi semua artikel yang kategorinya sama. Untuk lebih jelasnya. Cara membuat label atau kategori di blog.
    Ikuti langkah-langkah dibawah ini.
    1. Buatlah 3 entri baru atau edit 3 artikel lama kamu.
    2. Dan dibagian Setelan Entri(sebelah kanan entri) Klik Label dan beri label dengan nama Tutorial Blog dan klik Selesai. Tulis ketiga artikel kamu dengan nama label yang sama Tutorial Blog. Lihat gambar dibawah untuk lebih jelasnya.
    3. cara membuat label atau kategori di blog
    4. Setelah Selesai memberi nama label. Buka pengaturan Tata Letak.
    5. Klik Tambahkan Gadget atau add gadget.Dan cari Label seperti gambar dibawah ini.
    6. cara membuat label atau kategori di blog
    7.  Klik Tanda + di sebelah kanan Label gambar diatas dan beri judul label atau kategori, dan klik Simpan. seperti gambar dibawah ini.
    8. cara membuat label atau kategori di blog
    9. Contoh tampilan kategori atau label di blog lihat gambar dibawah ini.
    10. cara membuat label atau kategori di blog
    11. Letakan label/kategori sesuai dengan yang kamu inginkan. dan Lihat hasilnya.Widget degan nama kategori/label sudah ada di blog kamu. Selesai.
    Dengan adanya label, maka kita dapat dengan mudah membagi setiap artikel menjadi beberapa nama kelompok artikel yang sesuai dengan yang kita inginkan. Dalam satu artikel, kita juga bisa membuatnya menjadi 2 label atau lebih. Jadi tidak harus menempatkan satu artikel kedalam satu kategori. Tapi bisa kebanyak kategori

    Jika nanti label/kategori kamu sudah banyak, tambahkan fungsi scroll agar tidak banyak menghabiskan tempat. Jika ingin memberi warna background pada judul kategori, dan lain-lainnya.  Baca Disini. Semoga Bermanfaat.