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
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>
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 orange diatas dengan teks Anda
6. Publish dehh dan lihat hasilnya
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...
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;
}
.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 orange diatas dengan teks Anda
6. Publish dehh dan lihat hasilnya
No comments:
Post a Comment
Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :
» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi
Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".
Sebelumnya vito minta maaf yg sebesar"nya jika komentar anda belum sempat dibales. ^^