Cara Membuat Tombol Highlight Post Select All

Tanky Street

Sebelumnya pada postingan yang kemaren saya sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu.

Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

1. Masuk EditHTMLpada blog Anda lalu taruh code javascript dibawah ini sesudah code< head >

<script type="text/javascript">
function fnSelect(objId){
fnDeSelect();
if (document.selection){
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();}
else if (window.getSelection){
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);}}
function fnDeSelect(){
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();}
</script>

2. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code
<]]></b:skin >

Anda bisa mengubah tampilan code CSS diatas sesuai selera Anda lalu SAVE .

/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px; border:1px solid #FFC71F; background:#FFFFCC;}
.kopiaer { /* -- Style Box Luar --*/
background:red; padding:7px;}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00; border:1px solid #FFC71F; color:#FFD65C; padding:2px; font-weight:bold;}

3. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan teksnya

<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">
INI TEKS YANG INGIN DITAMPILKAN
</div>
</div>

Catatan :
Ingat ganti teks yang "kopihangat" berbeda setiap 1x penggunaan dan keduanya harus sama.
Ganti teks yang "INI TEKS YANG INGIN DITAMPILKAN" diatas dengan teks Anda.
4. Publish dan lihat hasilnya

Sekian tutorial singkat "Cara Membuat Dengan Tombol Highlight Post Select All" dan semoga berguna bagi Anda...

Read Also

Share this post

Get Link Facebook Messenger Whatsapp Whatsapp Twitter Telegram Linkedin Tumblr Pinterest

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.