බ්ලොග් එකට Multi Column Footer එකක් දමන ආකාරය

හොඳයි යාළුවනේ අද මන් කියල දෙන්නෙ බ්ලොග් එකට Multi Column Footer එකක් දමන ආකාරය යි. එක එක අය භාවිතා කරන්නෙ එක එක Template නේ. ඒ එක එක Template වල අපිට Widget දා ගන්න පුලුවන් වන්නෙ එක එක තැන් වලට. ඒත් ගොඩක් අය අයට වැදගත් වෙයි පහත ආකාරයට Footer එකේ Widget වලට ඉඩක් ලැබෙනවම්.

ඉතින් අපි බලමු කොහොමද මේක කරන්නෙ කියල.

Step:1

• මුලින්ම blogger Dashboard එකට යන්න
• ඊට පස්සෙ template/edit Html: යන්න
• දැන් මේ code එක හොයා ගන්න ]]></b:skin>  (ctrl+f මගින් ලේසියෙන් හොයාගන්න පුලුවන්)
• පසුව එම code එකට යටින් මන් මේ පහතින් දාල තියන code එක past කරන්න

    /*----- FOOTER WIDGET -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

Part: 2

දැන් </body> tag  එක හොයා ගෙන එයට ඉහලින් පහත code එක past කරන්න

    <div id='lower'>
    <div id='lower-wrapper'>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>


    <div style='clear: both;'/>
    </div> </div>

ඊට පසුව SAVE කරගන්න:

දැන් Layout Option වලට හිගින් බලන්න මේ වෙනස add වෙලාද කියල

ඔයාලට මෙහි column 3ක් pපමණක් ඇතිනම් ඉහත නිල් පැහැති code කැබැල්ල ඉවත් කිරීමෙන් ඒ වෙනස පහසුවෙන් කරගැනීමට හැක.


ගැටලුවක් ඇති උනොත් comment එකක් දාන්න. නැතත් commentඑකක් දැම්මට කමක් නෑ.

---

අපිට Like එකක් දාන්න අමතක කරන්න එපා.