Thứ Ba, 17 tháng 3, 2015

Simple Recent Post Widget For Blogger With Thumbnails

Blogger Simple Recent Post Widget

Recent post widget for blogger with thumbnails - is most important part of blogger. Every blogger must set the widget for his/her blog. Before some days i shared another tutorial for recent post widget and that was: Awesome Animated recent post widget for Blogger.
Today i am gonna to share a simple recent post widget without animation some of friends request. Before start the tutorial see the simple recent post widget:

Results

Step1: Add a new gadget "HTML/Javascript" and past the below code on this gadget and Save it.

 <style type='text/css'>
img.recent_thumb {padding:1px;width:75px;height:75px;border:1px solid silver;border-radius:50%;float:left;margin:5px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://yourjavascript.com/31759551731/simple-recent-post-by-msdesign.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 100;</script>
<script src='http://msdesign92.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>


Note: "msdesign92.blogspot.com" replace it with your blog url.

That's it. Now enjoy the simple recent post widget and keep sharing our post with your friends. Thanks....

Thứ Sáu, 13 tháng 3, 2015

Awesome Animated recent post widget for Blogger

Blogger Awesome Animated recent post widget

Blogger Animated recent post widget - is more attractive and useful. Some users requested me for blogger recent post widget. Okay, Today i am sharing a widget for blogger recent post widget. This widget with awesome and beautiful rotate animation. 

Some times we have to need a widget for recent post. Because when a visitor visit on static page or post then he/she could't see other recent posts. If you put a widget of recent post then all visitors are see your recent post. Okay, Now let's stat. Before starting you may see the results of this widget.


Step 1 - Go to your blogger dashboard and click on Edit Template.
Step 2 - Now Save the below CSS before ]]></b:skin> or </style>
 #post-gallery{width:100%;margin:0 auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px}#post-gallery .rp-item{float:left;display:inline;position:relative;margin:2px;padding:0;background:url(http://i.imgur.com/Xgup3Hw.gif) no-repeat 50% 50%;width:79px;height:79px}#post-gallery .rp-item img{width:69px;height:69px;border:2px solid silver;border-radius:50%;margin:0!important;padding:0!important;background:transparent!important;display:none;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;overflow:hidden}#post-gallery .rp-item img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}#post-gallery .rp-item .rp-child{position:relative;top:10%!important;left:10%!important;z-index:1000;width:200px;background-color:#fff;border:2px solid #f56954;-webkit-box-shadow:5px 5px 10px rgba(0,0,0,0.7);-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.7);box-shadow:5px 5px 10px rgba(0,0,0,0.7);padding:10px 15px;overflow:initial;word-wrap:break-word;display:none;opacity:.9}#post-gallery .rp-item .rp-child h4{font-size:12px;margin:0 0 5px;color:#1BA1E2}#post-gallery .rp-item:hover .hidden{display:block}

Step 3 - Save The Template and Click on Layout
Step 4 - Add a new gadget like HTML/Javascript and save the below javascript.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
var rpTitle = "Recent Posts", // Widget Title
numposts = 14, // Number of Posts to show
numchar = 200, // Number of Characters to be displayed
rcFadeSpeed = 600, // Speed
pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // If No Image
blogURL = "http://your-blog.blogspot.com/"; // Your Blog URL
</script>
<script src="https://ms-design.googlecode.com/svn/animated-recent-posts.js" type="text/javascript"></script>

Note: "http://your-blog.blogspot.com/" replace this with your blog url.

Now enjoy the awesome animated widget with your blog. If you find any problem then inform me on comment section. Happy Blogging and keep sharing our posts... Thanks

Chủ Nhật, 8 tháng 3, 2015

AdSense, AdWords, Analytics and Blogger Android Apps. Every webmasters must download

Download Adsense adwords analytics and blogger android apps

Hello my dear and lovely friends, hope all are fine. Today i am share some android apps those are help every webmasters everywhere. We know, at present google play and important role era world. Google gives every person an outstanding service. Specially who are webmaster, they are enjoy some free service of google those are awesome and nonpareil.

Today i am share some android apps  of google those are help every webmaster. We know, Adsense, Adwords, Analytics and Blogger are free service of google. If you are use those service then you must know about those tools and service. yes, those tool's service are outstanding. Those's tools also have android apps. If you use any android apps then you should download those apps. Then you should access your all reports and data from your mobile device anytime anywhere. Now lets download.

AdSense APK Apps for Android

Download Google Adsense Apk apps
The Google AdSense app provides an easy way to view key data from your AdSense and AdMob accounts. It allows you to access reporting features anywhere, directly from your mobile device. The app provides you with an account overview, as well as access to detailed performance reports (now also featuring charts) on all key metrics. Available reports include: top ad units, channels, sites, countries and more. The account earnings report is also accessible via a resizable widget.




Google AdWords APK Apps for Android

Download Google Adwords Apk
You know, Google AdWords is the best Keyword research tool . This is a free service of Google. Every webmaster like this tools. The Google AdWords app helps you stay connected with your ad campaigns from anywhere, using your Android smartphone. You can easily view your ads’ performance on the go with this simplified companion to your desktop account. So you’ll keep your campaigns running smoothly—no matter where your business takes you.






Google Analytics APK Apps for Android

Download Google Analytics APK Apps for Android
Google Analytics is best service for view audience report and it absolutely free service of google. You also found the targeted keywords which using visitors are come in on your site. Access all of your Google Analytics web and app reporting profiles from your mobile device. The app has an all-new look and feel that’s optimized for phones and tablets, so you can easily get your Analytics data anytime, anywhere.





Blogger APK Apps for Android

Download Blogger APK Apps
Download the latest release of the official Blogger app, and start blogging on the go. With Blogger for Android you can:
Compose a post that you can save to draft or immediately publish, Edit existing posts, View list of your saved and published posts, Switch account/blog if you have more than one, Embed an image from the gallery, or, by taking a picture directly from the app, Add labels to your posts, Add location information. With the Blogger app for Android, you can quickly and easily publish posts to your blog wherever you are.




Now every blogger done their works in easiest ways from their mobile device anytime anywhere. Enjoy those apps and keep stay with us. If you found our posts are helpful at you, then don't forget to share our post because your support is our future. Thanks...

Apps Source: Play.google.com

Thứ Ba, 3 tháng 3, 2015

How to Create Blogger HTML Sitemap Page or add HTML Sitemap in blogger.

Blogger HTML Sitemap add

Hello my dear friends, today i am going to show how to add a HTML Sitemap in blogger. From this case today i am a Sitemap creator :P. Okay now come to main point. I think every blogger's have an clear idea about sitemap. yeah, Sitemap is a most important part of SEO (Search Engine Optimization). When Google Bot  comes on your page for Index, then it find your sitemap. If you add a sitemap page then Google Bot easily find your all content and content's page for indexing.

If your search on google for Site map Builder then you will found millions of results. But those are not for you if you run a blogspot or blogger site. If your searching for auto sitemap generator or auto sitemap builder then its are not be valuable for you. Cause you are running blogspot site. Now you have make HTML Sitemap  manually. That's why i am preset here for this tutorial. 

How to add HTML sitemap page in blogger?

Yes, it is an common fact. By this article you should easily make a HTML Sitemap for your blogger site. This sitemap is for blogger. Now lets start,

Step 1: Create a new page and give the title "Sitemap"
Sitemap Create for blogger


Step 2: Click oh HTML tab and copy the below code and past on your HTML Section
<script src="https://ms-design.googlecode.com/svn/Sitemap.js" type="text/javascript"></script>
<script src="http://msdesign92.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<div style="display: none;">
</div>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 {background:#fff;border-bottom:1px solid #fafafa;color:#444;font-size: 20px;margin: 0 0 10px 2px;padding: 0 0 10px;}
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a {background:#fff;color:#444;display:block;border-bottom:3px solid #f0f0f0; font-size: 14px; line-height: normal; outline:none;padding:10px 15px;transition:all .25s ease-in-out;}
.ct-columns-3 p a:hover {background:#02a4e5;color:#fff;border-bottom:3px solid #0392cb;}
.ct-columns-3 p span{color:#fff!important;font-style:normal!important;font-weight:normal!important;}
@media screen and (max-width: 768px){ .ct-columns-3 {-moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style></div>

Note: "msdesign92.blogspot.com" replace it with your blog url.

Now Publish your page. That's it... If you think this article is helpful then don't forget to share. Cause your support is our future. Thanks.