Add Widgets To Mobile View In Blogger

How To Make Widgets Show In Blogger Mobile View

Your blog mobile view may look boring, wise to spice it up a little more by making some of those awesome widget in your desktop view also visible in mobile.

There is a way you can make any Widget of your choice show in mobile view, especially  Google Adsense, is one of the many reasons blogger seek for this method. This way you get increase revenue and show your ads in mobile view without going through some boring and risky code adding and long editing.

Follow the Process below to show any widget to mobile.

Steps To Show Widget in blogger mobile view

Before you begin this steps, make sure your mobile template is set to custom.

To make any widget show in mobile, you get to add a mobile='yes' code to a widget code in your template, it not as hard as it sounds.

Enter your blog template and hit the Jump to Widget button, this will display all the widgets in your blog vertically, select the gadget you want to add to mobile, it will take you to it position. Use the example below for proper understanding.

Using  'Adsense' Html code below as an example

From   <b:widget id='HTML2' locked='false' title='' type='Adsense' visible='true'>

To       <b:widget id='HTML2' locked='false' mobile='yes' title='' type='Adsense' visible='true'>

As indicated above, we added mobile='yes'  in the the widget code. this will make that widget appear in mobile view.
If you wish to make it show only in mobile and not visible in desktop view, simply change the 'yes' to 'only', that's mobile='only'

Read More

Add Floating Share Buttons For Blogger (Easy Steps)

How To Add Floating Share Buttons To Blogger

Right here, we will discuss how to add floating share buttons in blogger. This share buttons are shown vertically at the left hand side beside your blog post,

See steps to add it below..

Steps
Step 1: Open blogger template > Edit HTML.

Step 2: Locate this code <b:includable id='post' var='post'> Do that by using control + F key to show to bring out a search box in template, input the code there.

Step 3 paste the code below directly below this <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social {  bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block;  width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Ax7CvJ16AkwHDVvZ4LdKip9_o_jy71LpLIe7k1HJTr5jOmOXaDtQfBwRfGsXLVl1P9zKI2phV4Rr4JwVdFWkAvDWArT8M36nIFNRGfp3FJlflxnl174FdTyb9I7pKXw9ljWa5prlGjna/s32/twitter.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM4zu0bEQgd_JRnt8udQMiItUZqDn6RZMI10NCUuDFcoTO7XJqE2rShlEEhZUShfb1e2q6LoNW4tDrogUZg4H92tT47WV1CatwrjsBlway22xSsxsXSF_w9Gcniz2jihp_pOHGT96eteK/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJrdhvLdU9EpTg4nsAKaoxEhGKSMt_YHtYcnK9ChGWRe8V9QCbEMmKeupjy8vUjyGgYPdZLExOFKX5CGOrC2XDWyVP0tE79bAZRnaM6dckHpzcchJarTDvmdJp2820V0PYNaeJvvDKDyf/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEeGCXUCDrLZ3qn-e3JbSfGiIp8RQV7q24qOYjAccXfn_1QFwfVg7NhB3lgBDKxB867Qfpxq4K0DtOtxhd1NhGMwyyl78eYtF1a6zAyR-fnlRGnVCcTfoEpBcAg6WCiP3vkSqEfeo_FVH/s1600/g-plus.png") repeat scroll -1px 0 transparent;  }
#btnt-social ul li a.pin-it-button   {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEwYQ-bv600DI54AapiwH0gDQMKF7ytyQHYuo81QUrfOyH5_fai5Y6Q82s7_D3BYi1eGJaIAAyXJ7emWLh7_8oZd9i51673at_rNGgHvI9Pe7bDkPilWBPkO3XfvFMoHoeGtEf3405G36/s32/pinterest.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWDKSgLmlAZtOEkzWkcvc76zCY6-b95pxANIFZQfzIOR-kw0p1Dxy9SKKYyi_IODwqyOl7dhlNckVppJhw6LYffRQw2wbblZbLv7J8QKOT1SVE4f7JGiWTjG290TG2niPj76wfyHsAVYP/s32/sharethis.png") repeat scroll 0 0 transparent;  }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;blogtipsntricks.com&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if>

Step 5: Save your template.
You are done, go to your blog, you will find the share buttons beside your blog post.

Read More

Add Recent Post Widget To Blogger

How To Add Recent Post Widget To Blogger Easily

Some blog owners find it scary to go to their blog template and add certain features, thereby leaving their blogs without some important widget for SEO, If you are in that category of persons, then this is the nice post for you.

This recent post widget can be added without going to your blogger template to make certain changes, which may later result to what you are so much afraid of, which is messing up your template.
This recent post widget is actually very safe to use also enough to brighten you blog look in its beauty and holiness.
with out much talks, lets get to the process/steps/method.

Steps to add Recent post Widget to blogger

Like I mentioned above, you don't need to visit your template region for this work, is simply by adding a code to your gadget directly and save see. Steps below.

Step 1: Log on to blogger.com and select the blog you want to add related post widget.
Step 2: Locate Layout in the menus after your selected blog have been opened.

Step 3: Click add a gadget.

Step 4: locate HTML/Javascript and Open.

Step 4: Copy and paste the code below into the Html/javascript box.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLj37MPtrp4I6C-ajBsYXDCeec5BsjARgA0tOBiZfpL6J2WjaCLhbI8Ti-DB1vZUY-5UORy3hCUZgr-zzIOCMNUgN90qSlONyYTU7LbYS7BPFMDIU2MlnNu6yVYRoVnHlOYGcjZigamDn/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://blogwox.blogspot.com/2016/09/Recent-post-widget-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #000000;}
.post-date {color:#000000; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;}.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #eb7303; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #000000;}</style>

Step 6: click save and that's all.

Visit your blog and you will find the recent post widget displayed in your slidebar, if you want this widget to blend well with your template, it can be customized, learn how below.

Customization

To make this customization easier, you will need to open the gadget the code was added, click anywhere in the code and hit Ctrl+F keys if you are using window, for Mac, Hit Cmd+F keys to pop out a search box. Copy and paste the code you want to make changes to, it will lead you directly to its location.

• Change to hover color, look for this code line .recent-posts-container a:hover{color: #000000;} and change to color of your choice
• Change the Read more link color look for the line a.readmorelink {color: #000000;} and swap to any color of your choice.
• Change the border color(the horizontal line displayed below every post title) Look for this code .recent-posts-details {border-top: 4px solid #eb7303 and change to your desired color.
• Change the number of posts to appear locate this line of code var posts_no = 5; change from 5 to any number you prefer.
• Change post title color, find this line of code .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;} change to your desired color.
• Change the post date color and Size, locate this code line .post-date {color:#000000; font-size: 11px; } edit to your personal teste.

Read More

Widget: How to add Related post to blogger with Thumbnails

Add Related post widget to blogger blog

Nowadays, hardly can you see a blog without a related post widget displayed below their posts, unless, if or maybe the blog is new, that is to say you must have a new blog for you to be reading this post right now, if you ain't, then what the heck have you being doing?

Anyway, you are all welcome here whether you are new to blogging or you are a pro.

Related posts add certain benefits to your blog, as a matter of fact, lots of benefits, the most important is to increase your site pageviews and also make you blog fun for your readers, without much talks/write-ups, let get straight to steps to add this related post widget to your BLOGGER/BLOGSPOT blog.

Steps to add related post To Blogger

1. Open your blogger, locate template and click on Edit HTML button as indicated in the photo below.

Note: it very advisable to save a copy of your template in case you get it messed up in this process. please do so.

2. While the template is opened, click any point inside the code area and hit your CTRL+F Key in windows, CMD+F keys in Mac, this will pop out a search box.

Ctrl+F keys to pop out the search box

3. In the search box input this code </head> and hit your enter key
 this will take you to the tag position shaded with yellow. Looks like this </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgcc1sMZxAsfzXQpTpsXgnYIEMFwqDST-A8g7mxUY77eKxLhW9hVJymXlfpPPVlSoSg0WNR2TGfE5HLy8WqUjvYfQLfKK89rrSfZaGvDW9B-Mzb_THiRM4q1i0TRGfdNltYekU1lU8cCD/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Copy the code below and paste right above the </head> Tag

5. Use the search box again input the code below. Note: you might find the code more than once in your template go for the second one, that what we will be making use of
<div class='post-footer'>
6. Copy the code below and paste right above the <div class='post-footer'> tag

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="https://blogwox.blogspot.com/2016/09/how-to-add-related-post-widget-blog-design.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

If you are unable to see this related post widget after saving template,  add the code (step 6) just above the </b:includable> tag which can be found above this line  <b:includable id='postQuickEdit' var='post'>  in your template.

Customization

You can change the number of post that appear in your related post by changing the 5 value, that Max results=5 to your preferred number, to easily locate this, use the search box in template and input this code
var maxresults=5;

To change the size of the thumbnails(width and Height) change the values which are 110px and 100px
input this in the search box
cover;width:110px;height:100px;

Read More