Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog

Baiklah shobat kali ini saya akan coba membagikan Tutorial Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog, sebelum kita membahas Tutorial nya, saya akan mencoba membahas apa itu CSS??? dari beberapa postingan sebelumnya, mungkin anda juga akan tertarik dengan tutorial kami untuk berikut ini.

Apa Itu CSS?

CSS adalah kependekan dari Cascading Style Sheet. CSS adalah salah satu bahasa pemrogaman HTML yang bertujuan untuk menghias, memperindah, mempercantik,- Gaya Tampilan/Lyout halaman web supaya lebih elegan dan lebih menarik.

Langkah-Langkah Membuat Tombol Demo Keren Menggunakan CSS Di Blog

Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog

LIHAT DEMO 

1. Masuk terlebih dahulu ke blogger blog kamu==>Pilih menu template
2. Pada menu template silahkan pilih Edit Html
3. Cari code ]]></b:skin> Untuk mempermudah pencarian silahkan anda gunakan

Ctrl

+

F

pada keyboard anda, lalu silahkan anda pastekan code berikut tepat di atas code ]]></b:skin>

.download {font-family:'Arial';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download .bj {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover .bj{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info bj{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo .bj {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info .bj{background-color:#fff;}
.infotool a:link, infotool a:visited { position:relative; }
.bgttooltip { width:225px; position:absolute; bottom:100%; margin:0 0 27px 0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#fff; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background:#2aa4cf; border-color:#2aa4cf; }
.bgttooltip:before,.bgttooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; }
.bgttooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; }
.infotool a:hover .bgttooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
.bgttooltip,.bgttooltip.left { left:0; right:0; }
.bgttooltip:before,.bgttooltip:after,.bgttooltip.left:before,.bgttooltip.left:after { left:40px; right:auto; }
.bgttooltip:before { border-top-color:#2aa4cf; }
.bgttooltip:after { border-top-color:#2aa4cf; }

Simpan template/Save
5. Buat Postingan baru, dari mode compose silahkan anda beralih ke mode Html
6. Pada area Html silahkan kamu pastekan code berikut

<div class="download download-info">
<div class="bj">
LIVE DEMO</div>
<ul>
<li><a href="http://bulshitman-demo.blogspot.com/p/margin0-padding0-body-background333.html" target="_blank" title="Gambar efek slide ancording style"> Test Demo1 </a></li>
<li><a href="http://bulshitman-demo.blogspot.com/p/recent-post-dark-style.html" target="_blank" title="Recent Pst (dark Style) "> Test Demo2</a></li>
</ul>
</div>

 Silahkan kamu ganti Url yang berwarna merah dengan url demo yang kamu tuju, dan jangan lupa sebelum publikasikan postingan nya silahkan kamu pertinjau terlebih dahulu

Oky sehabat Bloging sampai di sini dulu Tutorial yang saya sampaikan kali ini, sampai ketemu lagi di waktu yang sama

SEMOGA SUKSES

0

Shares