Documentasi Template Simple Fast Loading

Image Thumbnail
Untuk menampilkan thumbnail gambar didalam postingan dan tidak tampil baik itu jika diletakkan diatas tulisan, tengah tulisan, atau bawah tulisan maka tambahkan kode <noscript> sebelum dan sesudah kode image, dan pastikan pilih opstion original size agar image terlihat sebagai thumbnail. Lebih lengkapnya lihat contoh dibawah ini

<noscript><img data-original-height="569" data-original-width="1119" src="Url Gambar" /></noscript>

seperti

<noscript><img data-original-height="569" data-original-width="1119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s1600/kompi-botstraps.png" /></noscript>

Hasilnya bisa dilihat thumbnail diatas.


Image di dalam postingan selain thumbnail

Untuk image selain thumbnail, mungkin sobat ingin memunculkan gambar untuk memperjelas tutorial maupun informasi lainnya. Sobat bisa mensettingnya sebagaimana berikut



Posisi gambar pilih Center
Ukuran gambar pilih xlarge
Properties ALT & Title isi dengan judul agar gambar menjadi SEO
Agar gambar menjadi responsive maka sobat bisa masuk mode HTML ubah width dengan angka 100% dan height dengan auto. Untuk style center hapus dan ganti dengan tulisan center.

Kurang lebih contohnya seperti ini:

<div class="style:center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s1600/kompi-botstraps.png" imageanchor="1"><img alt="Documentasi Template Simple Fast Loading" border="0" data-original-height="569" data-original-width="1119" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s640/kompi-botstraps.png" title="Documentasi Template Simple Fast Loading" width="640" /></a></div>

Menjadi

<div class="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s1600/kompi-botstraps.png" imageanchor="1"><img alt="Documentasi Template Simple Fast Loading" border="0" data-original-height="569" data-original-width="1119" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s640/kompi-botstraps.png" title="Documentasi Template Simple Fast Loading" width="auto" /></a></div>

Hasilnya akan seperti dibawah ini:

menampilkan script atau css dengan tag code


<div class="center">
<a href="" imageanchor="1"><img alt="Documentasi Template Simple Fast Loading" border="0" data-original-height="569" data-original-width="1119" height="auto" src="" title="Documentasi Template Simple Fast Loading" width="auto" /></a></div>


menampilkan script atau css dengan tag pre

<div class="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s1600/kompi-botstraps.png" imageanchor="1"><img alt="Documentasi Template Simple Fast Loading" border="0" data-original-height="569" data-original-width="1119" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-4-zi74fHwUEUwcSZPA-5Kyfp-bnFZ5_0lzHnUSiYOi_U48y_sQXkGRJX5TH-JKb4EYXy37eUUSJ-TqdCR-UdhP21aJHuVgt473oAj6CdNB0ImGOsK51-yht0fO3JmEDhiWzi_1QCI3g-/s640/kompi-botstraps.png" title="Documentasi Template Simple Fast Loading" width="auto" /></a></div>

menampilkan peringatan tulisan atau informasi lainnya dengan tag blockquote

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

block quote dengan tag <blockquote class="note">

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.

menampilkan spoiller buka tutup

Untuk menampilkan spoiller gunakan kode dibawah ini

<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
<input id="item-1" type="checkbox" />
<label for="item-1">Hint</label>
<div class="content_box">
<div class="content">
Content here..........</div>
</div>
</div>

<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
<input id="item-2" type="checkbox" />
<label for="item-2">Hint</label>
<div class="content_box">
<div class="content">
Content here..........</div>
</div>
</div>

hasilnya akan seperti ini:

Spoiler:

Hint

Content here..........

Spoiler:

Hint

Content here..........

menampilkan tools Google Drive Generator, Word Counter, SEO Checker, dan Sitemap

Untuk menampilkan 3 tools diatas, sobat bisa mengklik tombol tools tersebut, karena sudah saya pasang tutorialnya didalam laman tersebut.

mengganti user subscribe pada menu footer

Untuk mengganti user subscribe sobat terlebih dahulu harus menuju menu layout dan buat widget ikuti terlebih dahulu nanti akan ada user pada link terakhir. Jika sudah copas saja kode user tersebut dan cari azidwebid di dalam kode subscribe pada menu theme atau template - edit HTML

menggunakan tombol button download

Sobat bisa tambahkan kode <div class="btn"> ..... </div> pada link download sobat

seperti

<div class="btn"> <a href="https://simple-fast-loading.blogspot.com">Download</a></div>


Menjadi


<div class="btn">
<a href="https://simple-fast-loading.blogspot.com">Download</a>
</div>


Hasilnya akan seperti dibawah ini

Download

mengganti load more dengan page navigation

Pada tampilan standar template ini adalah menggunakan load more dengan bantuan java script. Untuk menonaktifkan load more tersebut, sobat bisa masuk menu theme atau template dan pilih Edit HTML, setelah itu cari saja pesan dibawah ini

<!-- hapus script dibawah ini dan cari 'home-box dan hapus (tanta kurang dari ! hubung) serta hubung(tanda lebih dari) jika tidak ingin load more-->

Jika ketemu sobat bisa copas tanda --> dan letakkan kode tersebut dibawah kode </b:if>. Hasilnya kurang lebih akan seperti ini


<!-- hapus script dibawah ini dan cari 'home-box dan hapus (tanta kurang dari ! hubung) serta hubung(tanda lebih dari) jika tidak ingin load more
<b:if cond='........'>
<script>//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,0200))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
type: 0,
target: {
posts: '.blog-posts',
post: '.post-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<div class="center"><a class="js-load" href="javascript:;"><b>Load More</b></a></div>',
loading: '<div class="center"><a class="js-load">...</a></div>',
loaded: '<div class="center"><a class="js-load"><b>Selesai</b></a></div>',
error: '<div class="center"><a class="js-load">ERROR</a></div>'
}
});
//]]>
</script>
</b:if>
-->


mengganti Short Name Disqus

Untuk mengganti username disqus, caranya tetap sama yaitu masuk pada menu theme atau template pilih edit HTML setelah itu cari tulisan https-al-islamk-blogspot-com dengan klik saja CTRL + F setelah itu tekan enter. Jika sudah ketema sobat bisa menggantinya dengan shortname disqus sobat.

mengganti foto, nama, dan deskripsi profil dibawah postingan
Untuk hal ini, diatas postingan icon tersebut sudah otomatis tampil jika sobat sudah setting akun blogger sobat, akan tetapi untuk yang dibawah postingan masih manual jadi sobat harus mengubahnya secara manual pula. Caranya tetap sama masuk saja pada menu template - Edit HTML setelah itu cari "penulis: azid zainuri" dan ganti dengan nama sobat, ganti juga tulisan "deskripsi blog kamu disini ...." dengan deskripsi blog sobat, dan juga ganti pula url foto //lh6.googleusercontent.com/-ku2doE145Ww/AAAAAAAAAAI/AAAAAAAAAc8/49FfC0nqICE/s512-c/photo.jpg dengan url foto sobat atau icon sobat. Pastikan foto berukuran persegi misal 3 x 3 dll.

menampilkan iklan di dalam postingan

Untuk iklan dibawah header maupun diatas footer sobat bisa langsung menggantinya pada menu layout, akan tetapi untuk kode iklan di dalam postingan sobat harus menggantinya pada menu template - edit HTML. Caranya adalah cari kode kurang lebih seperti ini <div class='testad' ......></div> jika sudah ketemu hapus saja kode tersebut dan ganti dengan kode iklan sobat.

Table Responsive

Bokingan Hari Biasa
Jenis Kamar	Harga	Jumlah Kamar	Jumlah
Ekonomi	Rp. 150.000	5 kamar	Rp. 750.000
Standar	Rp. 200.000	5 kamar	Rp. 1.000.000
Standar AC	Rp. 300.000	4 kamar	Rp. 1.200.000
VIP/Family	Rp. 350.000	1 kamar	Rp. 350.000

<div class='table-responsive'>

  <table class="table">

    <tr>

      <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>

    </tr>

    <tr>

      <td>Jenis Kamar</td>

      <td>Harga</td>

      <td>Jumlah Kamar</td>

      <td>Jumlah</td>

    </tr>

    <tr>

      <td>Ekonomi</td>

      <td>Rp. 150.000</td>

      <td>5 kamar</td>

      <td>Rp. 750.000</td>

    </tr>

    <tr>

      <td>Standar</td>

      <td>Rp. 200.000</td>

      <td>5 kamar</td>

      <td>Rp. 1.000.000</td>

    </tr>

    <tr>

      <td>Standar AC</td>

      <td>Rp. 300.000</td>

      <td>4 kamar</td>

      <td>Rp. 1.200.000</td>

    </tr>

    <tr>

      <td>VIP/Family</td>

      <td>Rp. 350.000</td>

      <td>1 kamar</td>

      <td>Rp. 350.000</td>

    </tr>

  </table>

</div>