How To Make A Recent Comments I (Feed Widget)

Two-way communication between the owners of a site, especially blogs, with their visitor are one of the most important thing for the development of the sites. In addition to ongoing the relationships with their visitors, the owners of the sites/blogs can digg up the information about strenghts and weaknesses of their sites, what are the visitors like and dislike, criticisms and suggestion and much more.

One of the way to building two-way communication within a site is to provide a visitors comments facilities. Almost all of the sites/blogs based on CMS like Blogger, Wordpress, Drupal, Joomla, Mambo. already have comments facilities for the visitors by defaults.

But the problem is... Along with increasing the number of articles made, it's rather difficult for the owner of sites to control (read and answer) because the location of the scattered comments in various articles that have been made.

The difficulty in controlling visitors comments that spread in various articles can be overcome by "Recent Comments" facilities. This Recent Comments will show up the last comments by the visitors in an article, hence the blog owner will soon find out that there are new comments in their articles, so that they can make a follow up.

Go to your Dashboard >> click Settings of your Blog >> click Site Feed. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Then Save the Settings.   

 

Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.

 

There are two Feed URL we can used by default, you can choose one of them.

Atom Feed for the blog commnets like this: 

http://manage4widget.blogspot.com/feeds/comments/default

 or RSS Feed as Blog Comments as follows :

http://manage4widget.blogspot.com/feeds/comments/default?alt=rss

 

Please replace http://manage4widget.blogspot.com with yours. After finished click Continue

 Next, You can set "how to display" your  recent comment. You can named your Recent Comments by insert the Title column, Setting how much last comment you want to show up (5 by default). You can also choose to displayed the dates and name of the authors or not. When you are satisfied with the setting, click to Save the Changes.
You still can set the position of your recent comments by drag and drop the widget to the relevant part of your template and Save the Template.  

New Facebook Connect Widgets!

You may have already seen that Facebook announced their plans to “make the web more social”. Along with these plans, they also announced that they will be making various Facebook features available on other websites. Well, Webs is proud to announce that we will be making these features available on your sites, today!

The widgets available now are:

Comment Box

This widget allows your users to post comments on your site. These comments will then show up on their Facebook News Feed, as well as their friends’ News Feed.

Recent Activity

The Activity Feed displays the most interesting recent activity taking place on your site. Since the content is hosted by Facebook, the widget can display personalized content whether or not the user has logged into your site.

Fan Page Box

The Like Box enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:

• See how many users already like this page, and which of their friends like it too
• Read recent posts from the page
• Like the page with one click, without needing to visit the page

Like Button

Adds a like button to your page that will count “likes” and shares to Facebook. Your users will “like” pages on your site and their friends’ on Facebook will be able to see this and visit your site as well.

What do I need to get these widgets?

Some of these widgets will require Facebook Connect. If you don’t already have it, this is just another reason to get it. Not only is it easy to set up, but along with these widgets, creates a powerful social presence for your website. With the massive community of Facebook, features like these can drastically increase the exposure and traffic to your site.

Where do I get these widgets?

All of these widgets can be found in the Widget Bank.

1. Go to a blank page.
2. Click “Addons” in the toolbar. This opens the widget bank.
3. Click on the “Facebook Connect” tab.
4. Choose the Facebook Widget that you want, and add it instantly to your page!

These great new features are a must for your site, and are available for you right now. Remember, for some of these widgets you will need to have Facebook Connect on your site. Grab these today and unlock a host of new social functionality for your site.

Happy Site Building!

The Webs Team

what is a widget ?

A widget is a independent application that can be embedded into third party sites by any owner  on a page where they have rights of .  Widgets are fun, engaging, and useful applications that allow users to turn personal content into dynamic web applications. That can be shared on just about any website. For example, a "Followers  Widget" could report who follow to blog or website. Should you want to put that widget on your own twitter  profile, you could do this by copying and pasting the embed code into your profile on twitter. Other terms of widget are gadget, badge, module, webjit, capsule, snippet, mini, flake, application, etc.

To understand more, follow this explanation:

Widget program is run by a website, example widget.com.  you have a blog, say blog.com. Then you copy the widget code from widget.com and plug in blog.com. Now, the process of the widget itself is run in widget.com, but when you access blog.com. You'll see the output from processes running in widget.com in blog.com page.

Are you follow me? :) :)

The Meaning Of Blog

Tonight, I thought; before plunging into an online business, so  I must know the various terms in the Internet world. one of them is the blog. I explore several websites that contain the meaning of the blog. this is what I found, there are:

1.    Merriam-Webster said Etymology:  Short for Weblog. That men is a Web site that contains an online personal journal with reflections, comments, and often hyperlinks provided by the writer.
2.    If you see in Wikipedia.org Blog is a type of website, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.
3.    Wordpress.org On introduction to Blogging (Popular Blog Management System). “Blog” is an abbreviated version of “weblog,” which is a term used to describe web sites that maintain an ongoing chronicle of information. A blog is a frequently updated, personal website featuring diary-type commentary and links to articles on other Web sites. Blogs range from the personal to the political, and can focus on one narrow subject or a whole range of subjects.

Into three terms above, I found some similar the meaning components of blog, there are :
1.    Short for Weblog;
2.    Website;
3.    personal website;
4.    personal journal;
5.    Individually managed;
6.    Regularly updated;
7.    frequently updated;
8.    reflections, comments, and often hyperlinks provided by the owner blog.
enough? maybe you could add or my understanding of the blog. wrong?

Simple CSS vertical menu Digg-like

Do you like Digg.com webdesign? I like much its menu, simple and clean.

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this:

 

 Download this tutorial


Step 1: HTML code
HTML structure is very simple and contains two 

 tags (menu and sub-menu):



Copy and paste the following code in a new html page:


"middlebar">

"menu">

"#" onclick="javascript:showlayer('sm_1')">Profile

"submenu" id="sm_1">

"p1.html">Profile

"p2.hmtl">Inbox 

"p3.hmtl">Log-out





Step 2: CSS code
Copy and paste this code to define menu button:


ul, li{margin:0; border:0; padding:0; list-style:none;}
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:4px;
height:30px;
}
#middlebar .menu li {
background:url(lm.png) left top no-repeat;
height:30px;
float:left;
margin-right:10px;
}
#middlebar .menu li a{
color:#3b5d14;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(rm.png) right top no-repeat;
}
#middlebar .menu li a:hover{
color:#666666;
}


...and this is the code for the sub-menu:


#middlebar ul .submenu {
border:solid 1px #c9dea1;
border-top:none;
background:#FFFFFF;
position:relative;
top:4px;
width:150px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
}
#middlebar ul .submenu li{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
border-top:solid 1px #DEDEDE;
}
#middlebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#middlebar .submenu li a:hover{
background:#e3edef;
}


Step 3: Javascript to show/hide submenu
Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.


function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else { 
myLayer.style.display="none";
}
}

This function get in input the parameter layer (the ID of sub-menu you want hide/display), in this case sm_1, passed from this link:


"#" onclick="javascript:showlayer('sm_1')">Profile


Save all and try it!

 Download this tutorial

Digg-like navigation bar using CSS

Navigation bar with rounded corners an sliding doors technique for background images, Digg inspired.

This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
The result is something like this:

 Download this tutorial

 Step 1: HTML page
Create a new HTML page and copy and paste the following code inside  tag:

"topbar">
"p1.html">All
"p2.html" class="active">News
"p3.html">Video
"p4.html">Images

"middlebar">
"p1.html">Technology
"p2.html">World
"p3.html">Science
"p4.html">Gaming

In the second link, "News", I added the class "active" (in bold). If you use URL variables and PHP to implement a dynamic navigation bar with some topics, if is defined an URL variable equal to "topic name" (in this case equal to "news") then add the attributeclass="active" to the link. The code to implement this simple tip is very simple:

 if(isset($_GET['news'])){ echo 'class="active"';}?>

Step 2: rounded corners with liquid design for links
Before to start, I spend few rows to explain how to implement this simple effect using CSS. The typical way is using this simple structure:

...in HTML code:

"mypage.html">All

Step 3: CSS file, #topbar
Create a new CSS file (style.css) and copy and paste the following code for #topbar element (remeber to link this file in your HTML page):

#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}

#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url(pic/tb_a.png) right top no-repeat;
padding-right:10px;
}
a.active span{
background:url(pic/tb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

Step 4: CSS file, #middlebar
In the same CSS file (style.css), add the following code:

#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}

#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(pic/mb_a.png) right top no-repeat;
}
#middlebar a span{
background:url(pic/mb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

Save and test the result!

 Download this tutorial

Beauty Menu Navigasi wit css

Menu Navigasi beauty with css ( not with image ) so load your blog is verry fast. Follow this step :


1. Log in your blog.

2. See code like this ]]>

3. Coppy and paste code before code ]]>



/* Navigasi Menu */

#navmenu {

height:auto;

margin:0;

width:100%;

background:#81F781;

float:left;

}

#navmenu ul {

padding: 0;

margin:0;

float: left;

list-style: none;

}

#navmenu li {

padding:0;

list-style: none;

padding: 0;

margin:0;

}

#navmenu ul li {

float: left;

display:inline;

}

#navmenu li a, #navmenu li a:link, #navmenu li a:visited {

color:#000000;

font-family: Verdana;

text-decoration:none;

margin:0;

display:block;

padding:9px 10px 9px 10px;

font-size:12px;

}

#navmenu li a:hover {

background:#088A08;

color:#000000; }

4. Look code like this :

5. Copppy paste code after no 4 :

• Home




• EDIT1




• EDIT2




• EDIT3




• EDIT4




• EDIT5

6. Save.

Good Luck !