Full Version Download Sofware Dan Game: HTML

Cara Membuat Popular Post Keren Valid Amp

Popular Post Yang Kali Ini Kita Akan Pelajari Yaitu Cara Membuat Popular Post Untuk Template Amp .. Karna Popular Post Template Non Amp Sudah Biasa Jadi Saya Disini Akan Membahas Tentang Bagaimana Caranya Kita Membuat Popular Post Keren Untuk Template Amp Atau Valid Amp .. Sebelum Kita Membahas Ke Tutorial Nya Kita Harus Memahami Terlebih Dahulu Template AMP .. Dan Tentu Saja Kita Sebelum Membuat Popular Post Valid Amp Template Yang Kita Gunakan Harus Support Amp .. Karna Apabila Template Kita Tidak Valid Amp Maka Tutorial Yang Kita Bahas Ini Hanya Untuk Template Amp Saja .. Langsung Saja Ke Tutorial Nyaa

Cara Pertama :

Masuk Ke Template > Edit Html > Cari Kode ]]></b:skin> > Dan Simpan Kode Di Bawah Ini Tepat Di Atas Kode </style>

PopularPosts .widget-content{padding:0;box-sizing:border-box}

.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}

.PopularPosts .widget-content ul li {

    margin: 0;

    padding: 10px 0 10px 60px;

    position: relative;

    overflow: hidden;

    border-top: 1px solid #2b2b2b;

    border-bottom: 1px solid #111;

}

.PopularPosts .widget-content ul li:last-child{border-bottom:none}

.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}

.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}

.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}

.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}

.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}

.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}

.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}

.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}

.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}

.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}

.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}

.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}


.sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}

.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}

.PopularPosts .widget-content{padding:0;box-sizing:border-box}

.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}

.PopularPosts .widget-content ul li {

    margin: 0;

    padding: 10px 0 10px 60px;

    position: relative;

    overflow: hidden;

    border-top: 1px solid #2b2b2b;

    border-bottom: 1px solid #111;

}

.PopularPosts .widget-content ul li:last-child{border-bottom:none}

.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}

.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}

.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}

.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}

.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}

.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}

.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}

.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}

.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}

#blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}

.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}

.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}

.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}

.sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}

.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}

Selanjutnya cari kode 'sidebar-wrapper' > Letakan Kode Di Bawah Ini Tepat Di Bawah Kode <b:section class='sidebar' id='sidebar' showaddelement='yes'>


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>

     <b:widget-settings>

       <b:widget-setting name='numItemsToShow'>10</b:widget-setting>

       <b:widget-setting name='showThumbnails'>true</b:widget-setting>

       <b:widget-setting name='showSnippets'>true</b:widget-setting>

       <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>

     </b:widget-settings>

     <b:includable id='main'>

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

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='!data:showThumbnails'>

          <b:if cond='!data:showSnippets'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->

          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href'>

                  <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>

                    <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/>

                  </b:with>

                </a>

              </div>

              <b:else/>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href' expr:title='data:post.title'>

              <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJOtItpTfVNDENHifbwCPwtqTnNDwULWyKdZsLTfBRR59LKUgZiI9-wbisjwIpJ8LthFptFW_IIe_bWhgUpG6eJQOo1eGkROqJ-MQ1nbe-yRINqOx95QxxhrPU3Rc6AVHPJFBgRqkkpXf/s100/no-thumbnail.png' width='300'/>

                </a>

              </div>

            </b:if>

            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>

            <b:if cond='data:showSnippets'>

              <div class='item-snippet'><data:post.snippet/></div>

            </b:if>

          </div>

          <div class='clear'/>

        </b:if>

      </li>

      </b:loop>

    </ul>

  </div>

</b:includable>

   </b:widget>

Langkah Terakhir Cari Kode <b:includable id='main'> Letakan Kode Di Bawah Ini Tepat Di Bawahnya

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

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='!data:showThumbnails'>

          <b:if cond='!data:showSnippets'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->

          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href'>

                  <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>

                    <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/>

                  </b:with>

                </a>

              </div>

              <b:else/>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href' expr:title='data:post.title'>

              <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJOtItpTfVNDENHifbwCPwtqTnNDwULWyKdZsLTfBRR59LKUgZiI9-wbisjwIpJ8LthFptFW_IIe_bWhgUpG6eJQOo1eGkROqJ-MQ1nbe-yRINqOx95QxxhrPU3Rc6AVHPJFBgRqkkpXf/s100/no-thumbnail.png' width='300'/>

                </a>

              </div>

            </b:if>

            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>

            <b:if cond='data:showSnippets'>

              <div class='item-snippet'><data:post.snippet/></div>

            </b:if>

          </div>

          <div class='clear'/>

        </b:if>

      </li>

      </b:loop>

    </ul>

  </div>

Simpan Template!.

Demikianlah Tutorial Blogger kali ini, Sekian Tutorial Cara Membuat Popular Post Keren Di Template Amp Semoga Bermanfaat

Cara Memasang Tombol Love Like Di Blogger

Cara Pertama :

1. Masuk ke akun blogger sobat.
2. Edit HTML.
3. Simpan kode di bawah ini, tepat di atas kode </b:skin>

.lovebutton-bloggerku {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 20px 0;
}

.lovebutton-bloggerku .inner {
    text-align: center;
    display: inline-table;
}

.lovebutton-bloggerku a {
    background: #fff;
    border: 1px solid #aaa;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    margin-right: 10px;
}

.lovebutton-bloggerku .icon {
    padding-top: 13px;
}

.lovebutton-bloggerku svg {
    fill: #aaa;
    transition: all 0.2s;
}

.lovebutton-bloggerku a:hover svg {
    fill: #666;
}

.lovebutton-bloggerku a .active svg {
    fill: #F44336;
}

.lovebutton-bloggerku .total {
    line-height: 50px;
    font-size: 20px;
    display: inline;
}

4. Lalu simpan kode ini tepat di bawah kode <data:post.body/> (ada banyak, cobain satu2, kalau bingung bisa komen di bawah 😃 ).

<div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon'>
                <svg height='25' viewBox='0 0 1792 1792' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z'/></svg>
            </div>
        </a>
        <div class='total'>Loading</div>
        <div style='clear:both;'/>
    </div>
</div>

5. Cari kode </body>, lalu simpan kode ini tepat sebelum kode </body>

<script src='https://script.bloggerku.com/like/1.0/script.min.js' type='text/javascript'/>

7. Simpan Template!.

Demikianlah Tutorial Blogger kali ini, Oke, kalau sobat kesulitan, sobat bisa langsung komen di bawah, jangan malu untuk bertanya 😄

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

Cara Pertama :

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

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

News Ticker www.lovekarawang.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>

5. Simpan Template!.

Demikianlah Tutorial Blogger kali ini, Maka Secara Otomatis Akan Keluar Breaking News With Thumbnail .. Sekian Tutorial Kali Ini Semoga Bermanfaat

Cara Memasang Rating Di Blogger

Bagaimana Cara membuat rating di blogger - Tutorial kali ini kita akan membahas cara membuat rating blogger terbaru 2018 .. Rating bisa dibilang seperti penilaiaan ..Penilaian Pengunjung Terhadap Post Yang Kita Buat .. Apabila Pengunjung Sangat Puas Maka Rating Yang Bisa Di Kasih Pengujung Yaitu Bintang 5 .. Apabila Pengunjung Kurang Puas Maka Bisa Jadi Di Beri Rating 1

Supaya Kita Tahu Bahwa Rating Di Blogger Sangatlah Penting .. Karena Sebuah Widget Rating Bisa Mempercantik Tampilan Blogger .. Dan Juga Bisa Berguna Untuk Kita Untuk Mengetahui Seberapa manfaatnya Postingan kita untuk pengujung ..

Maka Dari Itu Lebih Baik Kita Memasang Rating Widget .. Rating Widget Yang Kita Bahas Yaitu Rating Widget Untuk Di Blogger .. Dan Sangatlah Ringan Dalam Segi Loading. . Jadi Tak Perlu Khawatir Apabila Pasang Widget Rating Menjadi Loading Berat

Langsung Saja Ke Tutorial Nya

Cara Pertama :

Masuk Ke Template > Edit Html > Cari ]]></b:skin> > Simpan Kode Di Bawah Ini Tepat Di Atas ]]></b:skin>

.rw-ui-container.rw-dir-ltr .rw-report-link, .rw-ui-container.rw-valign-middle.rw-halign-right .rw-report-link {
    display: none!important;
}

.rw-ui-info-inner-container:hover {
    background: none!important;
}

.rw-ui-info-nub.rw-ui-info-inner-nub, .rw-ui-info-nub.rw-ui-info-outer-nub {
    display: none;
}

.rw-ui-tooltip {
    display: none!important;
}

.rw-ui-container.rw-size-small span.rw-ui-info {
    font-family: Open Sans, Arial, sans-serif;
    color: #b8b8b8!important;
    text-transform: uppercase;
    font-size: 13px;
    display: none;
}

.rw-ui-container {
    float: right;
    margin-top: -3px;
}

.rw-ui-container.rw-halign-right, .rw-ui-container.rw-halign-right .rw-ui-info-inner-container {
    border-color: #fff!important;
}

.rw-ui-report.rw-size-large.rw-halign-center.gradient.rw-dir-ltr.rw-type-nero.rw-meta-rating-29085119.rw-valign-bottom, .rw-ui-report.rw-dir-ltr, .rw-ui-container.rw-size-medium .rw-report-link {
    display: none!important;
}

Langkah Selanjutnya Simpan Kode Di Bawah Ini Bebas Mau Dimana Pun Bisa Kalo Bingung Silahkah Cari Kode <div class='post-info' > Letakan Di Bawahnya

<meta expr:content='data:post.id' itemprop='postId'/>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>(function(d, t, e, m){
    window._rws = window._rws || [{
        huid: &quot;373567&quot;,
        uid: &quot;17c1723b4522d4fc06734a3f33413d80&quot;,
        source: &quot;blogger&quot;,
        options: {
            &quot;size&quot;: &quot;medium&quot;,
            &quot;style&quot;: &quot;oxygen&quot;,
            &quot;isDummy&quot;: false
        } 
    }];

        
    // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = &quot;rw-blogger-js&quot;,
        p = d.location.protocol, a = (&quot;https:&quot; == p ? &quot;secure.&quot; + 
        m + &quot;js/platform/&quot; : &quot;js.&quot; + m + &quot;platform/&quot;), 
        ck = &quot;Y&quot; + t.getFullYear() + &quot;M&quot; + t.getMonth() + &quot;D&quot; + t.getDate();
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = &quot;text/javascript&quot;;
    rw.src = p + &quot;//&quot; + a + &quot;blogger.js?ck=&quot; + ck;
    s.parentNode.insertBefore(rw, s);
}(document, new Date(), &quot;script&quot;, &quot;rating-widget.com/&quot;));</script></b:if>

5. Simpan Template!.

Demikianlah Tutorial Blogger kali ini, Maka Rating Widget Anda Siap Digunakan.. Sekian Tutorial Cara Memasang Rating Widget Semoga Bermanfaat

Cara Memasang Form CSS Manifier di Halaman Statis Blog.

CSS Minifier adalah merupakan salah satu Website Tools yang digunakan untuk Compress kode CSS, Dengan meng-compressed kode CSS yang ada di Template anda, secara otomatis bisa mempercepat loading blog anda. Untuk meng-compressed kode CSS anda harus memasang Form CSS Manifier. Cara penggunaanya juga mudah, anda tinggal copy&paste kode CSS dan masukan kode Form CSS Manifier dan Centang salah satu, maka akan muncul kode yang sudah di Compressed. Setelah kode CSS sudah di Compressed, anda tinggal meletakannya di ]]></b:skin> atau </style> . Bila anda ingin memasang nya, ikuti langkah-langkah berikut ini.

Cara Pertama :

1. Buka Blogger- Kemudian login

2. Dashboard - Laman

3. Buat Laman Kosong

Proses Pembuatan :

1. Buka Laman Kosong

2. Pilih HTML jangan Compose, - kemudian.

3. Copy Dan paste kode berikut ini, dan letakkan di Laman Kosong <HTML Don't COMPOSE>

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:94%;height:300px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:5px 100px;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>
</div>

4. Simpan Halaman
5. Publikasikan

Demikianlah Tutorial Blogger kali ini, bila ada yang ingin ditanyakan, silakan jangan sungkan untuk berkomentar dibawah ini.

Cara Mempercepat Loading Blog dengan LazyLoad.

Lazyload adalah sebuah JavaScript yang bisa memberikan efek pada blog anda dan mempercepat loading blog anda. Buat blog anda yang kebanyakan menggunakan JQuery dan JavaScript, Tutorial berikut ini sangat cocok buat anda. Perlu diketahui juga bahwa JQuery dan JavaScript dapat memperlambat loading blog anda, oleh karena itu jika anda ingin mempercepat loading anda gunakanlah LazyLoad pada Blogger anda. Dengan menerapkan LazyLoad pada blog anda, anda akan merasakan sendiri efeknya dan secara perlahan-lahan loading pada blog anda akan cepat.

Cara Pertama :

1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode </body>
2. Copy Dan paste kode beriktu ini, dan letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLsJ7Hvjrri1LuUpHShM7LOHSgXx-d2StnboqZX4PNRD6Vse3NYImmoa2SBT9-nflEqv0_bccUQ5D_4zwsrY7QnTM5MQhQjyZL6ZwRyEcSsCw8gQ06f-aYAe3lO72HYEcSHnu-xSIT8h0/s1600/loading2.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

3. Simpan Template!

Demikianlah Tutorial Blogger kali ini, bila ada yang ingin ditanyakan, silakan komentar dibawah ini.