Membuat Button Live Demo di Blog

Motivation - "Membuat Button Live Demo di Blog". Pernahkah anda melihat blog yang memiliki live demo di blognya? terutama pada blog yang menyediakan tutorial blog template. pernah bukan? selain itu untuk menuju ke halaman live demo, tentunya juga menyediakan sebuah button agar dapat menuju ke halaman live demo tersebut.

Bagaimana cara "Membuat Button Live Demo di Blog", Silahkan ikuti tutorialnya dibawah ini :

• Jika ingin membuat button, sisipkan kode dibawah ini pada postingan anda:
  

  <div style="text-align: center;">
  <ul class="button">
  <li><a class="demo" href="TARUH LINK DEMONYA" target="_blank">Demo</a></li>
  <li><a class="download" href="TARUH LINK DOWNLOADNYA" target="_blank">Download</a></li>
  </ul>
  </div>
  <div class="clear"></div>
  

• Agar dapat melihat tombolnya, sebelum itu, login ke blogger >> dashboard >> Template >> Edit HTML
• Temukan Kode ]]></b:skin> dengan menekan CTRL+F
• Copy kode/script dibawah ini tepat diatas kode ]]></b:skin>

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

Nah, Itulah Tutorial "Membuat Button Live Demo di Blog". Semoga Bermanfaat. Terima Kasih.

Motivation_2014Arsip