 |
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.
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='"post-body-" + 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='"post-body-" + 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='"post-body-" + 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 .<div class='post-body entry-content' expr:id='"post-body-" + 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>
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='"post-body-" + 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='"post-body-" +
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