Merubah Tampilan Headings Blog

Heading yang mempunyai arti kepala, pasti kepala tempatnya diatas.. ya iyalah masa di bawah.. he.. he.. Seperti halnya juga headings di blog yang tempatnya diatas tapi jangan salah Saya kali ini tidak membahas tentang header blog tapi melainkan headings yang biasa ditulis dalam code HTML dan CSS adalah seperti h2, h3, h4 dan sebagainya, Contoh headings di blog adalah seperti judul posting, judul sidebar, tanggal posting dan judul blog.

Seperti biasa tutorial kali ini saya akan coba membahas tentang cara memodifikasi CSSnya, untuk merubah tampilan headings di blog kita hal yang harus kita lakukan adalah mengotak-atik CSS (cascading style sheets) dari yang standar ke bentuk yang kita inginkan.

Oke langsung saja Saya akan jelaskan satu persatu dan cara memodifikasinya...
Masuk menu Layout kemudian masuk Edit HTML untuk mengota-atik CSSnya

Merubah tampilan Judul Posting

Jika Anda ingin merubah tampilan judul posting Anda maka code CSS yang harus Anda cari adalah seperti dibawah ini

.post h3 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Sidebar

Cari code CSS dibawah ini

.sidebar h2{
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Blog di Header

Cari CSS dibawah ini

#header h1 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Tanggal Posting

Cari CSS dibawah

h2.date-header {
------------
-------------
-------------
-------------
}

Perhatikan Code CSS yang berwarna merah saja karena yang lainya adalah definisinya.
Nah sekarang kita lanjut ke cara otal-atik CSSnya biar tampilanya oke punya.

Ganti garis putus-putus dari code CSS diatas dengan definisi dibawah ini

margin:5px;
padding:5px;
border:1px dotted #000000;
Khusus Margin, Padding dan Border baca artikel ini

font-size:140%;
untuk menentukan besarnya huruf , bisa kamu ubah sesuai selera kamu misalnya kamu ubah menjadi 100% atau 150% dan juga satuanya bisa kamu ganti dengan px (pixels) misalnya 14px.

font-weight:bold;
Untuk menentukan ketebalan huruf, Bold adalah jika kamu ingin hurufnya tebal apabila kamu ingin merubah hurufnya biasa ganti bold dengan normal, dan apabila kamu ingin mengganti hurufnya menjadi miring kamu ganti saja dengan code italic.

text-align:right;
Untuk menempatkan posisi text jika kamu isi dengan right maka text akan berada di kanan dan apabila kamu isikan left text akan berada di kiri dan juga center maka textnya akan berada di tengah.

color:#FFFFFF;
Untuk memberi warna huruf, #FFFFFF adalah code warna untuk warna putih carilah code warna yang sesuai dengan keinginan kamu di http://colorschemer.com/online.

Background:#000000;
untuk memberi warna background. silahkan ganti code warna sesuai keinginan kamu di http://colorschemer.com/online untuk mencari code warna.

text-transform:uppercase;
uppercase untuk menampilkan hurufnya dengan huruf besar semua meski dalam pengaturan anda menuliskan huruf kecil. jika Anda ingin mengubah dengan huruf kecil semua ganti dengan lowercase dan jika ingin huruf depanya saja yang besar maka ganti dengan capitalize.

Nah jika di blog Anda pasti CSSnya sudah ada definisinya tinggal mengedit dan menambahi yang kurang-kurang saja.

Sekian dulu artikel ini Saya rangkum dari berbagai sumber salah satunya dengan sistem browsing dan baca artikel dari kang rohman.
Semoga bermanfaat bagi Anda....

Cara Menampilkan Satus G-Talk (Google Talk)

Satu lagi setelah kemaren membuat tutorial cara menampilkan status YM dan menampilkan Status Camfrog.. Kali ini akan membahas cara menampilkan status G-Talk atau Google Talk ini, Seperti Senior saya kang jaloee dia lebih suka berchatting atau ngobrol lewat G-Talk dari pada pkai YM (Yahoo Messenger).
Berhubung ada kaitanya dengan pemasangan di blog Saya coba Memberi informasi sedikit tentang cara menampilkan status G-Talk di Blog kita...

Mari ikuti langkah-langkah dibawah ini..

• Buka situsnya Google yang ini (disini)
  
  
• Kemudian Log In dengan Account Google kamu
  
  
• Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..
  
  
• Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate Codenya kedalamnya

Selain cara pemasangan saya akan menerangkan sedikit cara mengubah tampilanya...

untuk mengedit bentuk dari widgetnya klik Edit

Setelah klik Edit ada tampilan seperti dibawah ini


Title (optional) : untuk meberi judul Widget keseluruhan (dikosongi jika ingin menampilkan nickname)

Your nickname : Nickname yang kamu tampilkan di Widget

Style : Bentuk dari widget bisa kamu udah dg selera kamu sendiri

setelah semua udah di set klik tombol Update Badge

Lalu code dibawahnya kamu masukkan ke blog kamu
dan jika ingin mengubah panjang dan lebar tinggal cari code w=200 (untuk lebar) dan h=60 (untuk tinggi) silahkan ubah sesuai keinginan kamu

sekian semoga bermanfaat bagi anda sekalian...

Merubah Tampilan Gadget Link List

Satu lagi alternatif blogroll (tempat link teman di blog kita) setelah kemaren membahas tentang cara membuat blogroll dengan manual HTML sekarang saya akan mencoba membuat blogroll dengan gadget Blogger default yaitu link list.



Pada standartnya gadget ini tidak begitu sering digunakan oleh para peblogger karena jika Linknya banyak akan memenuhi halaman Blog kita dan jika linkya di klik tidak membuka jendela baru tapi malah akan membuka di jendela lama yang kita gunakan.

tapi saya ada suatu trik untu membuat gadget Link List ini menjadi sederhana dengan efek scroll dan efek pembukaan link di jendela baru.. Lihat contoh di blog saya (disini)


Masih banyak peblogger yang tidak ingin repot membuat tempat link teman dengan gadget bawaan dari blogger yaitu "link list" secara penggunaanya mudah gitu... Oke kita langsung saja ke cara pembuatanya

Lanhkah pertama yaitu sudah Log In ke blogger dan pasti sudah memasang Gadget "Link List"

Setelah langkah pertama terlaksanakan lalu masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"

Lalu Cari Code HTML seperti dibawah ini

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

Kemudian Ganti code diatas dengan Code dibawah ini..

<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>

Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linkya melebihi batas tinggi maka akan ada efek scrollnya

Kemudian Simpan dehh.. dan lihat hasilnya..

Gimana gampang kan silahkan berexperimen. yahh

Tampilan Komentar Owner Blog Berbeda

Kali ini Saya ingin membahas lagi tentang cara mengotak-atik comments setelah kemaren membahas soal cara memindah tanggal komentar di sebelah author tapi sekarang Saya akan membahas cara bagaimana memodifikasi tampilan komentar pemilik blog yang berbeda dengan pengunjung blog.



Dari keterangan gambar diatas menunjukkan tampilan Comments Owner blog berbeda dengan pengunjung blog.
Bagaimana menurut Anda.. apakah Anda ingin mencobanya. ikuti langkah-langkah dibawah

Langkah pertama yang harus Anda lakukan adalah Log in ke blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan Lupa centang "expand widget templates"
Lalu taruh Code dibawah ini diatas code ]]></b:skin>

.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}

Silahkan Edit Code CSS diatas sesuai kreasi Anda sehingga tampilan comments owner Anda menarik (Baca yang ini untuk mempelajari border, padding dan margin)

Langkah selanjutnya masih di menu Edit HTML dan tanda "Expand Widget Templates" masih tercentang
Kemudian Cari Code dibawah ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Perhatikan Code yang berwarna merah itu adalah code yang harus kamu tambahkan diantara code yang berwarna hitam diatas
Ingat penempatan code yang berwarna merah harus benar maka perhatikan code yang berwarna biru itu adalah Tagsnya

Kalau sudah kemudian Simpan dan lihat hasilnya

Sekian semoga bermanfaat
Dirangkum dari berbagai sumber dan disederhanakan

Memindah Tanggal Komentar Di Sebelah Author

Pada kesempatan kali ini Kita akan membahas mengenai komentar di blogspot, Nah jika Komentar box anda belum embeded comments blogger atau belum berada dibawah postingan silahkan baca yang ini dulu.
Tapi jika Commnets box anda sudah embeded mari kita otak-atik sehingga menjadi menarik, pada perjumpaan kali ini kita membahas mengenai tanggal komentar yang biasanya berada dibawah bagian pesan komentar, nah pada perjumpaan kali ini kita akan mengubahnya di sebelah Author commnets. Jika Anda belum Paham perhatikan gambar dibawah ini

Sebelum


Sesudah


Nah dari keterangam gambar diatas apakah anda sudah faham dan ingin membuatnya..?
kalau Anda ingin membuatnya silahkan ikuti cara dibawah ini

Pertama-tama seperti biasa harus Log in ke blogger terlebih dahulu, Kemudian masuk Menu Layout kemudian masuk menu Edit HTML

Jangan Lupa centang "expand widget templates"
Lalu cari code seperti dibawah ini

<data:commentPostedByMsg/> dan tambah tulisan "pada atau pada tanggal"

Kemudian Scroll agak kebawah sedikit dan temukan code seperti ini
<dd class='comment-footer'>

Dan dibawa code diatas ada code seperti dibawah

<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

perhatikan code yang berwarna merah..
Lalu pindah Code diatas kesamping code <data:commentPostedByMsg/> tadi

sehingga kurang lebih Codenya menjadi seperti dibawah ini

<data:commentPostedByMsg/>pada tanggal<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

Lalu Simpan dan lihat hasilnya deh...

Gimana gampang kan.. Artikel tentang mengotak-atik Kotak Komentar akan menyusul

Sekian semoga bermanfaat