Nulled templetes from themeforest: widget

Control your Blogger using arrow key (next post | Previous post)

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqvE2V79Lez09319LJCvLlKf78ALDRLK8f-C0LrL46vL7iGkvqRJ_Ya_TwT4hmW80-WwnHK4Qw6AXa4drRRepS4HOoTwJvnppmZU3D7jLNbf3QBnCGclXEBILgmzUBCRjyBc4n0MxvgA/s1600/arrow-key-navigation-blogger%255B3%255D.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqvE2V79Lez09319LJCvLlKf78ALDRLK8f-C0LrL46vL7iGkvqRJ_Ya_TwT4hmW80-WwnHK4Qw6AXa4drRRepS4HOoTwJvnppmZU3D7jLNbf3QBnCGclXEBILgmzUBCRjyBc4n0MxvgA/s1600/arrow-key-navigation-blogger%255B3%255D.png" /></a></div><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">Navigating through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the Newer or Older page links. You might have already seen this feature on many top blogs.It’s really easy to implement this feature on your Blogger Blog.You just have to add the arrow key navigation widget to your blogger blog.</div><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">This is a really simple and clean widget and you can see a demo of this widget right on this page. If you use the<strong style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Right and Left arrow keys</strong>, you will be able to navigate to different pages on this blog. This works not just on the post pages, but also on the blog’s home page and label pages.The Arrow Key Navigation Widget will be disabled when you are typing something into a text box on the blog(This was done to avoid the page from being changed when the user is typing something into a text box and uses the arrow keys to move around this text.).</div><h3 style="background-color: white; border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; color: #333333; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">Why should I add this widget</h3><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">This is a simple light weight widget which doesn’t depend on any external libraries and it’s really easy to install as well. It will give users a better experience when they are navigating across different pages of your blog.They won't have to scroll all the way down to the bottom of the page and look for the Older and Newer page links.</div><h3 style="background-color: white; border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; color: #333333; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to add this Widget</h3><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">You can add this widget by using the below one click installer.</div><form action="http://www.blogger.com/add-widget" method="post" style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;"><input name="go" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" value="Add Arrow Key Navigation Widget" /></div><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">Add the widget to your sidebar or footer and the Arrow Key Navigation will be activated on your Blog.The Widget title won’t appear on your Blog. So you can give it any appropriate name which will help you in identifying the widget on the layout page.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to let readers know of this Widget</h3><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">You might want to add some text to your blog which suggests that your Blog can be traversed using the keyboard arrow keys.Something message similar to “Use the Left or Right Arrow keys to navigate through this blog” might help.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to Remove the Widget</h3><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">If you want to remove this widget at any time, you can do that by removing the Arrow Page Navigation Widget from the Layout page.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How this works</h3></form><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">If you are curious about how this works, then below is the actual code behind the widget. The code listens for Keyboard inputs and if detects an Arrow Key event, it will redirect the user to the newer or older page. The code picks the newer and older page links from the Blogger’s Page Navigation Links.</div><pre class="code" style="background: rgb(238, 238, 238); border: 2px solid rgb(231, 231, 231); color: #333333; font-size: small; font-stretch: inherit; line-height: 25px; margin-bottom: 10px; margin-top: 10px; overflow: auto; padding: 5px 10px; vertical-align: baseline;"><script type='text/javascript'><br />document.onkeyup = function(event)<br />{<br />if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;<br />event = event || window.event;<br />switch(event.keyCode)<br />{<br />case 37:<br />var newerLink = document.getElementById('Blog1_blog-pager-newer-link');<br />if(newerLink !=null) window.location.href = newerLink.href;<br />break;<br />case 39:<br />var olderLink = document.getElementById('Blog1_blog-pager-older-link');<br />if(olderLink!=null) window.location.href = olderLink.href;<br />}<br />};<br /></script></pre><a href="https://www.blogger.com/null" name="more" style="background-color: white; border: 0px; color: #41b7d8; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin: 0px; padding: 0px; transition: background-color, color 0.2s linear; vertical-align: baseline;"></a><span style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;"></span><br /><div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">Please share your thoughts queries or suggestions :-) and if you need further help do let us know.</div></div>

Control your Blogger using arrow key (next post | Previous post)

Navigating through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the Newer or O...

<div dir="ltr" style="text-align: left;" trbidi="on"><div id="adsmiddle17985734778909553023">Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.<br /><br />Related:<a href="http://helplogger.blogspot.com/2013/03/related-posts-widget-with-thumbnails.html" style="color: blue;" target="_blank"> Related Posts Widget with Thumbnails and Summaries</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi36f4vZiYp_OtELAWDrUQJeTMSSMjfSBAFu0uAv8afNf5rg4xNnwiLyWvvpvszsvIg-MnjmbACWig4OsR5QBS-1ytdhfilno4PpDBCQuq2zftJ5ZMGuPgc6RPed54xT-0_Pe6veMKakkGN/s1600/related-posts-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="related post, related posts blogger, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi36f4vZiYp_OtELAWDrUQJeTMSSMjfSBAFu0uAv8afNf5rg4xNnwiLyWvvpvszsvIg-MnjmbACWig4OsR5QBS-1ytdhfilno4PpDBCQuq2zftJ5ZMGuPgc6RPed54xT-0_Pe6veMKakkGN/s1600/related-posts-blogger.png" title="Related Posts Widget For Blogger" /></a></div><br /><h2>Adding the Related Posts Widget to Blogger/Blogspot</h2>Step 1. Log in to your <span style="color: #0b5394;"><a href="http://www.blogger.com/home" rel="nofollow" style="color: #0b5394;" target="_blank">Blogger account</a></span><b style="color: #0b5394;"> </b>and go to Template > Edit HTML<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Q0KrIif1C7sZzDRyH0V2p-OMo205eWayz64B23VRQZvc9VnaTBHqtVxTi8C1ltvr4OE4AK4e9ifR4-4X7Gvs4-3zNVQTc-bJFReQwdoNah80_wTL-HyFPndl_1iIPZQPe-AoKBWeZyCa/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger template, edit html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Q0KrIif1C7sZzDRyH0V2p-OMo205eWayz64B23VRQZvc9VnaTBHqtVxTi8C1ltvr4OE4AK4e9ifR4-4X7Gvs4-3zNVQTc-bJFReQwdoNah80_wTL-HyFPndl_1iIPZQPe-AoKBWeZyCa/s320/blogger_blogspot_template_edit_html_tutorial.png" title="how to add related posts widget to blogger with thumbnails" width="320" /></a></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPReQZGaROKaeam7ez7-2JSf-PrxxPZjDNXUVWn9OsHAAouGggcjUF_Vcn-M1YHpz_vfLghlrit-gRrbuXrAackCkNHYlX2lll2i_j91GMuQqvyVHYkCMlNZ1ALzVNN5M9ghOhAzqn8yC/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger search box, CTRL + F" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPReQZGaROKaeam7ez7-2JSf-PrxxPZjDNXUVWn9OsHAAouGggcjUF_Vcn-M1YHpz_vfLghlrit-gRrbuXrAackCkNHYlX2lll2i_j91GMuQqvyVHYkCMlNZ1ALzVNN5M9ghOhAzqn8yC/s1600/open-blogger-search-box-ctrl%252Bf.png" title="How To Add Related Posts Widget To Blogger with Thumbnails" width="320" /></a></div><br />Step 3. Search for this piece of code adding it inside the search box (hit Enter to find it):<br /><blockquote class="tr_bq"></head></blockquote>Step 4. Copy and paste the below code just before/above the <span style="background-color: yellow;"></head></span> tag:<br /><blockquote class="tr_bq"><br /><b><span style="color: purple;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></b><br /><style type='text/css'><br />#related-posts{float:left;width:auto;}<br />#related-posts a{border-right: 1px dotted #eaeaea;}<br />#related-posts a:hover{background: #EEEEEE;}<br />#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}<br />#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:<span style="color: red;"><b>110px</b></span>;height:<b><span style="color: red;">100px</span></b>;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }<br />#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;<span style="color: #3d85c6;"><b>width:110px</b></span>; height: 40px;}<br />#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><br /><script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /><br /><span style="color: purple;"><b></b:if></b></span><br /></blockquote><i><b>Note:</b></i><br />- to change the width and height of thumbnails, modify the <span style="color: red;"><b>110</b></span>px and <span style="color: red;"><b>100</b></span>px values in red<br />- to change the color and size of related posts titles, change the value in <span style="color: #3d85c6;">blue</span><br />- remove the line <span style="color: purple;">in violet</span> if you want the related posts to be displayed both in homepage and post pages.<br /><br />Step 5. Find the line below (you will find two times, but you need to stop at the second one):<br /><blockquote class="tr_bq"><div class='post-footer'></blockquote>Step 6. Just above <span style="background-color: yellow;"><div class='post-footer'></span> paste this code:<br /><blockquote class="tr_bq"><br /><span style="color: purple;"><b><b:if cond='data:blog.pageType == &quot;item&quot;'></b></span><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<b>max-results=<span style="color: red;">5</span></b>&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br />var <b>maxresults=<span style="color: red;">5</span></b>;<br />var relatedpoststitle=&quot;<b><span style="color: #3d85c6;">Related Posts:</span></b>&quot;;<br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs();<br /></script><br /></div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div><br /><span style="color: purple;"><b></b:if></b></span><br /></blockquote><i><b>Note:</b></i><br />- change the <b><span style="color: red;">5</span></b> value from <b>max-results=<span style="color: red;">5 </span></b>with the number of posts you want to be displayed<br />- if you want the related posts to be displayed on homepage too, then remove the lines <span style="color: purple;">in violet</span><br /><br /><b>Update! If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the <span style="background-color: yellow;"></b:includable></span> tag which can be found above this line (CTRL + F to find it):</b><br /><blockquote class="tr_bq"><b:includable id='postQuickEdit' var='post'></blockquote>For more info, click on this screenshot below:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGstbOtFh5KMPaU2iLEd61LQTQhZ7ZadqsxAEiX_DReaJbJF9g8U4WQDB-tzlpWF0V2xTKGjxHUYKCYyvPTti0EscKchniwXTJze7if0KGlWY0yKPu-3k5ssB78S2ZaiKSSGxSCG3JzYCO/s1600/how-to-add-related-posts-widget-to-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGstbOtFh5KMPaU2iLEd61LQTQhZ7ZadqsxAEiX_DReaJbJF9g8U4WQDB-tzlpWF0V2xTKGjxHUYKCYyvPTti0EscKchniwXTJze7if0KGlWY0yKPu-3k5ssB78S2ZaiKSSGxSCG3JzYCO/s1600/how-to-add-related-posts-widget-to-blogger.png" width="400" /></a></div><br /><b>Step 7. </b>Save the Template and that's it. Now the Related Posts widget should appear below each blog post that has labels on it. Enjoy!</div></div>

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are c...