All About Blogging

Many blogspot users always wants to manage their posts with different methods. Like so, some use auto scrolling technique to manage or update their posts to the visitors. Actually, scrolling is also known as marquee behavior. Here I have shared a bunch of codes to make auto scrolling for recent blog posts.

By the way, it is nothing except managing latest blog posts like displaying posts in the sidebar. So if you wish to add this widget into your blogspot blog, then follow the following steps properly.


Step 01: Just login into your blogger dashboard and go to blogger layout.
Step 02: Now just click on add widget link.
Step 03: Add the following bunch of codes there and save it.

<script type='text/javascript'>
var jnWidth="110";
var jnScrollAmount="15";
var jnScrollDelay="55";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="12";
var jnBulletchar =">>";
var jnimagebullet="yes";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF1000";
var jnlinkhovercolor="3366CD";
</script><a href="http://allblogsolution.blogspot.com" target="_blank" title="Blog Tips 2017">Blogging Tips 2017</a>
<script type='text/javascript' src='http://googledrive.com/host/0B-GuAkK2nj5gc0ZCWWdFcDdOZk0' ></script>
<script type='text/javascript' src="http://blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

Now just remove blogspot.com with your blog url and save it.

Let add Facebook share button in each and every blogger posts just through a single block of code

<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE-OF-BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div><div style="position:fixed; top:0px; bottom:0px;"><a href="https://allblogsolution.blogspot.com/2016/09/how-to-add-facebook-share-button-in-blogger.html" style="font-size:10px;">All Blog Solution</a></div>

Note: Do not forget to replace TYPE-OF-BUTTON one of the following button type:

Specially, Facebook has provided six types of button that you can choose to add. They are

• link
• icon_link
• icon
• box_count
• button_count
• button

CSS stands for Cascading Sheet Style. CSS gives the style to the HTML tags. In earlier phase of web, there had not been developed the CSS 3. Now CSS 3 has reduced the long and vague and more difficult codes of javascript and jquery. CSS 3 is the latest version of CSS.

How to make mega menu using CSS 3?

One of the most useful and popular way of getting more likes into your business's facebook page is to put facebook like box into your blog or sites. Basically, you should copy the script given by facebook to add facebook like box into your site as documented by Facebook developer. However, there may be difficult to add any facebook plugins in blogger template, because blogger template has xml codes whereas facebook plugins has html and javascript codes.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".facebookstaticlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-252"}, "medium");}, 502);});
//-->
</script>
<style type="text/css">
.facebookstaticlikebox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj724mg-h-uZ9mxkduEcZhE8r7P-C5odsesRQ3zCo0u7L1x7kMKeB3HVmaAbJFynvn1tdH7wLFTouvmDaI13TobfAT_arz7TC5RbGTZuqeKQEqqgNOPtUjd8NXpg8RzcZOYY8bvxegNdyZQ/s1600/facebook-png.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 272px;
padding: 0 6px 0 45px;
width: 247px;
z-index: 99999;
position: fixed;
right: -250px;
top: 16%;
}
.facebookstaticlikebox div {
border: none;
position: relative;
display: block;
}
.facebookstaticlikebox span {
bottom: 12px;
font: 10px "lucida grande", tahoma, verdana, arial, sans-serif;
position: absolute;
right: 6px;
text-align: right;
z-index: 99999;
}
.facebookstaticlikebox span a {
color: #808080;
text-decoration: none;
}
.facebookstaticlikebox span a:hover {
text-decoration: underline;
}
</style>
<div class="facebookstaticlikebox" style="">
  <div><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ6b1y83f6R9boHs5GfFWSVu_v1Etjg-3jwVo8f2EYTmsKLXi3M0fERrVX8htQgIjPRphn7vr9vdeYPsv2h0zOCAKgRxbjFYE6ufJDUQwD9_yLKi0fOD6DQpvn0jC0_v3-UjlpGr2Qog/s1600/all.png" width="60" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Solution"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ6b1y83f6R9boHs5GfFWSVu_v1Etjg-3jwVo8f2EYTmsKLXi3M0fERrVX8htQgIjPRphn7vr9vdeYPsv2h0zOCAKgRxbjFYE6ufJDUQwD9_yLKi0fOD6DQpvn0jC0_v3-UjlpGr2Qog/s1600/all.png" width="60" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ6b1y83f6R9boHs5GfFWSVu_v1Etjg-3jwVo8f2EYTmsKLXi3M0fERrVX8htQgIjPRphn7vr9vdeYPsv2h0zOCAKgRxbjFYE6ufJDUQwD9_yLKi0fOD6DQpvn0jC0_v3-UjlpGr2Qog/s1600/all.png" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/allblogsolution&amp;width=247&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=272" scrolling="no" frameborder="1" scrolling="no" style="border:none; overflow: hidden;background:#f7f7f7; height: 272px; width: 247px;">
    </iframe>
  </div>
</div>

Step 03: Now save the template.

Note: 

1. Before saving the template, you have to replace http://www.facebook.com/allblogsolution by your own facebook page url.
2. Do not use jquery link if there is already jquery link into your blogger template.

Bloggers use different techniques of ads placement to get more clicks on their adsense ads and any other. Like, placement of ads inside blog post, bottom of the post, sidebar placement, header placement etc. But I think many may not have applied adsense placement under the first paragraph of the post. This technique is new and I hope this will definitely help to make more money from ads publishers like adsense, infolinks , chitika etc.

Create Infolinks Account and Earn Money

Here is straight process of placing adsense ads just after the first paragraph of a post. This is only applied in blogger blog. Indeed, this technique is for blogger but if you also want to place in other platform like wordpress and joomla. There you may find plugins or you have to put using some codes like below:

How to put ads just below the every blogger post?

Step 01: Login blogger dashboard>>template. And click on edit html . 
Step 02: Just search for <data:post.body/>. Use CTRL + F button to search.
Step 03: In default template of blogger, you can get multiple occurrence of above code, so you have to choose second one.
Step 04: Now replace that code by the below code

<div id='target'><data:post.body/></div>

Step 05: Then place the below code right after the above (step:4 div).

 <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;content&quot;);
var target = document.getElementById(&quot;target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

Step 06:  Now you have to add this code just above the target div(step 04 div)

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id='content'>
Adsense code placing center
</div>
</b:if> 

Step 07: This time to put adsense code. So login to you adsense account and copy an adsense code. Then parse this code using adsense parser. After that, replace Adsense code placing center by parse adsense code.

Step 08: Save the template.

That's all. If you got any errors on this widget, please comment below the comment box. I will get you on there. Thank you. Enjoy blogging.