මුලුමනින්ම බ්ලොග් එකක් සම්පූර්ණයෙන්ම හදාගන්න හැටි - 02 කොටස

බ්ලොග් කලාවට එන ගොඩක් අයට ප්‍රශ්ණයක් තමයි කොහොමද බ්ලොග් එකක් නියමාකාරව ආරම්භ කරන්නේ, පාලනය කරන්නේ, ලස්සන කරගන්නේ ඔය වගේ ප්‍රශ්ණ ගොඩක් එනවනේ. ඉතිං ඔය ප්‍රශ්ණවලට පුංචි උදව්වක් විදිහට මම පෝස්ට් එකක් ලිව්වා මුලුමනින්ම බ්ලොග් එකක් සම්පූර්ණයෙන්ම හදාගන්න හැටි කියලා මූලික දේවල් වල ඉදං උපරිම අවස්ථාවට යනකම්. ඉතිං ඒකෙන් ගොඩක් අය ප්‍රයෝජන අරන් තිබුනා. කොහොම නමුත් මට පෙනුන විදිහට සමහරක් අයට තවත් බ්ලොගර් ගැන පොඩි පොඩි ප්‍රශ්ණ තියෙනවා. මොකද මම එහෙම කියන්නේ අද මම Facebook page එකට ගියාට පස්සේ දැක්කේ එක්කෙනෙක් මේ ගැන ප්‍රශ්ණ කරලා තිබුනා. පහළින් ඒකේ ස්ක්‍රීන් ෂොට් එකක් දාන්නම්.  කොහොම හරි ඉතිං ඔන්න ඒ ප්‍රශ්ණවලට උත්තරයක් දෙන්න හදද්දී මට හිතුනා මේකට උත්තරේ බ්ලොග් පෝස්ට් එකක් විදිහටම ලියන්න. මොකද මේක මෙයාට විතරක් එන ප්‍රශ්ණයක් වෙන්න බැරි නිසා. එහෙනම් ඔන්න අපි වැඩේට බහිමු.

*. මෙයාගේ පළවෙනි ප්‍රශ්ණය වෙන්නේ 'අපි කැමති Template එකක් (බ්ලොගර් තීම් එකක්) අප්ලෝඩ් කරලා ඒකට අලුතින් පිටු එකතු කරන හැටි' කොහොමද කියලයි. 

අලුතින් පිටු එකතු කරගන්නවා කියන එක ලොකු දෙයක් නෙමේ. ඒක බ්ලොගර් වලම එන ලේසි වැඩකෑල්ලක්. ඉතිං template එකක් අප්ලෝඩ් කරන්න දන්නේ නැත්නම් මෙතන ක්ලික් කරලා ගිහින් පළවෙනි වීඩියෝව බලන්න. ඉතිං මේ අලුතෙන් පිටුවක් එකතු කරන විදිහනේ අහල තියෙන්නේ. ඒකට කරන්න තියෙන්නේ පොඩි දෙයයි. 

1. මුලින්ම ඔයාගෙ බ්ලොගර් Dashboard එකට ලොග් වෙන්න.

2. ඊට පස්සේ එතනින් Edit Posts කියන එක උඩ ක්ලික් කරන්න. එතකොට අලුත් වින්ඩෝ එකක් විවෘත වෙනවා. එතනින් Edit Pages කියන එක උඩ ක්ලික් කරන්න.

3. ඊට පස්සේ ඒක ක්ලික් කරාට පස්සෙ අලුත් වින්ඩෝ එකක විවෘත වෙනවා. ඊට පස්සේ එතන තියෙන  NEW PAGE  කියන එක උඩ ක්ලික් කරන්න.

4. ඊට පස්සේ විවෘත වෙන වින්ඩෝ එක තමයි ඔයාගෙ අලුත් පේජ් එක. ඊට පස්සේ එතනතියෙන Page Title කියන එක ඉස්සරහින් ඔයාගෙ පේජ් එකට මාතෘකාවක් ලබා දෙන්න. පහළින් තියෙන ලොකු කොටුවට ඔයාට ඕනි දේවල් ලියන්න. දෙයක් මතක තියාගන්න. තව වෙනකම් බ්ලොගර් වලින් පේජ් වලට කමෙන්ට් දාන විදිහක් හදල නෑ.

**. මෙයාගේ දෙවෙනි ප්‍රශ්ණය තමයි 'Drop Down Menu එකතු කරන විදිහ සහ අයින් කරන විදිහ' කොහොමද කියලා.

දැන් තියෙන ගොඩක් blogger templates වල ඩ්රොප් ඩවුන් මෙනු ඇතුලත් වෙලයි තියෙන්නේ. ඒත් මෙනු ඇතුලත් වෙලා නැති ඒවත් තියෙනවා. අන්න ඒක නිසා මේකත් කියන්නම්. මුලින්ම බලමු කොහොමද Drop Down menu එකක් නැති template එකකට මෙනු එකක් ඇතුලත් කරන්නේ කියලා.

1. මුලින්ම ඔයාගෙ Blogger account එකට log වෙන්න.

2. ඊට පස්සේ Dashboard --> Design --> Edit HTML වලට යන්න.

3. ඊට පස්සේ ]]></b:skin> කියන code එක හොයාගන්න. ඒ code එක හොයාගත්තට පස්සේ පහළ තියෙන Code එක ඒ කෝඩ් එක ඉස්සරහට paste කරන්න.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

4. දැන් </head> කියන code එක හොයාගන්න. හොයාගෙන ඉවර වෙලා ඒකට ඉස්සරහින් මේ code එක කොපි පේස්ට් කරන්න.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

5. දැන්  Save Template  කියන එක click කරන්න. දැන් ගොඩක් දුරට වැඩ ඉවරයි.

6. ඊට පස්සේ තියෙන්නේ menu එක ඇතුලත් කරන්න. ඒකට Dashboard --> Design වලට යන්න.

7. ඊට පස්සේ Page Element කියන කොටසට එනවනේ. අන්න කොටසින් Add a Gadget කියන එකක් උඩ ක්ලික් කරන්න.

8. ඊට පස්සේ 'HTML/Java Script' කියන එක තෝරන්න. ඊට පස්සේ පහළ දීල තියෙන code එක ඒක ඇතුලට කොපි පේස්ට් කරන්න.

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">BLOGSHAN</a></li>
  </li></ul>

 # - නමට අදාල URL එක ඇතුලත් කරන්න.


9. දැන්  Save  කියන එක click කරන්න.  දැන් ඒ save උන HTML/Java Script කෝඩ් එක ඔයාගෙ පිටුවේ උඩට ඇඳල දාන්න. ඊට පස්සේ Page Elements වල තියෙන දකුණූ අත පැත්තේ උඩම  Save  කියන එක click කරන්න. දැන් වැඩේ හරි.