Advertisment

Showing posts with label Blogger Widget. Show all posts
Showing posts with label Blogger Widget. Show all posts

June 08, 2016

Recent Comments Widget for Blogger


Recent Comments Widget for Blogger

Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".
There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post nameand followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

  • Sign In to Blogger Dashboard
  • Select Layout -> Click on Add a Gadget
  • Take HTML/Javascript from the list
  • Give the Title and Copy the below code to it and Save
<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://sayyadgraphic1.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><a style="display:none" href=http://sayyadgraphic1.blogspot.com>Recent Comments Widget</a><style type=text/css>.rcw-comments a {text-transform: capitalize;}.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}</style>
  • Change the RED highlighted with your blog nameIf you want different Styles for this Widget, Please visit again I will post soon.
Another Way To Add Recent Comments Widget

  • Go to Layout -> Click on Add a Gadget
  • Select Feed from the list and give the following URL
http://sayyadgraphic1.blogspot.com/feeds/comments/default
  • Change the RED marked portion with your Blog URLA Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.
  • Click Save
    Congratulations you have done.
    I hope this article will help you and you enjoyed this article if so, Please Like and Share .
Read More

June 06, 2016

10 Beautifull Label Widget For Blogger Template


Label widget is very useful for easy navigation. We all knows Blogger default label widget is not eye-catching, for this reason I have created some unique cloud label widget with is very attractive and obviously your Blog visitors will love it. I have used pure CSS code so it won't hamper the loading time of your Blog. On the other hand, its stylish look can grab the attention of visitors. For adding this widget please follow the simple steps from below-

  • Step 1  : Log in to your Blogger account and Go to your Blogger Dashboard
  • Step 2 : Go to your Layout tab.
  • Step 3 : Click on "Add a Widget" then select "Label" Widget (Select Cloud Style).

Add CSS Coustom Label Widget In Blogger Template

  • Step 4 : Click on -> Template -> Edit HTML
  • Step 5 : Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
  • Step 6 : Copy any code from below and Paste the code above/before </b:skin> 
/* cloud label by www.sayyadgraphic1.blogspot.com*/.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#333333;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}.label-size {line-height:1.2}



/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border-radius:30px;background:#333333;}.label-count {white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}.label-size {line-height:1.2}



/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border:5px dashed #000000;border-bottom-right-radius: 30px;border-top-left-radius: 30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border:5px dashed #FA0830;background:#000000;}.label-count {white-space:nowrap;border-bottom-right-radius: 30px;border-top-left-radius: 30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}


/* cloud label by www.sayyadgraphic1.blogspot.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}



/* cloud label by www.bloggerspice.com */.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#08A2FA;border-radius: 30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#000000;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}
 Step 7 : Finally hit the Save template button.

Customization To change the label color just change color code only from code block. You can avail the different color from  Color Picker. 

Check your Blog now to see the beautiful CSS label widget. I hope this new CSS custom Label will love everybody. And this will slightly help to bring some variation on your Blogger template. For more exciting staff keep in touch.
Read More

About Owner


Sayyad Miskeen is a 3D Modeler , Programmer, web and Game developer, SEO Consultant and Online Mentor who has been working since 2011 if you want to know more about him then Please Click Here. He has been awarded Best Graphics Designer in 2016 at Islamabad International Design Award Seminars.

About My Father


My father name is Muhammad Miskeen. He is born on 1957.He is a senior Teacher at BISE Rawalpindi.he is Joined his Duty as a art & Drawing Teacher in G.H.S.S Ausia Rawalpindi (12-08-1976) 
Qualifaction: 
carer O'level in G.H.S.S
Intermediate And Graduation in Art & Drawing + Statistics + Economics {1974 - A.I.O.U}

Advertisment

Total Pageviews in this Week

Best Post of The Weak

© 2013-21 Sayyad Graphics. Designed by Sayyad Miskeen & Distributed by sayyadgraphic1.blogspot.com