Beranda / tutorial

Cara Membuat Breaking News With Thumbnail

Oleh Bahas Tutorial 3 komentar

Cara Membuat Breaking News Gambar - Tutor Kali Ini Saya Akan Membagikan Cara Membuat Breaking News With Thumbnail .. Karena Sebelumnya Sangat Susah Mencari Artikel Breaking News With Thumbnail ..  Ada Beberapa Artikel Yagn Sama Namun Tidak Berfungsi . Kali Ini Kita Akan Bahas Tutorial Yang 100% Berfungsi .. Langsung saja Ke Tutorial nya

Langkah Pertama

  • Cari Kode ]]></b:skin> Atau </style> Simpan kode di bawah ini Tepat Di atas Kode ]]></b:skin> Atau </style>
    • 
/*----------
    

    
News Ticker www.mafsyah.com
    

    
------------*/
    

    
.tl-ticker-outer{margin-top:15px;text-align:center;position:relative}
    

    
.tl-ticker-outer>span{display:inline-block;background:#ccc;padding:10px;font:700 13px 'segoe ui',sans-serif;box-shadow:0 0 10px rgba(0,0,0,0.6)}
    

    
.tl-ticker-outer>span>a{color:#222;text-decoration:none}
    

    
#tl-ticker{height:50px;overflow:hidden;background:$(body.meta.bg);text-align:left}
    

    
#tl-ticker ul{padding:0;margin:0;list-style:none}
    

    
#tl-ticker ul li{height:50px;white-space:nowrap}
    

    
#tl-ticker ul li img{float:left;width:40px;height:40px;margin:5px 10px 5px 5px}
    

    
#tl-ticker ul li h3{margin:0}
    

    
#tl-ticker ul li h3 a{text-decoration:none;line-height:30px!important}
    

    
.tickermeta{margin-top:-4px}
    

    
#tl-ticker ul li .tickermeta{font-size:12px;color:$(body.meta.c)}
    

    
.tl-ticker-outer .tl-ticker-con{position:absolute;right:0;top:0;height:30px;width:90px;margin:10px}
    

    
.tl-ticker-outer .tl-ticker-con span{float:left;font-family:fontAwesome;width:30px;line-height:30px;text-align:center;cursor:pointer;background:rgba(0,0,0,0.05);display:block;height:30px}
    

    
.pop-item{position:relative;overflow:hidden;margin:25px 0}
    

    
.pop-item span.recentdate:after{display:none;}
    

    
.pop-item img{float:left;margin:0 15px}
    

    
.pop-recent{position:fixed;width:400px;right:0;bottom:0;z-index:100;background:#fff;margin-right:-450px;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
    

    
.pop-recent.active{margin-right:0}
    

    
.pop-recent .close-pop{background:$(keycolor);width:40px;height:40px;position:absolute;top:-25px;color:#fff;cursor:pointer;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font:NORMAL 400 15px 'fontawesome',sans-serif;line-height:40px;text-align:Center}
    

    
.tl-recentMag h3,.PopularPosts ul li .item-title,#related-posts li h4,.recentcontent h3,.layerc h3,.home-top-c h3,.tl-feature-sub h3,#tl-ticker ul li h3,.pop-item h3{font:$(heading.font);font-weight:600;font-size:14px;text-transform:capitalize;margin:0 0 5px 0}
    

    
.tl-recentMag h3 a,.PopularPosts ul li a,#ArchiveList a,.related-content h3 a,.tl-morePost .tl-randomSimple ul li h3 a,.tl-morePost .tl-recentSimple ul li h3 a,.recentcontent h3 a,.layerc h3 a,.home-top-c h3 a,.tl-feature-sub h3 a,#tl-ticker ul li h3 a,.pop-item h3 a{color:$(body.heading.c);transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}
    

    
.tl-recentMag h3 a:hover,.PopularPosts ul li a:hover,#ArchiveList a:hover,.related-content h3 a:hover,.tl-morePost .tl-randomSimple ul li h3 a:hover,.tl-morePost .tl-recentSimple ul li h3 a:hover,.recentcontent h3 a:hover,.layerc h3 a:hover,.home-top-c h3 a:hover,.tl-feature-sub h3 a:hover,#tl-ticker ul li h3 a:hover,.pop-item h3 a:hover{color:$(keycolor);text-decoration:underline;}
    

    
.tl-recentLink{height:35px;line-height:35px;margin-bottom:25px;border-bottom:2px solid $(body.border.c);}

  • Selanjutnya Letakan Kode Di Bawah Ini Tepat Di Atas kode </head>

    
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    

    
<script type='text/javascript'>
    

    
        //<![CDATA[
    

    
/*! vTicker 1.15
    

    
 http://richhollis.github.com/vticker/ | http://richhollis.github.com/vticker/license/ | based on Jubgits vTicker http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ */
    

    
(function(d){var n={speed:700,pause:4E3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},c={moveUp:function(a,b){c.animate(a,b,"up")},moveDown:function(a,b){c.animate(a,b,"down")},animate:function(a,b,e){var c=a.itemHeight,f=a.options,k=a.element,g=k.children("ul"),l="up"===e?"li:first":"li:last";k.trigger("vticker.beforeTick");var m=g.children(l).clone(!0);0<f.height&&(c=g.children("li:first").height());c+=f.margin+2*f.padding;"down"===e&&g.css("top","-"+c+"px").prepend(m);
    

    
if(b&&b.animate){if(a.animating)return;a.animating=!0;g.animate("up"===e?{top:"-="+c+"px"}:{top:0},f.speed,function(){d(g).children(l).remove();d(g).css("top","0px");a.animating=!1;k.trigger("vticker.afterTick")})}else g.children(l).remove(),g.css("top","0px"),k.trigger("vticker.afterTick");"up"===e&&m.appendTo(g)},nextUsePause:function(){var a=d(this).data("state"),b=a.options;a.isPaused||2>a.itemCount||f.next.call(this,{animate:b.animate})},startInterval:function(){var a=d(this).data("state"),b=
    

    
this;a.intervalId=setInterval(function(){c.nextUsePause.call(b)},a.options.pause)},stopInterval:function(){var a=d(this).data("state");a&&(a.intervalId&&clearInterval(a.intervalId),a.intervalId=void 0)},restartInterval:function(){c.stopInterval.call(this);c.startInterval.call(this)}},f={init:function(a){f.stop.call(this);var b=jQuery.extend({},n);a=d.extend(b,a);var b=d(this),e={itemCount:b.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:b,animating:!1,options:a,isPaused:a.startPaused?
    

    
!0:!1,pausedByCode:!1};d(this).data("state",e);b.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:a.margin,padding:a.padding});isNaN(a.height)||0===a.height?(b.children("ul").children("li").each(function(){var a=d(this);a.height()>e.itemHeight&&(e.itemHeight=a.height())}),b.children("ul").children("li").each(function(){d(this).height(e.itemHeight)}),b.height((e.itemHeight+(a.margin+2*a.padding))*a.showItems+a.margin)):
    

    
b.height(a.height);var h=this;a.startPaused||c.startInterval.call(h);a.mousePause&&b.bind("mouseenter",function(){!0!==e.isPaused&&(e.pausedByCode=!0,c.stopInterval.call(h),f.pause.call(h,!0))}).bind("mouseleave",function(){if(!0!==e.isPaused||e.pausedByCode)e.pausedByCode=!1,f.pause.call(h,!1),c.startInterval.call(h)})},pause:function(a){var b=d(this).data("state");if(b){if(2>b.itemCount)return!1;b.isPaused=a;b=b.element;a?(d(this).addClass("paused"),b.trigger("vticker.pause")):(d(this).removeClass("paused"),
    

    
b.trigger("vticker.resume"))}},next:function(a){var b=d(this).data("state");if(b){if(b.animating||2>b.itemCount)return!1;c.restartInterval.call(this);c.moveUp(b,a)}},prev:function(a){var b=d(this).data("state");if(b){if(b.animating||2>b.itemCount)return!1;c.restartInterval.call(this);c.moveDown(b,a)}},stop:function(){d(this).data("state")&&c.stopInterval.call(this)},remove:function(){var a=d(this).data("state");a&&(c.stopInterval.call(this),a=a.element,a.unbind(),a.remove())}};d.fn.vTicker=function(a){if(f[a])return f[a].apply(this,
    

    
Array.prototype.slice.call(arguments,1));if("object"!==typeof a&&a)d.error("Method "+a+" does not exist on jQuery.vTicker");else return f.init.apply(this,arguments)}})(jQuery);
    

    

    

    
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('g O(t){v(b e=0;e<t.w;e++)b a=t[e].1T.$t;H a}g L(t){b e=[];e[1]="1G",e[2]="1u",e[3]="1e",e[4]="Z",e[5]="1t",e[6]="1n",e[7]="1m",e[8]="1g",e[9]="1i",e[10]="1l",e[11]="1k",e[12]="1j";b a=t.D(0,4),s=t.D(5,7),r=t.D(8,10),n=e[1h(s,10)]+" "+r+" "+a;H n}g T(e){b k=$(\'#c-d\'),q=e.1r.1q,m="<S 1o=\'1p-1f-1c\'>";x(q){v(b i=0;i<q.w;i++){b f=q[i];v(b j=0;j<f.u.w;j++){x(f.u[j].Y==\'W\'){b J=f.u[j].K;16}}1d{b C=\'<1b 1a="\'+f.17$18.U+\'"/>\'}19(e){b C=""}b M=f.1S.$t,y=O(f.y),P=L(f.1N.$t);m+=\'<R>\'+C+\'<Q><a K="\'+J+\'">\'+M+\'</a></Q><I B="1W"><l>\'+y+\'</l> - <l>\'+P+\'</l></I></R>\'}m+=\'</S>\';k.1C(m)}$(\'#c-d\').h();$(\'.c-d-k .1z\').A(g(){x($(z).1x(\'F\')){$(\'#c-d\').h(\'E\',1y);$(z).1D(\'F\').G(\'<i B="N-E"></i>\')}1E{$(\'#c-d\').h(\'E\',p);$(z).1K(\'F\').G(\'<i B="N-1B"></i>\')}});$(\'.c-d-k .1F\').A(g(){$(\'#c-d\').h(\'1H\',{V:p})});$(\'.c-d-k .1I\').A(g(){$(\'#c-d\').h(\'1J\',{V:p})})}$(g(){$.1w({1A:\'1M\',U:\'/1L/1U/1Y?1Z-1X=3&1V=o-1P-1O&1Q-1R=5\',1v:p,15:"X/o",14:\'13\',1s:g(o){T(o)}})});',62,124,'|||||||||||var|tl|ticker||en|function|vTicker|||con|span|item||json|true|entries||||link|for|length|if|author|this|click|class|Img|substring|pause|paused|html|return|div|postUrl|href|getmetaq|ti|fa|getauthorq|date|h3|li|ul|bloggerEverTicker|url|animate|alternate|application|rel|Apr||||jsonp|dataType|contentType|break|media|thumbnail|catch|src|img|inner|try|Mar|wrapper|Aug|parseInt|Sep|Dec|Nov|Oct|Jul|Jun|id|ticket|entry|feed|success|May|Feb|async|ajax|hasClass|false|pp|type|play|append|removeClass|else|down|Jan|next|up|prev|addClass|feeds|GET|published|script|in|start|index|title|name|posts|alt|tickermeta|results|summary|max'.split('|'),0,{}))
    

    

    

    

    

    
//]]></script>
    

    
  </b:if>

  • Terakhir Simpan Kode Di Bawah Ini Bebas Dimana Saja Sesuai Keinginan Kalo Saya Di Simpan Di Bawah Contenct-wrap ..

    
<div class='tl-newsTicker'>
    

    
      <div class='featured-inner'>
    

    
        <b:section class='News-Ticker' id='NewsTicker' maxwidgets='1'>
    

    
          <b:widget id='HTML559' locked='false' title='' type='HTML' visible='true'>
    

    
            <b:includable id='main'>
    

    
  <!-- only display title if it's non-empty -->
    

    
  <b:if cond='data:title != &quot;&quot;'>
    

    
    <h2 class='title'><data:title/></h2>
    

    
  </b:if>
    

    
  <div class='widget-content'>
    

    
    <data:content/>
    

    
  </div>
    

    

    

    
  <b:include name='quickedit'/>
    

    
</b:includable>
    

    
          </b:widget>
    

    
        </b:section>     
    

    
</div>
    

    
  </div>




Lalu Simpan ... Lalu Buka Tata Letak > Klik Edit Pada NewsTicker > Masukan Kode


<div class='tl-ticker-outer'>



<div id="tl-ticker">



</div>



</div>


Maka Secara Otomatis Akan Keluar Breaking News With Thumbnail .. Sekian Tutorial Kali Ini Semoga Bermanfaat

3 komentar untuk "Cara Membuat Breaking News With Thumbnail"