ဘေလာ.ပိုစ္.ေတြမွာDownload Button အလန္းစားေလးသံုးခ်င္ရင္

Post oleh : Unknown | Rilis : 1:44 PM | Series : Blogger Tutorial ဘေလာ.နည္းပညာ

ဘေလာ.နဲ.၀က္ဘ္ဆိုဒ္ေတြမွာ Download Button အလန္းစားေလးေတြထည္.သံုးခ်င္တဲ.ေဘာ္ဒါေတြအတြက္ Mouse Hover Effect Download Button ေလးတစ္ခုတင္ေပးလိုက္ပါတယ္..စိတ္၀င္စားသေဘာက်လို. သံုးခ်င္တယ္ဆိုရင္ေတာ.ေအာက္ပါအတိုင္းဆက္လုပ္လိုက္ပါ..
 Dashborad ကိုသြားပါ
 Template ကိုကလစ္ပါ
 Edit HTML ကိုနွိပ္ပါ..
 Ctrl + F ကိုနွိပ္ျပီး Search Box ထဲမွာ ]]></b:skin> ဆိုတဲ.ကုဒ္ေလးရိုက္ထည္.ပီး Enter ေခါက္လိုက္ပါ ေအာက္မွာေပးထားတဲ.ကုဒ္ေတြကိုေကာ္ပီကူးပီး 
]]></b:skin>ဆိုတဲ.ကုဒ္ေလးမတိုင္ခင္မွာ Paste ခ်လိုက္ပါ

#RWG-probutn .pure { background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00GV-b4thW53IqVmv1k3fyF5TgGPj0AIBsxxHk5PUYemK-Xx-P5PwbQTxJTElvOYFWTOsxUPvRHc19z2onmDY5h38ofFPUoIb82yo6K1LHa9-Lqjacb3ns84EX_SXjthTnizKXCOAqOL0/s1600/RWG-probutn.png) 3px 0 no-repeat; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; display:block; color:#212121; float:none; height:80px; width:80px; line-height:80px; padding-top:1px; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out, background-color .25s ease-in-out; -o-transition:width .25s ease-in-out, background-color .25s ease-in-out; transition:width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px; margin:10px auto 0; } #RWG-probutn a span { display:none; font-size:1.4em; } #RWG-probutn:hover a span { display:inline; } #RWG-probutn:hover .pure { width:420px; } #RWG-probutn .download { background-position:0 0; } Read more: http://www.widgetgenerators.com/2013/08/add-pro-download-button-with-mouse.html#ixzz2dGG8LRe7

ျပီးရင္ Template ကို Save လုပ္လိုက္ပါ..

ပိုစ္.တင္တဲ.အခါမွာဒီ Download Button ေလးကိုဘယ္လိုအသံုးျပဳရမလဲႀကည္.ရေအာင္
Create new post ကိုနွိပ္ပါ.. Compose ကိုနွိပ္ပီးေရးခ်င္တဲ.အေႀကာင္းအရာေတြကိုေရးပါ.. Download Link ခ်ခ်င္တဲ.ေနရာေရာက္ရင္ HTML ကိုနွိပ္ျပီးေအာက္ကကုဒ္ေလးေတြေကာ္ပီကူးထည္.ပါ..

<div id="RWG-probutn">
<a href="#" class="pure download"><span>Download</span></a>
</div>

အျပာေရာင္ # ျပထားတဲ.ေနရာမွာကိုယ္ထည္.မဲ. Download Link ကိုထည္.ပါ..
အ၀ါေရာင္Download နဲ.ျပထားတဲ.ေနရာမွာေတာ. ကိုယ္သေဘာက်သလိုေျပာင္းလဲေရးနိုင္ပါတယ္..

ေရြႊမင္း၀ံ

facebook

twitter

Tweet

google+

linkedin