KODE IKLAN DFP 1 Memasang Download Button dan Slide Demo | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Memasang Download Button dan Slide Demo

    KODE IKLAN 200x200
    KODE IKLAN 336x280
     Postingan kali ini adalah lanjutan dari pembahasan sebelumnya  Memasang Download Button dan Slide Demo

    Postingan kali ini adalah lanjutan dari pembahasan sebelumnya Membuat Tombol Demo dan Download Di Dalam Postingan Blog. Kali ini akan kita modifikasi agar lebih terlihat menarik dengan menambahkan sedikit Animasi dengan efek slide. Bagi sobat yang kemaren Request untuk Memasang Download Button dan Slide Demo ini akan kita bahas bersama.

    Pemasangan Download Button dan Slide Demo pada blog ini sangat cocok untuk blog yang ber niche Download dan Tutorial karena pengunjung dapat segera mencobanya dan tentunya akan menarik untuk terus dikunjungi. Sebelum memulainya pastikan sobat sudah memasang fontawesome pada template blognya. 

    Langsung saja bagi sobat yang mau mencoba Memasang Download Button dan Slide Demo, mari disimak langkah penerapannya dibawah ini.

    Langkah Pertama 
    Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </style> atau ]]></b:skin>.

    #wrap {     margin: 20px auto;     text-align: center; }  #wrap br {     display: none; }  .btn-slide, .btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #0099cc;     margin: 10px;     transition: .5s; }  .btn-slide2 {     border: 2px solid #efa666; }  .btn-slide:hover {     background-color: #0099cc; }  .btn-slide2:hover {     background-color: #efa666; }  .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #0099cc; }  .btn-slide2:hover span.circle2 {     color: #efa666; }  .btn-slide:hover span.title, .btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }  .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }  .btn-slide span.circle, .btn-slide2 span.circle2 {     display: block;     background-color: #0099cc;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }  .btn-slide2 span.circle2 {     background-color: #efa666; }  .btn-slide span.title,   .btn-slide span.title-hover, .btn-slide2 span.title2,   .btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #30abd5;     transition: .5s; }  .btn-slide2 span.title2,   .btn-slide2 span.title-hover2 {     color: #efa666;     left: 80px; }  .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }  .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {     color: #fff; }

    Setelah itu silahkan Simpan Template.

    Langkah Kedua
    Untuk memanggil Download Button dan Slide Demo silahkan sobat letakkan kode dibawah ini di dalam postingan atau dimanapun ingin ditampilkan.

    <div id="wrap"> <a href="#" class="btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Click here</span> </a> <a href="#" class="btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">Click here</span> </a> </div>

    Langkah Ketiga
    Agar tampilannya nanti rapih dan tidak terlihat berantakan silahkan atur pada tab Postingan "Tekan Enter Untuk Baris Baru" seperti dibawah ini.

     Postingan kali ini adalah lanjutan dari pembahasan sebelumnya  Memasang Download Button dan Slide Demo

    Dan Selesai, Selamat Mencoba semoga bermanfaat

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2