Blogger$type=grid$count=4$meta=0$snip=0$rm=0$show=home$labels=no

Headlines News Widget Untuk Blogger

Headlines News Widget Untuk Blogger

Headlines News Widget Untuk Blogger

Apa itu Headlines News Widget?

Headlines News widget pada dasarnya adalah plugin ticker berita yang menampilkan berita utama terbaru yang ada pada blog Anda sebagai teks bergulir horizontal. Ini adalah ticker berita pertama dari jenisnya untuk blogger yang tidak hanya menampilkan link judul saja yang seperti umumnya ticker biasa yang ditemukan di seluruh web, tetapi juga menunjukkan info post dan foto seperti contoh di gambar.

Headlines News Widget Untuk Blogger

Fitur Headlines News Widget

  • Author Avatar
  • Displays latest posts dynamically
  • Displays recent posts from a specific category/label
  • Tooltips support
  • Shows Post Description/Summary
  • Shows Featured Thumbnail Image
  • Scrolling text with two animations: reveal & fade
  • Clickable Comments Count
  • Custom Date Format
  • Title Length is adjustable
  • Fully Customizable - Multi Colors!
  • Responsive and mobile friendly
  • Control Navigation. Play/Pause, Next/Previous
  • Support all browsers: Firefox, Chrome, IE, Safari etc.

Bagaimana Cara Menggunakan Headlines News Widget?

1.Untuk berjaga-jaga ada baiknya jika anda backup templates anda terlebih dahulu

2.Jika sudah di backup,buka menu Theme > Edit HTML

3.CTRL+F (Pada windows) Command+F (pada mac) cari <Head>  dan paste kode dibawah tepat dibawahnya <Head>

<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'/>

4.CTRL+F (Pada windows) Command+F (pada mac) cari ]]></b:skin> dan paste kode dibawah ini tepat di atas ]]></b:skin>

/*--------------Headlines News Widget By MyBloggerTricks.com----------*/
        
.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;}}

5.Save template

6.Masuk ke Blogger > Layout > Add a Gadget pilih HTML/Javascript dan masukan kode dibawah

<!-- ######### Headlines News Widget By MBT ############# -->
        
<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.sevenangel.id";           
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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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>

7.Ganti yang warna kuning di atas dengan link blog kalian

8.Save

9.Done :)

COMMENTS

Name

android-app-mod,7,android-game-mod,7,blogger,37,google-adsense,6,lifestyle,4,review-game,2,ro-idle-poring,10,tech-news,26,templates-blogger,7,tips-dan-trik-game-android-ios,20,tips-dan-trik-seal-mobile,4,tips-dan-trik-seo,26,tips-dan-trik-tamer-frontier,6,tutorial-blogger,24,widget-blogger,5,
ltr
item
SevenAngel Technology: Headlines News Widget Untuk Blogger
Headlines News Widget Untuk Blogger
Headlines News Widget Untuk Blogger
https://4.bp.blogspot.com/-WxmkocpZj20/WbbALgtWz4I/AAAAAAAAAd0/krPjYIr2fMA75WZ7SaH9tWdI-AoyBFfYACLcBGAs/s320/Untitled.png
https://4.bp.blogspot.com/-WxmkocpZj20/WbbALgtWz4I/AAAAAAAAAd0/krPjYIr2fMA75WZ7SaH9tWdI-AoyBFfYACLcBGAs/s72-c/Untitled.png
SevenAngel Technology
http://www.sevenangel.id/2017/09/headlines-news-widget-untuk-blogger.html
http://www.sevenangel.id/
http://www.sevenangel.id/
http://www.sevenangel.id/2017/09/headlines-news-widget-untuk-blogger.html
true
5561685931329761976
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy