අපූරු css3 buttons ටිකක් ඔබේ blogger blog එකටත්.!

Tricks Lanka වෙත නිතර එන සහෝදර මිත්‍රයෙක් මගෙන් පුද්ගලිකව අහලා තිබ්බා කොහොමද download button එකක් බ්ලොග් එකට දාගන්නේ කියලා. ඉතින් ඔහු මට download button එකක් දාලා තියෙන බ්ලොග් එකකුත් පෙන්නුවා. ඇත්තටම එතන තිබ්බේ download කියලා ලියලා තියෙන animation image එකක් (GIF file එකක්). ඉතින් ඒ වගේ image එකක් දාගන්නවට වඩා යමක් අද ඔබට මේ ලිපියෙන් ඉගෙන ගන්න පුළුවන්.
මම මේ සම්බන්දව ලිපිය ලියන හේතු උන ප්‍රදාන කාරණය තමයි මම ඉහතින් විස්තර කලේ. ඒ වගේම මම මීට කලින් මේ වගේ buttons ගැන කතා කරලා නැති නිසා මට හිතුනා මේ ගැන ලියන්න ඕනේ කියලා. ඉතින් අද මම අරගෙන ඇවිත් තියෙන්නේ බොහොම අපූරු CSS3 buttons කිහිපයක්.Buttons වල ක්‍රියාකාරිත්වය කොහොමද කියලා බලන්න පහත දී තිබෙන demo එක බලන්න. ඔබලාම බලන්න icon biggrin අපූරු CSS3 Buttons ටිකක් ඔබේ Blogger Blog එකටත්.!
කොහොමද මේ Buttons ටික Blogger වලට එකතු කරගන්නේ?
හොදයි මුලින්ම අපි CSS codes ටික ඔබේ බ්ලොග් එකට එකතු කරගෙන ඉමු.
  • මුලින්ම Blogger Dashboard –> Template වෙත යන්න.
  • Edit HTML ක්ලික් කර, Proceed යන්නත් ක්ලික් කරන්න.
  • අනතුරුව ]]></b:skin> යන කේතය හොයාගන්න. පසුව එයට ඉහළින මේ පහත දී තිබෙන codes ටික එකතු කරගන්න.
.button, .button:visited {
background: #222 url(http://code.trickslanka.com/image/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
 
.button:hover {
background-color: #111;
color: #fff;
}
 
.button:active {
top: 1px;
}
 
.small.button, .small.button:visited {
font-size: 11px
}
 
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
 
.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
 
.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
 
.pink.button, .magenta.button:visited {
background-color: #e22092;
}
 
.pink.button:hover {
background-color: #c81e82;
}
 
.green.button, .green.button:visited {
background-color: #91bd09;
}
 
.green.button:hover {
background-color: #749a02;
}
 
.red.button, .red.button:visited {
background-color: #e62727;
}
 
.red.button:hover {
background-color: #cf2525;
}
 
.orange.button, .orange.button:visited {
background-color: #ff5c00;
}
 
.orange.button:hover {
background-color: #d45500;
}
 
.blue.button, .blue.button:visited {
background-color: #2981e4;
}
 
.blue.button:hover {
background-color: #2575cf;
}
 
.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
 
.yellow.button:hover {
background-color: #fc9200;
}
හරි දැන් ඔබ CSS codes ටික එකතු කරගෙන ඉවරයි. Template එක save කරන්න.
කොහොමද දැන් මේ Buttons බාවිතා කරන්නේ?
මේ buttons බාවිතා කරන එක හරිම පහසුයි. ඉතින් අපි බලමු කොහොමද මේ buttons බාවිතා කරන්නේ කියලා.
  • හිතන්න දැන් ඔබ ඔබේ බ්ලොග් post එක ලියනවා. ඉතින් දැන් ඔබට අවශ්‍ය වෙනවා මේ button එකක් ඔබේ post එකට එකතු කරගන්න. blogger වල ඔබ post එක ලියන තැන තියෙන HTML යන Tab එක ක්ලික් කරන්න.
  • ඔබට අවශ්‍ය button code එක පහලින් තෝරාගන්න.
  • ආතුරුව ඔබ copy කරගත් code එකේ ඔබට අවශ්‍ය විදියට link එකයි button එකේ text එකයි replace කරගන්න.
විශාල ප්‍රමාණයේ Buttons සදහා පහත දී ඇති HTML Codes බාවිතා කරන්න.
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>
කුඩා ප්‍රමාණයේ Buttons සදහා පහත දී ඇති HTML Codes බාවිතා කරන්න.
<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>
  • ඔබට අවශ්‍ය button එකේ code එක copy කරගෙන past කරාට පසුව ඔබ කොපි කරගත් code එකේ තියෙනLINK HERE යන්න වෙනුවට button එක ක්ලික් කරහම යන්න ඕනේ URL එක දෙන්න.
  • LINK TEXT HERE යන්න වෙනුවට button එක මත සදහන් විය යුතු text එක ලාබදෙන්න. (උදා- Download, Click Here)
මේ buttons බාවිතා කරන විදිය පිලිබදව තවමත් ඔබට ගැටළුවක් වේ නම් පහත video එක බලන්න.
 


ඔබේ ගැටළු හා අදහස් කමනේට් කරන්න.
Previous
Next Post »