Blogger Template Design කරමු (3)

Tute එකේ මුල් කොටස් 2 බැලුවෙ නැද්ද?

               Part 1

               Part 2

        අද මම කියලා දෙන්න යන්නේ blog template layout එක css වලින් design කරන්නේ කොහොමද  කියන එක. ඔයාලගේ  blog template code එකේ <b:skin><![CDATA[  සහ ]]></b:skin> අතර තමයි css code එක ලිවිය යුත්තේ. නමුත් ඊට වඩා ලේසි ක්‍රමයක් Blogger එකේ ලබා දීලා තියෙනවා. Blogger Dashboard එකේ Template-->Customize යන්න click කරන්න. දැන් Advanced යන්න මත click කරන්න. දැන් අපිට අවශ්‍ය CSS code එක ඔය TextEditor එකේ ලියන්න පුළුවන්. ඒ වගේම එකේ preview එකත් ඒ ගමන් ඔය යටින් පෙන්නනවා.

        css code එක ලියන්න කලින් ඔයාලා කරන්න යන දේ ගැන පොඩි අදහසක් තියෙන්න ඕනේ. මගේ හිතේ තියෙන්නේ ඔය රූපේ තියෙන විදිහේ සරල Design එකක්. Photoshop දන්නවනම් Design එක්ක මුලින්ම කරගන්නකෝ. දන්නැති උනාට කමක් නෑ. පොඩි idea එකක් ඔලුවට දාගන්න. මගේ Design එකේ width එක 900px වෙනවා. කියන්න අමතක උනා මම Post Title එකට උඩින් දිනේ වැටෙන එක අයින් කරා. කැමති නම් ඔයාලා ඒක අයින් කරන්න. Blogger Dashboard එකේ Layout-->Blog post Widget එකේ edit click කරන්න. දැන් ලැබෙන window එකේ ඔය (දකුණු පැත්තේ රූපය බලන්න) හරිය ඉවත් කරන්න. ඊට පසුව දකුණු පැත්තේ උඩ තියෙන Save Arrangement යන්න click කරන්න.

              

හරි දැන් ඔය පල්ලෙහා තියෙන් code එක css texteditor එකට paste කරන්නකෝ.

body{
margin: 0 auto;
width:900px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4flhj5VlQdoyRjiHQDstaEdsEK_dCs3m6Cne-zm9QCF-bwkzsdwP5R7RwGVO2cQg0A_0z7DxUaEXKfi97Z1EFpXybj2tT1SA8dfAe1-GDdx7x3_3Ep3NCe-YdR3fSCyKSmefZ0cKwcXo/s1600/bg.png);
}

මේක CSS පාඩමක් නම් නෙමෙයි. ඒ උනාට අපි පොඩ්ඩක් code එක දිහා බලමුකෝ. මොකද CSS දන්නැතිම කෙනෙක්ට නැත්නම් මේ වැඩේ එපා වෙයි. මෙහෙමයි අපි දැන් කරන්න යන්නේ තෝරා ගත් කොටස් වලට වෙන වෙනම Style එකක් css use කරලා design කරගන්න එක. අපි මේ කොටස් හඳුනගන්න භාවිතා කරන්නේ කොටස් වලට අදාල id name එක හෝ class name එක. උදා :-  අපි main,sidebar කියන section දෙක content-wrapper කියන  <div> එකට group කරගත්තා මතක ඇති. ඒකදී අපි

 <div id='content-wrapper'> ලෙස එම කොටස හදුනා ගැනීමට id එක ලෙස content-wrapper යන්න තෝරා ගත්තා. අපි මේක පොඩි practical එකක් කරලම තේරුම් ගමුකෝ. මෙන්න මේ code එකත් css editor එකට දාලා බලන්නකෝ. #content-wrapper{background:red;} මොකද වෙන්නේ?  main,sidebar කියන section දෙකට අදාල background එක රතු පාට වෙනවා නේද? හරි දැන් ඒ code එක අයින් කරන්න.

මම දැන් සම්පූර්ණ CSS Code එක දෙන්නම්. code එක paste කරලා ඉවරවෙලා Apply to Blog යන්න click කරන්න.

a{
text-decoration:none;
}

body{
margin: 0 auto;
width:900px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4flhj5VlQdoyRjiHQDstaEdsEK_dCs3m6Cne-zm9QCF-bwkzsdwP5R7RwGVO2cQg0A_0z7DxUaEXKfi97Z1EFpXybj2tT1SA8dfAe1-GDdx7x3_3Ep3NCe-YdR3fSCyKSmefZ0cKwcXo/s1600/bg.png);
}

.header{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
height:120px;
text-align:center;
color:#fff;
padding-top:10px;
}

#content-wrapper{
margin-top:10px;

}
.main{
width:600px;
float:left;

}

.post{
padding:0 5px;
background:#fff;
border:1px solid #00b7ea;
}

.post-body{
padding-bottom:30px;
}

.post h3 a{
color: #fff;
text-decoration:none;
background: #00b7ea;
width:600px;
display:block;
margin:0 -6px;
margin-top:-19px;
}

.sidebar{
width:280px;
float:right;
}

.sidebar h2{
color: #fff;
background: #00b7ea;
margin-top:0;
padding:0;
font-size:18px;
}

.sidebar .widget {
 border:1px solid #00b7ea;
 margin-bottom:20px;
 background:#fff;
}
.footer{
width:900px;
float:left;
}

    code එකින් එක විස්තර කරන්න යනවා කියන්නේ මහ පිස්සු වැඩක්. ඒ හින්දා ඔයාලා ඔය අගයන් එහෙම වෙනස් කරලා බලන්නකෝ. මම මුලින් කිව්වා වගේ CSS දන්නැත් නම් w3schools ඉගෙන ගන්න try එකක් දෙන්න. එහෙමත් බැරි උනොත් ඔය පල්ලැහින් comment එකක් දාන්න.

     අහ් තව එකක් මට ඔය හිතේ තියෙන දේවල් හරියට කියාගන්න බැරි ප්‍රශ්නයක් තියෙනවා ;) ඒ හින්දා මම කියලා දුන්න ඒවගේ අවුලක් තියෙනවනම් අහන්න.