Highlight Post With Tombol Select All
Greetings bloggers, Earlier in the post yesterday I've talked about the " Highlighting a specific text on the post "with a different background image background even I've written there. On this occasion to discuss more about the Post Highlights with extra select button that makes all visitors to the blog will find the text block, suppose you write a tutorial and you insert a script to be copied then select all button is very useful for automatic text block. Such examples below this
Hehehe just an example do not need to be interpreted ya .. Okay we move on to how pembuatanya 1. Log in Edit HTML on your blog and then put the javascript code below under the 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. Still on the Edit HTML and insert the following CSS code above the code]]> </ b: skin>
You can mengunah display CSS code above to suit your taste and SAVE
5. After that the post editor use the following code to highlight the text a
<div class="kopiaer">
<input class = "cangkirkopi" type = "button" value = "Select All" onClick = "fnSelect (' kopihangat ' ) "/>
<div class = "Copybox" id = " kopihangat " > TEKS YANG INI Ingin DITAMPILKAN </ div> </ div>
> Remember replace text in blue is different each 1x use and both have the same > Replace the text in red above with your text 6. Publish dehh and see what happens Well above is a short tutorial I hope is useful to you, please comment if you have a catapult questions about this tutorial.
Do you remember ...
When you lie to me
and I memaafkanya .. remember you will struggle against you though I could not keep me fighting for my attention you'll remember about you at any time come menyelimutimu But now you respond with a smile pahitmu ...
When you lie to me
and I memaafkanya .. remember you will struggle against you though I could not keep me fighting for my attention you'll remember about you at any time come menyelimutimu But now you respond with a smile pahitmu ...
Hehehe just an example do not need to be interpreted ya .. Okay we move on to how pembuatanya 1. Log in Edit HTML on your blog and then put the javascript code below under the 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. Still on the Edit HTML and insert the following CSS code above the 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;
}
You can mengunah display CSS code above to suit your taste and SAVE
5. After that the post editor use the following code to highlight the text a
<div class="kopiaer">
<input class = "cangkirkopi" type = "button" value = "Select All" onClick = "fnSelect (' kopihangat ' ) "/>
<div class = "Copybox" id = " kopihangat " > TEKS YANG INI Ingin DITAMPILKAN </ div> </ div>
> Remember replace text in blue is different each 1x use and both have the same > Replace the text in red above with your text 6. Publish dehh and see what happens Well above is a short tutorial I hope is useful to you, please comment if you have a catapult questions about this tutorial.
Categories:
Blogger Gadgets,
Blogger Tutorial
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDelete