Home ยป Cara membuat 1, 2, 3 kolom gadget di atas atau di bawah header dan pasca

Cara membuat 1, 2, 3 kolom gadget di atas atau di bawah header dan pasca

Cara membuat kolom gadget berarti menambah atau menciptakan gadget kolom yang terletak di mana keinginan dan kebutuhan dengan memasukkan blog dan membuat scrift kode HTML itu sendiri, biasanya para blogger menambahkan kolom gadget digunakan untuk iklan atau menambahkan aksesoris sehingga blog terlihat blog yang menarik, lakukan hal berikut:



A. How to make 1 column gadget above post, do the following:
  1. Sign in on blogger
  2. Click on More options
  3. Click the Templete
  4. click Edit HTML
  5. Writing a check Expand Widget Templates
  6. Find the code <b: section class = 'main' id = 'main' showaddelement = 'no' > (using the CTRL + F3 to facilitate the search code)
  7. If you have found replace the words showaddelement = 'no' be showaddelemen t = 'yes'
  8. Click the Save and see the results in the layout above post
B. How to make 1 column header gadget above, do the following:
  1. Sign in on blogger
  2. Click on More options
  3. Click the Templete
  4. click Edit HTML
  5. Writing a check Expand Widget Templates
  6. Find the code <div class = "header region-inner-inner"> (use the CTRL + F3 to facilitate the search code)
  7. Add this scrift code b: section class = "header" id = "topheader" preferred = "yes" > 
    the code below
  8. Further below the above code will see this code <b: section class = "header" id = "header"maxwidgets = "1" showaddelement = "no" > replace the words showaddelement = 'no' beshowaddelement = 'yes'
  9. Click Save and see the results in the above post layout
How to put them into place see the picture below




C. How to make 1 column gadget under the header, do the following:
  1. Sign in on blogger
  2. Click on More options
  3. Click the Templete
  4. click Edit HTML
  5. Writing a check Expand Widget Templates
  6. Find the code  ]]> </ b: skin> 
  7. (Use the CTRL + F3 to facilitate the search code)
  8. Copy and paste the CSS code below and place above the code  ]]> </ b: skin> 


  9. # Under_header
    {float: left; width: 100%;
    }

  10. Find the code   <div class = "header region-inner-inner" > (use the CTRL + F3 to facilitate the search code)
  11. Add code <b: section class = "header" id = "underheader" preferred = "yes" > put below code <div class = "header region-inner-inner" >
  12. Click the Save and see the results in the above post layout
D. How to make a 2 column under the Header gadget do the following:
  1. Sign in on blogger
  2. Click on More options
  3. Click the Templete
  4. click Edit HTML
  5. Writing a check Expand Widget Templates
  6. Find the code  ]]> </ b: skin>  (use the CTRL + F3 to facilitate the search code)
  7. Copy and paste the CSS code below and place above the code  ]]> </ b: skin>

  8. # Box-widget-columns {clear: both;
     }
     . Boxes-widget {padding: 10px 0px 10px 10px; border: 1px dotted $ Bordercolor;
     }

  9. After that find the code below:

    1. <div id="main-wrapper">
    2. or  <div id="main-outer">
    3. or <div class="main-outer"> according to the HTML version of his comrades (use the CTRL + F3 to facilitate the search code)

  10. Copy and paste the code below and place on one of the above code

  11. <div id='box-kolom-widget'>
    <div id='box1' style ='width: float: 50%; text-align: left; margin:0; left;'>
    <b: section class = ' box-widget'id = 'col1' preferred = 'yes' style = 'float: left;' />
    </ div>
    <div id = 'box2' style = 'width: 50%; float: left; margin: 0 ; text-align: left; ">
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </ div>
    <div style = 'clear : both; '/>
    </ Div>

  12. Click the preview , who knew there was an error
  13. Click the Save


E. How to make a 3 column under the Header gadget do the following:


  1. Same way as to make 2 columns gadgets just replace scrift HTML and CSS code, such as Copy and paste the CSS code below and place above the code ]]> </ b: skin>

  2. <div id="box3" margin: 0; style="float: left; text-align: left; width: 35%;"> <b: section class = "box-widget" id = "col3" preferred = " yes "style =" float: left; ">

  3. After that find the code below:

    1. <div id="main-wrapper">
    2. or  <div id="main-outer">
    3. or <div class="main-outer"> according to the HTML version of his comrades (use the CTRL + F3 to facilitate the search code)

  4. Copy and paste the code below and place on one of the above code

  5. <div id='box-kolom-widget'>
    <div id='box1' style='width: float: 35%; text-align: left; margin:0; left;'>
    <b: section class = ' box-widget 'id =' col1 'preferred =' yes' style = 'float: left;' />
    </ div>
    <div id = 'box2' style = 'width: 30%; float: left; margin: 0 ; text-align: left; ">
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </ div>
    <div id = 'box3 'style =' width: 35%; float: left; margin: 0; text-align: left; ">
    <b: section class = 'box-widget' id = 'col3' preferred = 'yes' style =' float : left; '/>
     </ div>
    <div style='clear:both;'/>
    </ Div>

  6. Click the Save

                                                                                                                          Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

                                                                                                                          Christian angkouw Sobat sedang membaca artikel tentang Cara membuat 1, 2, 3 kolom gadget di atas atau di bawah header dan pasca. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

                                                                                                                          :: Get this widget ! ::

                                                                                                                          No comments:

                                                                                                                          Post a Comment