If you have problems or question or simply have a request, please contact me.

1 .Upload the newsWiget folder to your server and then add the required files in your page (usually in the head section).

Add the file to your page using :

• Basic Usage (Minified Version)
• Advanced Users (Split version, for edditing)

<!-- basic stylesheet -->
<link rel="stylesheet" href="newsWidget/css/newsWidget.css">
                
<!-- OPTIONAL! ADD a theme for easy customization-->
<link rel="stylesheet" href="newsWidget/css/newsWidget_theme.css"> 

<!-- Plugin requires jQuery 1.7+ and TweenMax  -->
<!-- If you already have jQuery on your page, you shouldnt include it second time. -->
<script src='newsWidget/js/jquery-1.8.3.min.js'></script>
<!-- If you already have TweenMax on your page, you shouldnt include it second time. -->
<script src="newsWidget/js/TweenMax.min.js"></script>  
 
<!-- News Widget JS script file --> 
<script src="newsWidget/js/query.newsWidget.pack.min.js"></script>            
              

<!-- basic stylesheet -->
<link rel="stylesheet" href="newsWidget/css/newsWidget.css">
<!-- OPTIONAL! ADD a theme for easy customization-->
<link rel="stylesheet" href="newsWidget/css/newsWidget_theme.css"> 

<!-- Plugin requires jQuery 1.7+ and TweenMax  -->
<!-- If you already have jQuery on your page, you shouldn't include it second time. -->
<script src='newsWidget/js/jquery-1.8.3.min.js'></script>
<!-- If you already have TweenMax on your page, you shouldn't include it second time. -->
<script src="newsWidget/js/TweenMax.min.js"></script>  
 
<!-- News Widget JS script file --> 
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script> 
<script src="js/jquery.jfeed.pack.js"></script>
<script src="js/jquery.newsWidget.min.js"></script>

<!-- I've included a non minified version in the folder. -->                
              

2. Add the newsWidget HTML code to the body section.

Each list tag <li></li> will be treated as an indipendent news. You can use html code in the body of the news. Meaning you can add all posible tags including buttons, forms, images, lists or any possible thing!

                  		
<ul id="mainNewsWidget"> 
    <!-- Minimal Settings --> 
    <li data-title="title" data-date="24-6-2013" > 
        Body of article.Text or html code.
    </li> 
    ..
    
    <!-- Example 1 --> 
    <li data-title="HTC Released HTC ONE." data-date="24-6-2013" > 
         <h2> A heading 2 </h2> 
         <p> A paragraph here  <img src="img.jpg" />   </p> 
        Features
         <ul> 
       	     <li> 4.7 Inch </li> 
             <li> Sense 5 </li> 
         </ul> 
    </li> 
    
    
</ul>    
    

3. Initialize the News Widget (usually at the end of the body section).

For plugin settings, check options section.

              	<script>
	jQuery(document).ready(function($) {
		$("#divID").newsWidget({
			// Options go here
			// Example, choose the full article mode.
			fullArticleType : "full"
		});  
	});
</script>
              	

       
<!-- This is OPTIONAL-->

<!-- You can override default settings(options used in initializer) by adding attributes to specific News Items.-->
<!-- Those options will be only added to that item.-->
  
     
<ul id="mainNewsWidget">     

<!-- Example overriding all settings.-->
<!-- Each one will be explained below with an example..-->
 
    <li data-title="title"
        data-date="24-6-2013"
        data-image="img.jpg" 
        
        
        data-image-cropping="true"
        data-image-height="230"
        data-link="http://google.com" 
        data-link-type="readmore" 
        data-link-text="View " 
        data-title-in-link="after">
        Body of article.Text or html code.
     </li> 
 </ul> 
                  

All of these are attributes are optional:

• data-imageAdd a main image to be displayed when the article is expanded.
• data-image-croppingOverride the default settings and force this item only to a settings. (true/fale)
• data-image-heightOverride the set image height for this item.
• data-linkWhen the link is pressed, the url is opened. Can be made as a readmore link, see below option.
• data-link-type="readmore"links wont open directly but will be embeded as "continue reading.." buttons in the article. Those can be edited via the settings.
• data-link-textAdd this if you want an item to have a custom link text when hovered over.
• data-title-in-linkControl whether the title is included in the custom link text. Values: "before", "after" or "none"

              	
<ul id="newsWidget">

<!--Add an Image like this.-->
	<li data-title="title"
        data-date="24-6-2013"
        data-image="img.jpg" 
    </li> 
    
</ul>
   

Image Options:

Example of initializing newsWidget with Image options:

                  
<!-- Initialization settings
-->

	jQuery(document).ready(function($) {
		$("#newsWidget").newsWidget({
			
            imgCrop: true,     //if true, the image will be cropped if required.
			imgHeight: 200,		//img height if crop is enabled
            
			// other options can be used
           
		});  
	});

                  

Give Specific news items specific options:

<ul id="newsWidget">
<!-- This will give an image a custom height-->     
	<li data-title="This has a custom Height"
        data-date="24-6-2013"
        data-image="img.jpg" 
        data-image-height="330"
     </li> 

<!-- This will override the default cropping settings.-->     
     <li data-title="This doesnt crop image"
        data-date="24-6-2013"
        data-image="img.jpg" 
        data-image-cropping="false"
     </li> 

 </ul>


              	

Attributes Descriptions:

• data-imageAdd a main image to be displayed when the article is expanded.
• data-image-croppingOverride the default settings and force this item only to a settings. (true/fale)
• data-image-heightset a custom height for an image, if cropping was set.

              	
<ul id="newsWidget">

	<li data-title="This will open directly"
        data-date="24-6-2013"
        data-link="http://google.com" 
    </li> 
    
    
    <li data-title="This will add a readMore button after each news."
        data-date="24-6-2013"
        data-link="http://google.com" 
        data-link-type="readmore" 
    </li> 
    
 
 </ul>


              	

Attributes Descriptions:

• data-linkWhen the link is pressed, the url is opened. Can be made as a readmore link, see below option.
• data-link-type="readmore"links wont open directly but will be embeded as "continue reading.." buttons in the article.

Link Options: )

Example of initializing newsWidget with link options:

                  
<!-- Initialization settings
-->

	jQuery(document).ready(function($) {
		$("#feedWidget").newsWidget({
			
            linkTarget: blank,     //if true, the image will be cropped if required.
			readMoreTxt: "Read More...",		//img height if crop is enabled
            
			// other options can be used
           
		});  
	});

                  

              	
<ul id="newsWidget">

	<li data-title="This will have the default one"
        data-date="24-6-2013"
    </li> 
    
    
    <li data-title="This will have a custom link text saying: View 'The title of this article'."
        data-date="24-6-2013"
        data-link-text="View " 
        data-title-in-link="after"
    </li> 
    
 
 </ul>


              	

Attributes Descriptions:

• data-link-textAdd this if you want an item to have a custom link text when hovered over.
• data-title-in-linkControl whether the title is included in the custom link text. Values: "before", "after" or "none"

Link text Options:

Example of initializing newsWidget with link options:

                  
<!-- Initialization settings
-->

	jQuery(document).ready(function($) {
		$("#newsWidget").newsWidget({
			
            linkText:"Read: " ,  //text that will appear when you hover over the current news.
			titleInLink : "after", //include title in the text. Options: "before"  or "after" or "none"
			
            
			// other options can be used
           
		});  
	});

                  

              	
<!-- Add this to where you want to display the widget-->
<ul id="feedWidget"> </ul>

<!-- Initialization settings
-->
<script>
	jQuery(document).ready(function($) {
		$("#feedWidget").newsWidget({
			// only the feed is required
			feed : "urltofeed.rss",
            
             // Additional feed-only Options
            feedReadMoreType: "insite",
            feedMaxNum: 10
            
			// other options can be used
           
		});  
	});
</script>
              	

The News Widget will inherit the font used in the page.

To add a custom font to the news Widget

Open the css theme file and Remove one line (at the top, instruction found there)!

You can add Google fonts or any web font. Follow the instructions on their site.

For example, for google fonts u only need to add 1 line to the html page, and edit the font family in the css theme file (instruction found in top of css file).