Cara Membuat Tombol Demo Dan Download Keren di Blogger

Saat ini saya akan memberikan informasi yang sedikit berbeda dari sebelumnya yaitu mengenai dunia blogging dan informasi saya kali ini tentang cara membuat tombol demo dan download super keren di blog dengan platform blogger , sebelum membuat tombol ini ada baiknya sobat mengetahui dulu apa sih kegunaan dari tombol demo dan download jika dipasang di blog kamu .

Biasanya tombol demo dan download ini digunakan dan dipakai untuk blog atau website yang membagikan template blog , karena memang fungsinya untuk membuat tombol demo template yang akan dibagikan dan tombol download untuk mendownload template yang akan dibagikan .

Jadi jika blog kamu memang blog untuk membagikan template blog ada baiknya menambahkan tombol demo dan download ini di template kalian . Tanpa banyak ngomong lagi saya akan memberikan tutorial ini kepada sobat yang ingin menambahkan tombol demo dan download di template milik sobat , langsung saja disimak tutorialnya dibawah ini .

Cara Menambahkan Tombol Demo Dan Download Keren di Blogger

• Silahkan login ke blogger => Pilih Template => Edit HTML
• Masukan kode CSS dibawah dan letakan ini diatas kode ]]></b:skin> atau </style>

.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;}
.demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;}
.demo {background-color:#5a6269;}
.download {background-color:#ff9e47;}
.demo:hover {background-color:#ff9e47;color:#fff;opacity:1;}
.download:hover {background-color:#5a6269;color:#fff;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

• Kemudian silahkan klik "Simpan Template"
• Lalu untuk menggunakan tombol demo dan download di postingan bisa menggunakan kode dibawah ini dan letakan di bagian HTML postingan

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

Itulah cara menambahkan dan membuat tombol demo dan download yang keren di blogger , semoga bermanfaat bagi sobat , lalu bagi sobat yang masih bingung dengan tutorial yang saya berikan diatas bisa tinggalkan pesan di bagian komentar . 

Share ke :