View AllTemplate

Latest News

Saturday, January 25, 2020

Download Template Igniel Terbaru Update Dari Versi Sebelumnya

Download Template Igniel Terbaru Update Dari Versi Sebelumnya - template igniel ini sangat keren dan responsive dan pastinya speed load nya yang sangat kencang. Anda harus mencoba template premium yang satu ini, apalagi saya kasih gratis buat kalian. hehehe

Download Template Igniel Terbaru Update Dari Versi Sebelumnya
igniel template
Baca Juga : Template Blogger Mirip Playstore

Keunggulan template ini adalah dari segi speed loadingnya yang sangat kencang, bisa kalian cek di GTmatrik/Pagespeed google. Template ini juga dilengkapi tampilan homepage yang Grid sehingga terlihat keren dan elegan.
Fitur - Fitur
  • Responsive
  • Speed Template
  • Grid Style dan List Style
  • Lazy load image
  • Load more Post
  • Seo Friendly
  • Subcribe Box
  • Related Post
  • Mode Malam
  • Dll.
 Jika berminat silahkan download dibawah ini:

Download

Silahkan di download, maaf admin tidak menyediakan link demo dari template ini.

Kesimpulan
Jika ingin mengganti template blog, di haruskan membekup template apabila terjadi eror bisa di kembalikan semula lagi. Terimakasih

Monday, January 20, 2020

Template Play Store Blogspot Free Download

input learn - Template Play Store Blogspot Free Download, template ini bisa di bilang njiplak atau biasa di sebut mirip - mirip lah sama aslinnya, karna template ini di disain agar tampilan yang disajikan di buat sama dan pengunjung agar terkesan melihatnya.


Template Play Store Blogspot Free Download

Buat kalian nih yang ingin punya rencana buat blog download aplikasi dan lain-lain, bisa dah lihat dulu desain dari template yang satu ini, siapa tahu tertarik melihat tampilannya. Hehehe
Fitur-Fitur Template
  1. List View
  2. Kategori Kolom
  3. Responsive
  4. SEO Optimal, bisa di cek sendiri
  5. Desain Mirip Asli Di Tampilan Homepage
  6.  Clean
  7. Fast Loading Blog
  8. Navigasi Sidebar
  9. Search Form 
  10. No Credit Link
Jika berminat silahkan di download link sudah saya sediakan di bawah, ya mohon maaf karna mimin tidak menyediakan demo dari template ini. Tapi bisa kalian cek sendiri di jamin gak nyesel pokoknya.

Download

Seperti biasah, ketika mendownload harus lewati Shortlink dulu ya, lumayan buat pemasukan admin. Hehehe terimakasih

Friday, January 17, 2020

Cara Membuat Related Post Grid (artikel terkait) Dibawah Postingan Blog

Membuat related post dengan gambar tumbnail di bawah postingan blog - Apa itu Related Post ? related post merupakan sekumpulan link yang menuju ke postingan yang terkait pada artikel yang di baca, atau bisa di bilang masih memiliki kesamaan topik.

Cara Membuat Related Post Grid (artikel terkait) Dibawah Postingan Blog

Hal ini sudah banyak di lakukan terhadap blog - blog yang sudah terkenal dan memiliki nama di google. Karna dapat meningkatkan PV pada suatu blog tersebut.

Baca Juga : Cara Membuat sitemap (daftar isi) Sesuai Label Keren

Keuntungan yang dapat di ambil dari pemasangan Related Post dari segi SEO blog:

  1. Membantu meningkatkan PV atau page View pengunjung blog, karna banyak orang yang membutuhkan artikel yang bermanfaat, nah dengan adanya related post sangatlah berguna untuk para pengunjung blog anda.
  2. Menurunkan Bounce Rate blog anda, Mengapa demikian ? Karna dengan adanya related post tersebut membuat blog anda di bilang menarik dan terlihat elegan untuk para pengunjung blog.
  3. Membantu meningkatkan waktu kunjungan rata - rata pada blog, apa maksutnya ? seperti yang saya jelaskan tadi, jika artikel anda menarik dan mudah di pahami tidak lain para pengunjung akan melihat artikel anda lainnya yang terkait pada artikel atau topik tersebut.

Posisi yang bagus meletakkan related post adalah pada akhiran artikel, agar tidak mengganggu pengunjung untuk membaca artikel yang di bacanya sekarang. Penempatan di bawah itu lah yang akan pengunjung lihat jika menarik pastinya pengunjung akan mengklik dan melihat artikel terkait lain nya.

Di sini saya akan memberikan dua (2) pilhan yaitu:
  • 3 kolom grid dengan tumbnail
  • 4 kolom grid dengan tumbnail
Cara memasang Related post di bawah postingan blog dengan Tumbnail

A. Tiga (3) kolom Grid

1. Masuk ke blogger anda terlebih dahulu,

2. Buka menu Tema ~ Edit HTML,

3. Dan copas kode CSS di bawah ini, tepat di atas </style> atau ]]></b:skin>. Untuk memudahkan pencarian kode ketikkan CTRL + F pada keyboard.

  /* Related Post Grid by inputlearn.net */
#ignielRelated{
  display:block;
  margin:20px 0px;
  line-height:1.5em;
}
#ignielRelated h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#ignielRelated h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#ignielRelated h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#ignielRelated ul{
  margin:20px 0px 0px;
  padding:0px;
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
}
#ignielRelated ul li{
  list-style:none;
  width:calc((100% / 3) - 15px);
  text-align:center;
  margin-right:20px;
  margin-bottom:20px;
  padding:0px;
  -webkit-margin-start:0px !important;
}
#ignielRelated ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
}
#ignielRelated ul li:nth-of-type(3n){
  margin-right:0px;
}
#ignielRelated ul li a{
  display:block;
}
#ignielRelated ul li a.judul{
  color:#000; /* Warna Huruf */
  font-weight:600;
  margin-top:7px;
}
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
  color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelated ul li a img{
  width:100%;
  max-height:143px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#ignielRelated .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #ignielRelated ul li{
    width: calc((100% / 2) - 7.5px);
    margin-right:15px;
    margin-bottom:15px;
  }
  #ignielRelated ul li:nth-of-type(3n){
    margin-right:15px;
  }
  #ignielRelated ul li:nth-of-type(2n){
    margin-right:0px;
  }
}

4. Masih di Edit HTML, silahkan cari kode <data:post.body/>, dan pastekan kode dibawah ini tepat setelah kode <data:post.body/>.

  <!-- Related Post Grid by inputlearn.net -->
<b:if cond='data:view.isPost'>
  <div id='ignielRelated'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 6;
      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}('d a=["\y","\x\1f\f\k\h","\f\e\q\C\h\E","\w","\k\q\A\e\1Y\1d\P","\x\z\U\x\h\n\k\q\C","","\1l\F\k\q","\e\q\h\n\1E","\P\e\e\A","\1H\h","\h\k\h\f\e","\S\F\q\h\e\q\h","\x\z\v\v\g\n\1E","\v\e\A\k\g\1H\h\E\z\v\U\q\g\k\f","\z\n\f","\A\g\h\g\2n\k\v\g\C\e\D\1f\q\C\2q\U\g\x\e\1M\1z\2p\k\1t\1w\1d\1C\1i\2k\2j\2e\C\F\b\b\b\b\1I\1n\Z\E\V\Z\C\b\b\b\b\V\b\b\b\b\1w\O\b\1r\b\b\b\O\W\A\1b\2f\e\b\b\b\b\b\1A\1I\O\1n\1t\W\1r\O\b\1l\U\1z\Z\D\C\b\b\b\b\2h\V\f\V\W\1t\W\1r\v\1T\1d\F\n\1M\2g\2b\b\b\1B\1X\b\1W\1V\1j\1d\1K\1G\1J\b\b\b\b\b\V\f\1K\1J\1k\1n\z\W\v\O\O","\f\k\q\1k","\n\e\f","\g\f\h\e\n\q\g\h\e","\E\n\e\P","\n\g\q\A\F\v","\P\f\F\F\n","\Z\1C\1B","\y\f\k\w","\y\A\k\1j\K\S\f\g\x\x\I\p\h\E\z\v\U\p\w\y\g\K\E\n\e\P\I\p","\p\K\h\k\h\f\e\I\p","\p\w\y\k\v\C\K\x\n\S\I\p","\D\1i\1b\2a\1b\X\E\1b\1G\1A\X\1f\X\1k\X\q\F\X\q\z","\n\e\1f\f\g\S\e","\p\K\g\f\h\I\p","\p\D\w\y\D\g\w\y\D\A\k\1j\w","\y\g\K\E\n\e\P\I\p","\p\K\S\f\g\x\x\I\p\1l\z\A\z\f\p\w","\y\D\g\w","\y\D\f\k\w","\1i\n\k\h\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));
      //]]></script>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
      </b:loop>
      <ul>
        <script>ignielRelatedGrid();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
<div class='clear'/>
</b:if>

5. Simpan Tema.

B. Empat (4) kolom Grid

1.
Untuk pemasangan sama seperti tadi, masuk ke menu Tema ~ Edit HTML.

2. Trus copas kode dibawah ini tepat di atas kode </style> atau ]]></b:skin>.

  /* Related Post Grid by inputlearn.net */
#ignielRelated{
  display:block;
  margin:20px 0px;
  line-height:1.5em;
}
#ignielRelated h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#ignielRelated h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#ignielRelated h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#ignielRelated ul{
  margin:20px 0px 0px;
  padding:0px;
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
}
#ignielRelated ul li{
  list-style:none;
  width:calc((100% / 4) - 7.5px);
  text-align:center;
  margin-right:10px;
  margin-bottom:20px;
  padding:0px;
  -webkit-margin-start:0px !important;
}
#ignielRelated ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
}
#ignielRelated ul li:nth-of-type(4n){
  margin-right:0px;
}
#ignielRelated ul li a{
  display:block;
}
#ignielRelated ul li a.judul{
  color: #000; /* Warna Judul */
  font-weight:600;
  margin-top:7px;
}
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
  color: #ff5722; /* Warna Judul Ketika Disorot */
}
#ignielRelated ul li a img{
  width:100%;
  max-height:143px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#ignielRelated .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #ignielRelated ul li{
    width: calc((100% / 2) - 7.5px);
    margin-right:15px;
    margin-bottom:15px;
  }
  #ignielRelated ul li:nth-of-type(4n){
    margin-right:15px;
  }
  #ignielRelated ul li:nth-of-type(2n){
    margin-right:0px;
  }
}

3. Lalu Sama seperti tadi, Cari kode <data:post.body/> dan pastekan kode dibawah ini tepat di bawah kode <data:post.body/>.

  <!-- Related Post Grid by inputlearn.net -->
<b:if cond='data:view.isPost'>
  <div id='ignielRelated'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 8;
      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}('d a=["\y","\x\1f\f\k\h","\f\e\q\C\h\E","\w","\k\q\A\e\1Y\1d\P","\x\z\U\x\h\n\k\q\C","","\1l\F\k\q","\e\q\h\n\1E","\P\e\e\A","\1H\h","\h\k\h\f\e","\S\F\q\h\e\q\h","\x\z\v\v\g\n\1E","\v\e\A\k\g\1H\h\E\z\v\U\q\g\k\f","\z\n\f","\A\g\h\g\2n\k\v\g\C\e\D\1f\q\C\2q\U\g\x\e\1M\1z\2p\k\1t\1w\1d\1C\1i\2k\2j\2e\C\F\b\b\b\b\1I\1n\Z\E\V\Z\C\b\b\b\b\V\b\b\b\b\1w\O\b\1r\b\b\b\O\W\A\1b\2f\e\b\b\b\b\b\1A\1I\O\1n\1t\W\1r\O\b\1l\U\1z\Z\D\C\b\b\b\b\2h\V\f\V\W\1t\W\1r\v\1T\1d\F\n\1M\2g\2b\b\b\1B\1X\b\1W\1V\1j\1d\1K\1G\1J\b\b\b\b\b\V\f\1K\1J\1k\1n\z\W\v\O\O","\f\k\q\1k","\n\e\f","\g\f\h\e\n\q\g\h\e","\E\n\e\P","\n\g\q\A\F\v","\P\f\F\F\n","\Z\1C\1B","\y\f\k\w","\y\A\k\1j\K\S\f\g\x\x\I\p\h\E\z\v\U\p\w\y\g\K\E\n\e\P\I\p","\p\K\h\k\h\f\e\I\p","\p\w\y\k\v\C\K\x\n\S\I\p","\D\1i\1b\2a\1b\X\E\1b\1G\1A\X\1f\X\1k\X\q\F\X\q\z","\n\e\1f\f\g\S\e","\p\K\g\f\h\I\p","\p\D\w\y\D\g\w\y\D\A\k\1j\w","\y\g\K\E\n\e\P\I\p","\p\K\S\f\g\x\x\I\p\1l\z\A\z\f\p\w","\y\D\g\w","\y\D\f\k\w","\1i\n\k\h\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));
      //]]></script>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
      </b:loop>
      <ul>
        <script>ignielRelatedGrid();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
<div class='clear'/>
</b:if>

4. Simpan Tema.

Perhatikan
Biasanya untuk yang memakai template buatan mas sugeng yaitu Viomagz, cari kode <data:post.body/> biasanya terdapat (3) kode dalam template tersebut. Silahkan coba satu persatu sampai nampil sesuai. Bagi yang memakai template yang selain Viomagz, silahkan tentukan kodenya juga sama seperti viomagz tadi.

Baca Juga : Cara Jitu Mencegah Terjadinya Copas Pada Artikel Blog

Nah silahkan di coba dan di praktekkan buat yang tertarik menggunakannya, saran saya harus di sertakan related post karna meningkatkan SEO blog anda.

Cukup sekian untuk pembahasan kali ini, tentang Cara memasang related post di bawah postingan blog dengan tumbnail. Semoga bermanfaat terimakasih. Sumber Script Mbak (Igniel.com)

Thursday, January 16, 2020

Cara Membuat Sitemap (Daftar Isi) Pada Blog Berdasarkan Label

Sitemap (daftar isi) adalah komponen penting dalam sebuah blogger sebagai navigasi halaman yang dapat memunculkan semua menu daftar isi yang di bahas dalam blog anda sesuai dengan pada label blog.

Cara Membuat Sitemap (Daftar Isi) Pada Blog Berdasarkan Label

Sitemap sangatlah berpengaruh pada suatu blog, selain untuk menambah halaman juga berpengaruh pada SEO blog anda. Karena sitemap sangat di anjurkan oleh google untuk mempermudah pengunjung mencari materi yang di carinya dalam satu tempat yaitu sitemap (daftar isi).

Baca Juga : Cara Jitu Dan Ampuh, Mencegah Terjadinya Copas Artikel Pada Blog

Sama halnya anda membeli buku jika tidak terdapat halam daftar isi, maka buku tersebut tidak jelas mengenai isi yang terdapat pada buku tersebut. Di karnakan tidak tertera pada halaman berapa saja yang membahas tentang materi tententu di dalam buku itu.

Nah untuk kali ini penulis akan memberikan, cara membuat sitemap (daftar isi) yang keren dengan sekali klik akan langsung menujukkan artikel dengan huruf awalan yang sama. Sangat cocok untuk yang blognya membahas tentang blog download, tutorial novel dan lain sebagainya.

Cara Memasang script CSS sitemap pada template blogger

1. Masuk blogger anda terlebih dahulu,

2. Selanjutnya anda pilih menu Tema ~ Edit HTML,

3. Dan paste kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>. Untuk mempermudah pencarian silahkan ketikkan CTRL + F pada keyboard lalu cari kode di atas tadi.

  /* Blogger Sitemap Alphabetically with Letter Heading by inputlearn.net */
#sitemap5 {font-size:14px; font-weight:400}
#sitemap5 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap5 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap5 a:hover {color:#000;}
#sitemap5 .isi .abjad {background-color:#2196f3; color:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; position:relative;}
#sitemap5 .isi .abjad #top:before {content:''; width:12px; height:calc(100% - 20px); position:absolute; right:0px; top:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat;}
#sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
#sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sitemap5 .nav ol li {background-color:#444; color:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:center; text-transform:uppercase; width:40px;}
#sitemap5 .nav ol li:last-child {margin-right:0px;}
#sitemap5 .isi ol {margin:0px 0px 20px; padding:0px; border:1px solid #ccc; border-top:0px;}
#sitemap5 .isi ol li {color:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !important;}
#sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap5 .isi ol li:nth-of-type(odd) {background-color:#fff}
@media screen and (max-width:480px) {
  #sitemap5 {font-size:13px;}
  #sitemap5 .judul {padding:10px;}
  #sitemap5 .isi .abjad {padding:7px 15px;}
}
@media screen and (max-width:360px) {
  #sitemap5 {font-size:12px;}
  #sitemap5 .judul {padding:10px;}
  #sitemap5 .isi .abjad {padding:7px 12px;}
  #sitemap5 .isi ol li {padding:7px 12px;}
}

4. Selesai Simpan Tema.

Untuk langkah berikutnya, silahkan masuk ke Menu Halaman dan buat Halaman Baru, nah untuk menjalankan kode CSS tadi silahkan panggil kode nya dengan masuk ke HTML bukan Compose, dan pastekan kode JS di bawah ini pada Mode HTML.

  <div id="sitemap5">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Alphabetically with Letter Heading by inputlearn.net */
var scroll  = 'smooth'; /* 'smooth' OR 'instant' */
/*
'smooth' for smooth scroll
OR
'instant' for quick scroll
*/
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}('q a=["","\f\s\i\g\o\d","\s\i\c\b\d\c\W\e\c\x\c\k\d","\f\i\s","\u\J\c\c\h\f\u\o\j\f\d\f\u\f\r\x\x\b\i\G\1V\b\e\d\v\z\f\j\k\1n\s\b\e\e\N\b\s\1b\v\f\g\d\c\x\b\o\K\1n\f\d\b\i\d\Z\g\k\h\c\1o\v","\1n\x\b\1o\Z\i\c\f\r\e\d\f\v","\b\o\o\c\k\h\1J\E\g\e\h","\N\j\h\G","\f\g\d\c\x\b\o\K","\1H\c\d\W\e\c\x\c\k\d\1K\G\1F\h","\g\k\k\c\i\1X\1i\1Y\1k","\J\c\c\h","\e\c\k\1H\d\E","\c\k\d\i\G","\1Q\d","\d\g\d\e\c","\e\g\k\1b","\i\c\e","\b\e\d\c\i\k\b\d\c","\E\i\c\J","\o\r\f\E","\d\j\1k\j\1E\c\i\1J\b\f\c","\s\E\b\i\1x\d","\z\r\h\r\e","\g\k\h\c\1o\2d\J","\r\i\e","\f\j\i\d","\m\h\g\w\l\s\e\b\f\f\v\p\b\N\z\b\h\p\n\m\f\o\b\k\l\h\b\d\b\Z\w\b\e\r\c\v\p","\p\n","\m\u\f\o\b\k\n\m\f\o\b\k\l\g\h\v\p\d\j\o\p\l\d\g\d\e\c\v\p\1K\b\s\1b\l\d\j\l\1i\j\o\p\n\m\u\f\o\b\k\n\m\u\h\g\w\n\m\j\e\n","\m\e\g\n\m\b\l\E\i\c\J\v\p","\p\l\d\g\d\e\c\v\p","\m\u\b\n\m\u\e\g\n","\m\u\j\e\n","\m\e\g\n","\m\u\e\g\n","\m\h\g\w\l\s\e\b\f\f\v\p\z\r\h\r\e\p\n\1i\j\d\b\e\l\2h\j\f\d\2i\l","\m\u\h\g\w\n\m\h\g\w\l\s\e\b\f\f\v\p\k\b\w\p\n\m\j\e\n","\m\u\j\e\n\m\u\h\g\w\n\m\h\g\w\l\s\e\b\f\f\v\p\g\f\g\p\n","\m\u\h\g\w\n","\s\e\g\s\1b","\O\f\g\d\c\x\b\o\K\l\H\g\f\g\l\H\b\N\z\b\h\l\2j\h\b\d\b\Z\w\b\e\r\c\v\p","\p\2e","\f\d\b\i\d","\f\s\i\j\e\e\1F\k\d\j\2s\g\c\1E","\o\b\i\c\k\d\2t\j\h\c","\1w\r\c\i\G\1t\c\e\c\s\d\j\i","\b\h\h\W\w\c\k\d\1k\g\f\d\c\k\c\i","\J\j\i\W\b\s\E","\O\f\g\d\c\x\b\o\K\l\H\k\b\w\l\j\e\l\e\g","\1w\r\c\i\G\1t\c\e\c\s\d\j\i\1x\e\e","\O\f\g\d\c\x\b\o\K\l\H\k\b\w","\O\f\g\d\c\x\b\o\K\l\H\g\f\g\l\H\b\N\z\b\h\l\O\d\j\o"];q 1f=1,V=2c,1a=1l 1h(),Q=1l 1h(),1p=1l 1h(),1j=a[0],T=a[0],1q=a[0];B 1g(){q 1e=D[a[2]](a[1]);1e[a[3]]=a[4]+1f+a[5]+V;D[a[7]][a[6]](1e)}B 2f(1B){q Y=D[a[9]](a[8]);F(!Y){1L};Y[a[10]]=a[0];q S=1B[a[11]];F(S[a[13]][a[12]]>0){I(q U=0;U<S[a[13]][a[12]];U++){q P=S[a[13]][U];q 1d=P[a[15]][a[14]];I(q M=0;M<P[a[16]][a[12]];M++){F(P[a[16]][M][a[17]]==a[18]){q 1c=P[a[16]][M][a[19]];F(1c&&1c[a[12]]>0&&1d&&1d[a[12]]>0){1a[a[20]]({"\r\i\e":1c,"\z\r\h\r\e":1d})};2k}}};F(S[a[13]][a[12]]>=V){1f+=V;1g()}1I{I(q t=1a,A=0;A<t[a[12]];A++){q R=t[A][a[23]][a[22]](0)[a[21]]();F(1j[a[24]](R)==-1){1j+=R;Q[R]=[{2l:t[A][a[25]],2m:t[A][a[23]]}]}1I{Q[R][a[20]]({"\r\i\e":t[A][a[25]],"\z\r\h\r\e":t[A][a[23]]})}};I(q y 1O Q){1p[a[20]](y)};q t=1p[a[26]]();I(q C=0;C<t[a[12]];C++){T+=a[27]+t[C]+a[28]+t[C]+a[29];I(q L=0,1m=Q[t[C]];L<1m[a[12]];L++){q X=1m[a[26]](B(y,t){1L y[a[23]]>t[a[23]]?1:-1});T+=a[1W]+X[L][a[25]]+a[1U]+X[L][a[23]]+a[28]+X[L][a[23]]+a[2u]};T+=a[2o];1q+=a[2n]+t[C]+a[2r]};Y[a[10]]=a[2g]+1a[a[12]]+a[2p]+1q+a[1Z]+T+a[1R];1A()}}}B 1A(){D[a[1D]](a[1P])[a[1y]](B(y){y[a[1s]](a[1u],B(){q t=a[1S]+1N[a[10]]+a[2b];D[a[1r]](t)[a[1T]][a[1z]]({1C:1v,1G:a[1M]})})});D[a[1D]](a[2a])[a[1y]](B(y){y[a[1s]](a[1u],B(){D[a[1r]](a[2q])[a[1z]]({1C:1v,1G:a[1M]})})})}1g()',62,155,'||||||||||_0x764c|x61|x65|x74|x6C|x73|x69|x64|x72|x6F|x6E|x20|x3C|x3E|x70|x22|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|function|_0xd28cx18|document|x68|if|x79|x2E|for|x66|x35|_0xd28cx19|_0xd28cx12|x62|x23|_0xd28cx10|grup|_0xd28cx16|_0xd28cxe|print|_0xd28cxf|max|x45|_0xd28cx1b|_0xd28cxd|x2D|||||||||||sitemap5Arr|x6B|_0xd28cx13|_0xd28cx11|_0xd28cxa|start|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|behavior|50|x77|x49|block|x67|else|x43|x42|return|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|break|url|judul|34|33|37|51|35|x56|x4E|32'.split('|'),0,{}));
//]]> </script>

Jika pemasangan sudah benar, silahkan masukkan judul halaman, [SITEMAP] dan selanjunya publikasikan. Jika mau mengisi tag deskripsi silahkan isikan juga [SITEMAP] atau apa terserah kalian setelah itu publikasikan.
Kesimpulan
Sitemap dengan navigasi sesuai abjad ini sangatlah bagus dan mendapatkan nilai plus, yaitu memudahkan pengunjung dalam mencari sebuah artikel berdasarkan huruf depan dari judul yang di cari sesuai label. Silahkan di praktekkan dan lihat hasilnya semoga puas dengan tampilan sitemap yang sekarang ini. Jika ingin melihat demo dari sitemap, kunjungi saja sumbernya di > Sumber Gambar Halaman (jagoandzgn)

Baca Juga : Cara Menghapus Link Aktif Pada Komentar Blogger Dengan CSS

Nah itulah tadi cara membuat sitemap (daftar isi) pada blog berdasarkan label, Cukup sekian terimakasih.

Cara Jitu Dan Ampuh Mencegah Terjadinya Copas Pada Artikel Blog

Mencegah terjadinya copas pada artikel blog kita - Nah buat kalian para blogger, bagaimana perasaan anda jika artikel yang anda buat susah payah di duplikat sama persis dengan artikel orang lain. Marah, sakit hati, kesal ? atau sebaliknya bangga karna artikel kita berarti berguna bagi orang lain sehingga mereka menggunakan artikel di blog mereka.


Cara Jitu Dan Ampuh Mencegah Terjadinya Copas Pada Artikel Blog

Jika jawaban anda seperti itu, anda salah besar. Kenapa begitu ? karna dapat berdampak buruk bagi kelanjutan situs blog anda. Nah dari semua tadi anda sebagai pemilik blog harus atau konten seharusnya meningkatkan keamanan dalam blog anda.

Baca Juga : Membuat syntax Highlighter Pada Blog Menggunakan CSS

Bagi sebagian orang mungkin tidak terima, karna artikel yang dia buat susah dan pastinya capek. Sehingga mereka kedapatan melihat artikel orang lain yang sama persis tanpa merubah sejengkal kata pun. Apa tindakan anda ? Gak ada hal lain selain melapor kepada pihak google dan berharap para plagiat dapat imbas nya yaitu mendapatkan pinalti terhadap blog mereka. Semua itu sudah pasti dilakukan buat yang tidak terima artikel mereka di copas tanpa izin dan meletakkan sumber aslinya.

Tepat sekali, karena kali ini penulis akan membagikan tutorial memasang script anti copas atau seleksi sembarangan pada blog kita. Setidaknya dapat memberikan keamanan pada blog anda, Khusunya menghindari copas dari para plagiat konten. Script ini sangat ringan karna hanya menggunakan kode CSS saja, dan script ini dapat di gunakan pada berbagai platfrorm, seperti wordpress, blogger, dan lain sebagainya.

Cara Memasangkan script anti copas pada artikel blog kita

1. Masuk ke blogger kalian dulu, menggunakan akun gmail kalian,

2. Selanjutnya masuk pada menu Tema ~ Edit HTML,

3. Tekan CTRL + F pada keyboard untuk mempermudah pencarian kode ]]></b:skin>, nah letakkan kode CSS  di bawah ini tepat di atas kode ]]></b:skin>.

  BODY {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}

4. Jika sudah silahkan kalian simpan tema, dan lihat hasilnya.

Penjelasan mengenai kode CSS di atas:

Karena kode di atas terletak dan di simpan di dalam body, maka setiap tulisan yang terdapat dalam blog atau artikel anda sepenuhnya tidak dapat di seleksi atau copas. Nah banyak yang tanya begini, kalau yang menggunkan Syntax Highlighter gimana mas, apa juga tidak dapat di copas pada secript yang tersedia ? Tentunya tidak bisa, karna script ini menyangkut semua kata yang terdapat dalam blog kita seperti syntax highlighter juga tidak dapat di copas. Yah percuma dong mas kalau gitu, saya bikin artikel nya tentang tutorial blogging kalau kode syntax nya tidak bisa di copas? Tenang masih ada cara lain agar artikel dalam blog kita hanya dapat di seleksi di berbagai tempat saja.

Nah untuk cara pemasangan kode nya, ada syarat nya yaitu anda hanya butuh sedikit saja paham mengerti tentang TAG HTML. Misalnya, hampir semua template blogspot yang ada, isi dari sebuah artikel disimpan melalui tag DIV yang memiliki element CLASS (.post – body). Jadi jika ingin membuat artikel yang tidak bisa di seleksi, hanya di area tersebut, dapat menggunakan kode CSS di bawah ini.

  .post-body {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}
Keterangan
Jika dalam CSS, id diwakili dengan tanda # (pagar), dan class di wakili dengan . (titik).

Jika tag HTML dengan id <div id=”post – body”> maka kode CSSnya= #post – body

Jika tag HTML dengan class <div class=”post – body”> maka kode CSSnya= .post – body

Paham dengan caranya atau masih bingung cara pemasangannya ? maka dari itu saya sarankan harus sedikit mengerti tentang HTML sedikit saja, seperti yang saya sebutkan pada penjelasan di atas.
Dan untuk kode di bawah ini sebaliknya, yaitu mengaktifkan seleksi tulisan. Simpan saja di manapun anda mau, tergantung dari tag id dan class yang digunakan. Saya contohkan agar fitur seleksi aktif pada bagian Syntax Highlighter blog yang biasa menggunakan kode pemanggil syntax <pre> dan kode </pre>.

Berikut kode CSS nya:


  .post-body pre code {
 user-select:text;
 -moz-user-select:text;
 -ms-user-select:text;
 -khtml-user-select:text;
 -webkit-user-select:text
}

Baca Juga : Script Jitu Menghapus Link Aktif Otomatis Pada Komentar Blog

Bagaiman paham cara pemasangan nya? Hehehe mudah kan Cara Jitu Dan Ampuh Mencegah terjadinya copas pada artikel blog kita, silahkan di praktekkan dan pasang kode nya di dalam template anda, semoga trik ini dapat menghindari dari para plagiat konten artikel orang lain, Silahkan di praktekkan.