Membuat Highlight Script Di Postingan

10:19:00 AM konixbam

Highlight fungsinya hanya untuk memperjelas kata-kata yang ingin ditonjolkan oleh penulis, karena itu disini pun berlaku hal yang sama. Tujuannya agar pembaca dapat dengan mudah mengetahui apa yang sebenarnya penulis tonjolkan/memperjelas.
Nah, untuk membuatnya disini, caranya sebagai berikut:blogger-emoticon.blogspot.com

Cara Pertama

1. Silahkan Log in terlebih dahulu ke account blogger anda.
2. Pada saat ingin membuat postingan baru, pilih yang "Edit HTML" bukan yang "Tulis".
3. Masukkan Script/kode berikut ke tulisan yang ingin dihighlight.


<div style="background: #DDE4FF; border:1px dotted #223344; padding:5px;">

"Tulisan Yang Ingin Ditonjolkan"

</div>


Keterangan:

background:#DDE4FF;
adalah warna background nya, bisa anda ubah sesuka anda lihat kode warnanya disini

border:1px dotted
adalah garis tepinya "1px" yaitu ketebalan dari garis tepinya, bisa diganti ketebalanya dengan yang lain sesuaikan dengan template Anda, sedangkan "dotted" adalah jenis border pada kotak highlight script kamu, ganti sesuai selera.

#223344 adalah kode warna border.

padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi.
tambahkan overflow:auto; jika ingin menambahkan fungsi scroll pada kotak Highlight.

Untuk background dengan gambar gunakan kode dibawah ini:


<div style="background:url(http://gambar_pilihan.jpg); width:440px; height:400px; padding:5px;">

"Tulisan Yang Mau Dihighlight"

</div>


Text yang tercetak tebal diatas adalah url gambarnya.
width:440px; adalah lebar kotak Highlight.
height:400px; adalah tinggi kotak Highlight.

contoh:
pangeran
kodok
suram
4. Terbitkan Entri. Selesai.blogger-emoticon.blogspot.com

Cara Kedua

1. Silahkan Log in terlebih dahulu ke account blogger anda lalu klik "Kustomisasi" dan masuk ke menu "Layout" atau "Tata Letak" kemudian masuk menu "Edit HTML".
2. Copy kode dibawah ini dan pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>


.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
}


Keterangan:

background:#DDE4FF;
adalah warna background nya, bisa diubah sesuka hai lihat kode warnanya disini.

border:1px dotted
adalah garis tepinya "1px" yaitu ketebalan dari garis tepinya, bisa diganti ketebalanya dengan yang lain sesuaikan dengan template anda, sedangkan "dotted" adalah jenis border pada kotak highlight script, ganti sesuai selera, klik disini untuk melihat jenis border.

#223344 adalah kode warna border.

padding:5px 5px 5px 5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jarak dari garis tepi.

3. Kalau sudah, kemudian Simpan.

Cara Posting

Supaya kode/scriptnya bisa ada tepat di kotak Highlight,untuk memposting sebuah postingan harus pakai cara-cara tertentu.Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yang akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.


<p class="alert">

"Postingan Yang Mau Dihighlight"

</p>


Selesai.
blogger-emoticon.blogspot.com

Sumber: http://blogkomputers.blogspot.com dan http://trik-tips.blogspot.com

ARTIKEL TERKAIT LAINNYA:



8 KOMENTAR:

Arif.Ust mengatakan...

saya pakai wordpress apakah sama caranya seperti blogger tolong bantuannya ya...

salam
Penulis REGEDIT

konix_bam mengatakan...

klo buat di wordpress yang cara pertama pasti jalan sob,

klo yg no.2, waaduh.. saya belum nyoba di wordpress nih, tp rasanya sama aja. kan cman nambah script di CSSnya. trus dikasi penanda di postingan, dengan nambahin

<p class="alert">

"Postingan Yang Mau Dihighlight"

</p>

dipostingan Anda.

selamt mencoba deh...

' Li ' mengatakan...

makasih infonya...

konix_bam mengatakan...

hehe2... hasil comotan2 dari blog laennya..

Rumah Islami mengatakan...

tipsnya mantab :) thanks for sharing ya

rayearth2601 mengatakan...

Wah, mangstap dahhh infonya

kapan2 perlu diterapkan nih

thanks

hadi mengatakan...

makasih banyak tip'snya dah aku coba

konixbam mengatakan...

sip.. sama-sama :D

Posting Komentar

Iklan