Cara Membuat Tombol DEMO dan DOWNLOAD Efek SLIDE
Ok sobat berikut ini seocips akan membagikan tutorial blog mengenai bagaimana cara membuat tombol download dan demo dengan efek silde. Sobat dapat menggunakannya misalnya jika ingin membagikan template blog.

Sebelumnya juga telah dibagikan tombol download dan demo tapi tanpa menggunakan efek slide ( baca : cara membuat tobol download dan demo keren diblog). Nah perbedaanya adalah berikut ini menggunakan efek slide. Lihat demonya untuk lebih jelasnya lagi.


Cara Membuat Tombol DEMO dan DOWNLOAD - Efek SLide

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style> Lalu tambahkan kode CSS berikut ini tepat diatas kode tersebut.
.download {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;}
.download h1 {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 h1{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 h1{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 h1 {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 h1{background-color:#fff;}
4. Simpan template.
5. Gunakan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.
<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://www.seocips.com/" target="_blank"> DEMO </a></li>
<li><a href="http://www.seocips.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>
Silahkan ganti url warna merah diatas dengan link DEMO dan Link DOwnload milik sobat. Jangan lupa juga lihat artikel terbaru seocips.com. Ok sob, sekian tutorial saat ini semoga bermanfaat,
0 Komentar untuk "Cara Membuat Tombol DEMO dan DOWNLOAD Efek SLIDE"