ලස්සන download button එකක් ඔයාලගේ බ්ලොග් එකටත් එකතු කරගමු ...

ඔන්න ඉතින් මම බ්ලොග් කරන අය සඳහා මේ වෙනකොට ගොඩක් දේවල් කිව්වනේ..අදත් කියන්න යන්නේ බ්ලොග් එකකට දාගන්න පුළුවන් ලස්සන  download button එකක් ගැනයි ..

මේක animated button එකක්.button එක ගාවට cursor එක ගේනකොට තමා animate වෙන්නේ.ඔයාලට පේනවා ඇති උඩ තියන පින්තුරේ download කියන නිල් පාට buttons දෙකේ යට තියන button එකෙන් පෙන්නන්නේ cursor එක download button එක ගාවට අරන් ගිහාම පෙන්වන හැටි..

හරි එහෙනම් මේක කරන හැටි බලමු .

ඉස්සරලම ඔයාල blogger dash board එකට ගිහින් templates කියන එක click කරලා edit template click කරන්න..එතකොට ඔයාලට පේයි page  එකක් open වෙනවා අකුරු ගොඩක් තියන .අන්න ඒ page  එකේ කොහෙහරි click කරලා Ctrl +F ඔබන්න ..එතකොට page එකේ දකුණු පැත්තේ උඩින් පොඩි box එකක් එයි ..

අන්න ඒ box එකේ </body> කියල type කරලා enter කරන්න.එතකොට </body> කියල එකක් පාට වෙලා පෙන්නයි.අන්න ඒ පාට වෙලා පෙන්නුව </body> කියන එකට උඩින් මම යට දීල තියන java script code එක paste කරන්න.

<style> .abt-button { margin: 50px auto; width: 200px; } /* Get this button at AllBloggerTricks.com */ .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='#00b7ea', endColorstr='#009ec3',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='#00b7ea', endColorstr='#009ec3',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>

හරි දැන් save template click කරන්න.
ඊට පස්සේ කරන්න තියෙන්නේ මෙච්චරයි.ඔයාල දැන් post එකක් ලියනවනේ.අන්න ඒ post එක ලියන්න ගද්දි අපි ලියන්නේ සාමාන්‍යයෙන් compose කියන එකේනේ ,compose කියන එක නෙමෙයි HTML කියල එකක් එතනම තියනවා බලන්න ,අන්න එක click කරලා ඔයාලට download button එක දාගන්න ඕනේ තැන යට දීල තියන java script code එක paste කරන්න 




<div class="abt-button"> <a href="#">Download</a> <p class="up"> click to begin</p> <p class="down"> 1.2MB .zip</p> </div>

හරි එහෙනම් දැන් අන්තිම  ටික.මේ java script code එකේ # එක වෙනුවට ඔයාල download කරන්න යන එකේ link එක එතනට දාන්න, අය 1.2 MB.zip කියන තැනට ඔයාල download කරන්න දෙන file එකේ size එකත් දාන්න..

හරි දැන් වැඩේ ඉවරයි එහෙනම්.බලන්න ලස්සනට download button එකක් ඇවිල්ල ඇති දැන්.