Highlight Post Dengan Tombol Select All

Posted By anasku
Salam blogger,

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.

Seperti contoh dibawah ini




Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...


Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah 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>


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




/*__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;
}


Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya


<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>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.
Artikel Terkait untuk "Highlight Post Dengan Tombol Select All"


16 comments:

alfi said...

thank tipsnya..

Dasista said...

ribet juga ya...
he..he

congcot said...

makasich mas tutorialnya, silahkan berkunjung ke blog saya

chugy said...

Thanks bt infonya....Good blog and good post.

Dixon said...

izin copy paste

Kian Coi said...

good news tutorial..!!!

Hamz said...

salam kenal sob.. saya ada masalah, add html/javascriptnya ga berfungsi suka error pas di save... saya tunggu jawabannya di blog saya. terimakasih

Anasku said...

Cara ini bisa disederhanakan... silahkan sederhanakanlah kawan2..

Beauty Counter said...

It is also a good resource of usefull websites. Thanks for creating such a blog like that. The internet needs you, man!

alat ukur kadar air said...

keren banget nih tutornya,makasih berat

music improvisation said...

kerenn..

Anonymous said...

PENTING DI BACA DULU
Klik Alamat Ini
http://go-indonesia-investasi.blogspot.com/

Dapat Kan Keuntungan 150% Sampai 300% Dari Hasil Investasi Modal.
Di Sini Tempat Jual Beli Saham.
Berapapun Modal Nya, Semakin Banyak Modal Maka Semakin Banyak Keuntungan
Harga 1 Saham $10
Profit Perhari 2%
Kalian akan Di Bantu Di Blog Ini Langsung Tlfon Aja Ke No Nya.
http://go-indonesia-investasi.blogspot.com/

Atau Cara Gampang Klik Alamat Ini

http://www.justbeenpaid.com/join.cgi?r=Danamon&p=jsstripler5&c=

Daftar Dulu ( Penting Masukkan Informasi Sesuai KTP)
Setelah Daftar Kamu Akan Dapat Nomor Hp Nya Ada Di Profil
Silahkan Di Telfon, Kamu Akan Di Pandu Oleh Nya Kalo Kamu Menjadi Anggotanya
(Wajib Referal Dari Danamon) Panduan Cara Kirim Dan Terima Uang.
Cara Bekerja Nya. Yg Jelas Kamu Akan Di Ajar Dengan Jelas
Dari 0% Sampai 100%.
Karna Saya Juga Referalnya Bapak Muh.Ramadan Dan Saya Mendapatkan $1000 Perbulan.
Buktikan Sendiri.
Kalo Sudah Daftar Silahkan SmS Ke No Hp Nya.
Bapak Muh.Ramadan Akan Memeriksa Apakah anda Menjadi Referal Nya Atau Bukan.
Ni No'Y 082191272636

zicblogger blogspot said...

Cara Membuat Link Secara Otomatis

Widget Yang Harus Dipasang di Blog

Mengganti Template Blog dengan Template Baru

Free Download Blogger Template!

Cara Mengganti Template Blog di Blogger

Cara Membuat Blog Gratis di Blogger

Cara Memasang Widget di Blog

Obat maag kronis said...

Lumayan nih bisa tambah-tambah ilmu....

obat kutil kelamin ampuh said...

terlalu ribet nihh,. bingung

Agen poker Online said...

Terima kasih atas info anda, semoga sukses selalu

KONTES SEO
Poker Online
Agen Poker Online
Agen Poker
Poker uang Asli

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas