CARA MEMBUAT KOTAK CCS POSTINGAN MENARIK | SIMPLE UNTUK BLOG

  agar tampilan blog menarik , biasanya blog akan lebih bagus dan enak untuk di lihat dengan menggunakan kotak pada postingan dan gadget-gadgetnya agar terlihat lebih rapih .


   sebenarnya kita dapat membuat pada area posting dan gadget dengan menggunakan cara html / ccs ,
pada postingan saya kali ini , saya akan menggunakan kode kotak ccs yang menarik dan juga simple
jika anda juga ingin membaca artikel tentang membuat kotak menggunakan HTML   klik disini.
namun jika anda ingin membuat kotak dengan menggunakan ccs silakan ikuti tutorial berikut .

           cara untuk membuat kotak ccs pada blog :


1. login blogger

2. klik rancangan , kemudian klik edit html

3. agar aman donwload template terlebih dahulu (untuk berjaga-jaga jika terjadi error)
   
4. klik/centang Expand Template Widget

5. cari kode berikut :     ]]></b:skin>
( agar lebih mudah mencari kode tersebut silakan tekan tombol  ctrl+F dan ketik kode tersebut di sana)

6. kemudian letakkan script berikut ini tepat di atas kode  ]]></b:skin>

/*Round corner*/
#xsnazzy h1, #xsnazzy h2, #xsnazzy p 
{margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:0px;}
.xtop, .xbottom 
{display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 
{background:#FFF; border-left:1px solid 
#CCC; border-right:1px solid #CCC;}
.xb1 {margin:0 5px; background:#CCC;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent 
{display:block; background:#FFF; 
border:0 solid #CCC; border-width:0 1px; padding:10px;}

7. kemudian salin kode di bawah ini tepat dimana anda akan menggunakan kotak tersebut

<div id="xsnazzy">
<b class="xtop"></b><b class="xb1">
</b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
<div class="xboxcontent">

Isi artikel,konten,gadget script,content,dan lainnya pada blog
ataupun website anda yang ingin anda buat garis tepi kotak 

</div>
<b class="xbottom"></b><b class="xb4">
</b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>

8. kode yang berwarna biru adalah isi dari artikel dan lainnya yang ingin anda buat kotak .

contoh dari kotak tersebut :
sama seperti yang saya gunakan sa'at ini pada postingan saya (jika tertarik silakan coba)

atau jika anda ingin menggunakan kode kotak ccs tersebut pada postingan anda ,
akan tetapi anda tidak mengerti ????

silakan ikuti tutorial memasang kotak ccs pada postingan blog berikut ini :

1. login blogger

2. klik rancangan , kemudian klik edit html

3. agar aman donwload template terlebih dahulu (untuk berjaga-jaga jika terjadi error)
   
4. klik/centang Expand Template Widget

5. cari kode berikut
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<data:post.body/>

NB : pencarian dilakukan satu persatu , contoh .. cari kode berikut ini terlebih dahulu
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
       otomatis kode ini  <data:post.body/>  akan ada tepat di bawah nya .
        atau sebaliknya ..

(agar lebih mudah mencari kode tersebut silakan tekan tombol  ctrl+F dan ketik kode tersebut di sana)

6. kemudian letakkan kode script berikut tepat di atas dan di bawah kode pada no 5

<div id="xsnazzy">
<b class="xtop"></b><b class="xb1">
</b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
<div class="xboxcontent">

Isi artikel,konten,gadget script,content,dan lainnya pada blog
ataupun website anda yang ingin anda buat garis tepi kotak 

</div>
<b class="xbottom"></b><b class="xb4">
</b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>

7.jika anda masih bingung silakan lihat contoh berikut, hasilnya akan seperti ini :

<div id="xsnazzy"> <b class="xtop"></b><b class="xb1"> </b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b> <div class="xboxcontent">

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> <data:post.body/>

</div> <b class="xbottom"></b><b class="xb4"> </b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b> </div>

8. kemudian save template , dan lihat hasil nya .


Atau anda juga ingin membuat kotak pada judul postingan blog anda .
( seperti yang saya gunakan pada blog saya )

silakan ikuti tutorial berikut untuk membuat judul postingan dengan kotak :

1. login blogger

2. klik rancangan , kemudian klik edit html

3. agar aman donwload template terlebih dahulu (untuk berjaga-jaga jika terjadi error)
   
4. klik/centang Expand Template Widget

5. cari kode berikut    <b:includable id='post' var='post'>
   
   (gunakan ctrl+F agar lebih mudah dan cepat)

6. setelah itu copy paste kode berikut ini tepat di bawah kode   <b:includable id='post' var='post'>

<div id="xsnazzy"> <b class="xtop"></b><b class="xb1">

</b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
<div class="xboxcontent">

7.kemudian cari kode berikut
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

8. setelah itu copy paste kode beriktu ini tepat di atas kode no 7

</div>
<b class="xbottom"></b><b class="xb4">
</b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>

NB PENTING :

jika anda telah menggunakan kotak pada postingan anda seperti 
tutorial sebelumnya(tutorial memasang kotak ccs pada 
postingan blog) maka letakkan kode no 8 tepat di atas kode 

<div id="xsnazzy"><b class="xtop"></b><b class="xb1">
</b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
<div class="xboxcontent">

yang telah anda letakkan sebelumnya pada 
(tutorial memasang kotak ccs pada postingan blog)

9. contoh hasilnya akan seperti berikut :

<b:includable id='post' var='post'>

<div id='xsnazzy'>
<b class='xtop'/><b class='xb1'/>
<b class='xb2'/><b class='xb3'/><b class='xb4'/>
<div class='xboxcontent'> 
 
<div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

</div>
<b class='xbottom'/><b class='xb4'/><b class='xb3'/>
<b class='xb2'/><b class='xb1'/>
</div>
<div id='xsnazzy'>
<b class='xtop'/><b class='xb1'/><b class='xb2'/><b class='xb3'/>
<b class='xb4'/>
<div class='xboxcontent'>
<div class='post-body entry-content' 
expr:id='&quot;post-body-&quot; +
 data:post.id'>

      <data:post.body/>

10. terakhir save template dan lihat hasil nya

Zenx: saya telah menggunakan tutorial cara membuat kotak ccs pada postingan blog dan berhasil ..
penting : dari hasil yang telah saya coba , jika anda tidak mencentang Expand Template Widget maka kode-kode yang di cari di atas tidak akan muncul / tidak ada ..

tutorial ini untuk blogger pemula ,. untuk para master blogger, mohon kritikan dan sarannya
terima kasih .