mas template

Membuat Background Efek pada Widget di Blog

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("http://2.bp.blogspot.com/_jeu1dUw9AK4/TS04NMuuWfI/AAAAAAAAAQY/e_0IOzKj60U/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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

17 comments:

  1. mas kok link mempercepat loading blog dengan CSS Compressor, not found si mas?

    ReplyDelete
  2. Ijin nyimak gan,,mantebb
    Kunjungi blog saya ya mas . .
    http://tegarchord.blogspot.com

    ReplyDelete
  3. mau tanya kalo mengganti background blog dengan file .swf gimana

    ReplyDelete
  4. saya mau coba gan...
    makasi infonya ya..

    ReplyDelete
  5. nyimak doang sob..
    kunbalnya jgn lupa.

    ugl-kreatif.blogspot.com

    ReplyDelete
  6. makasi infonya ya..http://dennyaby321.blogspot.com/

    ReplyDelete
  7. nice ilmu nya nih maskolis lumayan untuk Newbie seperti saya

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Terimakasih informasinya maskolis. Tapi kalo seperti gambar diatas kiri punya maskolis yang bertuliskan "mas template" itu supaya berkedip2 / berjalan bagaimana ya?

    salam
    www.tourkarimunjawa.net

    ReplyDelete
  10. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  11. dicoba dulu ya gan, salam kenal. sukses selalu.

    ReplyDelete
  12. sulit gan..sudah berusaha, tapi eror..awam kali ya..salam kenal aja kalo gitu....

    ReplyDelete
  13. sangat inspiratif sekali

    http://agentasdotcom.blogspot.com

    ReplyDelete
  14. desain website anda sangat profesional, ini sangat bagus sebagai bisnis yang menguntungkan

    ReplyDelete
  15. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger