06/06/13

Membuat Effect Box Circle untuk Gambar Banner dengan CSS3

Banyak sekali cara untuk mempercantik tampilan blog kita. Seperti halnya Tutorial Jitu juga sudah memberikan anda Tutorial Jitu untuk membuat Widget Social Icon Unik Berputar Untuk Sidebar yang berguna untuk mempercantik tampilan blog kita. Setelah postingan terakhir tadi, ada sahabat Akhbar Islam bertanya tentang Banner yang ada di sidebar blog Tutorial Jitu ini. Bentuknya bulat, dan ketika di hover berubah perlahan menjadi kotak seakan-akan menggunakan script.

Sebenarnya sangat mudah membuatnya, hanya saja kita butuh sedikit tambahan CSS dan HTML untuk membuatnya. Efek ini saya namakan Effect Box Circle Untuk Gambar Banner Dengan CSS3. Arahkan cursor anda pada gambar berikut ini:

Sudah tau mksud dari artikel ini ya... Langsung saja kita menuju tutorial pembuatan Effect ini.

Membuat Effect Box Circle untuk Gambar Banner dengan CSS3

1. Masuk ke menu Template>>Edit HTML
2. Tekan  Ctrl+f dan cari code ]]></b:skin>
3. Masukkan kode CSS berikut tepat diatasnya:

/* Kotak Iklan 125x125 Circle http://tutorial.akhbarislam.com "
    ===================== */
    #kotak-iklan-125x125 {
    margin: 0px;
    padding: 5px;
    text-align: center; }

    #kotak-iklan-125x125 img {
    margin: 0px 8px 4px 0px;
    padding: 3px;
    text-align: center;
    border: 3px solid #c0c0c0;
    -webkit-border-radius:70px;
    -moz-border-radius:70px;
    -o-border-radius:70px;
    border-radius:70px;
    -webkit-transition: all 0.45s ease-out;
    -moz-transition: all 0.45s ease-out;
    -o-transition: all 0.45s ease-out;
    transition: all 0.45s ease-out;
    }

    #kotak-iklan-125x125 img:hover {
    margin: 0px 8px 4px 0px;
    padding: 3px;
    text-align: center;
    border: 3px solid #c33f00;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0px;
    }

4. Simpan template, dan lanjut untuk peletakan kode HTML
5. Buka menu Tata Letak>>Tambahkan Gadget, dan pilih HTML/JavaScript
6. Masukkan kode berikut didalamnya:

<div id="kotak-iklan-125x125">

    <a target="_blank" href="http://tutorial.akhbarislam.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

   <a target="_blank" href="http://tutorial.akhbarislam.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
 
   <a target="_blank" href="http://tutorial.akhbarislam.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

   <a target="_blank" href="http://tutorial.akhbarislam.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

</div>

Keterangan:
- Ganti url yang berwarna HIJAU dengan link blog anda.
- Ganti url yang berwarna KUNING dengan alamat gambar anda.

7. Simpan

Silahkan anda lihat hasilnya. Jika berhasil jangan lupa mengucapkan alhamdulillah, jika terjadi kegagalan, jangan segan-segan berkomentar ria dibawah. Semoga artikel ini bermanfaat untuk sobat semuanya.

Keyword: Membuat Effect Box Circle untuk Gambar Banner dengan CSS3 | Tutorial Jitu Akhbar Islam

Artikel Terkait

Membuat Effect Box Circle untuk Gambar Banner dengan CSS3
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

2 comments

13 Juni 2013 08.38 delete

Cara Membuat Effect Box Circle untuk Gambar Banner dengan CSS3 di Blogger

Reply
avatar

BERIKAN KOMENTAR TERBAIK ANDA

Catatan:
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Dilarang memasukkan link aktif...!!! link aktif secara otomatis akan terhapus dari komentar.