Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Buat Variable Definitions u Background, Teks & Border Blogger Threaded Comment

Sebuah cara untuk mempermudah memilih jenis font, warna teks, warna background dan border di kotak komentar blogger. Dengan membuat sebuah variable definitions yang berkaitan dengan ke empat variable di atas, maka blogger akan lebih mudah mengganti font, warna teks, background dan border kotak komentar dengan memanfaatkan fitur Ubah suaian » Perancang Template Blogger. Jika sebelumnya anda hanya bisa merubah beberapa variable deperti warna background header, body, font posting, sidebar dan beberapa yang lain, maka dengan adanya variable definitions kotak komentar akan ada tambahan item kotak komentar ("GR Kotak Komentar") yang berisi pilihan font, warna font, background dan border, seperti yang dapat anda lihat di gambar (Silahkan klik gambar untuk memperbesar)

Kode CSS
.comments .thread-chrome.thread-expanded .comment{
        background-color: $(GRbgreplay);
        border-radius:8px;
        border:1px solid $(GRwarnaborder);
}
.comments .thread-chrome.thread-expanded .comment{
        padding:5px;
}
.comments .comment-block{
        background-color: $(GRbgkomentar);
        padding:5px 8px;
        border-radius:5px;
        border:1px solid $(GRwarnaborder);
        margin:5px 5px 0 50px;
}
.comments .comments-content .comment-content{
        font: $GRtekskomentar;
        color: $GRwarnateks;
}
xHTML Variable Definitions blogger comment
<Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>  
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/> 
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/> 
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/> 
</Group>
  1. Login ke Blogger
  2. Template
  3. Backup/Restore Template. Panduannya bisa dibuka disini
  4. Edit HTML
    Template › Edit HTML
    • Procced (Lanjutkan)
    • Cari Kode : ]]></b:skin>
    • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
    • Copy dan paste-kan kode css di atas kode ]]></b:skin>
    • Cari Teks : Variable definitions
    • Letakkan kode xHTML di bawah teks tersebut di atas beberapa variable definitions yang sudah ada di dalamnya. Anda bisa juga meletakkan di ujung paling bawah setelah variable definitions default blogger.
    • Simpan Template/Save Template
  5. Selesai...
  6. Lanjutkan dengan klik Ubah suaian

    Perancang Template Blogger

    • Tingkat Lanjut
    • Cari dan klik GR Kotak Komentar. Jika halaman monitor tak muat, silahkan perkecil hingga 75% melalui zoom browser atau gunakan Ctrl dan mouse untuk perkecil tampilan.
    • Pilih font, warna font, background & border
    • KLik Terapkan ke blog.
    • KLik Kembali ke blogger
  7. Buka halaman posting, buat komentar dan lihat hasilnya!

Catatan:

Buka link berikut untuk tutorial blogger threaded comment lainnya berikut demo:

Best Blogger Hacks


Posisi kode css terhadap ]]></b:skin>
.comments .thread-chrome.thread-expanded .comment{
        background-color: $(GRbgreplay);
        ... dst
}
.comments .thread-chrome.thread-expanded .comment{
        padding:5px;
}
.comments .comment-block{
        background-color: $(GRbgkomentar);
        ... dst
}
.comments .comments-content .comment-content{
        font: $GRtekskomentar;
        color: $GRwarnateks;
}

]]></b:skin>

Posisi xHTML Variable definitions
/* Variable definitions
   ====================
<Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>  
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/> 
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/> 
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/> 
</Group>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:




Posting » Kemis Legi, Juli, 26, 2012

» Happy Blogging - gubhugreyot «

4 komentar:

  1. owh pake variable CSS. ngerti2 :D

    BalasHapus
  2. matur nuwun, jadi ngerti yang namanya varible itu untuk apa. saya ber-obsesi pengen custom simple template standar bawaan, bisa jadi rasa template modivicated. semua fungsi berjalan normal, tapi belum seberapa. ini hasilnya gan,,,
    http://onlinepercetakan.blogspot.com

    BalasHapus

 
GR | Edited by | gubhug reyot