Latest Post or News Animated Ticker For Blogger

Label Sensitive Last Broadcast Blog News Widget Plugin - I will share the code and tips about the tag- sensitive blog news plugin for Blogger sites. On some blog sites you may find that bloggers' recent posts or posts that have a title move with the vertical or horizontal effect of the post titles beneath the site title. This way, you'll be interested in blogging and clicking on other posts in your blog. 

Blog widget, publication title, visual and tagged with a rich display widget works in 2 different features; The recent posts you've added to your blog are displayed, and the tags belonging to a category in your blog are sensitive. So the contents of the categories that are in your blog are also in the news widget '

How to Add a Blog News Widget

Follow the steps below to add the blog news widget. 

1- Log in to your Blogger account and open the template codes page of your blog by following the theme> Edit HTML on your blog's control panel. On the following page with the help of CTRL + F ]]></b:skin>or </style>locate the following code and CSS code ]]></b:skin>or </style>add on a line of code.

.news-headline {
    margin: 0;
    width: auto;
}
.daring .title {
    float: left;
    height: 40px;
    background: #e74c4c;
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 10px
}
.daring .title .fa {
    margin-right: 10px;
    transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg)
}
.daring .widget-content {
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 4px;
    border: 1px solid #eee
}
.daring .widget-content li {
    float: left;
    margin-left: 30px;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0
}
.daring .widget {
    border-bottom: 1px solid #e0e5e8;
    background: #f5f5f5;
    max-width: 1063px;
    margin: 0 auto;
    overflow: hidden
}
.recent-thumb {
    float: left;
    margin: 4px 10px 0 0
}
.dr-img {
    position: relative;
    display: block;
    width: 35px;
    height: 30px;
    overflow: hidden
}
.daring .post-tag {
    display: inline-block;
    background: #ffa401;
    color: #fff;
    margin-right: 10px;
    font-weight: 400;
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 10px;
    position: relative;
    margin-top: 10px;
    float: left
}
.daring .recent-title {
    font-size: 14px;
    font-weight: 400;
    display: inline-block
}
.daring .recent-title a {
    color: #222222
}
.daring .recent-title a:hover {
    color: #e74c3c
}
.daringcontainer,
.daringcontainer .mask,
ul.newsdaring {
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    -o-transition: all 0 linear;
    transition: all 0 linear;
    list-style: none;
    margin: 0
}
.daringcontainer {
    margin: 0;
    padding: 0;
    overflow: hidden
}
.daringcontainer .mask {
    position: relative;
    overflow: hidden
}
.newsdaring {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
ul.newsdaring {
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
.daringoverlay-left {
    display: none
}
.daringoverlay-right {
    display: none
}

2- Add the following javaScript </body>code on a line of the closing code of your blog .

<script src='https://rawgit.com/Bloggeritunes/jQuery/master/daring.js'/>

3. Add the following Gadget HTML code to the appropriate place in your blog's header and main and save the template.

<div class='news-headline'>
<b:section class='daring' id='daring' maxwidgets='1' name='Blog NEW POSTS' showaddelement='yes'/>
</div>

4- Create your HTML / JavaScript with your gadget that is attached above the control panel of your blog. You can run the plugin by adding the following code into the HTML / JavaScript you create. 

If you keep your blog up to date and want the latest posts added, add the following code in your HTML / JavaScript "widget". 

<span data-type="recent" data-no="5"></span>

If you want to show posts from a category in your blog, use the following code. Add the label of the categorize marked (code) in the code. 

<span data-type="label" data-label="Label" data-no="5"></span>

The code marked in the above HTML codes specifies the data-no="5"number of posts that will be displayed in the blog news widget. 

Preview

We published this add-on on our blog site at the request of a visitor. We have shared a blog news widget that all bloggers can take advantage of. You can share your opinions and suggestions about the plugin and widget designs you want to see in your blog with us in the comments section.