Amatullah's Page

Cara Memodifikasi Formulir Komentar Blogger

Posted: 01 May 2010 08:16 AM PDT

Bagi sebagian desainer membuat formullir komentar web tampil cantik dan unik sangat mudah. Tapi bagi sebagian orang atau blogger mungkin hal itu merupakan perkara yang sulit atau tidak mungkin. Tapi hari ini InsyaAllah hal itu bukan hal yang mustahil lagi bagi blogger karena kita bisa mendapatkan berbagai tutorial yang dapat memandu kita step by step mewujudkan harapan kita membuat dan menyesuaikan formulir komentar blogger sesuai keinginan kita, dengan cara terbaik hanya dengan sedikit penambahan CSS dan HTML.

Silahkan lihat beberapa contoh berikut:

Menggunakan background warna:

Menggunakan background image/ gambar:

Menggunakan background warna dan image:

Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode di berikut: (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)

<div class='comment-form'>

4.Ganti dengan kode berikut:

<div id='ib-form'>

5. Tambahkan kode CSS berikut diatas ]]></b:skin>

#ib-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Sedikit penjelasan tentang bagian-bagian penting pada kode CSS di atas untuk membantu sobat menyesuaikan tampilan formulir komentar sesuai dengan keinginan sobat:

Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a

Berikut adalah rincian untuk setiap bagian dari kode CSS diatas
1. Kustomisasi Untuk Mode Aktif

#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini

* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat

* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.

* padding: jarak antara border dan teks

* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"

* width:95%;height:250px; Lebar dan tinggi formulir komentar

2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.

3. Kustomisasi Untuk Link Warna
#ib-form a

Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.

Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?

Oya masih ada pesan sponsor lagi, membuat formulir komentar dibawah postingan lihat disini, kalau ingin memodifikasi tampilan komentar admin agar berbeda dengan pengunjung blog, lihat disini

Pingin buat scroll pada daftar komentar yang panjang? Lihat disini. Mengatasi kolom komentar yang bermasalah, lihat solusinya disini yuk!

Screnshot sample image dua dan tiga saya ambil dari blog sobat blogger Rizky. Makasih ya! Yang lain dari blog eksperimen saya sendiri.

Featured Posts Slider Using JQuery (Menu Slider Part 7)

Posted: 01 May 2010 03:32 AM PDT

Tutorial kali ini merupakan tutorial membuat featured posts slider ke-7 yang terispirasi dari free blogger template Glory. Bagi yang ingin mencoba menggunakan featured post slider ini pada salah satu blognya atau sekedar untuk latihan desain template silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas ]]></b:skin>

/* featured fade */

#wrapper-featured{
    padding:10px 0 ;
    width:650px;
    height: 326px;
    margin:0 ;
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIf5_AoJI/AAAAAAAABTU/fV-Ca8f3_lI/s1600/bg_featured.jpg) no-repeat;
    position:relative;
    }
#wrapper-myslides {
    width:550px;
    height:210px;
    padding: 0 0 ;
    margin: 3px 0 0 10px;
    position:relative;
    float:left;
    }
#myslides {
    width:550px;
    height:210px;
    padding: 0 0 50px;
    margin: 0 18px ;
    overflow:hidden;
    }
.panel{
    width:550px;
    height:210px;
    }
#myslides img.crop-foto {
    margin:8px 10px 10px 9px;
    border:1px solid #fff;
    display:block;
    position:absolute;
    right:3px;
    top:0;
    }
.featured-entry {
    text-align:left;
    line-height:1.5em;
    font-style:italic;
    font-size:12px;
    font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
    padding: 20px 10px 0;
     width:280px;
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    }
h3.featured-title {
    font-size:22px;
    text-align:left;
    font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
    margin:10px 0 5px;
    padding:0 0 5px;
    font-weight:normal;
    line-height:1em;
    font-style:normal;
    }
h3.featured-title a:link, h3.featured-title a:visited{
    color:#fff;
    }
h3.featured-title a:hover {
    color:#b1e1ff;
    }
#nav-slides a#prev {
    position:absolute;
    bottom:105px;
    left:135px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(http://4.bp.blogspot.com/_j82W7u9kZbs/S4PIgGqiI2I/AAAAAAAABTc/TVJVRxgolPg/s400/prev.jpg) no-repeat;
    }
#nav-slides a#prev:hover{
    background: url(http://3.bp.blogspot.com/_j82W7u9kZbs/S4PIgrELHJI/AAAAAAAABTk/7fHHap-Uvks/s400/prev_hover.jpg) no-repeat;
    }
#nav-slides a#next {
    position:absolute;
    bottom:105px;
    left:160px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIg6l0qKI/AAAAAAAABTs/FA8fvPY0wlA/s400/next.jpg) no-repeat;
    }
#nav-slides a#next:hover{
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIhJz7YvI/AAAAAAAABT0/B6PleC4jlUk/s400/next_hover.jpg) no-repeat;
    }

Catatan: untuk yang terbiasa ngedit CSS, kode diatas masih memungkinkan untuk diedit dan modifikasi termasuk background image silahkan ganti dan sesuaikan dengan template blog sobat. Oke, selanjutnya...

3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah ketiga abaikan saja,

4. Tambahkan juga script berikut: (Script berikut bisa sobat upload lagi pada tempat hosting masing masing)

5. Tambahkan Kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>

<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>

<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title=POST TITLE>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div>
</div>

</div>
</div>

</div>

Catatan: Silahkan isi tulisan berwarna merah dengan titel postingan, deskripsi singkat postingan dan ganti url image atau thumbnails dari menu slider diatas

Selesai, jangan lupa save/ simpan template dan lihat hasilnya.

TUGAS

Minggu, 02 Mei 2010

Amatullah's Page

Amatullah's Page

0 komentar:

Poskan Komentar

Oke Time

Archives

Infolinks In Text Ads

Recent Posts

Categories

HOT LINK