CSS telah menjadi bagian integral dari desain blog atau situs. CSS sangat penting sehinggga meninggalkan bekas di situs readers. Untuk menda...
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 :
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.
<span class="excitinground"><a class="red" href="YOUR LINK">YOUR TEXT</a></span>
<span class="excitinground"><a class="orange" href="YOUR LINK">YOUR TEXT</a></span>
<span class="excitinground"><a class="green" href="YOUR LINK">YOUR TEXT</a></span>
<span class="excitinground"><a class="blue" href="YOUR LINK">YOUR TEXT</a></span>
<span class="excitinground"><a class="gray" href="YOUR LINK">YOUR TEXT</a></span>
<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.
Sumber : Otowebsite
