Cara Memasang Tombol Demo Dan Download Di Blog

Cara Memasang Tombol Demo Dan Download Di Blog - Hai sobat apa kabar semuanya....? semoga
saja kalian semua dalam keadaan baik baik saja amin,di posting kali ini saya akan membaha mengenenai cara memasang tombol demo dan download di blog.

Banyak kegunanaan dan ke untungan dalam memasang tombol demo dan download di blog sobat
mungkin kegunaan dan keuntungannya adalah dari segi pengunjung,karena kenapa mungkin sih pengunjungkan akan merasa lebih mudah untuk mendownload file tersebut atau untuk melihat demo karena kenapa karena tombol download dan demonya gede jadi mana mungkin sih pengunjung tidak ada melihat hehehehe.

Baiklah bagi sobat yang ingin memasang tombol demo dan download pada blog sobat langsung saja sobat ikuti langkah langkahnya dibawah ini.

Cara Memasang Tombol Demo Dan Download Di Blog :

• Buka blogger
• Di menu dashboard clik template > clik edit html >
• Copy code yang ada dibawah ini dan letakkan code tersebut tepat di atas </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;
} 

• Kemudian simpan template

 <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> 

Agar tombol demo dan download terlihat rapi saat di pasang silahkan sobat tekan "enter" untuk barisan baru pada menu "pilihan" untuk lebih jelasnya silahkan sobat lihat gambar dibawah ini.

Demikian artikel dari saya yang bertema tentang Cara Memasang Tombol Demo Dan Download Di Blog semoga artikel yang baru saja berikan kepada sobat dapat bermanfaat untuk semuanya.

Share :

Tweet

More

Related Post