CSS telah menjadi bagian integral dari desain blog atau situs. CSS sangat penting sehinggga meninggalkan bekas di situs readers. Untuk mendapatkan pembaca Anda perhatian mereka adalah trik tertentu dan tweak dengan mana Anda akan dapat meninggalkan impression.
 CSS.These telah menjadi sangat umum dan karenanya mereka tidak appealing. Jadi harus ada unsur kejutan di blog Anda. Anda harus mengandalkan linking. Buttons eksternal cara yang lebih baik daripada links, Adding teks sederhana dari tombol di blog Anda. Sekarang saya akan menampilkan metode sederhana dengan mana Anda akan dapat menambahkan tombol baru yang menarik ya itu Round CSS Buttons for Blogger. Round CSS Buttons for Blogger ini sendiri di rancang oleh YourPcGenie.
Untuk cara membuat Round CSS Buttons for Blogger sangat mudah untuk.So mari kita pergi ke bagian selanjutnya tulisan ini dan mengambil semua kode yang saya berikan.

Fitur :
  • Tersedia dalam berbagai warna
  • kecil Coding
  • Hover Efek
  • Bevel Efek digunakan untuk mode aktif
  • CSS 3 yang digunakan (versi terbaru dari CSS)
  • Penyebab ada penundaan dalam waktu buka halaman web

CSS3 Round Buttons Demo



Cara Membuat

Silahkan tambahkan kode CSS berikut ke template Anda.

The CSS

/* Exciting Round Buttons By OtoWebsite*/
.excitinground{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.excitinground a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.excitinground a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.excitinground a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.excitinground a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.excitinground a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.excitinground a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.excitinground a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.excitinground a:hover, .excitinground:hover { color: #fff; opacity: .7 }


Menggunakan Tombol di Post Anda

Di mana pun Anda ingin menggunakan tombol Round CSS Buttons for Blogger di posting Anda pilih salah satu dari kode di bawah ini yang mungkin menarik warna Anda. Menunjukkan warna button. Anda dapat mengganti nama warna dengan teks Anda sendiri.

Oto Website

<span class="excitinground"><a class="red" href="YOUR LINK">YOUR TEXT</a></span>

Oto Website

<span class="excitinground"><a class="orange" href="YOUR LINK">YOUR TEXT</a></span>

Oto Website

<span class="excitinground"><a class="green" href="YOUR LINK">YOUR TEXT</a></span>

Oto Website

<span class="excitinground"><a class="blue" href="YOUR LINK">YOUR TEXT</a></span>

Oto Website

<span class="excitinground"><a class="gray" href="YOUR LINK">YOUR TEXT</a></span>

Oto Website

<span class="excitinground"><a class="dark" href="YOUR LINK">YOUR TEXT</a></span>


Customizations

Ganti YOUR LINK dengan Anda sendiri link / url.
Juga mengubah YOUR TEXT dengan teks yang ingin ditampilkan

Saya harap tutorial tentang Round CSS Buttons for Blogger berguna untuk Anda. Silahkan berbagi tutorial ini dengan berbagi posting ini dengan teman / kerabat dll dan Juga meninggalkan pandangan Anda di bawah ini dan membantu saya untuk memahami kegembiraan dan kesedihan Anda.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top