Simple Recent Posts Widget for Blogger

Hello and welcome to GetWebInfo.Com. Here you can find out that Simple Recent posts widget for your Blogger. The main advantage on this Recent Posts Widget is that it will show not only post titles but also post excerpts or snippets, and it's easy to customize or apply different on it. To make it fit your own design you will need to modify the CSS Style, you can change the link or background color, the size and the color of text and links. This is really a beautiful and stylish recent post widget for your blogger you can really like this widget when you try it on to your Blogger website.



Here is the screen shot of the both widgets 

How to add Recent Posts Widget in to Your Blogger?

Step 1. First of all Login To your Blogger Dashboard> Go to "Layout" and then Click on the "ADD a Gadget" Link.


Step 2. From the pop-up window, scroll down and choose HTML/JavaScript from the list.

Step 3. Then you can copy the code and past it in to HTML/JavaScript content Box.




Recent Posts Widget with Snippets/ Links and Description
<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="https://www.getwebinfo.com/2019/02/simple-recent-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}
</style>


Recent Posts Widget Showing Post Titles Only.
<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 10;var showpostdate = false;var standardstyling = true;</script>
<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="https://www.getwebinfo.com/2019/02/simple-recent-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

How to Customize the Recent Posts Widget.


  • To set how many posts to display, change the 5 value for the recent posts widget with snippets and the 10 for the recent posts widget with post titles only.
  • If you want to display the post dates, change "false" to ''true".
  • If you want to display the post dates, change "false" to "true".
  • The recent posts widget with summary will display 100 character, If you want more or less characters, change the "100" value with your own demand.
  • To change color of the links, modify the values in blue and for the font size, the values violet.
  • To change the color of the posts snippets modify the values in green and the values in orange for the font size. 
  • Replace the http://blog-address.blogspot.com text with your URL.
Step 4. Now you can Save your Widget and you can all DONE.........

Hope this Article is really help full for you if you like this Article and also this widget so please share it with your friends on Social Media. Thanks for Reading.

How to Customize Blogger Comments Background Color and Border

Hello and Welcome to GetWebInfo.Com. Hre on this post you can know that How to Customize Blogger Comments Background Color and Border. The comments are an essential part of any blogs as in them readers express their opinions about a post or a blog, thus it is important to spend a little of or time to make this part looking more stylish, accessible and neat.



To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment.


Add Separator/ Border to Blogger comments

Step 1. To add a simple separator go to Template> Edit HTML and click on the small arrow on the felt of <b:skin>...</b:skin>

Step 2. Click anywhere inside the code area and search using CTRL+F keys for the following piece of code:
]]></b:skin>
Step 3. Paste the following style just above it:

If we are using threaded comments (with the reply option):

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000;
}
If we are using previous commenting system (with no reply option)

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Note: To change the borders color, replace the bolded color value and to change its thickness, increase/ decrease the 1 value.

Step 4. Save your Template

Instead of a simple border, we can also add a divider/image between our comment.

How to Add a Divider (Image) Between Each Comment in Blogger


Step 1. Go to Template> Eidit HTML and search (CTRL+F) for the following piece of code:
]]></b:skin>
Step 2. Paste the following code just above it

If we are using threaded comment (with the reply option):
.comment-block {
background-image:url(http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}
If we are using previous commenting system (with no reply function)
#comments-block .comment-footer {
background-image:url(http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}
Note: The URL that is in bluce represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date fo comments. (For threaded comments, increase/decrease the padding 30 value)

Step 3. Now you can save your blogger template.


How to Add a Border and Background Color To Blogger Comments

Step 1. Go to Template> Eidit HTML and search (CTRL+F) for the following piece of code:
]]></b:skin>
 Step 2. Paste the following just above it:

If we are using threaded comments (with the reply option):
.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color in Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}
Step 3. Now you can Save your Blogger Template.


If we are using previous commenting system (with no reply function:

Step 1. Search for this line in your template:
<b:loop values='data:post.comments' var='comment'>
Step 2. Then, add the following code just below of it:
<div class='comments-new'>
Step 3. Look a little further down and you'll see the </b:loop> code and just above it, add this:
</div>
Step 4. Now find this:
]]></b:skin>
Step 5. And just above of it, add this CSS Code:
.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}
The rounded edges will not work in internal explorer with CSS.

Step 6. Now you can Save your Blogger Template you can all DONE!!!

Related Post Widget With Thumbnails and Summary for Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can learn about Related Posts widget that How to add Related Post Widget With Thumbnails and Summary for Blogger.This is a very important part of any blogger theme to add related posts widget in to your blogger post. This is a really awesome related post widget with thumbnail and posts snippets that will appear in the footer of all your blogger posts.



Adding Related Posts widget in to your Blogger Post



Step 1. From your Blogger Dashboard, Go to Template and just click on Edit HTML.

Step 2. Click anywhere inside the code area and then press CTRL+F to open the Blogger search Box.

Step 3. Type or paste this tag inside the search box and hit enter to find it out.
</head>
After you found it, paste this script just above it.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}
//]]>
</script>

Note

  • To Change the number posts that are being displayed, modify the value in red (4) 
  •  To change the number of characters to be shown in posts summary modify the value in red (75)
  • To change the default pic for posts with no images, add your URL instead of the one marked in blue



Step 4. Now that we added the script, we will need to add the CSS style. Just paste the following code above the same </head> tag:

<style>
.relatedsumposts {
padding: 0px 10px;
text-align: center;
/* width of the related posts area */
width: 120px;
float:left;margin-bottom:15px;
border-right: 1px dotted #E5E5E5;
display: inline-block;
}
.relatedsumposts h6 {
margin: 5px 0;
}
.relatedsumposts h6 a {
/* link properties */
color: #linkcolor;
text-transform: uppercase;
font-size:12px;
}
.relatedsumposts img {
/* thumbnail properties */
height: 82px;
width: 82px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #E5E5E5;
border-bottom: 1px dotted #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
padding: 5px 0 15px 0;
}
#relatedpostssum {
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
margin-bottom:15px;
}
</style>

You can Customize the Related Posts Widget 


  • Modify the value in red (120px) to adjust the width of the widget area.
  • Replace #linkcolor with the hex value of your color to change the color of the post titles 
  • If you want to change the size of thumbnail, modify the values marked in violet (82px)
  • To determine the border roundness, modify the values in orange (50%)
  • To change the color of the post snippet, change #summarycolor with color hex value.
Step 5. Next search CTRL+F for the following code snippet
<b:includable id='postQuickEdit' var='post'>

When you find it, click the sideways arrow to expand the code and scroll down until you find </b:includable> see the screenshot for more help.


Step 6. Just Above the </b:includable> tag add the following HTNL code.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Step 7. Click on the "Save Template" button to save the changes and you're done!

Note. In case you see the undefined message, make sure that you have added the appropriate labels to your posts - which can be found in at least one more post, otherwise the script might not be able to find any related posts for that entry.

I Hope this Article is really helpful for you. If you like this article so please share it on social media with your friends thanks............

How to Add Text Style Related Post Widget in to Blogger Blogspot

Hello and Welcome to GetWebInfo.Com. Here on this post you can learn that How to Add Text Style Related Post Widget in to Blogger Blogspot. Related Post Widget is a very important wiget for every blogger as it does not only help to reduce a blog's bounce rate but also increases the blog's traffic. You can also use this widget in the middle of the post that you want to use.



Here is the demo picture of the Related Posts Widget for you!!!!




Here is the Steps that how can you Add Stylish Related Post Widget in to your Blogger Blogspot.

1. Login to your Blog Dashboar and then click on Edit HTML.

2. When HTML panel open then Press from your keyboar CTRLF+F and find out </head>

3. Copy the below JavaScript Code
<!--GetWebInfo Related Post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.related-post-title{font-size:2em;color: #FE7912; margin: 2px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 1.3em;color:#970E0E;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #4E63F9;}
#related-posts ul {list-style-type: none;padding: 0px;color: #000000;}
#related-posts li {  padding: 0.7em 1.2em;border-bottom: 1px solid #FFFFFF;background: url(#).2em 1em no-repeat;}
#related-posts li:hover.2em 1em no-repeat #000000;}
</style>
   <script src='http://aireshalili.github.io/internetsmash/simple-related-post.js' type='text/javascript'/>
</b:if>
<!--GetWebInfo Related Post-->
You can Paste this code directly before the closing tag </head> (Like that given in below picture)


4. Now where you want to display the related posts widget in to your blogger simpley Copy the below Script and paste it over there. I can use this widget right after the Social Sharing widget in Blog.

(Note: if you have any issue to use this code then you please comment on this post i will reply you as soon as possible)


<!-- GetWebInfo Related Post --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><h4 class='related-post-title'>Related Posts For You</h4><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div> </b:if> <!-- GetWebInfo Related Post End -->

5. Now just Save your Template and you can all don now your widget is working perfectly....

(Note: if you have any issue to use this code then you please comment on this post i will reply you as soon as possible)

I Hope this widget is really helpfull for you. If you like this article so please share it with your friends on social media.

How to Add a Cool Stylish Comment System in to Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post i will tell you that How can you Add a Cool Stylish Comment System in to Blogger. Commenting System is a basic system of a blogger blog. Any user who come on to your website and read any article and if he like your website articles or want to give any type of suggestion so pass a comment on to your website. If you need a fresh style to the comments of a standard Blogger Template, Here is two types of Simple CSS that will help you to play a different background, make your avatars rounded. Add a border with rounded corners and triangle which is actually an HTML entity to get that speech bubble look on your comments.



Here is the Demo of Both comments system (Picture Demo)



To Have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between the <b:skin> and </b:skin> tags.

Styling Simple Comments with CSS

Step 1. From the Blogger Dashboard go to >Template > and press on Edit HTML button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.

Step 3. Paste or type the following tage inside the search box and hit Enter to find it out.
]]></b:skin>
Step 4. Just above ]]></b:skin> add this CSS Code



Here is The First Style Comment System CSS Code


/* Blogger threaded comments (system) stylization with CSS code
by MIMRAN GetWebInfo (https://www.GetWebInfo.com)
-----------------------------------------*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#eb1e1e}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://www.techprevue.com/wp-content/uploads/2013/07/red-author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}

Here is the Second Style of Comment System for Blogger Code



.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}
How to Change Blogger Threaded Comments Bachground, Border and Colors


  • Replace the #F9F9F9 value to change the background color of the comments
  • #555 to change the text comments color
  • #EEEEEE to change color of the shadow arround comments
  • 4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments
  • 1,190cm to change the comments font size
  • To change the arrow color, replace the #EEEEEE value from color:#EEEEE;
  • To change the Border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
  • To change the avatars size and roundness, change the 60px value;
Step 05 Finally, Click on the Save Template button and you can all Done!!!!
I Hope this Article Is really help you out to solve this problem. 

How to Add Mega Menu with Image Thumbnails for Blogger

Hello and welcome to GetWebInfo.com. Here on this post you can be able to know that How to Add Mega Menu with Image Thumbnails in Blogger. Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now with the new AJAX navigation menu widget, images can be added to the drop down-menu as well.



The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Desire the plain and simple inspiration, the Drop down menu with images is a huge hit.

It works based on the jQuery library and Blogger JSON Feed API. Function wise, it works just like a normal drop-down menu when JavaScript is disabled. For it work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed,

Features of the Menu

Multi-Level Menu Support

The AJAX menu is multi-level drop-down menu that is based on the standard unorered list of HTML. When a menu contains a sub-menu, it load on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.

Cross Browser Compatibility

Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed. The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.

Automatic Sub-Menu Display

With the new AJAX menu, you only need to roll over a menu item and sub-menu will automatically load. No need to click on a menu to get the sub-menu to drop down. This is not only saves users valuable navigation time, but also outgoing traffic.

Menu Styling

Ajax menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when JavaScript is turned on. While the latter is when it is turned off. You can adjust the men parameters manually or you can use ready-to-use templates.

There are plenty of other features but you would not be able to use or experience them if you do not install the new menu with images. What do you need to do then to implement it in your blog or website?



Adding Mega Menu with Image Thumbnails in Blogger

1. Log in to your Blogger Blog Account, then go to the Dashboard. Select the blog where you want to install the new mega menu.

Add CSS

2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. type the following tag and hit Enter to find it:
]]></b:skin>
Once you find the tag, add the code below just above/before it:
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Add JavaScript

3. Check if your blog has the jQuery plugin already installed. If not then you need to add a few lines of code before the </head> tag (CTRL + F) to find it out. See the Code given below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;
 });
});
$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>
Note: If jQuery plugin already exist, remove the line in red.
          To change the number of posts, change the 4 value from:
postsNumber : 4
          To add a different thumbnail when a post has no image, replace the Url in blue from:
 noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;

HTML Code

4. Carefully add the HTML code to ensure that the drop down menu with images will works as designed. There are only three types of URLs that the AJAX Menu accepst and they must be used accordingly.

Label URL: http://yourbloggername.com/search/label/YourBlogLabelName
Search Query: http://yourbloggername.com/search?q=SEARCHQUERY
Label W/ Search Query: http://yourbloggername.com/search/label/LabelName?q=SEARCHQUERY

Among the three URLs the search Query has to be URL encoded using a specific tool.

5. Search the following line using CTRL + F:
<div class='main-outer'>
Just above this line,m add the following HTML code:
<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>
Note: Replace the text in blue with the label url and the text in red with the name of the labe. This is the label that you have added to labels setting of your post editor:


6. Click on Save Template for all the changes to take effect.

If you can't find the line from step 5. access the Layout tab, Click on Add Gadgetm and then choose HTML/JavaScript Gadget, copy the HTML code and paste it inside the box. Then press the Save button. Now you can all DONE.

Once that is done, You AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohysive look and appeal. Research shows, however that text accompanied by any image even, if completely irrelevant can grab attention.

How to insert AdSense inside Posts After the First Paragraph

Hello and welcome to GetWebInfo.Com. Here on this post you can learn that How to insert AdSense inside Posts After the First Paragraph. Want to know which part of your site or blog will bring you more profit? Add Adsense inside posts and then check out the famous Google AdSense heat map. Recent studies, however showed that placing AdSense after the first paragraph of a site or blog is one of the best AdSense placement. Unfortunately the default blogger platform offered by Google doesn't allow placement of ad after the first paragraph. But because it has become one of the most profitable area, plenty of webmasters have tried to take advantage of the best AdSense placement. How can you enjoy the same level of profit?



To solve the problem, we will just move the locations of the ads to be displayed by adding JavaScript DIVs. With the following script, you can easily choose the paragraph or heading after which you want to inject the ad to. This way, you won't have to manually change every post.

Add AdSense ad code after first paragraph of the post.

1. Log in to your Blogger account, Select your blog and click" Template" on the left side. Open the template editor using the "Edit HTML" button.

2. Once the editor opened, click anywhere inside the code area and press the CTRL+F keys on your keyboard to open the editor search box. Search the following lines
<data:post.body/>
Note: You will find multiple occurrences of <data:post.body/> but you need to stop at the second one, or if you don't see any changes, lest the last one.

3. Add the below DIVs in red before and after like this. Or in simple words i am saying that you just replace this <data:post.body/> with the code given below this line....

<div id='adsense-target'><data:post.body/></div>
4. Copy the Adsense code that you want to show and use conversion tool online to convert it into plain text. After conversion add the following HTML and replace the "ADSENSE CODE HERE" text with the converted ad code just above the line that we just found.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE CODE HERE</div></b:if


Alin AdSense left or Rigt

By default the Google AdSense ad unit will appear in the middle just after the first paragraph. If you are unhappy with the results and want to wrap text around the ad, you can choose one of the option given below.

A) Align AdSense on the left- change <div id='adsense-content'style="display:block;text-align: center"> with this one

<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">
After modifying your ad post looks like that....


B) Align AdSense ad on the right of the content- Change it <div id='adsense-content'style="display:block;text-align: center"> with :


<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">
5. Finally right after <div id='adsense-target'><data:post.body/></div> from
Step 2, add this script

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>
How to Customize it

To insert the ad after the second paragraph, change "o" from the line in red with "2".
If you want to put AdSense just below the heading h2 or heading h3 of a post, replace br from &quot;br&quot; with h2 or h3.

6 Click "Save your Template button" to save the changes and you can all Done....

I Hope this trick is really help full for you. If you like this article so please share it with your friends on Social Media thanks for Reading.......

Simple And Stylish Related Posts Text Widget for Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you will find out that how can you add related posts text  widget in the end of the post that can show more posts have much important for your blogger user experience. Actually related posts widget increase your blog's bounce rate. Also many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time, So hope you like all of the three.




Features:

  • Simple with 3-Stylish Design.
  • Page Counter Dark and Light Effect.
  • Only Text to Remain your Blog loading speed fast.

How to Add in Blogger Blogspot

Step 01. First of all Login to your blogger account

Step 02. Open your Desire blog

Step 03. Go to your Blog HTML Code editing place

Step 04. Click on Edit HTML button

Step 05. Check on Expand widget Template

Now Do as I Did

Step 06. Find this Line using CTRL+F

</head>

And copy the Code given below and paste it just Before /Above this tag.


<!--RelatedPostsStarts-->
    <script language='JavaScript'>
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 6) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
 Step 08. Now copy the Below HTML Code and Paste it where you want to show related post widget.
I like to suggest you to find these lines using CTRL+F

<div class=’post-footer-line post-footer-line-2’/>
<div class=’post-footer-line post-footer-line-3’/>
</div>
</div>

And Edit the Below HTML Code then copy

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
 Step 9. Next find the Below Line Using CTRL+F

</b:skin>



#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}



#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}


#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;} 

How to Approve Google AdSense Account with Copy right Issue

Hello and welcome to GetWebInfo.com. Here on this post i will tell you that how can you approve your Google AdSense account for your blogger blog or a Wordpress website. After reading this article you can be able to approve your adsense account even Google AdSense says your blog is copy right issue. This is a simple and easy way to approve your blog or website.

You can not monetize the content with Adsense ads which is already monetized and owned by other. Google AdSense is completely against it and if you do that you will be lost your adsense account. I never take risk with my adsense in that case, as i always wrote my own thoughts and content.



But on the web most of the website using copied content but these all sites are high authority and reputed websites and they even mention the source of content so they don't face any issue also they have premium adsense. But if you used copied then it will be same as playing with your adsense. Maybe you earn with it but there is no security as adsense team can ban your adsense at any time.

It can also possible to put other websites to your own website if you put their links on your content. Most of the web portal websites doing like these in order to escape from copyright issues. Did you see the TV channels showing sports news with mentioning channel name below like "courtesy: PTV Sports". Like this you have to give links to those websites you took content and you have to mention as content source.

But on this post i can tell you that you copy content from other websites and use this content to your own websites easily. It's very simple and easy step to copied content from other website and use it to your own websites that can appear like hundered percent original content. I am also apply for Google Adsense for Three times, But they do not accept my application. Because they can say that your website content is not original. They can also sent this email on to my account i have attach my email picture just below this line see it!


How to Make your website Content Original that can Accept Google AdSense?


Step 1: When you recieve this type of Email or any other issue type email from Google Adsense in which they can say that your website content is not looks like original then you can check first thing is that How much articles of the site is not original?

For Example i Know this type of Article in my website is not original. (picture of the article link given below)

So you can open this article by clicking on Edit button.

Now you can Select your post content and Copy all content.

Now Open This Link (SearchEnginReports.Com)

After open this site link just paste your post content in this Box.




After paste your copy content like that just click on (Check Plagiarism)

When you click on Check for Plagiarism it can take few seconds for process your content. After processing it can give you the result like that..... (See in Picture)



So here is the result of the content you put in to this site for plagiarism check. Now if your article result is Unique like 92% then it means you can be eligible for Google AdSense Application Approval.

 If your Post result is going in to Plagiarism Like Above 80% Then its not a good sign for your website your website is not acceptable for Google AdSense.

Note: Google AdSense Accept only those applications that can be Above 80% Unique Content on every post of the site.

So you can check your website every post if your Google AdSense Application rejected.

How to make Plagiarism type content Like Unique?

If you find any post in to your website is not looks like unique so you can make these type of post like Unique just doing these steps.

Open This Link (Google Translator)

Just Paste your Website post content in to it like that



Note: Just make changes in to google translator like that



In Urdu Box just paste your Blog Post content (it's not matter what type of your content language just paste it there in Urdu language box)

When you put your content in Urdu language box. It can give you the Result in English Language Box.

Just copy English Box content and again paste it in to your blogger post if you want to verify it your post content is looks like original or not so you can again doing the process that i am telling in above paragraph.

So you can all set. You can doing this step with your blog all type of posts is not looks like Unique and turned these post in to Unique Articles. I hope this Article Is really helpful for you. I you like this article so please share it with your friends on social media thanks.

Stylish Subscribe Feeds Via E-Mail Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this Post you can find out Stylish Subscribe Feeds Via E-Mail Widget For Blogger. If you often see a blog with additional stylish widget E-Mail Subscribe via email or subscribe to the media is a blog for visitors to read your blog feeds via email and if you have the latest article will send the email you blog visitors who have signed up your email subscribe.



Features:

  • These have 368px X 143px Dimensions 
  • 3 Stylish Color Design
  • Quick to Load and Easy to Use with simple installation




How to Add in Blogger Blogspot


Step 01. Go to Your Blogger.com

Step 02: Open Your Desire Blog where you want to add this widget as your blogger menu.

Step 03: Go to Template Layout

Step 04: Click "Add a Gadget" Where you want to Add it.

Step 05: Now scroll to "HTML/Jvascropt" 

Step 06: Click on "+" icon to Add it.


Step 07. Now copy the Below code and Paste it to There.

Step 08. Leave the Title Empty 

After Adding code in to Blogger HTML widget just click on save button and also click on save setting button.


<!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. Design By GetWebInfo.Com –><style type=”text/css”>
#exe-SubscribeE-Mail{background:url(http://4.bp.blogspot.com/-gKhwh9A-kTI/TqEA8HbGSRI/AAAAAAAAAlU/C1IqljEgOJs/s1600/Silver-E-Mail-Subscribtion-Form.png)no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}form#exe-SubscribeE-MailForm{display:block; padding-top:67px; padding-left:42px;;margin:0;}form#exe-SubscribeE-MailForm #s{padding-top:3px; padding-left:2px; width: 225px; font-size:15px; vertical-align:top; border:none; background:transparent;} form#exe-SubscribeE-MailForm #sbutton{padding-top:-8px; padding-right:45px; height:30px; width:15x; border:none; background:transparent;} </style> <div id=”exe-SubscribeE-Mail”> <form id=”exe-SubscribeE-MailForm” action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><input type=”hidden” value=”GetWebInfo” name=”uri”/><input type=”text” id=”s” name=”email” value=”Enter Your E-Mail Here” onfocus=’if (this.value == “Enter Your E-Mail Here”) {this.value = “”}’ onblur=’if (this.value == “”) {this.value = “Enter Your E-Mail Here”;}’/><input type=”hidden” name=”loc” value=”en_US”/><input type=”image” src=”http://img1.blogblog.com/img/blank.gif” id=”sbutton” /></form></div><!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action.Design By GetWebInfo.Com  –>



 <!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. Design By GetWebInfo.Com–><style type=”text/css”>
#exe-SubscribeE-Mail{background:url(http://4.bp.blogspot.com/-4q1lNuyaLCo/TqEA9DsN5jI/AAAAAAAAAlc/PXYMIIPbc8E/s1600/Blue-E-Mail-Subscribtion-Form.png)no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}form#exe-SubscribeE-MailForm{display:block; padding-top:67px; padding-left:42px;;margin:0;}form#exe-SubscribeE-MailForm #s{padding-top:3px; padding-left:2px; width: 225px; font-size:15px; vertical-align:top; border:none; background:transparent;}
form#exe-SubscribeE-MailForm #sbutton{padding-top:-8px; padding-right:45px; height:30px; width:15x; border:none; background:transparent;} </style> <div id=”exe-SubscribeE-Mail”> <form id=”exe-SubscribeE-MailForm” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><input type=”hidden” value=”GetWebInfo” name=”uri”/><input type=”text” id=”s” name=”email” value=”Enter Your E-Mail Here” onfocus=’if (this.value == “Enter Your E-Mail Here”) {this.value = “”}’ onblur=’if (this.value == “”) {this.value = “Enter Your E-Mail Here”;}’/><input type=”hidden” name=”loc” value=”en_US”/><input type=”image” src=”http://img1.blogblog.com/img/blank.gif” id=”sbutton” /></form></div><!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action.Design By GetWebInfo.Com  –>




<!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. Design By GetWebInfo.Com –><style type=”text/css”>
#exe-SubscribeE-Mail{background:url(http://1.bp.blogspot.com/-Ja8lAxHZL5o/TqEA-RiRb1I/AAAAAAAAAlk/QQ8Cn8gaN2Y/s1600/Red-E-Mail-Subscribtion-Form.png)no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}form#exe-SubscribeE-MailForm{display:block; padding-top:67px; padding-left:42px;;margin:0;}form#exe-SubscribeE-MailForm #s{padding-top:3px; padding-left:2px; width: 225px; font-size:15px; vertical-align:top; border:none; background:transparent;}
form#exe-SubscribeE-MailForm #sbutton{padding-top:-8px; padding-right:45px; height:30px; width:15x; border:none; background:transparent;} </style> <div id=”exe-SubscribeE-Mail”> <form id=”exe-SubscribeE-MailForm” action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”> <input type=”hidden” value=”GetWebInfo” name=”uri”/><input type=”text” id=”s” name=”email” value=”Enter Your E-Mail Here” onfocus=’if (this.value == “Enter Your E-Mail Here”) {this.value = “”}’ onblur=’if (this.value == “”) {this.value = “Enter Your E-Mail Here”;}’/><input type=”hidden” name=”loc” value=”en_US”/><input type=”image” src=”http://img1.blogblog.com/img/blank.gif” id=”sbutton” /></form></div><!– This Is A CopyRight Subscribed E-Mail Widget.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. Design By GetWebInfo.Com –>

Customization:
You can only change GetWebInfo with your own blogger feed burner user name.

Finally Click on Save button of the widget and you can all done.....
I Hope you can like this article and if you like this article so please share it on social media thanks for reading.

Best 3 Style CSS Page Navigation Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can find out Latest and Stylish 3 type of Page Navigation widget For Blogger. Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different color styles. Page Navigation is awesome widget which enables page number navigation to visits. 

Page Navigation is really awesome and long awaited feature. It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger. When you use this hack, you will see this kind of navigation on your blog's home page and label pages.



Features:

  • Simple with 3 Stylish Design
  • Page Counter
  • Next and Previous Buttons Included
How to Add in Blogger Blogspot

Step 01. Go to Your Blogger Blog

Step  02. Click on Template Settings

Step 03. Go to HTML

Step 04. Click on Edit HTML button

Step 05. Check on Expand Widget Template

Step 06. Now do As I Did

Step 07. Find this Line Using (CTRL+F) Function

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>

Edit Below code with your Data in Blue Numbers and Add After it.


<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>


Step 08.  Next Find the Below Line Using (CTRL+F) Function


      <!– navigation –>
<b:include name=’nextprev’/>


Step 09. Now Replace it with the given below code

<b:if cond="data:blog.pageType == &quot;index&quot;">
<b:include name="page-navi">
<b:else>
<b:if cond="data:blog.pageType == &quot;archive&quot;">
<b:include name="page-navi">
</b:include>
</b:if>
</b:else>
</b:include>
</b:if>
Step 10. Next find the below line using CTRL+F

      </b:skin>

Final Choose Any One style and insert the corresponding CSS Code Above it.

                                          
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

                                          
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { padding:4px 7px;margin-right:2px;font-size:11px;color:#555;background:#e8e8e8;border:solid 1px #ccc;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}
.pagenavi .pages{display:none} 
                                     
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a {border: 1px solid #BFBFBF;padding: 3px 6px;margin: 2px;font-size:11px;color:#4a77ae;background:#e8e8e8;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; }
.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}
Finally Save your template and you can all don!

I Hope this Article is really helpful for you. If you like this article so please share it with your friends on social media.