.: Мэдээллийн Технологи :.

Удахгүй болох шинэ жилийн мэнд хүргье!

Блогоо минийх шиг гурван баганатай болгохыг хүсч байгаа хүмүүст зориулж нэг бяцхан тусламж бэлтгэснээ хүргье.
Ийм болгохын тулд өөрийн блог руугаа нэвтэрч ороод Загвар->Загварын HTML засах гэсэн командыг сонгонгуут таны блогын загвар текст байдлаар харагдана. Алхам бүрийг анхааралтай дагаад хийвэл хэн ч гэсэн л өөрийн блогоо ийм болгох боломжтой шүү.

1. Өөрийн хуучин загвараа хадгалж авах. Явцын дунд ямар нэгэн алдаа гарвал буцааж өөрийн блогоо хуучнаар нь сэргээхийн тулд эхлээд бүх кодыг идэвхижүүлж байгаад хуулж ямар нэгэн текст файл үүсгэж хадгалж аваарай. Хамгийн амрхан нь бол Windows-ийн өөрийнх нь текст засварлагчаар зүгээр л энгийн текст файл үүсгээд хадгалаарай. Тэгж мэдэхгүй бол сурсан Word дээрээ хадгална биз.
Зурган дээр өөийн чинь блогийн загвар код хэлбэрээр ийм харагдаж байна.


Тэгээд ямар нэгэн юм бүтэлгүйтсэн тохиолдолд буцаагаад хуулчихвал хуучин загвар чинь сэргэнэ.
2. Хуудасныхаа ерөнхий өргөнийг тодорхойлох. Бүгдээрээ миний блогын өргөн буюу 960px -ээр авъя. Мэдээж та нар өөрийн дураар өөрчилж болно. Гэхдээ дараа дараагын тохиолдолд энэ өргөнөөс хамаарч нилээд зүйл өөрчлөгдөж байх тул хоорондох уялдаа холбоог нь сайн анхаарч тооцож байж өөрчлөөрэй.

за ингээд өөрчлөх зүйл рүүгээ оръё.

HTML код дотроос хэрэгтэй зүйлээ олоход олон удаа хайх хэрэг гарах бөгөөд үүнийг Firefox ийн өөрийнх нь хайлтаар хийгээрэй. Ctrl+F товчны хослолоор Firefox-ын чинь доод хэсэгт хайлтын талбар нээгдэнэ. Түүн дээр хайх зүйлээ бичингүүт шууд автоматаар хайсан зүйл дээр чинь очно.

3. Хуудасны толгойн хэсгийн өргөнийг өгөхийн тулд.Хашилтыг нь дандаа орхиж бичнэ гэдгээ битгий мартаарай.
#header {
гэж эхэлсэн мөрийг хайж олоод өргөн буюу "width: 960px;" гэж өөрчилнө.

4. Блогийн ерөнхий өргөнийг тодорхойлж өгөх. Ингэхийн тулд
#content-wrapper {
гэж эхэлсэн мөрийг олоод өргөнийг  "width: 960px;" гэж өөрчилнө.

5. Блогын бичлэгүүд харагдах буюу үндсэн хэсгийн өргөнийг өөрчилөх.
#main-wrapper {
гэж эхэлсэн мөрийг олоод 
"margin-right:10px;
 width: 540px;
 float: right;"
гэж өгөөрэй. Энэ нь 540 цэгийн өргөнтэй бөгөөд баруун талын баганаасаа 10 цэгийн зай авч  байгааг зааж өгч байна.

6. За одоо
#sidebar-wrapper {
гэж эхэлсэн мөрийг хайж олоод
"margin-left: 14px;
  width: 190px;
  float: left;"
гэж өгөөрэй. Энэ нь зүүн талын мэнюг тодорхойлж өгч байна. Хэрэв та мэнюгээ ардаа зурагтай болгоё гэвэл энд
background-image:url("http://www.zurgiin_hadgalsan_zam/zurgiin.ner");
гэж өгөөрэй. Өнгийг нь өөрчилье гэвэл
 background-color: #ungunii_kod;

7. За одоо бүгдээрээ шинээр нэмж байгаа 3 дахь баганаа бичлэгийн баруун талд харагдахаар тохируулъя.
Ингэхийн тулд 6 дахь алхам дээр хийсэн тохируулгын дууссан тэмдэглэгээ буюу "}"-хаагдаж байгаа хаалтыг олоорой.
Өөрөөр хэлбэл 
#sidebar-wrapper {
  margin-left: 14px;
  width: 190px;
  float: left;
  ...
  бусад тохируулгууд...
} энд энэ хэсэг дуусч байна.
Үүний араас шинэ хэсгийн тохируулгыг бичье. Ийм нэртэй элемэнт шинээр орж ирж байгаа учраас олохгүй бол битгий гайхаарай. Зүгээр л оруулаад өгчих.

#sidebar-wrapper-rechts {
  padding:5px;
  margin-right: 14px;
  width: 170px;
  float: right;
  background-color: *$mainBgColor; //Арын өнгө, өөрөө шинэ өнгөний код өгч болно.
  background-image:url(Зураг өгөх бол энд зургийн зам болон нэрийг зааж өгнө. );

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

8. Тохируулгын хэсэг ингээд дуусч байгаа бөгөөд одоо ерөнхий хуудсан дээрээ баруун талын баганыг шинээр үүсгэе.
Ингэхийн тулд доорх хэсгийг хайж олоорой. Кодын доогуур хэсэгт байгаа. 
    <div id="header-wrapper">
        <bb:section class="header" id="header" maxwidgets="1" showaddelement="no">

         <bb:widget id="Header1" locked="false" title="????????? ???? (??????)" type="Header"></bb:widget></bb:section>
    </div>

  <div id="content-wrapper">
 
  <div id="crosscol-wrapper" style="text-align:center">
        <bb:section class="crosscol" id="crosscol" showaddelement="no"></bb:section>
   </div>

Зарим нэг утгууд нь заавал үүнтэй таарах албагүй гэдгийг анхаараарай. Жишээ нь: Миний блогын гарчиг энд асуултын тэмдэгүүд болж харагдаж байна.
Сайн анхааралтай харж зөв хэсгийг олоорой. Буруу газар оруулж өгвөл мэдээж ажиллахгүй болно.
Үүний доороос шинэ мөр аваад доорх кодыг оруулж өгнө.

<div id="sidebar-wrapper-rechts">
<bb:section class="main" id="main" showaddelement="no">
    $$$$$$$$$$$$$$$$$$$$$$$$
</bb:section>
</div>

Дээрх $$$$$$$$$$$$$$$$$$$$$$$$ бол зүгээр жишээ бөгөөд энд сүүлд нь үүний оронд хэрэгтэй вижэтүүдийг хуулж тавих юм гэдгийг тэмдэглэж байна.

9. За одоо чиний өөрийн чинь сонгосон вижэтүүд кодонд доорх байдлаар харагдана. Зарим зүйлс зөрж магадгүй гэдгийг анхаараарй. Хамгийн чухал нь Эхний 2 мөр болон сүүлийн 2 мөр ийм дараалалтай харагдана.

<div id="sidebar-wrapper">
 <bb:section class="main" id="main" showaddelement="no">
   <bb:widget id="BlogArchive1" locked="false" title="??????? ?????" type="BlogArchive"></bb:widget>
   <bb:widget id="RecentComment2" locked="false" title="?????????" type="RecentComment"></bb:widget>
    <bb:widget id="Blog1" locked="false" title="??????? ??????" type="Blog"></bb:widget>
  </bb:section>
</div>

Одоо бид өөрийн үүсгэсэн баганадаа энэ вижэтүүдээс харагдуулахын тулд хүссэнийгээ хуулаад дээрх $$$$$$$$$$$$$$$$$$$$$$$$  -ийн оронд тавихад болно.
Жишээ нь: <bb:widget id="BlogArchive1" locked="false" title="??????? ?????" type="BlogArchive"></bb:widget>
гэсэн хэсгийг хуулж тавихад ийм байдалтай харагдана.
<div id="sidebar-wrapper-rechts">
<bb:section class="main" id="main" showaddelement="no">
    <bb:widget id="BlogArchive1" locked="false" title="??????? ?????" type="BlogArchive"></bb:widget>
</bb:section>
</div>

За ингээд өөр вижэт баруун талдаа харагдуулахыг хүсвэл иймэрхүү байдлаар хуулаад тавиарай.
Мэдээж та блогийн архивыг баруун зүүн багануудад 2 удаа харахгүйн тулд хуучин хэсэг дээрхээ арилгаарай.  

9. За ингээд чиний блог одоо 3 багантай боллоо. Нэг зүйл анхааруулж хэлэхэд бид хичнээн нэг шинэ багана нэмсэн ч гэсэн загварын засварын хэсэг


гэж харагдсан хэвээрэй үлдэнэ шүү. Шинэ вижэт үүсгэсэн баруун баганадаа нэмье гэвэл эндээ вижэтээ нэмж өгчөөд дараа нь код руу нь орж байгаад тэр вижэтээ шинэ хэсэг рүүгээ дээрх маягаар хуулж өгөөрэй.


 Чадах чинээгээрэй л ойлгомжтой тайлбарлалаа. Гэсэн хэдий ч ойлгомжгүй зүйл байж магадгүй.
Асуух зүйл байвал асуугаарай.