One of the reader here asked me how to display the link back code to allow readers to copy and paste, bascially the support us code that i have added on my right side widget. So today we will study on how we can implement this using basic Html script and Javascript.
You can add this widget using Html alone or by using both Javascript and Html. First we will learn the hard way, that is the manual way starting from the basics. And will be using the textarea field to implement this widget.
Basic Html knowledge on Textarea:
Rows = This referes to the number of rows your text area will occupy, that is simply the height of the text area.
Cols = This refers to the number of column your text area will occupy, that is simply the width of the text area.
Name = The Name of text area box.
Note: Make sure that you have replaced your Blog URL on the example provided URL.
Displaying Add Text Link Code
This piece of code will allow you to display your specific link to be copied
You can add this widget using Html alone or by using both Javascript and Html. First we will learn the hard way, that is the manual way starting from the basics. And will be using the textarea field to implement this widget.
Basic Html knowledge on Textarea:
Rows = This referes to the number of rows your text area will occupy, that is simply the height of the text area.
Cols = This refers to the number of column your text area will occupy, that is simply the width of the text area.
Name = The Name of text area box.
Note: Make sure that you have replaced your Blog URL on the example provided URL.
Displaying Add Text Link Code
This piece of code will allow you to display your specific link to be copied
<textarea rows="5" cols="24" name="Link_Code">
<a href="http://bloggers-university.blogspot.com/">Bloggers University</a>
</textarea>
Displaying Add Image Link Code
This piece of code will allow you to display your specific image banner link to be copied. You can also refer to our previous post on "how to make a Chicklet or Banner of your blog" to make your self a chicklet or banner.
<textarea rows="6" cols="27" name="Link_Code">
<a href="http://bloggers-university.blogspot.com/" target="_blank"><img alt="Blogger tutorial" src="http://i295.photobucket.com/albums/mm128/imran35/logo.gif"/></a></textarea>
Displaying Add Image Link Code using Button Onclick function
This will allow you to automatically highlight your textarea when users hit the button, and this is achieved using javascript statements.
<form name="Link_Form">
<input onclick="javascript:this.form.link_code.focus();this.form.link_code.select();" type="button" value="Select All">
<p align="left">
<textarea style="WIDTH: 300px; HEIGHT: 125px" name="link_code"><a href="http://bloggers-university.blogspot.com/" target="_blank"><img alt="Blogger tutorial" src="http://i295.photobucket.com/albums/mm128/imran35/logo.gif"/></a></textarea></p></form>
Here in this part of script we have used the form, and the elements used is
<input onclick="javascript:this.form.link_code.focus();this.form.link_code.select();" type="button" value="Select All">
It is this part of code that is used to allow auto select on button click. This is used with the help of javascript. And its important that you do not change this part of code, but if you wish to change the label name of the button you can do so by changing the "Select All" of Value element.
Displaying Add Image Link Code using TextArea Onclick function
In the previous example we used the function on button, that is when the user hits the button the textarea get highlighted. Here will use a function with the help of javascript to highlight all the text area by clicking on Text Field.
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
<textarea rows="5" id="txtarea" onClick="SelectAll('txtarea');" style="width:250px"><a href="http://bloggers-university.blogspot.com/" target="_blank"><img alt="Blogger tutorial" src="http://i295.photobucket.com/albums/mm128/imran35/logo.gif"/></a></textarea>
Note: This implementation does not work in the blog post but it should work after you have implemented at your blog widget.
What we are doing here is we are creating a method "SelectAll" and then calling the created method on the textarea, so its because of this function the textarea is getting highlighted when you click on it.
I hope now you may be able to add your self a link back widget, and suppose if you want to shout your self a message and then underneath the message you want to add your link back widget, what you can do is simply
1) Click on Layout.
2) Click on Add a Page element.
3) Click on Add Html/Havascript.
Give your message first
<a href="http://bloggers-university.blogspot.com/"/>Bloggers University</a> is all about helping out bloggers out there to be a Professional Blogger, making efforts and working over nights to help you make a quality blog. If you really appreciate our work a link back would mean us a lot from you. To help our work please copy and paste the below code in your blog and adding this code will appear as:
Give a break to leave a line.
<br/>
Show the appearance of the widget on how it will appear when copied into their blog.
<div align="center"><a href="http://www.bloggers-university.blogspot.com/" target="_blank"> <img alt="Blogger tutorial" src="http://i295.photobucket.com/albums/mm128/imran35/logo.gif"/></a>
</div>
Give a break to leave a line.
<br/>
Now give your self the link back widget of your choice on what you prefer of 4 of what we have learned today, and i prefer the second one :).
<div align="center"><textarea rows="6" cols="27" name="code">
<a href="http://www.bloggers-university.blogspot.com/" target="_blank"> <img alt="Blogger tutorial" src="http://i295.photobucket.com/albums/mm128/imran35/logo.gif"/></a>
</textarea></div>
Hope you like this post of ours, to read more post of similar and many more on blogging, enter your email and subscribe with us to recieve updates of this blog via email or subscribe to as a reader.
 Subscribe in a reader |
|
Bookmark this post:
|
|
Do you think this post is worth reading and would you like to help our work, if so please bookmark this post for us and lets share it with others.
Link to this post:
Comments :
Post a Comment
What do you think of this post ?