Looks like every time we get a new project from university, we get a new idea to implement it on BlogSpot blogs. Last year we were given the task of developing a twitter clone social media network. We made extensive use of HTML Data-[content] attributes and this led us to create custom Iframes to redirect demo and download links in blogger. Most of twitter's user-interface objects are controlled using this parameter and jQuery built-in functions. We will use the exact same approach to control link redirection in blogger without the need for any web hosting account or complex web scripts. This Blogger plugin is indeed the first of its kind. We just hope this small effort proves useful for all Blogger users especially those who share download resources with their readers. Update: Links will now also open in new tab. Problem fixed. A special thanks to my classmate "Ahmed Nasir" who is a genius programmer without any doubts. DEMO: Click the Demo and Download links and observe the URL in address bar. 
5. Now setup up your blogger post editor settings. Click options and then under Line Breaks, choose "Use
tag" Hit Done.
6. Save your page
7. Now create another page with the title "Download". Repeat the exact same steps from Step#3 - Step#6
Note down the URL address of both these pages. We will use them later.
Now we need to enclose the body tags and add an extra piece of jquery code inside the template that will do remaining half of the magic.
Go To Blogger > Template Backup your template Click Edit HTML Search for or a similar by searching just6. Next find
7. Paste the following code just above it:
8. Now search for ]]>
9. Paste the following Jquery code just below it:
Replace the orange highlighted code with the URL address of your Demo page. Replace the green highlighted code with the URL address of your Download page.
10. Save your template and you are all done!
Now if you try visiting your demo and download pages you will find out a blank page with no content inside it. That's what our code does, injecting custom stylesheet by over riding the default template styles. Now when you have done all the development part of the tutorial, we come to a stage where we will learn to implement the functionality. You will create links as you normally do and the only extra piece of information that you need to insert in them are the Data-Content attributes. This is how you need to do.For Demo Link or Demo Button:
For Download Link or Download Button:
Replace the hash symbol (#) with your demo or download linkUpdate For Links opening in new tab
I have modified the code by using a conditional if statement that will open links in new tab if target="_blank" attribute is found else it will open the page in same window.
You can use redirect as many links per page as you want. The code is efficient enough to pick even an array of data-content attributes. That simple!
You may now redirect any link inside your blog back to your domain address by giving a pro touch!
The HTML code and all scripts in this tutorial are the sole property of STC Network. You may not sell the plugin nor affiliate the work to your brand. Developers are requested to link back to this page as the only favor in return if they wish to share the plugin with their audience. If you face any trouble while installing the plugin then please let us know. I just hope that this method of redirecting external links in blogger back to the root domain would help all those webmasters who share resources such as, ebooks, wallpapers, templates,. icons etc. You can even use it to redirect affiliate links! Please let us know if you would like further improvements in the code. Wish you a great blogging experience. Peace and blessings buddies :)Filed Under: Blogger Widgets and plugins, Webmaster Tools
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
No comments:
Post a Comment