blogger templates & widgets: tháng 4 2015

Thứ Năm, 30 tháng 4, 2015

Blogger Recent Comments Widget with Circle Avatar

Diterbitkan tháng 4 30, 2015

Tags

CSS

Javascript

Tips and Tricks

Widget

Blogger Recent Comments Widget with Cirle Thumbnails - is a widget that can show recent comments. We add many widget for make our blog beautiful. All of them Recent Comments Widget is one. By this widget you can display a number of comment(s).

In this time i share this widget. This widget is made with CSS and Javascript. By using this widget you also change the comment avatar size (Default size is 45px). This recent comment widget is fully different with other widget. This CSS look is awesome. Now let's start.

Go to Blogger Dashboard > Layout > Add a gadget > HTML/Javascript and copy past the below code and save it.

 <style type="text/css" scoped> 
ul.ms_recent{list-style:none;margin:0;padding:0;} 
.ms_recent li{background:transparent;margin:0 0 6px!important;padding:3px  
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;} 
.ms_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.ms_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.avatarRound{border-radius:100px;width:35px;height:35px} 
.ms_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = False;
 maxfeeds=50,
 adminBlog='MS';
//]]>
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/msdesign92/ms-design/master/recent2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=ms_recent&amp;&amp;max-results=50">
</script>

Results:

Thứ Bảy, 25 tháng 4, 2015

Dofollow Blog Commenting site list 2015

Diterbitkan tháng 4 25, 2015

Tags

SEO

Dofollow Blog Commenting site list 2015 - Here i'm share some list of Dofollow blog commenting site list with high PR. You know strong backlinks are important for every blog. For better search result you must create dofollow backlink for your blog.

Also read: Top 5 High PR Instant DO Follow Backlink 2015. Build Quality Backlinks

Latest High PR Dofollow Blog Commenting Sites List 2015

S.No.	Blogs Commenting Sites	PR
1	http://www.dailyblogtips.com/	6
2	http://www.weblogtoolscollection.com/	6
3	http://www.jiscdigitalmedia.ac.uk/blog	6
4	http://www.socialtimes.com/	6
5	http://www.problogger.net/	6
6	http://www.searchenginejournal.com/	6
7	http://www.weblogtoolscollection.com/	6
8	http://www.blog.photography.si.edu/	6
9	http://www.grokdotcom.com/	6
10	http://www.interactiondesign.sva.edu/	6
11	http://www.currybet.net/	6
12	http://www.w3blog.dk/	6
13	http://www.quicksprout.com/	6
14	http://www.tripit.com/	6
15	http://www.links.org.au/	6
16	http://www.blogmofuse.com/	6
17	http://www.bloggingtips.com/	5
18	http://www.kikolani.com/	5
19	http://www.comptalks.com/	5
20	http://www.seobythesea.com/	5
21	http://www.seo-hacker.com/	5
22	http://www.newcritics.com/	5
23	http://www.intenseblog.com/	5
24	http://www.searchenginepeople.com/	5
25	http://www.engineering.curiouscatblog.net/	5
26	http://www.growmap.com/	5
27	http://comluv.com/	5
28	http://www.bluehatseo.com/	5
29	http://www.blogussion.com/	5
30	http://www.kongtechnology.com/	5
31	http://www.midasoracle.com/	5
32	http://www.forthelose.org/	5
33	http://www.quickonlinetips.com/	5
34	http://blog.ruski.co.za/	5
35	http://www.animhut.com/	5
36	http://www.kongtechnology.com/	5
37	http://www.quickonlinetips.com/	5
38	http://issuu.com/	8
39	http://www.politico.com/	8
40	http://www.xing.com/	8
41	http://www.blogger.com/	8
42	http://my.telegraph.co.uk/	8
43	http://www.ehow.com/	7
44	http://www.2checkout.com/	7
45	http://30boxes.com/	7
46	http://www.zillow.com/	7
47	http://www.comedycentral.com/	7
48	http://www.codeproject.com/	7
49	http://www.pamshouseblend.com/	7
50	http://www.mrqe.com/	7
51	http://www.redstate.com/	7
52	http://www.javaworld.com/community/	7
53	http://www.techtricksworld.com/	4
54	http://www.weblogbetter.com/	4
55	http://www.kathyblogger.com/	4
56	http://communicatevalue.com/	4
57	http://www.windowstalk.org/	4
58	http://www.blondish.net/	4
59	http://www.freebloghelp.com/	4
60	http://www.bloggodown.com/	4
61	http://www.magemojo.com/	4
62	http://www.becomeablogger.com/	4
63	http://www.stayonsearch.com/	4
64	http://www.performinsider.com/	4
65	http://www.dmiracle.com/	4
66	http://www.kimwoodbridge.com/	4
67	http://www.famousbloggers.net/	4
68	http://ariwriter.com/	4
69	http://www.benspark.com/	4
70	http://www.techatlast.com/	4
71	http://www.thevirtualasst.com/	4
72	http://dofollow.info/	4
73	http://www.seotops.com/	3
74	http://technoupdates.org/	3
75	http://www.segenma.com/	3
76	http://www.bloggingwithoutablog.com/	3
77	http://www.extremejohn.com/	3
78	http://emoneymarketing.com/	3
79	http://www.pqinternet.com/	3
80	http://www.tekkaus.com/	3
81	http://www.blogstash.com/	3
82	http://www.smartbloggerz.com/	3
83	http://www.wassupblog.com/	3
84	http://www.youdofollow.com/	3
85	http://www.johncow.com/	3
86	http://www.3arn.net/	3
87	http://revellian.com/	3
88	http://www.blogengage.com/	3
89	http://www.monetizeblogging.com/	3
90	http://www.blogelina.com/	3
91	http://www.itechcode.com/	3
92	http://azblogtips.com/	2
93	http://www.awesomebloggers.com/	2
94	http://www.techehow.com/	2
95	http://www.maxblogtips.com/	2
96	http://www.seoallrounder.com/	2
97	http://www.makemenoise.com/	1
98	http://bloggingfor.info/	1
99	http://www.wpcypher.com/	1
100	http://www.guideandnews.com/	1
101	http://readmeloud.com/	1

Chủ Nhật, 19 tháng 4, 2015

Simple Digital Clock For Blogger/Website

Diterbitkan tháng 4 19, 2015

Tags

HTML

Javascript

Widget

Simple Digital Clock For Blogger/Website - in this tutorial i will share, how to share a simple digital clock in blogger blog. This is simple part of blogger.

This part is not important for your blog. This is a just beauty of a blog. You use this trick in every website like wordpress.

View Result

At first you seen which widget? Right, This is our tutorial of this post. Now come to the main part. Before starting work, please keep a backup file of your template then start work.

Now starting: Click on Template > Edit HTML Then hit "Ctrl+F" and search </style> copy past below CSS code before </style> Tag.

#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 4rem 0;
}

#realtime span {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

@media all and (max-width: 600px) {
    #realtime {
        font-size: 4rem;
        padding: 2rem 0;
    };
}

@media all and (max-width: 350px) {
 
    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
    };
}

Now Save Template and click Layout, Then add new HTML/Javascript Widget and copy past below code.

<time id="realtime"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("realtime");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

That's it. Now refresh your page and see changes. If you found any problem then inform me in comment section and keep sharing our posts. Thanks...

Chủ Nhật, 5 tháng 4, 2015

Add Breaking News Ticker For Blogger

Diterbitkan tháng 4 05, 2015

Tags

HTML

Javascript

Widget

Breaking News Ticker widget for blogger - is a most important and popular tool for blogger. Specially News base blog's must have a breaking news ticker on their website. Today i am share the exclusive tropic. Adding this widget, you can easily shown your latest or recent posts one by one. This widget is help you to show recent posts as a ticker. In this tutorial i will show you, how to add automated breaking news ticker for blogger. Every wordpressian can add latest posts ticker by adding some wordpress plugins easily. But every blogger users need to do it by adding some code manually. In this post, i shared a beautiful breaking news ticker for blogspot blog.

View Result

News ticker is a simple and better way to show latest posts one by one. By using a breaking news ticker in blogger, you can easily present your posts on visitors eye.

Code updated: 20/11/2015

Where you place it? Some webmasters like to show breaking news ticker on top of page and under of navigation menu. if you willing to add this breaking news ticker on your blog, then firstly choice the place where you want to put it. I recommended you choice the place top of page of under of navigation menu. These place are editor's choice.

Here are simple steps to adding this awesome animated jquery breaking news ticker for blogspot blogger blog.

I hope it will be helpful all bloggers. Okay now lets start the tropic.

Step1: Go to your Blogger Dashboard. Template > Edit HTML and find </style>

Step2: Copy the below CSS Code and Past Before </style>

 /*========================== CSS Breaking News by msdesignbd==========================*/
#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:35%;float:left;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {float:left;margin-left:60px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#breakingnews .breakhead {position:absolute;display:block;float:left;font-size:11px;font-weight:700;text-transform:uppercase;padding: 2px 6px;}

Step3: Now Past the below javascript before </body> tag.

<script type='text/javascript'>
//<![CDATA[
// Breaking News by msdesignbd.com
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Code updated: 20/11/2015

Step4: Now add the below HTML Code where you want show this breaking news ticker. You also add the below code on a HTML/Javascript Gadget.

 <div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Latest</span>
<div id='adbreakingnews'>Loading...</div></div>
<div style='clear: both;'/>

You can change the CSS to make this widget more perfect for your blog.

That's it. Now Save your template and refresh your page and see the change. If you found any problem then just inform me on Comment section. Thanks...