Create Circular widget

• Created : Jan, 16, 2020
• Last Updated: Oct, 21, 2022

Here’s an example of a circular widget.

Follow these steps to create a customized circular widget for you website or blog.

Easy Steps

Widget Settings

1. Create widget -> RSS
2. Feed URL -> http://www.techmeme.com/feed.xml
3. General -> Width -> Responsive/In Pixels -> Responsive
4. General -> Style -> Thumbnail
5. General -> Height -> In Pixels-> 351
6. General -> Scroll -> ON
7. General -> Scroll -> Vertical
8. General -> Scroll -> Scroll Bar -> OFF
9. General -> Scroll -> Autoscroll -> ON
10. General -> Scroll -> Autoscroll -> Normal
11. General -> Advanced Settings -> Custom CSS link -> Show custom css

    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    
    /* Copy CSS from here  */
    
    /* This adds the ability to utlize Google WebFonts in your FeedWind widget */
    @import 'https://fonts.googleapis.com/css?family=Noto+Sans';
    
    /* This is the styling for main feed container - NOTE: the background-color affects the footer background.*/
    
    
    #fw-container {
      border-radius: 50%;
      font-family: 'Noto Sans', Helvetica, sans-serif;
      box-shadow: 1px 1px 18px #9c9696;
      width: 300px;
      height: 300px !important;
      margin: 10px;
    }
    
    .fw-feed-item-image-module {
      float: none;
      display: block;
      text-align: center;
    }
    
    .fw-feed-item-image {
      margin: 0 auto;
    }
    
    .fw-feed-item-description {
      padding: 20px 25px;
    }
    
    /* CSS Ends Here  */
    

12. Feed Title -> Custom -> ON
13. Feed Title -> Font size -> 16
14. Feed Title -> Colors -> Background color -> #55a0ff
15. Feed Title -> Colors -> Font color -> #FFFFFF
16. Feed Content -> Display Content -> Content
17. Feed Content -> Size -> Item title -> 16
18. Feed Content -> Size -> Bold -> OFF
19. Feed Content -> Size -> Content -> 12
20. Feed Content -> Colors -> Title font -> #2e7ec8
21. Feed Content -> Colors -> Content font -> #505659
22. Feed Content -> Colors -> Background -> #FFFFFF
23. Feed Content -> Advanced Settings -> Time/Date -> OFF

Rest keep as default

Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Here’s an example and steps to create a overlay widget

Example Facebook page widget in large image style

Easily create a Facebook widget with a large image style and customize it as your need.