Invite X-D-X ./: Trik Blog

Embed Streaming Chelsea TV

&nbsp &nbsp &nbsp &nbsp &nbsp Mungkin bagi yang tidak tahu apa sih fungsinya Embed itu? Bila kita lihat streaming di...

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
     <b>Hallo, Assalamualaikum..</b><br />
<b><br /></b>
<span class="Apple-tab-span" style="white-space: pre;"> </span>Pada kesempatan kali ini saya akan berbagi bagaimana untuk mempercantik tombol download di blog dengan CSS3, setelah membaca beberapa artikel akhirnya ada satu yang sangat menarik untuk tombol animasi download ini. Untuk gambarnya bisa dilihat di bawah.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBGtW035KvOiOr0L3EpjdWmyXopTTtExb9rjrL3ZsTou7bmgyn57Vjaehyphenhyphen7v5Il1f3V4_4U_cblNdRyd2iCtBsvb80HDqrl_goZz4TX6zKVKHqhHXbx5byDb1r4Y8eQ91je3-PYpzZhWS/s1600/tombol.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBGtW035KvOiOr0L3EpjdWmyXopTTtExb9rjrL3ZsTou7bmgyn57Vjaehyphenhyphen7v5Il1f3V4_4U_cblNdRyd2iCtBsvb80HDqrl_goZz4TX6zKVKHqhHXbx5byDb1r4Y8eQ91je3-PYpzZhWS/s1600/tombol.png" /></a></div>
<div class="separator" style="clear: both;">
Langkah-langkahnya seperti biasa masuk ke <b>Akun Blog Anda</b> -> <b>Template</b> -> <b>Edit Html</b>.</div>
<div class="separator" style="clear: both;">
Cari kode seperti ini <b><span style="color: red;"></body></span></b> dan copy kan script ini tepat di atasnya.</div>
<pre class="" data-codetype="CSS"><code>
<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}

.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

/*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

/*GRADIENT*/ 
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;,

endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/ 
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;,

endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style></code></pre>
Jika sudah maka simpan template anda, kemudian langkah selanjutnya.<br />
<b>Penerapan Tombolnya :</b><br />
Jika sudah menerapkan CSS nya tinggal kita memunculkannya dengan kode scrip dibawah didalam Entry. Tapi ingat dalam <b>HTML</b> bukan Compose !<br />
<div class="codeview">
 <div class="abt-button"><br />
      <a href="<b><span style="color: red;">#</span></b>">Download</a><br />
      <p class="up">click here</p><br />
      <p class="down"><b><span style="color: red;">700MB .MP4</span></b></p><br />
 </div></div>
<br />
Untuk '<span style="color: red;"><b>#</b></span>' ganti dengan link yang ingin anda tuju.<br />
Untuk '<span style="color: red;"><b>700MB .mp4</b></span>' ganti dengan ukuran file.<br />
<b>Catatan</b> : Sangat disarankan untuk penerapan script '<b><span style="color: red;">Penerapan Tombolnya</span></b>' dilakukan terakhir dalam mode entry HTML lalu anda post.<br />
<div style="text-align: center;">
<ul class="tombol">
<li><a href="http://deris10.blogspot.com/2013/09/download-kick-ass-1-2010-sub-indo.html" target="_blank">Live Demo</a></li>
<li><a href="http://fiddle.jshell.net/deris/dLrkb/2/show/" target="_blank">Demo 2</a></li>
<li><a href="https://docs.google.com/document/d/1UyQM0aHJREBi93JiWzx-IIcU03TgAoU2MGoJ9Gq15o0/edit" target="_blank">Download</a></li>
</ul>
</div>
</div>

Animasi Tombol Download Blog

Hallo, Assalamualaikum.. Pada kesempatan kali ini saya akan berbagi bagaimana untuk mempercantik tombol download di blog dengan C...

Invite X-D-X ./

Embed Streaming Chelsea TV

Animasi Tombol Download Blog

Popular

Blog Archive

Labels