How i can design RSS Subscribation box?

HTML & CSS
1

hi friends
i need your help
as

i wanted to similar design of RSS feed subscription, Twitter count number

at my website Appsease- Technoloy, Internet,Apple,Windows 8,Freeware, Tricks and Tutorials can any one help me to setup ?

i’ll be thankful to u
kindly give me code ! for CSS
and Sidebar, i can place easily
thanks

2

Hi,

Can you clarify the question a little please?

What is it that you want us to do for you? Do you have those elements on a page already (in that format) and you want them aligned?

Do you have some sort of plugin/feed that gives you those icons in that manner or are you trying to change existing mark up.

You’ll have to give us a little more information

3

thanks for your kind reply

i ve seen this widget at CSSReflex you can see an example on this sidebar website
i wanted to similar kind of style at my website appsease.com ., i ve not placed any code in my CSS or sidebar …
can you give me code, i can place on CSS sylesheet and sidebar
waiting

4

Hi,

You could just get Firebug for Firefox and dissect that page and see how its styled and then make your own. The forums are here to help you but not to do things for you exactly :slight_smile:

As far as the CSS goes that section is pretty simple and I will give you the basic start. However you will still need to do all the back end stuff and get your feed stats etc as that’s not my area.

The basic styling of that section is like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#sidebar{
    width:300px;
}
.rss {
    background:url(images/rss.gif) no-repeat 0 50%;/* rss image*/
    color: #FD6B36;
    float: left;
    height: 44px;
    padding: 5px 0 0 55px;/* space for image*/
    width: 64px;
}
.twit{
    float:right;
    background:url(images/twitter.gif) no-repeat 0 50%;/* twitter image*/    
    margin:0 2px 0 0;
    display:inline;
}
.rss b{
   font-size: 1.4em;
}
.rss b,.rss span{display:block;}
.rss a {
  color: #F38E33;
    text-decoration:none;
}
h3.update{
    border-bottom: 2px solid #333;
    color: #000;
    letter-spacing: 0.08em;
    margin:10px 0;
    padding-bottom: 5px;
}
.email {
    background: url(images/envelope.gif) no-repeat 0 50%;/* email image*/
  color: #666;
  clear:both;
  padding: 10px 0 0 55px;
    overflow:hidden;
    zoom:1.0;
}
.emailform{clear:both}
.text {
    background:#fff;
    border: 1px solid #ccc;
    font-size: 92%;
    height: 20px;
    margin-right: 5px;
    padding: 3px;
    width: 150px;
}
.submit {
    background:#333;
    border:none;
    color: #fff;
    cursor: pointer;
    font-size:77%;
    padding:6px 10px 5px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.submit:hover{background:red}
</style>
</head>
<body>
<div id="sidebar">
    <h3 class="update">Stay updated with Us:</h3>
    <div class="rss">
        <a title="RSS Feed Subscription" href="#"> 
            <b>1000+ </b> 
            <span>Readers</span> 
        </a> 
    </div>
    <div class="rss twit">
        <a title="Twitter Feed Subscription" href="#"> 
            <b>2000+ </b> 
            <span>Followers</span> 
        </a> 
    </div>
    <form  class="emailform" id="form1" method="post" action="">
        <div class="email">
            <input class="text" type="text" name="email" id="email" />
            <input class="submit" type="submit" name="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>
</body>
</html>

As I said above you’ll have to make that work with the back end etc.