Showing posts with label Widgets. Show all posts
How to Show Total Number of Post, Comment in Blogger / Blogspot Blog?
If you want to show total number of post, comment
in your blog you just need add a JavaScript in your blog by adding Gadget.
It very easy to add this widget in your blogger blog
just add below given JavaScript in your blog.
Follow Below given step to add total number of post,
comment Display in your blog.
Sign in – in your blogger account
Select your Blog in which blog you want to Display total
number of post and comments
Go to Layout Option.
In Layout option
there is an Add Gadget Option Select this (see below demo image)
After select Add Gadget a popup window will be open (Add
Gadget window)
Now select
“HTML/JavaScript” Gadget. (See below demo image)
Now add below given JavaScript in Content Box. (See below
demo image)
Please Copy Below JavaScript
and paste in HTML/JavaScript Content
box
|
<script
style="text/javascript">function mbhTotalCount(json)
{document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><p
style="font:20px Tahoma;">Total Posts: <script src="http://www.example.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script></p><p
style="font:20px Tahoma;">Total Comments: <script src="http://www.example.com/feeds/comments/default?alt=json-in-script&callback=mbhTotalCount"></script></p>
|
Note: - Please replace http://www.example.com
with your blog URL
Now press Save Button after save press Save
Arrangement Button on layout page.
Now check your blog.
Thanks i hope you like this post
Add Floating Facebook Like Box in Blogger
Increase your Facebook page Likes add floating widget in your blog when someone bring mouse cursor in Facebook image a facebook like box will be appear it’s a cool widget for blogger you can see live demo on this page right side of this page. So add this sliding floating facebook like box widget in your blogger blog and increase your blog reader fans.
How to Add Facebook Floating Like Box Widget in Blogger
Follow Below steps for Add Facebook Floating Widget- Go to Blogger
- Take Backup of your Blog Template
- Search For <head>
- Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog
- Now Add Below Given Code in your blog by add a widget option
- Go to Blogger
- Go to your blog Layout option.
- Now Select Add a Gadget option.
- Now select Html/Java Script option
- Now past the above code in Content area field and press save button.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--Floating Facebook Widget START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".vktechzone").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .vktechzone{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRUQBFGdPbZE4cB5FOKHL8rPHnbuvvlul-IOsyL4ZolGbGyzus6MbSp9ZvCAQBvMBANJnxG8IorLAfQ-yNi14T-lJdF_fGWKSv8g26L87un9K6EBdpAhiVX4jeHGS7QF2PELRJdD1LTuB/s1600/ABT_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .vktechzone div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .vktechzone span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .vktechzone span a{color: gray;text-decoration:none;} .vktechzone span a:hover{text-decoration:underline;} } </style><div class="vktechzone" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fvktechzone&width=245&colorscheme=light&show_
faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.vktechzone.com/2014/05/add-floating-facebook-like-box-in.html">Get This Widget</a></center>
</span></div>
</div>
<!--Floating Facebook Widget END-->
Note:- Replace vktechzone with your Facebook page ID.
How to Add Html/Java widget? Follow below steps to add Widget
Know more About How to add Gadget In blogger
How to add whatsapp text share button in blogger or websites
How to add this Button on your site or blog? Follow below Steps for add this button.
Add Below Given Script in Head Section between <head> </head> tag.
Now use below given any button Code in your page and add your content in this code as below given.
<a class="wa_btn wa_btn_s" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>
<a class="wa_btn wa_btn_m" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>
<a class="wa_btn wa_btn_l" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>
Note :-
Replace Add Content here which you want to share Text with your Text Which you want to share by clicking this button.I hope now you understand how to add whatsapp button in website if you want my help you can add your quetion in Comment Area click Comment Link which is show Below of this page Heading
Social Media Connecting Rotating Button for Blogger
Connecting social media cool rotate button for blogger add social media following button in your blog or website for connect facebook, twitter, Google+, Pinterest, Page or Rss feed.
How to add this rotate social button in your blog
Add Below Given Code in your blog to show Rotate social button on your blog.<style>p#vktechzone_socialicons img {
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#vktechzone_socialicons img:hover {
-moz-transform: rotate(160deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>
<center><p id="vktechzone_socialicons">
<a href="http://www.facebook.com/ vktechzone"target="blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6bxcbFGiw_EUsDdWY8vDpsUkSwJVk2qcZHx6Pjti-89fJ2dH0O31C0rKJ16gdpoEAZxCWtH44WMEBIjzupGdjETMsWQMrbqDIymKDIbcScfS6GhLNTI3wV_M_kgZy4s22WFs5Sxl0Hs/s64-no/Facebook+jagged+edge.png"></a>
<a href="http://www.twitter.com/vktechzone"target="blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxykL1I9farsBK18U5SHCWYlvqLHr4Zffq8k89VfZkmPUcaLwd6cA_df5L4I33vYDGU2rutApUhp3fXWK7mKWidjHGNH-TJnUzb3ccQ7x9BD73xtjQzMi7Eh9nnPHyMxG2mcStV39mKYw/s64-no/jagged+twitter.png"></a>
<a href="https://plus.google.com/111153762318745795031/posts"target="blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_FrcCJEO_70fA-SJ3QRpAuDDIr8pi7aKfMgnfp76OkuLgIJ6K6ji2gwiuez6vR-PhAlB12bvJ2W-w4H3mkSAAtAB7M4H6FncZTek4qHTsUrVotPzwTwDLE3cV_ocPtu6FZTLAhHVAfQ/s64-no/google+plus+jagged+edge.png"></a>
<a href="http://pinterest.com/vktechzone/"target="blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdUkptxzAQDaIYohQWPdJmKx47zCYwnmyqbN3yNUbaDTby6TZ5Reko88yZgw87GjzCqvAcVfuC0gOH5-lmYw8_48SWRezF5LTC59-ZlM_PgTO5Q7CuOPighBoiIt7brSq2iEWWHsGW-g/s64-no/pinterest+jagged+edge.png"></a>
<a href="http://www.vktechzone.com/feeds/posts/default"target="blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyssWNGvS4PF55EFgdM4yZcmpTbfJGnMQmy6tA7xWZ8RcFkYw2awk8fDWY2pLd-rsFmPkg7QHXYgLz0qxYmqcRBxpvmazLFyGym0yRXBcjReZIYBRxHTZpFWozeyZD595O1nNePdvtDg/s64-no/RSS+jagged+edge.png"></a>
</p></center>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.vktechzone.com" target="_blank" title="Get This Widgets">Widget by vktechzone</a></div></small>
Note:-Replace vktechzone with your facebook page ID Replace 111153762318745795031 with your Google+ page ID Replace vktechzone with your Twitter ID Replace vktechzone with your Pinterest ID Replace http://www.vktechzone.com/feeds/posts/default with your Blog RSS URL
How to Add Html/Java widget? Follow below steps to add Widget
- Go to Blogger
- Go to your blog Layout option.
- Now Select Add a Gadget option.
- Now select Html/Java Script option
- Now past the above code in Content area field and press save button.
Know more About How to add Gadget In blogger
You May Also Like-Floating Facebook Like Box
You May Also Like-Magical Effect Social button
You can drag and adjust widget place in blogger layout
You can drag and adjust widget place in blogger layout
Add Back To Top Button in Blogger With Smooth Scrolling
How to add back to top smooth button
Follow Below steps for Add Back to top buttong for blogger- Go to Blogger
- Take Backup of your Blog Template
- Search For <head>
- Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog
- Now Add Below Given Code in your blog by add a widget option
- Go to Blogger
- Go to your blog Layout option.
- Now Select Add a Gadget option.
- Now select Html/Java Script option
- Now past the above code in Content area field and press save button.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
Note:- you can use your favorite image for up arrow Only replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png with your image URL.
How to Add Html/Java widget? Follow below steps to add Widget
Know more About How to add Gadget In blogger
Subscribe to:
Posts
(
Atom
)
