Follow the below steps to create a news / Announcement web part :
Step 1: First we need to create picture library using Picture Library template and upload some picture into the picture library.
Fig: Picture gallery after uploading picture
Step 2: Create announcement list using Announcement template and also create three columns one is Picture, Date and URL like below image.
Fig: Announcement list settings
Fig: Picture column details
I have used Date column as a calculated type so we can change the date format.
Fig: Date column details
I have used URL column as a single line of text so user can enter the URL.
Fig: URL column details
Step 3: Add Item into the announcement list which we have created earlier.
Fig: Add new Item
Fig: Announcement list after adding item
Step 3: Now open your SharePoint site into SharePoint designer 2013.
Step 4: Go to Style Library XSL Style Sheet
Step 5: First we copy our existing ItemStyle.xsl file as a backup then we right click on ItemStyle.xsl and click check out then again right click on same file and click Edit File in Advanced Mode.
Step 6: Add the below code before </xsl:stylesheet> close tag.
<xsl:template name="HMGAnnouncement" match="Row[@Style='HMGAnnouncement']" mode="itemstyle">
<div>
<div class="datecontent"><xsl:value-of select="@Date" disable-output-escaping="yes"/></div>
<div class="announcementcell">
<img class="announcementimage">
<xsl:choose>
<xsl:when test="contains(@Picture,',')">
<xsl:attribute name="src"><xsl:value-of select="substring-before(@Picture,',')" disable-output-escaping="yes"></xsl:value-of></xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="src"><xsl:value-of select="@Picture" disable-output-escaping="yes"></xsl:value-of></xsl:attribute>
</xsl:otherwise>
</xsl:choose>
</img>
</div>
<div class="announcementtitle">
<div class="announcementdiv">
<p class="announcementbold">
<a>
<xsl:attribute name="href">
/sites/dev/myh5/Lists/HMGAnnouncements/DispForm.aspx?ID=
<xsl:value-of select="@ID">
</xsl:value-of>
</xsl:attribute>
<xsl:value-of select="@Title" disable-output-escaping="yes"/>
</a>
</p>
<p class="bodycontent"><xsl:value-of select="substring(@Body,0,123)" disable-output-escaping="yes"/>...</p>
<div>
<a href="{@URL}" target="_blank"><p class="readmorelink">Read More</p></a>
</div>
</div>
<div class="newsline"></div>
</div>
</div>
</xsl:template>
Note: Replace the above URL with your list URL
**Note: When you modified itemStyle.xsl each and every time you need to publish. Without publishing the file changing will not reflect.
Fig: ItemStyle.xsl files in edit mode in SharePoint Designer 2013
Step 7: After added the above code into your ItemStyle.xsl file, Save your changes and closed your ItemStyle.xsl file. Then Right click on ItemStyle.xsl file and click Check In and then click Publish as a Major version. Make sure without Check In and publishing ItemStyle.xsl file your changes will not reflect.
Step 8: Go to your site, open your page where you want to add news/announcement section. Then Edit your page, click Add new web part and add Content Query Web Part under Content Rollup Category.
Fig: Add Content Query web part into page
Step 9: Click Edit Web Part properties for content query web part.
Step 10: In Query Section select “Select Items from this following list” then click “Browse” button and select HMGAnnouncement list which we have created earlier.
In Presentation Section we need to enter Item limit (How many items we need to display) then in Item Style we need to select HMGAnnouncement (Which we have created earlier in ItemStyle.xsl file). Then we need to enter Field to display (Column name in announcement list) and then click ok.
All fields (Title, Body, Date, Picture and URL) are displayed into your page from HMGAnnouncement list.
All content displayed in your page but it’s not display on a proper format. So you need to write some CSS to display on a proper format.
Below are the CSS which I have written as per my display requirement. Just mention for your reference.
<style>
/*Start Announcement news Section*//*Written by Mohammad Yusuf Hussain*/
.announcementimage{
width:65px;
height:65px;
}
.announcementtitle{
width:175px;
float:right;
padding-left:10px;
padding-bottom:12px;
}
.announcementbold{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
}
.announcementbold a{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:visited{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:hover{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:link{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.readmorelink{
margin-top:-10px;
margin-left:100px;
color:#585858;
font-size:14px;
text-decoration:underline;
}
.newsline{
background-color: #e5e5e5;
/*background-color:red;*/
position: absolute;
height: 2px;
width: 260px;
margin-left: -84px;
margin-top: 0px;
}
.announcementcell{
width:65px;
float:left;
margin-top:5px;
padding-bottom:28px;
}
.announcementdiv{
margin-top:-10px;
}
#WebPartTitleWPQ2 .ms-webpart-titleText{
text-align:right !important;
font-size:1.5em;
font-family:Arial;
color:#493c36;
font-weight:bold;
}
#WebPartTitleWPQ2 .ms-webpart-titleText span{
text-decoration:underline;
}
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a{
font-family:Arial !important;
}
/*End Announcement News Section*/
</style>
**Note: In CSS I have used webpart ID (WebPartTitleWPQ2) so you need to replace this ID with your webpart ID.
Upload this CSS in your site Assets library or any library where you want and give the reference into your page where you are creating a News/Announcement using “Content Editor Web Part”.
Result:
