KODE IKLAN DFP 1 Cara Menciptakan Tombol Demo Dan Download Flat Ui Pada Postingan Blog | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Menciptakan Tombol Demo Dan Download Flat Ui Pada Postingan Blog

    KODE IKLAN 200x200
    KODE IKLAN 336x280
    Cara Membuat Tombol Demo dan Download Flat UI Pada Postingan Blog Cara Membuat Tombol Demo Dan Download Flat UI Pada Postingan Blog

    Tombol Demo dan Download merupakan sebuah fitur tambahan yang sering dipergunakan pada sebuah blog/situs download, baik itu situs download lagu, film, game, ebook, maupun template. Kegunaan dari kedua tombol ini tidak lain dan tidak bukan ialah untuk mempermudah pengunjung untuk melaksanakan demo atau download.

    Kedua tombol ini mempunyai fungsi dan kegunaannya masing-masing. Tombol Demo mempunyai fungsi untuk melaksanakan preview atau pratinjau pada file yang akan didownload. Biasanya fitur ini sering digunakan pada situs download ebook atau template.

    Tujuan digunakannya tombol Demo ialah untuk mempermudah para pengunjung dalam melihat file yang akan didownload. Para pengunjung sanggup melihat sendiri bagaimana kualitas dari file yang akan mereka download, dengan begitu mereka sanggup yakin dan percaya bahwa file yang akan mereka download memang mempunyai kualitas yang bagus.

    Selain itu ada pula tombol Download. Sesuai dengan namanya tombol ini berfungsi untuk mendownload atau mengunduh file yang ada pada sebuah situs/blog. Ada beberapa karakteristik dari tombol Download, ialah tombol Download yang mengarah pribadi pada file, dan tombol download yang mengarah pada halaman lain yang sudah dihubungkan dengan file.

    Baiklah saya rasa anda sudah mulai paham mengenai tombol Demo dan Download. Sesuai dengan judul diatas, pada kesempatan kali ini saya akan membagikan anda sebuah cara gampang untuk menciptakan kedua tombol tersebut (Demo dan Download), dan cara mengaplikasikannya pada postingan blog.

    Cara ini sangat saya rekomendasikan bagi anda yang mempunyai blog download alasannya selain memudahkan pengunjung, kedua tombol ini sanggup menarik para pengunjung untuk mengunjungi situs blog anda, ini dikarenakan warna pada kedua tombol ini sudah terintegrasi dengan warna Flat UI yang pastinya sangat nyaman kalau dilihat.

    Disini saya akan membagikan cara menciptakan tombol Demo dan Download dengan dua Style yang berbeda. Style yang pertama ialah tombol Demo dan Download akan berada pada posisi sejajar, dan Style kedua ialah tombol Demo dan Download berada pada posisi urut, atau posisi tombol Demo berada di atas dan tombol Download berada dibawah.

    Oke tanpa berbasa-basi lagi, bagi anda yang ingin sanggup menciptakan tombol Demo dan Download silahkan ikuti saja panduan berikut:

    Karena tombol Demo dan Download yang akan kita buat ini memakai Font Awesome, jadi kita harus memasukkan isyarat berikut kedalam tema blog. Caranya:

    1. Masuk ke blogger
    2. Pilih Tema>>Edit HTML
    3. Masukan isyarat berikut diatas </head>
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
    4. Simpan Tema

    Nah sehabis kita berhasil memasukkan isyarat Font Awesome, maka saatnya kita berlanjut ke cara berikutnya. Yaitu cara memasukkan script isyarat untuk menciptakan tombol Demo dan Download Flat UI.

    Karena tombol Demo dan Download Flat UI yang akan saya bagikan ini mempunyai dua style yang berbeda, jadi anda sanggup menentukan salah satunya.

    STYLE 1

    Cara Membuat Tombol Demo dan Download Flat UI Pada Postingan Blog Cara Membuat Tombol Demo Dan Download Flat UI Pada Postingan Blog

    1. Login ke blogger
    2. Pada dashboard pilih Tema>>Edit HTML
    3. Letakkan isyarat berikut diatas kode ]]></b:skin> atau </style>
    /* CSS Button Style 1 by https://www.masgunggoyo.com/ */ .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .button ul{margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none} .button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s} .button li a.download{background:#3498db} .button li a.demo:hover,.button li a.download:hover{background:#666} .button li a.demo:active,.button li a.download:active{cursor:pointer} .button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome} .button li a.download:after{content:'\f019'}
    4. Simpan Tema

    Cara Mengaplikasikan Pada Postingan


    1. Masuk ke blogger
    2. Pilih Postingan>>Entri Baru
    3. Masuk ke mode HTML (Bukan "Compose")
    4. Masukan isyarat berikut:
    <div style="text-align: center;">   <ul class="button">     <li><a class="demo" href="http://Masgunggoyo.com.blogspot.com" target="_blank">Demo</a></li>     <li><a class="download" href="http://Masgunggoyo.com.blogspot.com" target="_blank">Download</a></li>   </ul> </div> <div class="clear"></div>
    Catatan:
    Ubah goresan pena yang bertanda Merah dengan URL yang anda inginkan!
    5. Lakukan Pratinjau untuk melihat hasilnya




    STYLE 2

    Cara Membuat Tombol Demo dan Download Flat UI Pada Postingan Blog Cara Membuat Tombol Demo Dan Download Flat UI Pada Postingan Blog

    1. Login ke blogger
    2. Pada dashboard pilih Tema>>Edit HTML
    3. Tambahkan isyarat berikut diatas kode ]]></b:skin> atau </style>
    /* CSS Button Style 2 by https://www.masgunggoyo.com/ */ .button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none} .button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden} .button2 li a.download{background:#3498db} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
    4. Simpan Tema


    Cara Mengaplikasikan Pada Postingan


    1. Masuk ke blogger
    2. Pilih Postingan>>Entri Baru
    3. Masuk ke mode HTML (bukan "Compose")
    4. Masukan isyarat berikut:
    <div style="text-align: center;">   <ul class="button2">     <li><a class="demo" href="http://Masgunggoyo.com.blogspot.com" target="_blank">Demo Link</a></li>     <li><a class="download" href="http://Masgunggoyo.com.blogspot.com" target="_blank">Download Link</a></li>   </ul> </div> <div class="clear"></div>
    Catatan:
    Ubah goresan pena yang bertanda Merah dengan URL yang anda inginkan!
    5. Lakukan Pratinjau untuk melihat hasilnya

    Itu beliau cara menciptakan tombol Demo dan Download pada postingan blog. Dengan anda menerapkan cara ini pastinya kualitas postingan anda akan semakin baik dan terlihat profesional.

    Yap saya rasa hanya itu yang sanggup saya sampaikan, kurang lebihnya mohon maaf. Terimakasih dan hingga jumpa di postingan berikutnya.
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2