Cara Membuat Sitemap Valid HTTP dan HTTPS di Blogger

Unknown 05.13 0
Cara Membuat Sitemap Valid HTTP dan HTTPS di Blogger ~Sebenarnya tutorial ini tidak begitu sulit hanya tergantung template yang Anda gunakan, di template saya tutorial ini bisa tapi disainnya masih acak-acakan, belum saya edit ulang di karenakan kesibukan dan dana yang kurang untuk isi billing :D.

Tutorial yang saya bagikan kali ini berasal dari blog Kompi Ajaib, blog tersebut saya cek beruang-ulang kali demi menemukan tutorial yang saya inginkan, berhubungan blog ini masih baru dan baru di buat jadi tutorial yang saya berikan adalah sitemap terlebih dahulu.

Mambuat Sitemap Valid HTTP dan HTTPS di Blog

Langkah pertama :

Login ke Blogger > Laman > Laman Baru. Lalu Anda ke mode HTML, dan Anda masukkan kode di bawah ini ke dalam mode HTML tersebut
<div id="table-outer">   <table>     <tbody>       <tr>         <td>           <label for="feed-order">Urutkan artikel berdasarkan:</label>         </td>         <td>           <select id="feed-order">             <option selected="" value="published">Artikel terbaru</option>             <option value="updated">Artikel yang terakhir di update</option>           </select>         </td>       </tr>       <tr>         <td>           <label for="label-sorter">Filter artikel berdasarkan kategori:</label>         </td>         <td>           <select disabled="" id="label-sorter">             <option selected="">Loading....</option>           </select>         </td>       </tr>       <tr>         <td>           <label for="feed-q">Cari artikel dengan kata kunci:</label>         </td>         <td>           <form id="post-searcher">             <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />           </form>         </td>       </tr>     </tbody>   </table> </div> <br /> <header id="result-desc"></header> <br /> <ul id="feed-container"></ul> <div id="feed-nav"> </div> <script type='text/javaScript'> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:window.location.origin,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxdEW0tMC9NsCPNNdrTmWERCfulEMYDA9Tkn2TcwkDItmt_2vuN3y2jNsNumIKkv_BvMqMX5oaTrCIbfja-gqyE0_YoN7W4Txrltx19mzodQaEh8YWrcV8E8zMhP5ITVUUkaSxZkBweDBq/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init(); </script>
Langkah kedua :
Taruh kode di bawah ini di atas kode </head> atau </header> atau yang lainnya
<b:if cond='data:blog.url == &quot;Bos Design&quot;'> <style type='text/css'> #table-outer{padding:7px 10px;margin:0 auto} #table-outer table{width:auto;margin:0 auto;border:none!important;} #table-outer table td{border:none!important;padding:0!important} #table-outer form{font:inherit} #table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #table-outer select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #table-outer select option{min-height:1.4em!important;} #table-outer input#feed-q{padding:5px 10px!important;} #feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline} #feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis} #feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500} #feed-container li a:hover{text-decoration:none;color:#E94141} #feed-container li .news-text{margin-top:5px;line-height:1.3em!important} #feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important;} #result-desc{margin:0;padding:0;} #result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52} #result-desc div{color:inherit} #feed-nav{margin:10px 0 30px;text-align:center;font-weight:500} #feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px} #feed-nav a,#feed-nav span:hover{color:#1B1B1B} #feed-nav a:active,#feed-nav a:hover{color:#555} #feed-nav span{cursor:wait} @media (max-width:600px){#table-outer table{margin:0 auto;width:100%} #feed-container,#table-outer{margin:0 auto} #feed-container li .inner{margin:5px auto;height:auto} #feedContainer li{float:none;display:block;width:auto;height:auto} #feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important} } .post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vsSfy78s86lYO-bTSRHtFOG8dR-S9c8ymEHlI738qT_We_EAbQdqhIZBD6ucfcOhzwZ4QPobqgeSHAhB2eiYQhBbSaS7-5Qk6N7z-JyAcNirtkjCbNCCdoEpuyX6WCQRTzr5NaTkzm4/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important;} </style> </b:if>
Silakan Anda ganti tulisan Bos Design tersebut dengan URL atau Link Sitemap sobat.
Saran saya Anda di harapkan masih di keadaan mode HTML untuk menghindari error kode yang sudah di pasang atau taruh.

Demikian tutorial yang bisa saya berikan, semoga bermanfaat bagi Anda. Terima kasih telah berkunjung dan jangan lupa untuk Subcribe.
Advertisement
Partner

Membuat Design Color Box Responsive di Blogger

Unknown 22.48 0
Cara Membuat Design Color Box Responsive di Blogger ~ Kali ini saya akan share material design yaitu membuat design color bix di blogger responsive. Color box berguna untuk pengunjung tidak bosan mengunjungu blog Anda, color box ini berguna untuk menggantikan tag blockquote di blog. Selain menggunakan blockquote yang biasa saja yakan? Maka dari itu saya share material design ini untuk mempercantik tampilan blog Anda.

 Kali ini saya akan membagikan 5 (lima) warna sekaligus yaitu biru, hijau, merah, oren, dan purle. Keren bukan? ya pasti keren dong, untuk penggunaannya, Anda di haruskan ke postingan, dan menerapkan kode yang sudah saya berikan di bawah.

Membuat Material Color Box Responsive di Blogger

 Langkah pertama :

 Login ke Blogger > Tema > Edit HTML. Lalu Anda masukkan kode di bawah ini di atas kode ]]></b:skin> atau </style>
/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}
Silakan Anda Save.
Langkah kedua :

Langkah selanjutnya adalah penggunaannya, penggunaanya adalah Anda di haruskan membuat postingan dan meletakkan CSS di bawah ini pada mode HTML, dan silakan Anda pilih kode color box di bawah ini satu saja (banyak juga tidak apa-apa).

<div class="colorbox purple">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Di atas adalah kode color box bewarna purple.
<div class="colorbox blue">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Di atas adalah kode color box bewarna biru
<div class="colorbox red">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Di atas adalah kode color box bewarna merah
<div class="colorbox orange">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Di atas adalah kode color box bewarna oren
<div class="colorbox green">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Di atas adalah kode color box bewarna hijau

Silakan Anda Simpan lalu Anda Pratinjau terlebih dahulu.

Demikian tutorial yang bisa saya berikan hari ini semoga Anda senang dengan apa yang saya share hari ini. Untuk mengetahui update an terbaru tentang design, Anda cukup Subcribe.

Membuat Efek Loading Seperti Arlina Design

Unknown 21.05 0
Cara Membuat Efek Loading Seperti Blog Arlina Design ~ Hello Sobat Blogger, apa kabarnya nih? Saya adalah admin Bos Design. Blog ini saya buat baru untuk bertujuan untuk Anda dapat melihat tutorial-tutorial yang saya berikan lewat blog ini. Untuk postingan yang bisa saya share pertama adalah membuat efek loading seperti blog Arlina design. Efek ini sudah di pertanyakan pada pengunjung blog Arlina design.

Sebenarnya tutorial ini sangat lah mudah untuk Anda terapkan sebagai blogger pemula asalkan tutorial yang saya berikan ini Anda pahami dengan baik.

Langsung saja terapkan tutorial ini di blog Anda dengan baik dan benar agar tidak menjadi error atau tidak muncul di blog Anda.

Membuat Efek Loading Seperti Arlina Design

Langkah Pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy kode di bawah ini di atas kode ]]></b:skin>
/* Bos Design */

.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}

myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}

myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}

myloader [role="progressbar"][aria-busy="true"]::before{right:50%}

myloader [role="progressbar"][aria-busy="true"]::after{left:50%}

@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}

@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}

@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
Langkah kedua :

Lalu Anda Copy kode di bawah ini di akhir tag dari kode menu navigasi Anda.
<div class='cssload-loader' id='loader'><myloader>

<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>

</myloader></div>

<div class='page-loader' id='pagingx'/>
Langkah ketiga :

Langkah terakhir adalah menerapkan kode Javascript di atas kode </body>
<script type='text/javascript'>

//<![CDATA[

// Lostcips Page Loader

$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});

//]]>

</script>
Selanjutnya Save, efek loading akan muncul di mana Anda menerapkan kode tersebut.

Terima kasih telah berkunjung semoga hari Anda menyenangkan. Apabila terjadi error atau tidak munculnya efek tersebut, Anda bisa comment dibawah ini.