SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How i can design RSS Subscribation box?

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

    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.

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •