Senantiasa menerima kunjungan para Jemaah yang mulia..alhamdulilah

Kisah Islami - Kisah Sehabat Nabi - Kisah 25 Nabi

Sungguh ramai skg jemaah beada di Kota makkah..syukur alhamdulilah

Kisah Islami - Kisah Sehabat Nabi - Kisah 25 Nabi

Sungguh tenang di waktu malam..alahamdulilah

Kisah Islami - Kisah Sehabat Nabi - Kisah 25 Nabi

Bismillahirahmannirahhimmm......Suasana di kawasan Saei..alhamdulilahh

Kisah Islami - Kisah Sehabat Nabi - Kisah 25 Nabi

Hampir melintasi kawasan Lampu hijau yakni berlari anak,,

Kisah Islami - Kisah Sehabat Nabi - Kisah 25 Nabi

Jumat, 14 Juni 2013

Membuat Background Efek pada Widget

Memberikan sentuhan yang berbeda pada widget atau gadget di blog adalah salah satu cara untuk membuat blog kita kelihatan menarik. Tetapi hal tersebut menjadi dilema bagi para blogger, karena semakin banyak kode-kode HTML yang kita pasang di template akan membuat semakin lambat loading blog. Sebelumnya saya sudah menulis tentang cara mempercepat loading blog dengan CSS Compressor, jadi untuk temen-temen yang tetap ingin menambah kode-kode HTML ke dalam template sebaiknya melakukan kompres file agar loading blognya tidak lamban.

Widget atau gadget sendiri adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi. [ wikipedia .org ] Jika dalam bahasa sederhana blogger widget adalah pernak pernik dalam blog sebagai penghias blog dan memiliki berbagai fungsi.

Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
  1. Colour Background Style
    Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
    #side-wrapper {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 25px 0px 0px 0px;
    width: 315px;
    background: #ffffff;
    }
    Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
  2. Image Background Style
    Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
    Cara Memberi efek background pada widget blogspot Image Background
 StyleNah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
    .post-footer {
    display: block;
    margin: 15px 0px 25px 0px;
    padding: 7px 20px 7px 20px;
    text-align: left;
    font: $postfooterTextFont;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThyphenhyphenztkSC5Vja5Q3barRlhhDgRNj4iLoaO0pNvk2b1rvWxSqPrKC_7F8pMfVh2p2MRxJyU8eC0IzcT-peyaV6k19f8YV3pcsfCTS0FQYPQWNbXr8WZtJp8G3Kw3fkdcnwnsKdiNoahJPw/s1600/banner+demomaskolis.jpg");
    background-color:#0092dd;
    background-position:top right;
    background-repeat:no-repeat;
    border: 1px solid $postfooterBorderColor;
    }
    Penjelasannya adalah:
    • Background Image diisi URL gambar.
    • Background Color diisi kode warna yang sesuai dengan gambar.
    • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
    • Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi: background-repeat: repeat-y; Untuk ke samping, gunakan repeat-x menjadi: background-repeat: repeat-x; Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
  3. Hover Image Background Style
    Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }
    Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
    #sidebar .widget {
    margin: 0px;
    padding: 0px;
    }
    Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    #main .widget:hover {
    background:#e3e3e3;
    }

Temen-temen semua bisa memodifikasi sesuai selera, ingat harus disesuaikan dengan template yang dipakai. Selamat mencoba dan semoga bermanfaat.

Sumber :  http://www.maskolis.com

Membuat Daftar Isi Otomatis diblog

Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat daftar isi manual, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, karena sudah cukup dijelaskan pada tutorial Membuat Daftar Isi Manual di Blogspot, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:
  1. Login ke Blogger, Klik Layout/Tata Letak;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :
    <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
    <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://aiva-putra-anugrah.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  5. Klik Tombol Save/Simpan.
     
    Sumber :  http://www.maskolis.com