Cara Membuat Breaking News With Thumbnail


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
Cara Membuat Breaking News With Thumbnail Admin Mafsyah 5 of 5
Cara Membuat Breaking News Gambar - Tutor Kali Ini Saya Akan Membagikan Cara Membuat Breaking News With Thumbnail .. Karena Sebelumnya Sa...
Cara Membuat Breaking News With Thumbnail
4/ 5 stars - "Cara Membuat Breaking News With Thumbnail" Cara Membuat Breaking News Gambar - Tutor Kali Ini Saya Akan Membagikan Cara Membuat Breaking News With Thumbnail .. Karena Sebelumnya Sa...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
3 Komentar Blogger

3 Comments

Demo nya? atau screenshot nya gak ada?