Show Mobile Navigation
, , ,

Add a Headlines News Widget in Your Blog

Hemant Verma - 11:29 PM
ghjhgjgghjhHello Gyus, Today we are sharing a very good and very professional type of widget here on this blog, as you see many times in news websites that here is a news ticker always get updates automatically, so this widget is also is related with the same kind of widget and being more professional, developer add a very good feature in it that's called tool tip, as you can see in the gif image so this ticket widget works like same. So, do it and "Make Your Blog Like a Pro" which is Our supreme goal.



| Demo |

How to Add Headline Widget

Follow all below steps.... (It has 2 Steps)
This is Ist Step....
  • Login to Blogger > Template
  • Take Backup of Your Template Before Edit
  • Click on "EDIT HTML" 
  • Paste below code after <head> tag
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

  • Now Search for ]]></b:skin> and Paste below code just above it.
/*--------------Headlines News Widget ----------*/
       
.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}        
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}          
.ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}          
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}          
.ticker-content a{text-decoration:none;color:#1F527B}          
.ticker-content a:hover{text-decoration:underline;color:#0D3059}          
.ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}          
.ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}          
.ticker-controls{padding:8px 0 0;list-style-type:none;float:left}          
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}          
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}          
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}          
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}          
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}          
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}          
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}          
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}          
.ticker-controls li.jnt-prev.over{background-position:0 32px}          
.ticker-controls li.jnt-prev.down{background-position:0 0}          
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}          
.ticker-controls li.jnt-next.over{background-position:16px 32px}          
.ticker-controls li.jnt-next.down{background-position:16px 0}          
.js-hidden{display:none}          
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}          
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}          
.left .ticker-controls{padding-left:6px}          
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}          
.right .ticker-controls{padding-right:6px}          
/*########Default Style by MBT#########*/          
.ticker-wrapper.has-js{margin:0 0 -200px;padding:0;width:98%;min-height:242px;display:block;border-radius:0;background-color:#fff;border:0 solid #eee;font-size:12px;overflow:hidden}          
.ticker{width:80%;height:42px;display:block;position:relative;overflow:visible;background-color:#fff}          
.ticker-title{background:#71db00;padding:9px 10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}          
.ticker-title:after{left:90px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}          
.ticker-content{background-color:#fff;margin-left:18px!important;color:#444;margin-top:1px!important;overflow:visible!important; padding-top: 2px!important;}          
.ticker-swipe{background-color:#fff;position:relative;top:6px;left:110px!important}          
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}          
.ticker-controls{padding: 0px!important;margin: 17px 0 0 10px!important;list-style-type:none;position:relative;right:-50px}          
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}          
.ticker-controls li a{border:0px!important; padding:0px!important;}          
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}          
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}          
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}          
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}          
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}          
.ticker .iauthor:before, .ticker .icomments:before, .ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}          
.ticker .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin-right:3px;position:relative;          
top: 6px;border: 1px solid #eeeeee;          
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);          
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);          
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);          
    padding: 3px;          
}          
.ticker span {padding-right:5px; font-family:Oswald; font-weight:normal}          
.ticker .icomments a{color:#71db00;font-size:11px}          
.ticker .icomments a:hover{text-decoration:underline}          
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0px;color:#777;position:relative; top:-1px}          
.ticker .idate{font-size:11px;padding-right:7px;}          
.ticker .idate:before{content:'\f073';padding:0 5px;color:#777; position:relative; top:-1px}          
.ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none;}          
.ticker .mbttitle:hover{text-decoration:underline}
       
/*------ CSS3 Tooltip by MBT -------------*/        
.ticker .tooltip{outline:none;text-decoration:none!important;position:relative}          
.ticker .tooltip strong{line-height:30px}          
.ticker .tooltip > span{width:290px; white-space: normal; padding:15px 15px 0px 15px;opacity:0;top:170%;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}          
.ticker .tooltip > span img{float:right;width:130px;margin:0 0 30px 10px;padding: 0;border: none;}          
.ticker .tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:0px}          
.ticker .tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}          
.ticker .tooltip > span{color:#fff; background:#71db00;border:1px solid #94fb26}          
.ticker .tooltip span b{margin-top:-19px;top:10px;background:#71db00;border-top:1px solid #94fb26;border-right:1px solid #94fb26;border-bottom:1px solid #71db00;border-left:1px solid #71db00}
       
@media only screen and (max-width:480px) {        
.ticker-content {margin-left: -5px!important;padding-top: 4px!important;}.ticker-title{font-size:10px!important;padding:5px!important;}          
.ticker-controls, .ticker .icomments, .ticker .idate, .ticker .iauthor, .ticker .iauthorpic, .ticker-title:after {display:none;}}

  • Now Save Your Template. 
This is 2nd Step

  • Go to Blogger > Layout
  • Select "Add a Gadget"
  • Add a "HTML/JavaScript" Gadget
  • Paste below code in it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>        
<script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>
       
<!-- ######### Writing Callback Function ############# -->        
<script type="text/javascript">          
//----------------------------Defaults          
var ListBlogLink = "http://www.widgid.com";          
var ListCount = 5;          
var TitleCount = 70;          
var ListLabel ="Widgets";          
var ChrCount = 140;          
var ImageSize = 200;
       
//----------------------------Function Start        
function mbtlist(json) {          
document.write('<ul id="js-news" class="js-hidden">');          
for (var i = 0; i < ListCount; i++)          
{
       
//-----------------------------Variables Declared        
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";          
//----------------------------- Title URL          
for (var j = 0; j < json.feed.entry[i].link.length; j++) {          
if (json.feed.entry[i].link[j].rel == 'alternate') {          
break;          
}          
}          
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";          
//----------------------------------- Title Stirng          
if (json.feed.entry[i].title!= null)          
{          
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);          
}
       
if (json.feed.entry[i].thr$total)        
{          
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";          
}          
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");          
ListAuthor=ListAuthor.slice(0, 1).join(" ");          
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
       
       
//################### Content Check          
ListConten = json.feed.entry[i].content.$t;          
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
       
//################### Date Format
       
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
       
ListDate= json.feed.entry[i].published.$t.substring(0,10);
       
                         Y = ListDate.substring(0, 4);        
                        m = ListDate.substring(5, 7);          
                         D = ListDate.substring(8, 10);          
                         M = ListMonth[parseInt(m - 1)];
       
//################### Thumbnail Check        
if (json.feed.entry[i].media$thumbnail)          
{          
thumbUrl = json.feed.entry[i].media$thumbnail.url;          
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");          
ListImage= "'" + sk.replace("?imgmax=800","") + "'";          
}
       
// YouTube scan        
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)          
{          
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();          
   
    if (youtube_id.length == 11) {          
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";          
        }          
}
       
       
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)          
{          
// Support For 3rd Party Images          
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];          
}          
else          
{          
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTHkdg4YMYQGJQwc_M7nLSVMf6XNvls7OHQTo4o2tPb9mlCZT9GI8IFKjj8nMNX0pdIAc-sCfak3DHmUFx4JxKzOe3RO_hMARaP8kTSaET_7v3FsxkfxVSjVs3nHQScjDZfon9ZzoYOA/s200/Icon.png'";          
}
       
//----------------------------------- Printing List        
var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"          
+ListAuthor+ "</span> <span class='icomments'>"          
+ListComments + "</span>  <span class='idate'>"          
+ D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle tooltip' href="          
+ListUrl+          
"><span><b></b><img src="          
+ListImage+          
"/>"          
+ListContent+          
" →</span>"+ListTitle+"</a></li>";          
document.write(listing);          
}}
       
document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");          
/*##########Newsticker settings########*/          
    $(function () {          
        $('#js-news').ticker({          
        speed: 0.20,          
        controls: true,  
        titleText: 'Headlines',          
        displayType: 'reveal',          
        pauseOnItems: 2000});          
});          
</script>

  • Save Your Widget.

Make Changes....!

  • Replace it www.widgid.com with your own blog link.
Created By: Mohhamad Mustafa

0 comments:

Post a Comment

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS