Cara membuat link download dan link demo di postingan blog

Sekarang teknologi sudah canggih gan, bagi anda yang suka mencari inspirasi dari dunia maya dan mencari lebih mengerti dalam tampilan blogger, disini saya ingin berbagi ilmu tentang cara menambah link download dalam postingan blog, mari ikuti saja tutorialnya ya, tidak susah dan tidak bingung gan.

1.  Buka dan edit template blog anda, setelah itu cari kode ]]></b:skin> setelah itu copy kode dibawah ini dan paste di atas kode ]]></b:skin> tersebut.

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

2.  Save template

3.  Kemudian untuk penggunaannya didalam postingan silahkan gunakan kode dibawah ini dengan mode HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.seocips.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.areasatu.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Sangat mudahkan untuk membuat link download dan demo dalam postingan blog, dan apablia anda ingin menggantikan nama link download atau link demo tinggal edit aja namanya, misalnya link download di ganti dengan nama anda. Semoga anda memuaskan dengan tutorial ini dan mudah dipahami. Salam.