One Click to Auto Select Code from Blockquote in Blogger
One Click to Auto Select Code from Blockquote in Blogger
Blogger tutorial based site specially those who share codes
in their Blog then must use blockquote. Generally main feature of blockquote is
displaying the widget code within tag. We use different stylish blockquote in
our site but often user has to select the whole code block top to bottom for copying.
If the code is larger, then it will make little trouble for user. Because by
using cursor sometimes mouse pointer become deselected. So the solution is to one click text
selection from blockquote by using mouse pointer. After that we have to use
copy option for further use of code. But some users may feel irritating. Though
this is very simple widget but very useful. For watching demo you can click on
code block on this post. Just click on it and all code will be select
instantly. Because your blog visitors and code users will feel comfortable to
use it. For installing this feature please follow the below steps-
Step 1 Log in to
your Blogger Account and Go to your Blogger Dashboard
Step 2 Click on Now
click on -> Template -> Edit HTML
Step 3 Now find
the </body> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Copy the code
from below and Paste the code above/before </body>
<script type='text/javascript'>
var pres = document.getElementsByTagName("blockquote");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("click", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Step 5 Now simply hit the Save
template Button.
Customization
- If you are using pre code instead of blockquote then replace blockquote with pre.
- If you want double click to select text then replace click to dblclick.
That's it. Now you can check your blog and click on any code from block.
And see all code block are select by one click. This really nice and user
friendly for the Blog user.
5 comments
CATELOG
COMMENTS
এই গেজেট টা কোথায় পাবো ?
http://www.bloggerspice.com/2015/02/add-3-column-tab-widget-in-Blogger-template.html