Thursday, September 29, 2011

cara membuat kotak menggunakan CSS pada 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 .

catatan :
Dengan memanfa'atkan kode CSS pada blog untuk membuat kotak, kita dapat mengubahnya sesuka hati dan yang pasti JAUH LEBIH KEREN .hehe :D
dan dengan menggunakan kode CSS pada blog, anda akan jauh lebih mudah untuk memodivikasi kotak-kotak pada blog anda.

   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   .
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

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

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

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

admin : 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 .

No comments:

Post a Comment

Post a Comment