Mamank Dzgn : Cara Menciptakan Button Link Demo Dan Download Di Blog

Cara Membuat Button Link Demo Dan Download Di Blog

Kesempatan kali ini aku akan membagikan tutorial button demo dan button download untuk kalian para blogger .. yang kali ini aku bagikan dengan css yang menarik dan elegant .. Langsung Saja Ke Tutorial

Masuk Ke Blogger
Template > Edit Html
Masukan css di bawah ini sempurna diatas ]]></b:skin> atau di atas </style>

#store-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0} .rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;float:left;color:#888} #store-style .storebutton{display:block;position:relative;background:#ff6550;color:#fff;text-align:left;font-size:1rem;margin:0;padding:16px 20px;border-radius:4px;overflow:hidden;box-shadow:0 1px rgba(0,0,0,.1);transition:all .3s} #store-style .storebutton.but2{background:#3498db} #store-style .storebutton:hover{background:#e55b48;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);} #store-style .storebutton.but2:hover{background:#2f89c5} #store-style .storebutton:after,#store-style .storebutton.but2:after{content:'\f105';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;bottom:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:12px 20px;font-family:fontawesome;transition:all .3s;font-size:1.4rem} #store-style .storebutton:hover:after,#store-style .storebutton.but2:hover:after{background:rgba(255,255,255,.15);-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)}} .but1,.but2{padding:14px} .storelist{background:#fff;display:flex;padding:10px 5px;width:100%;float:left;color:rgba(0,0,0,0.5);font-weight:700;border-bottom:1px dashed rgba(0,0,0,0.05);transition:all .6s} .storelist:last-child{border-bottom:0} .storelist:before{content:"\f00c";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s} .storelist:hover:before{color:#e67e22;}

Selanjutnya Simpan Kode Di bawah ini bebas mau dimanapun dapat .. kalo aku di bawah <body>

<script type='text/javascript'> /*<![CDATA[*/ $(document).ready(function(){  $('a[name="abdoutech.com_box"]').before($('#Theme-details').html());  $('#abdoutech_23box').html('');  });  /*]]>*/ </script>

Selanjutnya Simpan Kode Di bawah Ini Di Postingan Di Mode HTML

<div style="display: none;"> <div id="abdoutech_23box"> <div id="store-style"> <br /> <br /></div> <div id="store-style"> <a class="storebutton but1 free" href="https://mamankdzgn.blogspot.com/" rel="nofollow" target="_blank">Demo</a>             <br /> <a class="storebutton but2" href="https://mamankdzgn.blogspot.com/" target="_blank">Download</a>             <br /> <div class="rio-ss"> <span class="storelist">Template Blogger</span>                 <br /> <span class="storelist">Template Wordpress</span>                 <br /> <span class="storelist">Template Website</span>                 <br /> <span class="storelist">Template Seo</span>                 <br /> <span class="storelist">Template Fast Load</span>                 <br /> <span class="storelist">Template Keren </span>             </div> </div> </div> </div>

Demo