MayCyber-Download

Cara Hosting Java Script, JQuery dan CSS di GitHub Terbaru 2019

2019-09-02T20:55:00.000+07:00

GitHub adalah platform jaringan sosial yang dirancang khusus bagi para developer. GitHub juga menyediakan Repositori atau repo untuk direktori penyimpanan file proyek Anda. Di sini, Anda bisa menyimpan apa pun yang berkaitan dengan proyek yang sedang dibuat, misalnya menyimpan file kode baik berupa kode Java Script, CSS, Jquery, dan juga gambar, atau audio. Repo sendiri bertempat di penyimpanan atau storage GitHub atau repositori lokal di komputer Anda.

Lalu, apa saja fungsi GitHub? Dengan platform ini, Anda bisa bekerja bersama-sama dengan rekan dari berbagai berlahan dunia, merencanakan proyek, dan bahkan tracking (melacak) pekerjaan Anda atau hanya sekedar menyimpan kode proyek Anda.

Untuk itu disini saya akan membagikan bagaimana cara meng-hosting kode di GitHub. Perlu diketahui semenjak di tutupnya layanan https://cdn.rawgit.com saya jarang sekali membuat artikel dikarenakan di tutup maka dari itu saya mencari alternatif CDN selain Rawgit untuk membagikan kode Tutorial yang saya sediakan di sini. Tapi tidak perlu khawatir kini sudah ada alternatif CDN selain Rawgit.com sebagai berikut.

Cara Hosting Java Script, JQuery dan CSS di GitHub Terbaru 2019

1. Buka GitHub
2. Silakan Anda login dengan akun Anda, apabila belum punya silakan Anda mendaftar terlebih dahulu.

3. Jika sudah login, klik "Start Project".

4. Maka Anda di wajibkan mengisi nama untuk repositori Anda.

5. Setelah membuat repositori sekarang Anda upload file, baik berupa kode Java Script, CSS, atau JQuery untuk di hostingkan ke GitHub.

6. Selajutnya Anda diharuskan memilih file untuk di upload/hosting.

7. Bila file sudah siap untuk di upload, selanjutkan klik "Commit Changes".

8. Tunggu proses upload sedang berlangsung.

9. Maka Anda akan di alihkan ke local repositori Anda, dan disitu terdapat file yang barusan Anda upload.

Sampai sini sudah selesai cara mengupload/hosting kode di GitHub, selanjutnya kode yang barusan kita upload itu akan di hostingkan dengan niatan untuk membagikan kode itu kepada orang, atau bisa Anda gunakan sendiri, berikut ini caranya.

10. Klik kanan pada file yang barusan Anda upload, lalu "Copy link address".

11. Buka GitHack : https://raw.githack.com / GitHack - Lalu tempel/pastekan link yang barusan Anda Copy ke kolom yang ada di GitHack.

Sehingga,

12. Sehingga ini adalah hasil kode yang berhasil di hosting. Anda bisa mem-pastekan link dibawah ini ke Browser Anda untuk melihat kode yang sudah di hosting :
https://rawcdn.githack.com/mayhilmay619/maycyber-download/9a8d225c077f4dbbde0cc138a324d1dcd2a8b188/sweetalert.min.js
https://raw.githack.com/mayhilmay619/maycyber-download/master/sweetalert.min.js

Demikian Aritkel ini, bila ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Hosting Java Script, JQuery dan CSS di GitHub Terbaru 2019

Cara Membuat Related Post Grid Responsive di Blogger

2019-01-18T22:03:00.002+07:00

Related Post biasa disebut juga Artikel Terkait berfungsi menampilkan artikel yang terkait dengan yang kita baca. Related Post ini bisa dibilang User Freandly karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama. Related post juga menuntun pengunjung blog kita menuju postingan atau artikel yang lain dan yang berkaitan dengan postingan yang mereka lihat. Jadi pengunjung dapat membaca artikel selanjutnya dengan topik yang sama karena diakhir postingan related post ini muncul. Dengan memasang related post kemungkinan dapat meningkatkan pageview blog anda meningkat.

Screenshoot 1 :

Screenshoot 2 :

Cara Membuat Related Post Grid Responsive di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini dan letakkan kode ini diatas kode ]]></b:skin> atau </style>

/* CSS Related Posts Start */
#mdRelated {
    display: block;
    margin: 20px 0px;
    line-height: 1.5em;
}

#mdRelated h3.title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    line-height: initial;
}

#mdRelated h3.title span {
    background-color: #fff;
    padding: 0px 15px;
    position: relative;
    z-index: 1;
}

#mdRelated h3.title:before {
    content: '';
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    border-top: 2px solid #cccccc;
}

#mdRelated ul {
    margin: 20px 0px 0px;
    padding: 0px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#mdRelated 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;
}

#mdRelated ul li .thumb {
    overflow: hidden;
    line-height: 0px;
    border-radius: 7px;
}

#mdRelated ul li:nth-of-type(3n) {
    margin-right: 0px;
}

#mdRelated ul li a {
    display: block;
}

#mdRelated ul li a.judul {
    color: #000;
    font-weight: 600;
    margin-top: 7px;
}

#mdRelated ul li a.judul:hover,#mdRelated ul li:hover a.judul {
    color: #3498db;
}

#mdRelated ul li a img {
    width: 100%;
    max-height: 143px;
    transition: all .3s ease;
    border: 0px;
    margin: 0px;
}

#mdRelated .norelated {
    text-align: center;
    font-weight: 600;
}

@media screen and (max-width:480px) {
    #mdRelated ul li {
        width: calc((100% / 2) - 7.5px);
        margin-right: 15px;
        margin-bottom: 15px;
    }

    #mdRelated ul li:nth-of-type(3n) {
        margin-right: 15px;
    }

    #mdRelated ul li:nth-of-type(2n) {
        margin-right: 0px;
    }
}
/* CSS Related Posts End*/

3. Temukan lagi kode <data:post.body/>

Biasanya kode ini lebih dari satu, silakan Anda pilih yang kedua atau ketiga. Atau Anda bisa meletakan kode berikut ini dibawah tombol share yang sudah ada di template Anda.

4. Copy & Paste kode berikut ini dan letakkan kode ini bawah kode <data:post.body/>

<b:if cond='data:view.isPost'>
  <div id='mdRelated'>
    <h3 class='title'><span>ARTIKEL TERBARU</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|mdRelatedGrid|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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>
      </b:loop>
      <ul>
        <script>mdRelatedGrid();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
<div class='clear'/>
</b:if>

4. Simpan Template.

Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Related Post Grid Responsive di Blogger

Cara Membuat Form Ads Converter di Blogger

2018-12-12T13:26:00.002+07:00

Ads Converter hampir sama dengan Parse HTML. Ads Converter ini bisa dibilang mirip dengan Parse HTML karena mengubah sebuah kode menjadi kode latin/istilah, contoh: </ atau ".

Pernahkah Anda memasang kode iklan Google AdSense mengalami error? Jika Iya, maka memasang kode iklan AdSense tidak bisa menaruh nya begitu saja. Ternyata ada beberapa kode yang tidak support untuk dipasangkan di template blogger. Solusi untuk mengatasi error itu adalah dengan cara di Parse HTML dengan menggunakan Form Ads Converter ini, yaitu dalam artian kita mengubah beberapa kode itu menjadi kode latin seperti contoh diatas.

Antara kode latin yang sudah di Parse dengan kode aslinya sama saja, hanya komputer yang bisa membacanya. Untuk Anda yang ingin memasang kode iklan Adsense di template, Anda bisa menggunakan cara ini, atau menggunakan Tools ini. Anda tidak perlu khawatir terkena banned/suspend karena telah mengubah kode iklan Adsense, karena cara ini memang diperbolehkan dan sayapun memasang kode iklan Adsense saya dengan cara di Parse HTML.

Screenshoot :

Cara Membuat Form Ads Converter di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, letakkan pada bagian HTML bukan pada bagian COMPOSE.

<html>

<head>
    
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/f430da03/sweetalert.min.js"></script>    
    
    </head>

    
    <body>
    
    <div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
    
    
code {
    font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
    color: #2a5ead;
    font-size: 13px;
    padding: 2px 4px;
    color: #d14;
}

#codes {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}

.button-group {
    margin: 0 auto 0;
    text-align: center;
}

button,button[disabled]:active {
    border: none;
    padding: 5px 35px;
    text-align: center;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    background-color: #0ea6d8;
    cursor: pointer;
    font-family: 'Open Sans',Arial,Sans-Serif;
    font-size: 13px;
    position: relative;
    top: -1px;
    margin: 0 10px;
    line-height: 23px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: #034c64;
}

button[disabled],button[disabled]:active {
    background: #0095c6;
}

#opt1,#opt2,#opt3,#opt4,#opt5 {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
    border: none;
    outline: none;
}

#outer-wrapper {
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

.post-body,.post {
    background-position: center!important;
}

h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
    display: none;
    margin-top: 0;
    margin: 0;
}

#blog1,#artikel,.blog-posts {
    background-position: center!important;
}

.breadcrumbs {
    display: none;
    margin-top: 0;
    margin: 0;
}

#comments,#breadcrumb, #sidebar-wrapper,#menu-wrap {
    display: none;
    margin-top: 0;
    margin: 0;
}

.post-inner {
    padding: 0 0 0 0;
    margin: 20px auto;
}

.post-body ul#wrapin {
    display: block;
    position: relative;
    margin: 30px auto 0 auto;
}

.post-body ul#wrapin li {
    display: block;
    margin: 0 auto;
    text-align: left;
}

.post-body ul#wrapin br {
    display: none;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120%!important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
    
textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}
    
#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.05);
}
button {
    color: #fff !important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}
    
form {
    padding: none;
}

form label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    bottom: 10px;
    right: 5px;
    line-height: 47px;
    vertical-align: top;
    font-weight: bold;
}

form .form-check {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
}

form .form-check::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 60px;
    -moz-border-radius: 30px;
}

form .form-radio {
    display: none;
}

form .form-radio + label {
    padding-left: 35px;
}

form .form-radio + label::before {
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 2px 2px 2px #bbb;
    -moz-box-shadow: 2px 2px 2px #bbb;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-radio:checked + label::before {
    background: #34A8BF;
    border: 5px solid #fff;
    width: 17px;
    height: 17px;
}

form .form-check::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    background: #b6b6b6;
    left: 3px;
    top: 3px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-check:checked::after {
    left: 27px;
    background: #1bc94d;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border: 2px solid aliceblue;
    border-radius: 4px;
}

legend {
    text-align: center;
    display: block;
    margin: 5px;
    font-weight: bold;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}    
.opt1,.opt2,.opt3,.opt4,.opt5 {
    color: #fff!important;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px 5px 15px;
}

.belakang-memilih {
    padding: 15px;
    margin: 20px auto;
    font-size: 15.5px;
    color: #fff;
    font-weight: bold;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.05);
}
.belakang-memilih-2 {
    margin: 15px;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}
 .swal-icon--error__x-mark {
    position: relative;
    display: block;
    -webkit-animation: animateXMark .5s;
    animation: animateXMark .5s;
}

.swal-icon--error__line {
    position: absolute;
    height: 5px;
    width: 47px;
    background-color: #f27474;
    display: block;
    top: 37px;
    border-radius: 2px;
}

.swal-icon--error__line--left {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 17px;
}

.swal-icon--error__line--right {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 16px;
}

@-webkit-keyframes animateErrorIcon {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
;
}

@keyframes animateErrorIcon {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
;
}

@-webkit-keyframes animateXMark {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
;
}

@keyframes animateXMark {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
;
}

.swal-icon--warning {
    border-color: #f00;
    -webkit-animation: pulseWarning .75s infinite alternate;
    animation: pulseWarning .75s infinite alternate;
}

.swal-icon--warning__body {
    width: 5px;
    height: 47px;
    top: 10px;
    border-radius: 2px;
    margin-left: -2px;
}

.swal-icon--warning__body,.swal-icon--warning__dot {
    position: absolute;
    left: 50%;
    background-color: #f00;
}

.swal-icon--warning__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3.5px;
    bottom: -11px;
}

@-webkit-keyframes pulseWarning {
    0% {
        border-color: #f00;
    }

    to {
        border-color: #f00;
    }
;
}

@keyframes pulseWarning {
    0% {
        border-color: #f00;
    }

    to {
        border-color: #f00;
    }
;
}

.swal-icon--success {
    border-color: #0da706;
}

.swal-icon--success:after,.swal-icon--success:before {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 60px;
    height: 120px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swal-icon--success:before {
    border-radius: 120px 0 0 120px;
    top: -7px;
    left: -33px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
}

.swal-icon--success:after {
    border-radius: 0 120px 120px 0;
    top: -11px;
    left: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 60px;
    transform-origin: 0 60px;
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

.swal-icon--success__ring {
    width: 80px;
    height: 80px;
    border: 4px solid #0da706;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2;
}

.swal-icon--success__hide-corners {
    width: 5px;
    height: 90px;
    background-color: #fff;
    padding: 1px;
    position: absolute;
    left: 28px;
    top: 8px;
    z-index: 1;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.swal-icon--success__line {
    height: 5px;
    background-color: #0da706;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
}

.swal-icon--success__line--tip {
    width: 25px;
    left: 14px;
    top: 46px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: animateSuccessTip .75s;
    animation: animateSuccessTip .75s;
}

.swal-icon--success__line--long {
    width: 47px;
    right: 8px;
    top: 38px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: animateSuccessLong .75s;
    animation: animateSuccessLong .75s;
}

@-webkit-keyframes rotatePlaceholder {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }
;
}

@keyframes rotatePlaceholder {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }

    to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }
;
}

@-webkit-keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    to {
        width: 25px;
        left: 14px;
        top: 45px;
    }
;
}

@keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    to {
        width: 25px;
        left: 14px;
        top: 45px;
    }
;
}

@-webkit-keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    to {
        width: 47px;
        right: 8px;
        top: 38px;
    }
;
}

@keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    to {
        width: 47px;
        right: 8px;
        top: 38px;
    }
;
}

.swal-icon--info {
    border-color: #c9dae1;
}

.swal-icon--info:before {
    width: 5px;
    height: 29px;
    bottom: 17px;
    border-radius: 2px;
    margin-left: -2px;
}

.swal-icon--info:after,.swal-icon--info:before {
    content: "";
    position: absolute;
    left: 50%;
    background-color: #c9dae1;
}

.swal-icon--info:after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3px;
    top: 19px;
}

.swal-icon {
    width: 80px;
    height: 80px;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    padding: 0;
    position: relative;
    box-sizing: content-box;
    margin: 20px auto;
}

.swal-icon:first-child {
    margin-top: 32px;
}

.swal-icon--custom {
    width: auto;
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
}

.swal-icon img {
    max-width: 100%;
    max-height: 100%;
}

.swal-title {
    color: rgba(0,0,0,.65);
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: block;
    padding: 13px 16px;
    font-size: 27px;
    line-height: normal;
    text-align: center;
    margin-bottom: 0;
}

.swal-title:first-child {
    margin-top: 26px;
}

.swal-title:not(:first-child) {
    padding-bottom: 0;
}

.swal-title:not(:last-child) {
    margin-bottom: 13px;
}

.swal-text {
    font-size: 18px;
    position: relative;
    float: none;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    font-weight: 400;
    color: #dfdfd;
    font-weight: bold;
    max-width: calc(100% - 20px);
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.swal-text:first-child {
    margin-top: 45px;
}

.swal-text:last-child {
    margin-bottom: 45px;
}

.swal-footer {
    text-align: right;
    padding-top: 13px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.swal-button-container {
    margin: 5px;
    display: inline-block;
    position: relative;
}

.swal-button {
    background-color: #2980b9;
    color: #fff;
    border: none;
    width: 80px;
    box-shadow: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    padding: 15px 25px;
    margin: 0;
    cursor: pointer;
}

.swal-button[not:disabled]:hover {
    background-color: #78cbf2;
}

.swal-button:active {
    background-color: #70bce0;
}

.swal-button:focus {
    outline: none;
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(43,114,165,.29);
}

.swal-button[disabled] {
    opacity: .5;
    cursor: default;
}

.swal-button::-moz-focus-inner {
    border: 0;
}

.swal-button--cancel {
    color: #555;
    background-color: #efefef;
}

.swal-button--cancel[not:disabled]:hover {
    background-color: #e8e8e8;
}

.swal-button--cancel:active {
    background-color: #d7d7d7;
}

.swal-button--cancel:focus {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(116,136,150,.29);
}

.swal-button--danger {
    background-color: #e64942;
}

.swal-button--danger[not:disabled]:hover {
    background-color: #df4740;
}

.swal-button--danger:active {
    background-color: #cf423b;
}

.swal-button--danger:focus {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px rgba(165,43,43,.29);
}

.swal-content {
    padding: 0 20px;
    margin-top: 20px;
    font-size: medium;
}

.swal-content:last-child {
    margin-bottom: 20px;
}

.swal-content__input,.swal-content__textarea {
    -webkit-appearance: none;
    background-color: #fff;
    border: none;
    font-size: 14px;
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(0,0,0,.14);
    padding: 10px 13px;
    border-radius: 2px;
    transition: border-color .2s;
}

.swal-content__input:focus,.swal-content__textarea:focus {
    outline: none;
    border-color: #6db8ff;
}

.swal-content__textarea {
    resize: vertical;
}

.swal-button--loading {
    color: transparent;
}

.swal-button--loading~.swal-button__loader {
    opacity: 1;
}

.swal-button__loader {
    position: absolute;
    height: auto;
    width: 43px;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
}

.swal-button__loader div {
    display: inline-block;
    float: none;
    vertical-align: baseline;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    margin: 2px;
    opacity: .4;
    border-radius: 7px;
    background-color: hsla(0,0%,100%,.9);
    transition: background .2s;
    -webkit-animation: swal-loading-anim 1s infinite;
    animation: swal-loading-anim 1s infinite;
}

.swal-button__loader div:nth-child(3n+2) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.swal-button__loader div:nth-child(3n+3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

@-webkit-keyframes swal-loading-anim {
    0% {
        opacity: .4;
    }

    20% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: .4;
    }
;
}

@keyframes swal-loading-anim {
    0% {
        opacity: .4;
    }

    20% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: .4;
    }
;
}

.swal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0;
    overflow-y: auto;
    background-color: rgba(0,0,0,.4);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}

.swal-overlay:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.swal-overlay--show-modal {
    opacity: 1;
    pointer-events: auto;
}

.swal-overlay--show-modal .swal-modal {
    border-radius: 8px;
    opacity: 1;
    pointer-events: auto;
    box-sizing: border-box;
    -webkit-animation: showSweetAlert .3s;
    animation: showSweetAlert .3s;
    will-change: transform;
}

.swal-modal {
    width: 478px;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
    position: static;
    margin: 20px auto;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 10001;
    transition: opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s,-webkit-transform .3s;
}

@media (max-width:500px) {
    .swal-modal {
        width: calc(100% - 20px);
    }
;
}

@-webkit-keyframes showSweetAlert {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    1% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
;
}

@keyframes showSweetAlert {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    1% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }    
</style>

<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Ads Converter</strong>
</h1>
</div>
        
<div id="belakang">        
        <form name="adsconverter">
<textarea id="codes" placeholder="Paste your code HTML, JS here..." spellcheck="false"></textarea>
<div class="belakang-memilih">           
<form action="">
<fieldset>
<legend>SELECTED</legend>
<ul id="wrapin">
<li>
<input checked="checked" type="checkbox" id="opt1" class="opt1 form-check">
<label for="opt1">MENGUBAH KODE ( &amp; )</label>
 </li>
    <li>
<input type="checkbox" checked="checked" id="opt2" class="opt2 form-check">
<label for="opt2">MENGUBAH KODE ( ' )</label>
 </li>
    <li>
<input type="checkbox" id="opt3" class="opt3 form-check">
<label for="opt3">MENGUBAH KODE ( " )</label>
  </li> 
    <li>
<input checked="checked" type="checkbox" id="opt4" class="opt4 form-check">
 <label for="opt4">MENGUBAH KODE ( &lt; )</label>
     </li>
    <li>
<input checked="checked" type="checkbox" id="opt5" class="opt5 form-check">
 <label for="opt5">MENGUBAH KODE ( &gt; )</label>
        </li>
</ul>
    </fieldset>
    </form>        
 </div>              
            
<div class="belakang-memilih-2">
<div class="button-group">
<button id="cvrt" onclick="cdConvert();">CONVERTER</button>
<button onclick="cdClear();">RESET</button>
<button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
</div>
</div>

            </form>
</div>
</div>
    
    
 <script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
    if(adsconverter.codes.value == ""){
        swal({
  text: "NO CODE IN TEXT AREA",
  icon: "warning",
});  
        return false;
    }else{
        return ctarea;

    }
};
</script>
<script type="text/javascript">
function copyToClipboard() {
  $("#codes").select();
  document.execCommand("copy");
    
if(adsconverter.codes.value == ""){
           swal({
  text: "NO CODE IN TEXT AREA",
  icon: "warning",
});  
}else{
       swal({
  text: "YOUR CODE HAS BEEN SUCCESSFULLY COPIED!",
  icon: "success",
});  
}

}
</script>
    </body>
    
    
</html>

3. Simpan dan Publikasikan!

Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form Ads Converter di Blogger

Cara Membuat Form Base64 Encoder di Blogger

2018-12-12T12:43:00.001+07:00

Base64 Encoder adalah skema pengkodean biner ke teks serupa yang mewakili data biner dalam format string ASCII dengan menerjemahkannya ke representasi radix-64. Istilah Base64 berasal dari penyandian transfer konten MIME spesifik. Setiap digit Base64 mewakili tepat 6 bit data. Tiga 8-bit byte (yaitu, total 24 bit) karena itu dapat diwakili oleh empat digit 6-bit Base64. Base64 biasa digunakan oleh para web design untuk men-enkripsi kode menjadi sebuah kode acak atau biner berupa teks. Lalu, para web design yang membuat sebuah template biasanya melindungi copyright (pembuat template) dengan men-enkripsi sebuah kode "Mengalihkan/Redirect" jika sewaktu-waktu copyright atau credit suatu template itu dihapus maka akan di alihkan kesitus pembuat template tersebut. Anda bisa menggunakan Base64 untuk melindungi kode Anda.

Screenshoot :

Cara Membuat Form Base64 Encoder di Blogger

<html>
<head>
    
  <title>Base64 Encoder</title>  

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>    
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/f430da03/alertify.min.js"></script>    
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/54b713e9/codecs.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

    </head>

<style type="text/css">

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120% !important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
    
 textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}

#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.hasil {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 20px;
    border-radius: 4px;
}

input[type="file" i] {
    width: 50%;
    color: #fff!important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    background: #015c98;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}

.minify {
    width: 15%;
    margin: 2%;
}

.beautify {
    width: 15%;
}

button {
    color: #fff !important;
    height: 50px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    text-transform: uppercase;
}
    
.button-group {
    margin: 0 auto 0;
    text-align: center;
}

button,button[disabled]:active {
    border: none;
    padding: 5px 35px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    background-color: #0ea6d8;
    cursor: pointer;
    font-family: 'Open Sans',Arial,Sans-Serif;
    font-size: 14px;
    position: relative;
    top: -1px;
    margin: 10px;
    line-height: 23px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: #034c64;
}

button[disabled],button[disabled]:active {
    background: #0095c6;
}

.belakang-upload {
    background: #2980b9;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

form {
    padding: 20px;
}

form label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    line-height: 47px;
    vertical-align: top;
    font-weight: bold;
}

form .form-check {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
}

form .form-check::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    -moz-border-radius: 30px;
}

form .form-radio {
    display: none;
}

form .form-radio + label {
    padding-left: 35px;
}

form .form-radio + label::before {
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 2px 2px 2px #bbb;
    -moz-box-shadow: 2px 2px 2px #bbb;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-radio:checked + label::before {
    background: #34A8BF;
    border: 5px solid #fff;
    width: 17px;
    height: 17px;
}

form .form-check::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    background: #b6b6b6;
    left: 3px;
    top: 3px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-check:checked::after {
    left: 27px;
    background: #1bc94d;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border: 2px solid aliceblue;
    border-radius: 4px;
}

legend {
    text-align: center;
    display: block;
    margin: 5px;
    font-weight: bold;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}

.opt1,.opt2,.opt3,.opt4,.opt5 {
    color: #fff!important;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px 5px 15px;
}

.belakang-memilih {
    margin: 10px auto;
    font-size: 15.5px;
    color: #fff;
    font-weight: bold;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.05);
}

.belakang-memilih-2 {
    margin: 15px;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.belakang-tombol {
    background: #015c98;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}
    
/* CSS Demo Download Buttons */
.de-down {
    font-weight: bold;
    border-radius: 8px;
    background: #2980b9;
    list-style: none;
    text-align: center;
    margin: 10px!important;
    padding: 20px!important;
    font-size: 14px;
    clear: both;
    display: inline-block;
    text-decoration: none!important;
    color: #FFF!important;
}

.de-down ul {
    margin: 0;
    padding: 0;
}

.de-down li {
    display: inline;
    margin: 5px;
    padding: 0;
    list-style: none;
}

.demo {
    text-decoration: none;
    padding: 12px 15px!important;
    color: #fff!important;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans,sans-serif;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    opacity: .95;
    border: 0;
    letter-spacing: 2px;
    transition: all .2s ease-out;
}

.demo {
    background-color: #3498DB;
}

.download {
    background-color: #fff;
    padding: 12px 15px!important;
    color: #000!important;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans,sans-serif;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    opacity: .95;
    border: 0;
    letter-spacing: 2px;
    transition: all .2s ease-out;
}

.demo:hover {
    background-color: #015c98;
    color: #fff;
    border-bottom: 2px solid #fff;
    opacity: 1;
}


.demo:before {
    display: inline-block;
    font-weight: normal;
    vertical-align: top;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    line-height: 24px;
    font-family: fontawesome;
    transition: all 0.5s ease-out;
}

.download:before {
    content: '\f019';
    display: inline-block;
    font-weight: normal;
    vertical-align: top;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    line-height: 24px;
    font-family: fontawesome;
    transition: all 0.5s ease-out;
}
    
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
    
.alertify,.alertify-show,.alertify-log {
    -webkit-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -moz-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -ms-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -o-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    ;
}

.alertify-hide {
    -webkit-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -moz-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -ms-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -o-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    ;
}

.alertify-log-hide {
    -webkit-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -moz-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -ms-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -o-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    ;
}

.alertify-cover {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    filter: alpha(opacity=0);
    opacity: 0;
}

.alertify-cover-hidden {
    display: none;
}

.alertify {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 50%;
    width: 550px;
    margin-left: -275px;
    opacity: 1;
}

.alertify-hidden {
    -webkit-transform: translate(0,-150px);
    -moz-transform: translate(0,-150px);
    -ms-transform: translate(0,-150px);
    -o-transform: translate(0,-150px);
    transform: translate(0,-150px);
    opacity: 0;
    display: none;
}

:root *>.alertify-hidden {
    display: block;
    visibility: hidden;
}

.alertify-logs {
    position: fixed;
    z-index: 5000;
    bottom: 10px;
    right: 10px;
    width: 300px;
}

.alertify-logs-hidden {
    display: none;
}

.alertify-log {
    display: block;
    margin-top: 10px;
    position: relative;
    right: -300px;
    opacity: 0;
}

.alertify-log-show {
    right: 0;
    opacity: 1;
}

.alertify-log-hide {
    -webkit-transform: translate(300px,0);
    -moz-transform: translate(300px,0);
    -ms-transform: translate(300px,0);
    -o-transform: translate(300px,0);
    transform: translate(300px,0);
    opacity: 0;
}

.alertify-dialog {
    padding: 25px;
}

.alertify-resetFocus {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.alertify-inner {
    text-align: center;
}

.alertify-text {
    margin-bottom: 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
}

.alertify-buttons {
}

.alertify-button,.alertify-button:hover,.alertify-button:active,.alertify-button:visited {
    background: none;
    text-decoration: none;
    border: none;
    line-height: 1.5;
    font-size: 100%;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

@media only screen and (max-width:680px) {
    .alertify,.alertify-logs {
        width: 90%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .alertify {
        left: 5%;
        margin: 0;
    }
}

.alertify,.alertify-log {
    font-family: sans-serif;
}

.alertify {
    background: #FFF;
    border: 10px solid #333;
    border: 10px solid rgba(0,0,0,.7);
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0,0,0,.3);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.alertify-text {
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 4px;
}

.alertify-button {
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
}

.alertify-button:hover,.alertify-button:focus {
    outline: none;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.alertify-button:focus {
    box-shadow: 0 0 15px #2B72D5;
}

.alertify-button:active {
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
}

.alertify-button-cancel,.alertify-button-cancel:hover,.alertify-button-cancel:focus {
    background-color: #FE1A00;
    border: 1px solid #D83526;
}

.alertify-button-ok,.alertify-button-ok:hover,.alertify-button-ok:focus {
    background-color: #5CB811;
    border: 1px solid #3B7808;
}

.alertify-log {
    background: #1F1F1F;
    background: rgba(0,0,0,.9);
    padding: 15px;
    border-radius: 4px;
    color: #FFF;
    text-shadow: -1px -1px 0 rgba(0,0,0,.5);
}

.alertify-log-error {
    background: #FE1A00;
    background: rgba(254,26,0,.9);
}

.alertify-log-success {
    font-weight: bold;
    width: 400px;
    padding: 15px;
    right: 120px;
    background: #5CB811;
    background: rgba(92,184,17,.9);
} 
    
    </style>
    
    
<body>
    
<article>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">BASE64 ENCODER</strong>
</h1>
</div>    
<div id="belakang">
            <div class="belakang-upload">
            BROWSE :
            <input type="file" id="fileToEncode" name="fileToEncode" onchange='$("#uploadFileInfo").html($(this).val().replace(/^.*\\/, ""))' />
        </div>
            
  <div class="hasil">
<span style="font-size: large;"><b> INPUT :</b></span>
        </div>
    <textarea placeholder="Paste your code here..." id="toEncode"  class="codec-input"></textarea>
    
<br />
    
    <div id="textOutputPanel">
  <div class="hasil">
<span style="font-size: large;"><b> RESULT :</b></span>
        </div>
    <textarea readonly id="htmlOutput" class="codec-output"></textarea>
    </div>
<div class="belakang-memilih"> 
<form action="">
<fieldset>
<legend>SELECTED</legend>
<input checked="checked" type="checkbox" id="generateTextRendition" class="opt1 form-check">
<label for="generateDownloadLink">AUTO GENERATE TEXT RENDITION</label>
    
<input type="checkbox" id="generateDownloadLink" class="opt2 form-check">
<label for="generateDownloadLink">AUTO GENERATE DOWNLOAD LINK</label>
    
<input type="checkbox" id="makeUrlSafe" checked="checked" class="opt3 form-check">
<label for="makeUrlSafe">USE URL-SAFE BASE64</label>
    
<input checked="checked" type="checkbox" id="useSimplifiedEncoding" class="opt4 form-check">
 <label for="useSimplifiedEncoding">USE SIMPLIFIED ENCODER</label>
    </fieldset>
    </form>    
 </div> 
 
<div style="display: none" id="fileOutputContainer">   
<div style="text-align: center;">
<ul class="de-down">
<li><a class="demo" href="#" id="fileOutputLink">DOWNLOAD</a></li>
    FILE NAME :
        <input class="download" type="text" id="filenameField" value="BASE64.txt" />
</ul>
</div>
    </div>
    
    
    
    <center>
    <div class="belakang-memilih-2">
       <div class="belakang-tombol">
<div class="button-group">
    <button onclick="return encode()">ENCODE</button>
    <button onclick="window.location.reload()">RELOAD</button>
    <button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
           </div> 
        </div>
        </div>
</center>
</div>
    
    </article> 
    
    
 <script type="text/javascript">
    function fetchEncoder() {
        let encoder;
        if ($('#useSimplifiedEncoding').is(':checked')) {
            encoder = new SimplifiedBase64Encoder();
        } else {
            encoder = new FullBase64Encoder();
        }

        if ($('#makeUrlSafe').is(':checked')) {
            encoder = new MakeUrlSafeTransformer(encoder);
        }

        return encoder;
    }

    function fetchOutput() {
        let fileOutput;
        if ($('#generateDownloadLink').is(':checked')) {
            fileOutput = new FileOutput('#fileOutputContainer', '#filenameField', '#fileOutputLink');
        } else {
            fileOutput = new InactiveFileOutput('#fileOutputContainer', '#filenameField', '#fileOutputLink');
        }

        let htmlOutput;
        if ($('#generateTextRendition').is(':checked')) {
            htmlOutput = new HtmlOutput('#htmlOutput', '#htmlOutput');
        } else {
            htmlOutput = new InactiveHtmlOutput('#htmlOutput', '#htmlOutput');
        }

        const container = new ContainerVisibilityOutput('#textOutputPanel')
        const output = new CompoundOutput(container, htmlOutput, fileOutput);

        return output;
    }

    function encode() {
        const fileInputElement = $('#fileToEncode').get(0);
        const fileInput = new BinaryFileInput(fileInputElement)
        const htmlInput = new HtmlInput('#toEncode');
        const input = new OneOrOtherInput(fileInput, htmlInput, function() { return fileInputElement.files.length == 1})

        const encoder = fetchEncoder();

        const output = fetchOutput();

        const action = new Action(input, encoder, output);
        action.act();
    }
     function copyToClipboard() {
  $("#htmlOutput").select();
  document.execCommand("copy");
alertify.success("YOUR CODE HAS BEEN SUCCESSFULLY COPIED");
}
</script>   
    
    
    </body>    
    
</html>

3. Publikasikan.

Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form Base64 Encoder di Blogger

Cara Membuat Form Auto Counter Word di Blogger

2018-10-16T09:15:00.001+07:00

Auto Counter Word adalah sebuah kalkulator penghitung jumlah kata. Jika Anda seorang penulis artikel, Anda sebaiknya menghitung kata pada artikel yang Anda buat sendiri. Minimal jumlah kata pada artikel yang bagus itu adalah 100 kata, semakin melebihi 100+ kata maka akan sangat bagus. Google sangat menyukai artikel yang mencapai 1.000 kata bahkan Google bisa saja meletakkan artikel Anda di urutan paling pertama di SERP (Search Engine Optimization). Lalu bagaimana cara mengetahui berapa kata pada sebuah artikel? Untuk menghitung kata pada sebuah artikel bukan menghitungnya secara manual ya, jika Anda pernah menghitung secara manual berarti Anda orang yang sangat teliti sekali ^.^. Menghitung kata pada sebuah artikel Anda bisa menggunakan sebuah aplikasi seperti Microsoft Word. Namun, Anda tidak perlu menggunakan aplikasi, Form Auto Counter Word ini bisa di andalkan. Fiturnya sama seperti Microsoft Word dimana anda sedang mengetik, dan dimana Microsoft Word juga menghitung berapa jumlah karakter kata dan juga berapa kata dalam 1 halaman.

Sebelumnya saya pernah membuat artikel seperti ini juga, silakan Anda baca artikel saya sebelumnya. Artikel sebelumnya tidak beda jauh dengan artikel saat ini. Namun ada sedikit berbeda, jika form sebelumnya menggunakan tombol untuk mengh, berbeda dengan kali ini ketika Anda sedang mengetik maka secara otomatis jumlah kata akan dihitung.

Baca Juga :

Cara Membuat Kalkulator Penghitung Jumlah Kata di Blogger

Screenshoot :

Perhitungan kata dan karakter dalam sebuah artikel sangatlah penting. Apalagi untuk para Blogger untuk memaksimalkan tulisannya. Dampak memaksimalkan perhitungan kata adalah mengacu pada SEO, kabarnya semakin banyak jumlah kata dan karakter dalam suatu artikel akan semakin SEO artikel tersebut.

Jika Anda ingin mengajukan permohonan Google AdSense Anda akan berkesempatan akan diterima jika memperhatikan perhitungan kata dalam artikel Anda. Menurut Master SEO, Artikel yang bagus itu minimal 400 kata atau lebih. Banyak kata pada artikel juga belum cukup, jika artikel kurang bagus dan rapih percuma saja, jadi memaksimalkan jumlah kata pada artikel itu penting ya. Ok, langsung saja ke proses pembuatan.

Cara Membuat Form Auto Counter Word di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Buat Judul "Auto Counter Word" (bebas).
3. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan pada bagian COMPOSE.

<html>



<head>
    
    
 <style type="text/css">
#outer-wrapper {
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

.post-body,.post {
    background-position: center!important;
}

h2.post-title a,h1.post-title a,h2.post-title,h1.post-title {
    display: none;
    margin-top: 0;
    margin: 0;
}

#blog1,#artikel,.blog-posts {
    background-position: center!important;
}

.breadcrumbs {
    display: none;
    margin-top: 0;
    margin: 0;
}

#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap {
    display: none;
    margin-top: 0;
    margin: 0;
}

.post-inner {
    padding: 0 0 0 0;
    margin: 20px auto;
}

.post-body ul#wrapin {
    display: block;
    position: relative;
    margin: 30px auto 0 auto;
}

.post-body ul#wrapin li {
    display: block;
    margin: 0 auto;
    text-align: left;
}

.post-body ul#wrapin br {
    display: none;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120%!important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 2px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius: 5px 5px 0 0;
    resize: none;
}

#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.daerah-tombol-2 {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 10px;
    border-radius: 4px;
    font-weight: bold;
}

#belakang-text {
    background: #0569ab;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 18px;
}

.hasil {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 20px;
    border-radius: 4px;
}

button {
    color: #fff!important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    background: #2980b9;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}

button:hover {
    background: #0569ab;
}
    
</style>    
    
    </head>

    
    
    <article>
    
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">AUTO COUNTER WORD</strong>
</h1>
</div>
<div id="wct_embed_counts">
<div id="belakang">
<textarea id="wct_embed_input_text"  cols="30" rows="20" placeholder="Type or copy and paste your word here..."></textarea>
    </div>
<div class="hasil">
<span style="font-size: large;"><b> RESULT :</b></span>
        </div>
<div class="daerah-tombol-2">
<div id="belakang-text">
<div id="wct_embed_result" style="margin: 5px; text-align: center;">
<script type="text/javascript">
//<![CDATA[
function wct_getWordStats(e){var t=[],n=e.trim();t.num_character=e.trim().length;var r=n.split(/\s+/).join("");t.num_character_wo_spaces=r.length,t.num_paragraph=0,n.length>0&&(t.num_paragraph=n.split(/\n+/).length);var a=n.replace(/(\w)[-_'](\w)/gi,"$10$2");a=a.replace(/(\d)[,.](\d)/gi,"$10$2"),t.num_sentence=0,a.length>0&&(t.num_sentence=a.replace(/"/gi,"").split(/[.?!:\n]+/).length);var _=a.split(/[\s\n]+/);if(t.num_word=0,a.length>0&&(t.num_word=_.length),t.avg_sentence_length=0!=t.num_sentence?Math.round(t.num_word/t.num_sentence*10)/10:0,0!=t.num_word){var c=r.length/t.num_word;t.avg_word_length=Math.round(10*c)/10}else t.avg_word_length=0;var d=[];t.num_unique_word=0,t.percentage_num_unique_word=0;for(var s=0;s<_.length;s++)d[_[s]]=1;var u=Object.keys(d).length;return t.num_unique_word=Object.keys(d).length,percentage_unique_words=Math.round(100*u/t.num_word),t.percentage_num_unique_word=percentage_unique_words,t}
function wct_display_counts(){var e=document.getElementById("wct_embed_input_text").value;wordStats=wct_getWordStats(e),document.getElementById("wct_embed_result").innerHTML="<b>"+wordStats.num_word+"<b> KATA </b><br/>"+wordStats.num_character+"<b> KARAKTER </b><br/>"+wordStats.num_character_wo_spaces+"<b> KARAKTER TANPA SPASI </b><br/>"+wordStats.num_unique_word+"<b> KATA UNIK </b><br/>"+wordStats.num_sentence+"<b> KALIMAT</b><br/>"+wordStats.num_paragraph+"<b> PARAGRAF</b> <br/>"}var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.setAttribute("style","margin:5px;text-align:center;");var wct_embed_input_text=document.getElementById("wct_embed_input_text");wct_embed_input_text.setAttribute("style","width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;");var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.innerHTML="<b>0</b> <b> KATA </b><br/><b>0</b><b> KARAKTER </b><br/> <b>0</b> <b>KARAKTER TANPA SPASI</b><br/> <b>0</b> <b> KATA UNIK </b><br/> <b>0</b> <b> KALIMAT</b><br/> <b>0</b> <b> PARAGRAF</b> <br/> ";var wct_textarea=document.getElementById("wct_embed_input_text");wct_textarea.value="",wct_textarea.addEventListener&&(wct_textarea.addEventListener("input",wct_display_counts,!1),wct_textarea.addEventListener("textInput",wct_display_counts,!1),wct_textarea.addEventListener("textinput",wct_display_counts,!1)),wct_textarea.attachEvent&&wct_textarea.attachEvent("onpropertychange",wct_display_counts);
//]]>
    </script>
    <br /></div></div>
    </div></div>
    

    </article>
    
    
    
    <body>
    

    </body>
</html>

4. Publikasikan.

Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form Auto Counter Word di Blogger

Cara Membuat Form CSS Beautify Manifier di Blogger

2018-10-16T08:16:00.000+07:00

CSS Beautify Manifier adalah merupakan salah satu website tools yang digunakan untuk meng-kompres kode CSS dan juga untuk mempercantik atau merapihkan kode CSS. Dengan mengkompres kode CSS yang ada pada template Anda, secara otomatis bisa mempercepat loading blog anda. Apabila Anda ingin merapihkan kode CSS secara teratur, form ini sangat bisa di andalkan. Ribuan hingga Raturan kode bisa dirapihkan dalam 1-2 detik gak perlu memakan waktu lama. Cara penggunaanya juga mudah, anda tinggal copy&paste kode CSS dan masukan kode ke form CSS Beautify Manifier dan tekan tombol "Manify CSS" atau "Beautify CSS"

Sebelumnya saya pernah juga membuat Form CSS Manifier, Anda bisa melihat postingan saya sebelumnya.

Baca Juga :

Screenshoot:

Untuk postingan kali ini saya tidak memberikan example atau demo, silakan anda copy & paste semua kode dibawah ini dan buatlah sebuah halaman baru. Sedikit memberikan info pada form CSS Beautify Manifier ini terdapat 2 Text Area (Input, Result) dan terdapat 4 tombol yang saya berikan, yaitu tombol "Manify CSS" dan "Beautify CSS" tombol ini berguna untuk konversi. Lalu saya tambahkan tombol "Clear All" dan juga "Reload" tombol ini berguna untuk apabila Anda ingin me-reset form tanpa perlu menghapus secara manual. Ok, saya rasa cukup, langsung saja ke proses pembuatan.

Cara Membuat Form CSS Beautify Manifier di Blogger

<html>
 <head>
  <title></title>
<style>
#outer-wrapper {
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

.post-body,.post {
    background-position: center!important;
}

h2.post-title a,h1.post-title a,h2.post-title,h1.post-title {
    display: none;
    margin-top: 0;
    margin: 0;
}

#blog1,#artikel,.blog-posts {
    background-position: center!important;
}

.breadcrumbs {
    display: none;
    margin-top: 0;
    margin: 0;
}

#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap {
    display: none;
    margin-top: 0;
    margin: 0;
}

.post-inner {
    padding: 0 0 0 0;
    margin: 20px auto;
}

.post-body ul#wrapin {
    display: block;
    position: relative;
    margin: 30px auto 0 auto;
}

.post-body ul#wrapin li {
    display: block;
    margin: 0 auto;
    text-align: left;
}

.post-body ul#wrapin br {
    display: none;
}
.daerah-tombol-2 {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 10px;
    border-radius: 4px;
    font-weight: bold;
}

button {
    color: #fff !important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}

#belakang {
    height: 770px;
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.judul {
    width: 100%;
    margin: 5% auto 0 auto;
    background: #16A085;
    font-family: 'Lobster',cursive;
    position: relative;
    -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
    box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}

.judul>strong {
    text-align: center;
    color: #fff;
    padding: 18px;
    width: 91%;
    display: block;
    font-size: 24px;
}

.isinya {
    width: 100%;
    height: 361px;
    margin: 0 auto;
}

.cssmin-in {
    width: 85%;
    height: 75% !important;
    margin-top: 20px;
}

.cssmin-out {
    width: 85%;
    height: 75% !important;
    margin-top: 20px;
}

textarea {
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 4px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius: 8px;
    resize: none;
}

.cssmin-btn {
    width: 100%;
    border-radius: 8px;
    background: #2980b9;
    margin: 15px auto !important;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120% !important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

.minify {
    width: 15%;
    margin: 2%;
}

.beautify {
    width: 15%;
}

.btn {
    width: 22%;
    border: 0px;
    background: #07ACEC;
    padding: 12px;
    color: white;
    cursor: pointer;
    border-radius: 6px;
}

.btn:hover {
    background: #0569ab;
}


</style> 
 </head>
 <body>
 
<script type="text/javascript" src="https://cdn.staticaly.com/gh/mayhilmay619/form-tools/0221d936/css-manifier.js"></script>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">CSS MANIFIER & BEAUTIFY</strong>
</h1>
</div>

        <div id="belakang">
  <div class="isinya">
      <textarea placeholder="Paste your CSS code here..." class="cssmin-out cssbeaut-in col-sm-5 "></textarea>
    <textarea placeholder="Paste your CSS Beautify code here..." class="cssmin-in cssbeaut-out col-sm-5"></textarea>


  <div class="cssmin-btn col-sm-2">
      <button class="btn btn-primary minify" type="submit">Minify CSS</button>
      <button class="btn btn-primary clear-code" type="submit">Clear All</button>
      <button class="btn btn-primary beautify" onclick="window.location.reload()">RELOAD</button>
      <button class="btn btn-primary beautify" type="submit">Beautify CSS</button>
      </div>
</div>
  </div>
<script type="text/javascript">
$(function() {
  /*
   * Just some styling helpers
   */
  var inputWidth = $('.col-sm-5').width();
  $('textarea').height(inputWidth*(3/4));
  $('.cssmin-btn').css('margin-top',inputWidth*(1/3)+'px');
  $('.cssbeaut-btn').css('margin-top',inputWidth*(1/3)+'px');
  
  /*
   * 
   */
  $('.minify').click(function() {
    var input = $('.cssmin-in').val();
    var output = input
      .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g, '')
      .replace(/\s*\{\s*/g, '{')
      .replace(/\s*\}\s*/g, '}')
      .replace(/\s*\:\s*/g, ':')
      .replace(/\s*\;\s*/g, ';')
      .replace(/\s*\,\s*/g, ',')
      .replace(/\s*\~\s*/g, '~')
      .replace(/\s*\>\s*/g, '>')
      .replace(/\s*\+\s*/g, '+')
      .replace(/\s*\!\s*/g, ' !');
    $('.cssmin-out').val(output);
  });
  $('.clear-code').click(function() {
    $('.cssmin-in').val('');
    $('.cssmin-out').val('');
  });
  $('.beautify').click(function() {
    var beaut_input = $('.cssbeaut-in').val();
    var beaut_output = cssbeautify(beaut_input, {
      indent: '    ',
      openbrace: 'end-of-line',
      autosemicolon: true
    });
    $('.cssbeaut-out').val(beaut_output);
  });
  $('.beaut-clear-code').click(function() {
    $('.cssbeaut-in').val('');
    $('.cssbeaut-out').val('');
  });
});
</script>
     
 </body>
</html>

Cara Membuat Safelink Converter Sendiri 100% Bisa Tanpa Error

2018-09-21T23:45:00.002+07:00

Safelink Converter adalah sebuah script khusus yang dapat mengubah semua link di website anda menjadi Enkripsi dengan menggunakan kode Base64 atau Hex. Dengan adanya Safelink Converter ini Anda akan diarahkan terlebih dahulu ke sebuah halaman khusus dimana berisikan sebuah konten pendek, banyak iklan-iklan dan sebuah tombol Go to Link yang dimana tombol tersebut berguna untuk mengarahkan Anda ke link asli yang sudah di Enskripsi tadi menjadi halaman tujuan Anda.

Safelink Converter ini sendiri sudah mulai banyak penggunanya oleh beberapa situs website karena keuntungan yang didapatkan lumayan besar. Anda bisa memanfaatkan safelink converter ini untuk meletakkan kode iklan Google AdSense Anda dan menambahkan Earning dari Google AdSense. Tentunya tidak hanya iklan dari Google Adsense saja yang dapat dipasang pada situs Safelink Converter ini, iklan-iklan lain juga bisa ditayangkan, seperti Revenuehits, Popcash, Popads, dan lain-lain.

Sebelumnya saya pernah memposting cara membuat safelink juga, anda bisa membaca postingan saya sebelumnya :

Baca Juga :

Saya menjelaskan sedikit safelink yang saya bagikan kali ini. Safelink ini berbeda dengan yang lain, jika pada umumnya safelink itu mengedit kode java script lalu mengubah nama domain, kemudian di hosting lagi java script ke Github, namun berbeda dengan kali ini. Ketika Anda sudah mengupload template safelinknya dan membuat 1 (satu) postingan maka safelink ini langsung bisa tanpa perlu mengubah apapun. Jadi saya pastikan ini akan berhasil 100%.

Ada penambahan sedikit dari saya, pertama pada bagian tombol "Copy to Clipboard" dan tombol "Reload" sudah dipastikan kedua tombol tersebut bisa digunakan. Untuk melihat bagaimana bentuk dari safelinknya saya sudah sediakan demo silakan anda tekan tombol dibawah ini. Ok, saya rasa cukup deskripsinya sekarang langsung saja ke proses pembuatan.

Cara Membuat Safelink Converter Sendiri 100% Bisa Tanpa Error

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Buat Blog Baru.

Screenshoot :

3. Download Template Safelink Converter - | Google Drive | - Full Speed
4. Silakan upload template tersebut ke dalam blog Anda.

Screenshoot :

5. Jika sudah di upload jangan lupa ubah pengalihan HTTP menjadi HTTPS.

Screenshoot :

Proses Pembuatan :

1. Buatlah 1 (satu) postingan dengan judul bebas, contoh : Go to URL, Generate URL, Go to Link
2. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML pada postingan.

ini adalah kode untuk timer atau Get Link (Kode ini diletakkan pada bagian atas postingan).

<div id="timer">
</div>
<div class="text-center">
<button class="btn bt-success hidden" disabled="" id="getlink">Get Link</button>
<div style="display: inline-block; margin: auto;">
<!-- iklan -->
</div>
</div>

ini adalah kode untuk menuju link atau Go to Link (Kode ini diletakkan pada bagian Tengah/Akhir postingan).

<div class="text-center">
<button class="btn bt-success hidden" disabled="" id="gotolink">Go to Link</button>
<div style="display: inline-block; margin: auto;">
<!-- iklan -->
</div>
</div>

ini adalah kode postingan yang instan atau langsung jadi yang sudah saya buat sendiri dan juga saya telah buatkan slot iklan, Anda bisa menggunakan kode ini untuk mempercepat jadinya safelink.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
button{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;}
</style>

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere interdum urna, quis pellentesque libero fermentum in. Fusce pharetra faucibus tristique. Ut iaculis sodales mauris, quis lobortis nisl gravida a. Proin consectetur mauris et nisi lobortis, nec commodo libero lacinia. Duis non arcu fermentum, suscipit sem at, dictum leo. Fusce maximus est eu nisl elementum vestibulum. Proin ullamcorper metus sed porttitor vulputate. Maecenas quis dolor ipsum.</div>
<div id="timer">
</div>
<div class="text-center">
<a href="https://maycyber-download.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2VjbhCaXJ0kzJjh6_cnos8uKLES75-qMx-iWiQFx8E-UCy-fmiaEJU8BPb871hymEhBEYlqgtuFxEBY4I01EuaYdQLUd9sN8El6K23LxLklKlR3KwEwRBLZlP7-FmIqLaowgQB4m2iQ/s1600/iklan-300x250.png" /></a>
<br />
<button class="btn bt-success hidden" disabled="" id="getlink">Get Link</button>
<br />
<!-- iklan -->
<a href="https://maycyber-download.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2VjbhCaXJ0kzJjh6_cnos8uKLES75-qMx-iWiQFx8E-UCy-fmiaEJU8BPb871hymEhBEYlqgtuFxEBY4I01EuaYdQLUd9sN8El6K23LxLklKlR3KwEwRBLZlP7-FmIqLaowgQB4m2iQ/s1600/iklan-300x250.png" /></a>
</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu massa massa. Nullam sollicitudin arcu semper, dictum odio tristique, hendrerit lorem. Suspendisse pretium interdum arcu suscipit venenatis. Morbi tempor nibh ante. Sed dignissim pulvinar porta. Nulla lectus libero, imperdiet in commodo non, consequat quis nulla. Aenean leo nisi, volutpat vitae gravida rhoncus, tincidunt ut ex. Donec sodales interdum quam non tempor. Donec sit amet orci elementum, laoreet sapien ac, fermentum leo.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Suspendisse sed vestibulum augue. Pellentesque pretium tincidunt blandit. Nulla maximus aliquet libero eget tempor. Donec tincidunt neque in consequat ultrices. Proin ultricies erat eget elit pretium, quis fringilla libero scelerisque. Praesent luctus egestas magna in vestibulum. Nulla interdum est in augue elementum, sit amet varius ipsum sodales. Suspendisse quam dui, feugiat vitae luctus vitae, faucibus in risus. Vivamus ac justo maximus, suscipit nulla vel, facilisis enim. Praesent sed nunc lectus. Nulla tristique felis ac euismod auctor. Sed vel lacus ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu magna gravida elit ultricies gravida. Praesent tincidunt ut mi non venenatis. Nunc viverra id augue id malesuada.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Proin consequat diam mauris, at malesuada dolor cursus id. Donec sagittis lacinia massa eu varius. Integer sit amet malesuada leo. Ut justo augue, sollicitudin ut vestibulum quis, tristique eget dui. Donec dapibus arcu vitae ultrices gravida. Ut fringilla est mollis tortor luctus dignissim. Pellentesque aliquam risus eu ante pretium, quis malesuada arcu lobortis. Donec quis tellus ac nisl auctor viverra vel quis ligula. Vestibulum eu elit lacus. Aliquam mauris lacus, sollicitudin eu tellus eu, viverra scelerisque orci. Morbi in metus vitae lectus pretium dapibus vitae et mauris. Vestibulum ultrices augue sit amet risus lacinia ultricies. Integer egestas maximus ligula, nec sodales est viverra et. Nulla convallis libero sed sem feugiat porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ex diam, interdum vehicula gravida non, vulputate vel ipsum.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
In commodo sapien et neque facilisis, at rhoncus ipsum laoreet. Suspendisse potenti. Nulla facilisi. Cras pulvinar tortor erat, a hendrerit lectus gravida ac. Nunc pretium magna vel vulputate sodales. Morbi eros velit, facilisis eget ultrices nec, gravida eget lacus. Sed eleifend nisl quis urna fringilla iaculis. Vestibulum diam lacus, imperdiet ac tortor et, finibus laoreet nunc. Phasellus cursus feugiat nisi ut vestibulum. Maecenas porttitor rutrum quam id euismod. Cras sagittis turpis nec purus interdum tincidunt. Morbi faucibus, risus sed consectetur tempus, libero turpis placerat ante, nec dapibus libero nibh et quam. Donec vel risus et lacus rutrum iaculis eu sit amet velit. Suspendisse mauris arcu, maximus vitae purus ut, malesuada blandit turpis. Fusce auctor ornare quam, sit amet tristique nisi viverra nec.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Ut a ipsum malesuada, tempor mauris nec, pharetra ligula. Fusce nec lacus efficitur, interdum orci ac, suscipit elit. Phasellus fermentum varius odio, a luctus sem facilisis vel. In ac nunc vel odio sagittis semper laoreet vel nulla. Donec eget tincidunt odio. Nunc consequat commodo eros, nec hendrerit odio dapibus ac. Praesent at ultricies ex. Fusce consequat ante et quam egestas feugiat. Duis in erat venenatis, tincidunt ante feugiat, aliquet nisi. Praesent tincidunt ultrices sem, et feugiat est posuere at.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Nam nunc tortor, blandit et porta ac, ullamcorper a elit. Integer ut purus in quam pretium tempor bibendum ut massa. Maecenas sem quam, viverra et tempus ac, feugiat a ligula. Sed euismod, lacus nec commodo fermentum, turpis neque lacinia ligula, cursus mattis diam elit vitae massa. Etiam in ligula diam. Ut vestibulum faucibus velit ac ultrices. Proin sit amet ante quam. Fusce ipsum quam, efficitur aliquet urna at, iaculis mattis mauris. Nunc rhoncus, est vitae posuere ultrices, nunc elit faucibus tellus, eu sodales sapien eros quis velit.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Etiam eu elementum neque. Proin euismod tincidunt fermentum. Nulla mollis nulla vulputate tortor euismod lacinia. Phasellus sed nisi pulvinar, suscipit justo a, consectetur urna. Donec magna neque, condimentum sed aliquet ut, ultricies vitae risus. Sed non finibus arcu. Etiam fringilla, diam nec sollicitudin lacinia, velit sapien ornare tortor, vel hendrerit arcu tortor id nulla. Etiam posuere vel arcu nec fringilla. Sed eleifend ornare nisl. Suspendisse pulvinar eros eu enim semper laoreet. Curabitur nec feugiat orci, eu imperdiet orci. Pellentesque ultrices risus eu leo rutrum convallis. Fusce faucibus fringilla neque, vel consequat augue elementum eu.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Morbi a malesuada leo. Vivamus gravida, turpis sit amet tempus pulvinar, ante arcu vehicula eros, at molestie neque massa a lacus. Aenean rhoncus dignissim erat, nec dignissim erat rutrum et. Nunc auctor nibh tellus, ut efficitur risus molestie eu. Mauris ut leo est. Duis interdum ultricies fringilla. Fusce condimentum varius diam. Proin rutrum erat eu faucibus feugiat. Nulla lacinia felis nec consequat rutrum. Fusce et efficitur sem. Quisque pellentesque est eget sapien sodales, vel euismod dolor mattis. Sed sed nibh ex. Nunc ultrices vel justo in venenatis. Ut ultricies tempus risus, eget efficitur lectus feugiat eget.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Ut eleifend tristique augue et viverra. Etiam sit amet velit vestibulum, congue erat at, pretium nulla. Pellentesque augue diam, tincidunt et sagittis nec, tristique ut felis. In blandit facilisis nibh, non malesuada massa tempor eu. Maecenas efficitur lacinia nisi porttitor tincidunt. Mauris ac pretium sapien. Cras fermentum non leo nec lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Pellentesque laoreet lorem hendrerit congue tempor. Nulla tempus imperdiet ipsum, id rhoncus mi vehicula quis. Proin consectetur cursus dui eget venenatis. Vivamus ultrices malesuada mi sed suscipit. Mauris aliquet consectetur dictum. Vestibulum lacinia laoreet tincidunt. Aliquam interdum metus eget velit faucibus, sed elementum enim aliquam. Sed risus turpis, ultrices sit amet sem sit amet, lobortis ultricies libero. Nunc sit amet mollis urna. Nullam rhoncus ante sed fringilla interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum pulvinar massa non pellentesque.</div>
<div style="background-color: white; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; margin-bottom: 15px; padding: 0px; text-align: justify;">
Vivamus quis turpis eros. In hac habitasse platea dictumst. In euismod, eros faucibus posuere consequat, magna nibh finibus est, eget molestie dui libero quis ipsum. Cras dictum eleifend dolor, in consequat dolor. Aenean vel risus nec neque mattis tincidunt eget quis lacus. Quisque gravida feugiat sapien, eget iaculis eros egestas quis. Praesent consectetur varius justo vitae tempus. In malesuada finibus justo, at fringilla sapien. Morbi posuere convallis libero eu ornare. Donec consectetur a est non auctor. Aliquam quis arcu mauris. Fusce sapien nibh, posuere vel lorem id, sodales vehicula elit. Duis pretium orci at orci consequat, a faucibus est mattis. Morbi et orci ipsum. Curabitur pretium venenatis elit in tristique.</div>
<div class="text-center">
<a href="https://maycyber-download.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2VjbhCaXJ0kzJjh6_cnos8uKLES75-qMx-iWiQFx8E-UCy-fmiaEJU8BPb871hymEhBEYlqgtuFxEBY4I01EuaYdQLUd9sN8El6K23LxLklKlR3KwEwRBLZlP7-FmIqLaowgQB4m2iQ/s1600/iklan-300x250.png" /></a>
<br />
<button class="btn bt-success hidden" disabled="" id="gotolink">Go to Link</button>
<br />
<div style="display: inline-block; margin: auto;">
<!-- iklan -->
<a href="https://maycyber-download.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2VjbhCaXJ0kzJjh6_cnos8uKLES75-qMx-iWiQFx8E-UCy-fmiaEJU8BPb871hymEhBEYlqgtuFxEBY4I01EuaYdQLUd9sN8El6K23LxLklKlR3KwEwRBLZlP7-FmIqLaowgQB4m2iQ/s1600/iklan-300x250.png" /></a>
 </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia arcu a lectus tempus mollis. Praesent sed nisi in lectus porttitor iaculis sit amet et sem. Vestibulum vehicula, nunc non pharetra placerat, urna lacus accumsan purus, non ornare arcu orci pretium tellus. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer in libero porttitor, pretium enim rutrum, lacinia est. In aliquet ligula sem, at iaculis felis vulputate sit amet. Proin porta tincidunt quam, eget cursus libero laoreet ac. Vestibulum ipsum nisi, mattis sed nibh a, elementum convallis est. Nunc at massa lacinia, rutrum ligula vitae, ornare nisl.<br />
<br />
Curabitur rutrum vel justo ut consequat. Praesent sit amet sagittis urna. In aliquet lacus eu augue rutrum dictum. In nec justo ut massa fringilla scelerisque a et elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vel pellentesque orci, sit amet tincidunt sem. In nec sapien placerat, lacinia tellus ac, condimentum nibh. Maecenas sed lacus in risus gravida sagittis at at neque. Morbi auctor velit quis nulla vestibulum, non porttitor est imperdiet. Morbi rutrum odio lacus, non ultricies ante porta sed.</div>
</div>

3. Publikasikan Artikel.
4. Done!

Demikian Tutorial kali ini, bila terjadi kesalahan jangan sungkan untuk berkomentar dibawah ini. Saya minta jika ada yang berhasil menggunakan tutorial dari saya ini silakan Anda letakkan link blog Anda di kolom komentar.

Incomming Search :

Cara Membuat Safelink Converter Sendiri 100% Bisa Tanpa Error, Cara Membuat Safelink Converter di Blogger Tanpa Domain TLD, Cara Membuat Blog Safelink Converter Work 100%, Cara Membuat Safelink dengan Blogger Work 100%, Cara Membuat Safelink Converter Aman di Blogspot, Cara membuat Safelink Blogger dengan Fitur Klik 2x, Membuat Safelink Converter di Blogger dengan Mudah, Cara Mudah Membuat Blog Safelink Random Artikel Tanpa Domain, Cara Membuat Blog Safelink Untuk Blog Download, Cara Membuat Safelink Converter Sendiri Gratis Rasa Premium, Membuat Safelink Sendiri di Blog Aman Untuk Adsense, Cara Membuat Safelink Converter Dari Hosting Gratis, Cara Membuat Blog Redirect Seperti Safelink Converter, Cara Membuat Blog Safelink Yang Aman Untuk Google Adsense

Cara Membuat Page Number Navigasi di Blogger Responsive

2018-08-09T22:31:00.001+07:00

Page Number Navigasi adalah sebuah nomor halaman pada sebuah situs/blog yang terdapat pada halaman beranda dan label, namun tidak untuk halaman pencarian.

Dengan adanya Page Number Navigasi ini pastinya mempermudah pengunjung untuk melihat artikel yang ada pada situs/blog dengan mengklik halaman selanjutnya karena terdapat nomor halaman. Dan juga dengan adanya Page Number Navigasi ini pengunjung bisa meloncat dari nomor halaman 1 ke nomor halaman yang dia inginkan, contohnya halaman 20 dan apabila pengunjung menginginkan melihat artikel yang sudah paling lama dengan langsung ke halaman terakhir ataupun bisa memilih ingin ke halaman berapa saja yang dia inginkan, ini emang fungsi utama Page Number Navigasi ini.

Screenshoot :

Memasang page number navigasi pada situs/blog sebenarnya mudah, Anda hanya perlu memasukan sebuah kode pada template pada Edit HTML. Namun, untuk pemula mungkin cukup rumit untuk diawal-awalnya karena tidak mengerti apa itu CSS dan JS, dan dengan berjalannya waktu Anda juga pasti akan terbiasa dan jago mengenai HTML. Karena kita memang harus menguasai HTML sebagai blogger supaya dapat mengedit tampilan situs/blog yang kita kelola tersebut. Minimal anda mengerti perbedaan kode CSS, HTML dan juga Java Script. Jika anda sudah mengerti perbedaannya maka akan terasa mudah untuk mengikuti tutorial ini. Ok, langsung ke proses pembuatan.

Cara Membuat Page Number Navigasi di Blogger Responsive

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* NUMBERED PAGE NAVIGATION START*/
#blog-pager{clear:both;display:block;padding:10px 0 17px 0;margin:13px 0 13px 0;font-size:13px;text-align:center}
#blog-pager a,#blog-pager span.pagecurrent{text-decoration:none;padding:7px 11px;background:#009EFF;border-radius:3px;color:#fff;transition:background 0.3s;margin:1px;display:inline-block}
#blog-pager .lastpage,#blog-pager .firstpage,#blog-pager span.showpageOf{display:none}
#blog-pager a:hover{background-color:#006caf;color:#fff;transition:.2s;text-decoration:none}
/* NUMBERED PAGE NAVIGATION END*/

3. Jika sudah? Temukan lagi kode <b:includable id='nextprev'>

Fokus ke kode <b:includable id='nextprev'>...</b:includable>
Screenshoot :

4. Copy & Paste kode berikut ini, dan silakan anda ganti kode
<b:includable id='nextprev'>...</b:includable> menjadi kode dibawah ini.

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-angle-double-left'/> <data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/> <i class='fa fa-angle-double-right'/></a>
      </span>
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
</b:if>
  <div class='clear'/>
</b:includable>

5. Temukan kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Page Navigation
    var perPage=7;
    var numPages=7;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='<span class="fa fa-arrow-circle-left"></span>';
    var nextText ='<span class="fa fa-arrow-circle-right"></span>';
    var urlactivepage=location.href;
    var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+=' ... '}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
//]]></script>
</b:if>

Keterangan :

var perPage=7;
var numPages=7;

Silakan anda ganti tulisan yang berwarnah merah untuk memaksimalkan berapa artikel yang ingin ditampilkan pada setiap halaman.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Page Number Navigasi di Blogger Responsive

Incomming Search :

Cara Membuat Page Number Navigasi di Blogger Responsive, Cara Membuat Pagination (Navigasi Page Number) di Blog, Cara Mudah Memasang Navigasi Page Number Pada Blog, Cara Memasang Page Number Navigasi Pada Blog, Cara Mudah Memasang Navigasi Page Number pada Blog, Cara Mengatasi Numbered Page Navigation yang Eror, Cara Memasang Page Number Navigation/Navigasi Halaman Keren, Cara Memasang Navigasi Nomor Halaman Di Blogspot, Cara Cepat Membuat Page Number Navigasi, Cara Membuat Halaman Bernomor di Blogger, Cara Membuat Halaman Bernomor, Cara Membuat Halaman Berangka Pada Blogger

Cara Membuat Safelink Converter Sendiri di Blogger

2018-06-25T23:40:00.000+07:00

Safelink Converter adalah sebuah script khusus yang dapat mengubah semua link di website anda menjadi Enkripsi. Dengan dipasangi script ini Anda akan diarahkan terlebih dahulu ke sebuah halaman khusus dimana berisikan berupa sebuah artikel pendek, banyak iklan-iklan dan sebuah Tombol Continue yang dimana tombol tersebut berguna untuk mengarahkan link asli yang sudah di Enskripsi tadi menjadi halaman tujuan Anda.

Jika pada umumnya safelink yang dibuat adalah secara manual, maksud secara manual disini yaitu kita mengconvert link ke sebuah form input yang kemudian link itu berubah menjadi link yang sudah terenkripsi, contohnya seperti safelink saya : Safelink Converter

Berbeda dengan kali ini, safelink untuk kali ini yaitu kita tidak perlu lagi mengconvert link ke sebuah form input melaikan safelink ini autoconvert semua link yang ada di postingan anda.

Screenshoot :

Jika di ilustrasikan sistem kerja safelink berikut ini adalah seperti berikut; melalui blog utama, didalam postingan itu terdapat link, jika link itu di klik maka anda akan dialihkan ke blog safelink, di blog safelink link itu sudah otomatis di enkripsi dan ada sebuah tombol continue untuk pergi ke link yang sebenarnya.

Saya sudah menemukan berbagai kesalahan yang sering terjadi di safelink salah satunya adalah ketika anda membuka blog safelink anda di smartphone atau versi mobile dibagian URL tersebut terkadang bertambah tulisan dengan sendirinya yang membuat safelink menjadi error 404.

Contoh :

http://kelasiana.blogspot.com/p/go-to-url.html?url=aHR0cDovL2lkc2x5LmNvbS93MTJzaklF[Tulisan China]

Kini saya menambahkan kode dibagian </head> kodenya ada dibawah. Kode tersebut adalah kode pengalihan antara domain .blogspot.co.id menjadi blogspot.com. Jadi walaupun negara luar yang mengunjungi blog anda dan mengklik link pada postingan anda maka otomatis link pada safelink itu menjadi .blogspot.com bukan .blogspot.com.sg (singapore)

Saya sudah menyediakan demo dibawah ini, itu adalah blog download saya yang sudah lama tidak diurus. Silakan anda klik semua link yang ada di postingan tersebut, maka anda akan dialihkan ke blog safelink dan di blog safelink ada tombol continue yang berguna untuk menuju ke link yang sebenarnya. Ok, saya rasa cukup deskripsinya langsung saja ke proses pembuatan.

DEMO

Cara Membuat Safelink Converter Sendiri di Blogger

Cara Pertama :

1. Siapkan 2 Blogger.

Blogger Utama.
Blogger Safelink.

Pertama yang kita setting adalah pada template safelink dulu, disini anda bebas mau buat blog baru atau menggunakan blog lama yang jelas disini anda bisa menggunakan template apa saja.

2. Dashboard - Tema/Template.
3. Temukan kode </head>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>

&lt;script type=&#039;text/javascript&#039;&gt;
var uri = window.location.toString();
if (uri.indexOf(&quot;%3D&quot;,&quot;%3D&quot;) &gt; 0) {
  var clean_uri = uri.substring(0, uri.indexOf(&quot;%3D&quot;));
    window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf(&quot;%3D%3D&quot;,&quot;%3D%3D&quot;) &gt; 0) {
  var clean_uri = uri.substring(0, uri.indexOf(&quot;%3D%3D&quot;));
    window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf(&quot;&amp;m=1&quot;,&quot;&amp;m=1&quot;) &gt; 0) {
  var clean_uri = uri.substring(0, uri.indexOf(&quot;&amp;m=1&quot;));
    window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf(&quot;?m=1&quot;,&quot;?m=1&quot;) &gt; 0) {
  var clean_uri = uri.substring(0, uri.indexOf(&quot;?m=1&quot;));
    window.history.replaceState({}, document.title, clean_uri);
}
&lt;/script&gt;

&lt;script type=&#039;text/javascript&#039;&gt;
var str= window.location.href.toString(); if((str.indexOf(&amp;#39;.com/&amp;#39;))==&amp;#39;-1&amp;#39;) { var str1=str.substring(str.lastIndexOf(&amp;quot;.blogspot.&amp;quot;));if (str1.indexOf(&amp;#39;/&amp;#39;)==&amp;#39;-1&amp;#39;) { var str2=str1; } else { var
str2=str1.substring(0,str1.indexOf(&amp;#39;/&amp;#39;)+1); } window.location.href=window.location.href.toString().replace(str2,&amp;#39;.blogspot.com/ncr/&amp;#39;); }
&lt;/script&gt;

2. Simpan Template.
3. Buka Dashboard Blogger - Kemudian Pilih Halaman.
4. Buat Halaman Baru.
5. Copy & Paste kode berikut ini, dan letakkan pada halaman pilih bagian HTML bukan COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{display:none;margin-top:0;margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
.breadcrumbs{display:none;margin-top:0;margin:0}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}
.post-inner{padding:0 0 0 0;margin:20px auto}
.post-body ul#wrapin{display:block;position:relative;margin:30px auto 0 auto}
.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}
.post-body ul#wrapin br{display:none}
button{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis sem sit amet orci volutpat, vitae congue eros tincidunt. Donec semper mauris non arcu pellentesque, vel porttitor nisi egestas. Fusce augue nisl, tempus non placerat nec, hendrerit a nulla. Curabitur sodales velit et mauris auctor tincidunt. Nunc finibus ex at quam imperdiet venenatis. Vestibulum lacinia felis at tortor iaculis, ac ultricies nunc efficitur. Nulla nec risus non dui porta blandit. Aenean ullamcorper sagittis eleifend.<br />
<br />
Ut non nibh imperdiet, fermentum lectus et, varius tellus. Etiam magna lectus, interdum sit amet efficitur vitae, consectetur sed odio. Ut finibus urna et libero iaculis, et volutpat sapien vehicula. Curabitur vehicula condimentum risus porta efficitur. Aliquam erat volutpat. Duis vestibulum augue nulla, et efficitur purus malesuada non. Ut sollicitudin nibh vitae sem fermentum, eget iaculis nisi vulputate. Nullam mattis sodales lobortis. In ultricies augue magna, quis commodo dui ornare vel. Nullam luctus, odio non semper sollicitudin, ligula quam posuere tortor, ac rutrum est libero ac tortor.<br />
<br />
Ut aliquam, nibh sit amet pretium dapibus, tortor ligula pharetra leo, et viverra mi felis vitae quam. Nunc egestas orci vel vehicula vulputate. Curabitur porttitor velit id ultricies sollicitudin. Vestibulum ac mi blandit, lobortis sapien vitae, pharetra velit. In hac habitasse platea dictumst. Pellentesque sit amet rutrum tortor. Suspendisse bibendum molestie gravida. Praesent quis volutpat diam, vel sagittis augue. Pellentesque vulputate tempus mauris, quis malesuada lectus venenatis sit amet. Sed dignissim sit amet orci id ullamcorper.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqnua_34_x0YsrulRUrpeIr4ajQg4KLYpMV9zhW9ynkcF11rqSjMZizSyyJa6c4sYmRFJP-SSsLRrCXwyd_O0OOd5Q7Ag72DLtTks0ZNLnZ57ETAr7MYoU4uUv5_wlXaBWeMHBjmy0MIm/s1600/728x90ads.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="90" data-original-width="729" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqnua_34_x0YsrulRUrpeIr4ajQg4KLYpMV9zhW9ynkcF11rqSjMZizSyyJa6c4sYmRFJP-SSsLRrCXwyd_O0OOd5Q7Ag72DLtTks0ZNLnZ57ETAr7MYoU4uUv5_wlXaBWeMHBjmy0MIm/s640/728x90ads.png" width="640" /></a></div>
<br />
Quisque tincidunt tortor sed pharetra dignissim. Fusce id elit at magna vestibulum dignissim a mattis enim. Donec erat augue, congue sed efficitur non, bibendum vel est. Praesent vel nisi rhoncus, pellentesque orci et, sollicitudin urna. Ut sed scelerisque ante, in cursus dolor. Praesent viverra dignissim eleifend. Curabitur risus neque, ultrices ut risus nec, auctor ultrices sapien. Ut luctus est sit amet pretium euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tincidunt auctor lectus vel blandit. Sed aliquam erat ultrices nulla lacinia scelerisque. Etiam nec dictum nulla.<br />
<br />
<center>
<script src="LINK-JAVASCRIPT" type="text/javascript"></script>
<div class="fitur-body">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" /></a></div>
<script type="text/javascript">
//<![CDATA[
function changeLink() {
    var e = Base64.decode(res);
    window.open(e, "_blank")
}
var currentURL = location.href,
    str = currentURL,
    res = str.replace("http://maycyber-download.blogspot.com/p/go-to-url.html?url=", "");
document.write('<button target="_self" class="btn btn-success" style="display: block;" id="download" onclick="changeLink()">Continue</button>');
onload: generate();
//]]>
</script>
</div>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" /></a></div>
</div>
Duis vel sodales augue. Ut nec sapien condimentum, tristique urna sit amet, tempor nunc. Nam mattis neque at orci feugiat, sit amet placerat massa viverra. Vestibulum egestas sem at interdum vestibulum. Phasellus venenatis viverra pulvinar. Vivamus fermentum nulla a scelerisque molestie. Proin sodales lacus ut sapien laoreet suscipit. Donec venenatis lectus arcu. Quisque imperdiet laoreet vestibulum. Vivamus vulputate nunc at iaculis fermentum. Aenean bibendum ex dolor, quis euismod erat tristique vitae. Aliquam convallis turpis enim, eu ultricies nunc fringilla eget.<br />
<br />
Praesent convallis ultrices sem, congue pulvinar massa finibus eget. Suspendisse euismod nulla sed vehicula euismod. Fusce dictum ligula ligula, at laoreet arcu placerat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sed ultricies lectus. Ut semper aliquet feugiat. Pellentesque sollicitudin faucibus enim faucibus mollis. Fusce ante massa, laoreet et tellus sed, lobortis dictum sem. Nam sed ligula a ante pretium pharetra id nec ex. Duis semper at neque nec sagittis. Integer condimentum, diam at efficitur rutrum, nisl dolor dignissim augue, vitae condimentum libero mauris non tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ultricies eleifend fringilla.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqnua_34_x0YsrulRUrpeIr4ajQg4KLYpMV9zhW9ynkcF11rqSjMZizSyyJa6c4sYmRFJP-SSsLRrCXwyd_O0OOd5Q7Ag72DLtTks0ZNLnZ57ETAr7MYoU4uUv5_wlXaBWeMHBjmy0MIm/s1600/728x90ads.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="90" data-original-width="729" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqnua_34_x0YsrulRUrpeIr4ajQg4KLYpMV9zhW9ynkcF11rqSjMZizSyyJa6c4sYmRFJP-SSsLRrCXwyd_O0OOd5Q7Ag72DLtTks0ZNLnZ57ETAr7MYoU4uUv5_wlXaBWeMHBjmy0MIm/s640/728x90ads.png" width="640" /></a></div>
<br />
Proin tortor libero, sodales id placerat ut, semper et massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet sem tincidunt, lacinia arcu quis, ornare sapien. Vivamus tincidunt scelerisque dictum. Vestibulum vel elit ac nulla tincidunt consequat at porttitor turpis. Mauris pharetra tincidunt aliquam. Donec quis auctor lorem, at pellentesque felis. Fusce in faucibus nulla. Suspendisse at tortor sit amet ante vestibulum fermentum eu vitae tortor. Praesent commodo suscipit tincidunt. Nunc sit amet orci nec massa eleifend posuere. Phasellus massa tortor, eleifend quis ex ullamcorper, pharetra ornare ligula.<br />
<br />
Praesent viverra, quam vel pellentesque tempor, felis purus porttitor diam, id vestibulum odio arcu non quam. In mauris massa, congue vitae augue posuere, lobortis auctor orci. Fusce fermentum dictum nisi. Cras finibus varius purus a eleifend. Suspendisse in vestibulum elit, non tempus dolor. Sed id orci lacinia, vestibulum nisl sodales, posuere lorem. Vivamus ut aliquam turpis, ultrices luctus neque. Proin aliquet euismod placerat. Aliquam auctor erat imperdiet est semper, eget cursus neque eleifend. Nulla facilisi. Nulla a mauris rhoncus, pulvinar turpis in, iaculis mauris.<br />
<br />
Fusce et tempor odio, at suscipit nibh. Morbi consequat fermentum sapien, vestibulum condimentu<br />
<div style="margin-left: 1em; margin-right: 1em;">
</div>
<br /></div>

Catatan :

res = str.replace("http://maycyber-download.blogspot.com/p/go-to-url.html?url=", "");

Temukan kode diatas dan silakan anda ganti kode yang berwarna merah dengan alamat url halaman anda.

6. Simpan Halaman dengan judul "Go to URL".
7. Simpan, Publikasikan.
8. Jika sudah? Copy & Paste kode berikut ini, dan letakkan pada Notepad kemudian simpan file berektensi .JS sehingga menjadi Java Script, contoh: safelink.js

var Base64 = {
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode: function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = Base64._utf8_encode(input);
        while (i < input.length) {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        }
        return output;
    },
    decode: function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
            output = output + String.fromCharCode(chr1);
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }
        output = Base64._utf8_decode(output);
        return output;
    },
    _utf8_encode: function (string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            } else if ((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    },
    _utf8_decode: function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
        while (i < utftext.length) {
            c = utftext.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
        }
        return string;
    }
}
var encode = document.getElementById('encode'),
    decode = document.getElementById('decode'),
    output = document.getElementById('output'),
    input = document.getElementById('input');
var User_ID = "";
var protected_links = "";
var a_to_va = 0;
var a_to_vb = 0;
var a_to_vc = "";

function auto_safelink() {
    auto_safeconvert();
}

function auto_safeconvert() {
    var a_to_vd = window.location.hostname;
    if (protected_links != "" && !protected_links.match(a_to_vd)) {
        protected_links += ", " + a_to_vd;
    } else if (protected_links == "") {
        protected_links = a_to_vd;
    }
    var a_to_ve = "";
    var a_to_vf = new Array();
    var a_to_vg = 0;
    a_to_ve = document.getElementsByTagName("a");
    a_to_va = a_to_ve.length;
    a_to_vf = a_to_fa();
    a_to_vg = a_to_vf.length;
    var a_to_vh = false;
    var j = 0;
    var a_to_vi = "";
    for (var i = 0; i < a_to_va; i++) {
        a_to_vh = false;
        j = 0;
        while (a_to_vh == false && j < a_to_vg) {
            a_to_vi = a_to_ve[i].href;
            if (a_to_vi.match(a_to_vf[j]) || !a_to_vi || !a_to_vi.match("http")) {
                a_to_vh = true;
            }
            j++;
        }
        if (a_to_vh == false) {
            var encryptedUrl = Base64.encode(a_to_vi);
            a_to_ve[i].href = "http://maycyber-download.blogspot.com/p/go-to-url.html?url=" + encryptedUrl;
            a_to_ve[i].rel = "nofollow";
            a_to_vb++;
            a_to_vc += i + ":::" + a_to_ve[i].href + "\n";
        }
    }
    var a_to_vj = document.getElementById("anonyminized");
    var a_to_vk = document.getElementById("found_links");
    if (a_to_vj) {
        a_to_vj.innerHTML += a_to_vb;
    }
    if (a_to_vk) {
        a_to_vk.innerHTML += a_to_va;
    }
}

function a_to_fa() {
    var a_to_vf = new Array();
    protected_links = protected_links.replace(" ", "");
    a_to_vf = protected_links.split(",");
    return a_to_vf;
}

Catatan :

a_to_ve[i].href = "http://maycyber-download.blogspot.com/p/go-to-url.html?url=" +

Temukan kode diatas dan silakan anda ganti kode yang berwarna merah dengan alamat url halaman anda.

9. Jika sudah menjadi file safelink.js, kalian upload file tersebut ke Github, Google Sites, YourJavaScript atau hosting lainnya.

Baca Juga :

Cara Upload Java Script JS, JQuery dan CSS ke Google Site

10. Jika sudah di hosting kode diatas menjadi java script, selanjutnya ke point 5, silakan anda buka halaman yang anda buat tadi.

11. Temukan kode <script src="LINK-JAVASCRIPT" type="text/javascript"></script>

12. Silakan anda ganti tulisan yang berwarna merah dengan link java script yang sudah dihosting tadi.

13. Jika sudah? Simpan, Publikasikan lagi.

Jika pertama tadi kita setting blogger safelink, sekarang kita pindah ke blogger utama.

14. Buka Blogger Utama Anda.
15. Buka Tata Letak.
16. Tambahkan Gadget - Pilih HTML/Java Script.

Catatan :

Dibagian Tata Letak, Silakan anda letakkan elemen/gadget nya tepat dibawah blog post. Perhatikan gambar dibawah ini.

Screenshoot :

17. Copy & Paste kode berikut ini, dan letakkan pada kolom HTML/Java Script.

<script src="LINK-JAVASCRIPT" type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
protected_links = "facebook.com,twitter.com"; // link yang tidak ingin di protect
auto_safelink();
//]]>
</script>

Catatan :

<script src="LINK-JAVASCRIPT" type='text/javascript'/>

Temukan kode diatas dan silakan anda ganti kode yang berwarna merah diatas menjadi link java script yang sudah hosting tadi.

18. Simpan Tata Letak.
19. Jika sudah? Buka Dashboard - Tema.
20. Temukan kode <body>
21. Copy & Paste kode berikut ini, dan silakan anda ganti kode <body> dengan kode dibawah ini.

<body onload="auto_safeconvert()">

22. Simpan Template.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Safelink Converter Sendiri di Blogger

Cara Membuat dan Memasang Auto Page View Counter di Blogger

2018-06-24T01:41:00.000+07:00

Page View Counter adalah menghitung semua jumlah pengunjung yang membaca artikel anda. Widget ini sebenarnya blogger sudah menyediakan page view counter yaitu pada bagian Dashboard - Postingan - Kemudian disitu ada logo bergambar mata, darisitu kita bisa melihat berapa orang yang sudah melihat atau membaca artikel kita. page view counter berfungsi untuk menampilkan jumlah postingan yang sudah dibaca oleh pengunjung. Widget ini jarang sekali yang menggunakannya, karena sebenarnya blogger sendiri sudah menyediakan di dalam dashboard.

Page View Counter yang bagikan kali ini dibantu dengan Data Base dari Firebase dimana dengan bantuan dari Firebase ini artikel kita bisa di hitung secara Real Time. Firebase ini adalah situs milik Google untuk membuat berbagai project dalam pembuatan aplikasi, hosting, analytics dan lain-lain.

Screenshoot :

Page view counter ini juga sudah saya terapkan pada blog saya ini, jadi wajar saja jika viewers nya sedikit memang ini widget nya baru saja saya pasang. Sebelum memasuki ke proses pembuatan, saya peringatkan untuk membaca nya secara detail dan teliti agar tidak terjadi kesalahan.

Screenshoot :

Saya sedikit memberikan demo berupa gambar, silakan anda perhatikan gambar diatas yang saya lingkari berwarna merah kira-kira widget ini akan muncul seperti itu. Ok, saya rasa cukup deskripsinya langsung saja ke proses pembuatan.

Cara Membuat dan Memasang Auto Page View Counter di Blogger

Cara Pertama :

1. Buka Firebase
2. Lalu + Tambahkan Proyek.

Screenshoot :

3. Maka akan muncul pop-up seperti ini.

Isikan :

Name Proyek :
ID Proyek : - Otomatis Menyesuaikan dengan Nama Proyek
Pilih Negara/Wilayah: Indonesia
Perjanjian Lisensi: Setujui Semua. - Kemudian Buat Proyek.

Screenshoot :

4. Jika sudah langkah 3, langkah selanjutnya pilih Developer - Pilih Database.

Screenshoot :

5. Jika sudah pada menu database, langkah selanjutnya pilih Realtime Database

Screenshoot :

6. Langkah selanjutnya adalah Aturan keamanan untuk Realtime Database, silakan anda pilih bagian Mulai dalam mode pengujian, kemudian Aktifkan.

Screenshoot :

7. Jika sudah pilih menu Data kemudian silakan anda salin alamat firebase anda lalu tempelkan pada notepad.

Screenshoot :

Proses Pembuatan :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pasang JQuery berikut ini, jika sudah dipasang tidak perlu dipasang lagi, jika belum terpasang wajib memasangnya.
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

5. Jika sudah? Temukan lagi kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
// VIEWERS COUNTER
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://maycyber-download.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]></script>

Keterangan :

Silakan anda ganti https://maycyber-download.firebaseio.com pada kode diatas dengan alamat link Firebase anda yang sudah dibuat tadi.

7. Terakhir, Temukan kode <div class='post-info'> atau <div class="post-header"> kode ini letakkan dimana saja sesuai dengan template anda.
8. Copy & Paste kode berikut ini dan letakkan dibawah kode <div class='post-info'> atau <div class="post-header"> atau kode yang mirip, gunakan inspect element untuk mencari kode.

<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span> Viewers</span>

9. Simpan Template.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat dan Memasang Auto Page View Counter di Blogger

Incomming Search :

Cara Membuat dan Memasang Auto Page View Counter di Blogger, Cara Membuat Page View Counter Blogger, Cara Membuat View Counter Pengunjung dengan HTML/JavaScript, Cara Membuat Counter Pageview, Cara Membuat Jumlah Pengunjung (Hit Counter), Cara Membuat Widget Page View Counter, Page View Counter, Cara Membuat Penghitung Halaman Otomatis

Cara Membuat Featured Post Mode Grid Responsive

2018-06-22T01:37:00.002+07:00

Featured Post adalah menampilkan artikel untuk berada paling atas. Widget ini cocok sekali buat anda yang ingin menampilkan artikel lampau menjadi Top atau berada paling atas di bagian halaman depan anda. Karena artikel lampau sering sekali di abaikan oleh pengunjung blog anda, maka untuk itu agar artikel lampau tadi bisa terbacakan oleh pengunjung juga, maka disarankan memasang widget ini.

Biasa nya ketika anda melihat featured post pasti berbentuk Slide, namun untuk kali ini berbeda. Untuk kali ini artikel bisa disesuaikan berdasarkan label. Featured Post ini menampilkan satu gambar, ada label atau ketegori tepat diatasnya dan beberapa artikel anda sesuai dengan label yang ingin anda tampilkan.

Screenshoot :

Featured Post seperti yang saya bagikan kali ini, biasanya digunakan pada blog/situs web anime. Perlu diketahui juga web anime kebanyakan menggunakan grid dalam postingannya, mungkin featured post ini cocok sekali buat anda yang memiliki blog/situs web anime. Saya akan memberikan demo hanya berupa gambar tepat mendekati akhir postingan ini, perhatikan dulu jika anda tertarik dengan widget ini silakan anda pasang di blog anda. Ok, langsung saja ke proses pembuatan.

Cara Membuat Featured Post Mode Grid Untuk Blog Anime

Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>

2. Copy & Paste kode berikut ini dan letakkan diatas kode ]]></b:skin> atau </style>

.featured #md_fpost98 img{margin:0;padding:0;width:150px;height:195px;overflow:hidden}
.featured ul#md_fpost98 h2{color:#fff;bottom:-10px;background:rgba(17,17,17,0.6);width:140px;font-weight:500;padding:3px 5px;font-size:13px;line-height:20px;position:absolute;height:25px;transition:.3s linear;text-align:center}
.featured ul#md_fpost98 h2:hover{height:65px;transition:.3s linear}
.featured .mdinc p{display:none}
.featured ul#md_fpost98{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none}
.inf-link{font-size:11px;padding:0 5px;border-radius:2px;position:absolute;bottom:10px;right:-5px}
.featured #md_fpost98 a{color:#64707a;transition:all .3s;display:block}
.featured .md_sum{font-size:13px;color:999}
.featured .mdinc{position:absolute;top:0;right:0;margin:5px;border-radius:5px;padding:5px;background:rgba(17,17,17,0.6);color:#FFF;font-size:12px;font-family:arial,sans-serif}
.featured #md_fpost98 li{margin:5px;padding:0;position:relative;display:inline-block;transition:all .3s;overflow:hidden}
@media screen and (max-width:640px){
  .featured #md_fpost98 li{float:left;width:46%}
  .featured #md_fpost98 img{width:auto;height:auto}
}

3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini dan letakkan diatas kode </body>

<b:if cond="data:blog.url == data:blog.homepageUrl">
<script type="text/javascript">
$('#md_fpost98 img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w150-h195-c/'))});
</script>
</b:if>

5. Jika sudah? silakan anda Simpan Tema.
6. Selanjutnya - Buka Tata Letak.
7. Tambahkan Gadget - Kemudian Pilih "HTML/Java Script".
8. Copy & Paste kode berikut ini, dan letakkan pada kolom HTML/Java Script.

<div class='featured'><ul id='md_fpost98'>
<script type='text/javaScript'>
var randomfpost_number=4;var randomfpost_chars=0;var randomfpost_details="yes";var randomfpost_comments="Comment";var randomfpost_commentsd="no";var randomfpost_current=[];var total_randomfpost=0;var randomfpost_current=new Array(randomfpost_number);function randomfpost(a){total_randomfpost=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default/-/Bahasa Indonesia?alt=json-in-script&max-results=0&callback=randomfpost"><\/script>');function getvalue(){for(var e=0;e<randomfpost_number;e++){var g=false;var h=get_random();for(var f=0;f<randomfpost_current.length;f++){if(randomfpost_current[f]==h){g=true;break}}if(g){e--}else{randomfpost_current[e]=h}}}function get_random(){var b=1+Math.round(Math.random()*(total_randomfpost-1));return b};
</script>
<script type='text/javaScript'>
function md_fpost(j){for(var p=0;p<randomfpost_number;p++){var n=j.feed.entry[p];var s=n.title.$t;if("content" in n){var m=n.content.$t}else{if("summary" in n){var m=n.summary.$t}else{var m=""}}for(var q=0;q<n.link.length;q++){if("thr$total" in n){var l=n.thr$total.$t+" "+randomfpost_comments}else{l=randomfpost_commentsd}if(n.link[q].rel=="alternate"){var o=n.link[q].href;if("media$thumbnail" in n){var r=n.media$thumbnail.url}else{r="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrGEuybeJe0FAjH4pt6i0wtJ6JWM28DuBz98HQkqZH0AhS0YMPnJazYi_paLBexlL2RADiAfnGSPmZl_rOSBt87zuiU3xUirvzmVtzKLhdOATLGV1hXs1wDvbyo8B4mKrDxsidbKl/s1600/no-image.png"}}}document.write("<li>");document.write('<a href="'+o+'" rel="nofollow"><img alt="'+s+'" src="'+r+'" width="'+145+'" height="'+185+'"/><h2>'+s+"</h2></a>");if(randomfpost_details=="yes"){document.write('<div  class="mdinc">Bahasa Indonesia <p> '+l)+'</p></div><div style="clear:both"></div></li>'}}}getvalue();for(var i=0;i<randomfpost_number;i++){document.write('<script type="text/javascript" src="/feeds/posts/default/-/Bahasa Indonesia?alt=json-in-script&start-index='+randomfpost_current[i]+'&max-results=1&callback=md_fpost"><\/script>')};
</script>
</ul></div>

Keterangan :

var randomfpost_number=4; = Silakan anda ganti tulisan berwarna merah untuk menampilkan berapa postingan.
/feeds/posts/default/-/Bahasa Indonesia = Silakan anda ganti tulisan berwarna merah untuk menampilkan artikel dalam bentuk label atau kategori.
Bahasa Indonesia = Silakan anda ganti sesuaikan dengan label atau kategori anda.

9. Simpan, Publikasikan.

Disini saya menjelaskan sedikit dan menyarankan jika anda ingin menampilkan artikel pada Featured Post ini tepat dibawah Menu Header, kira-kira seperti pada gambar dibawah ini.

Screenshoot :

Jika anda ingin memasang Featured Post anda tepat dibawah Menu Header. Pertama yang harus anda lakukan adalah menambahkan Elemen pada Tata Letak lalu meletakkan kode nya tepat dibawah menu header yang ada pada template anda. Ok, langsung aja proses pembuatan.

1. Buka Template/Tema.
2. Edit HTML.
3. Temukan kode ]]></b:skin>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode]]></b:skin>

.only-featured{}
.only-featured .widget{padding:15px 14px;overflow:hidden}
.only-featured img,.only-featured iframe{display:block;max-width:100%;border:none;overflow:hidden}
@media only screen and (max-width:640px){
  .only-featured{padding:10px}
@media only screen and (max-width:480px){
  .only-featured{padding:8px}

5. Jika sudah? silakan anda temukan kode menu header yang anda gunakan, saya tidak bisa memperkirakan jika kode yang saya sebutkan benar, jadi silakan anda cari sendiri kode yang mirip dengan menu header anda, jika sudah ketemu silakan anda copy & paste kode berikut ini.

<b:section class='only-featured' id='only-featured' maxwidgets='1' showaddelement='yes'/>

6. Jika sudah dipasang? buka atau refresh tata letak anda, maka akan muncul elemen baru.
7. Terakhir, silakan anda copy & paste kode pada point nomor 8 diatas.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Featured Post Mode Grid.

Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

2018-06-19T03:06:00.000+07:00

(Kotak Script) Syntax Highlighting adalah sebuah tempat Text Area yang didalamnya berupa berisi kode programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi (Kotak Script) Syntax Highlighting ini adalah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan (Kotak Script) Syntax Highlighting ini tampilan desktop dan mobile akan terasa responsive tidak akan membuat kode yang anda bagikan menjadi berantakan. Selain itu (Kotak Script) Syntax Highlighting ini memudahkan pengunjung juga dalam menyalin kode, karena hanya double click secara otomatis kode terseleksi semua dan anda hanya tinggal menyalinnya.

Screenshoot :

Anda sering membagikan sebuah kode di tutorial anda? Jika iya, berarti anda sangat cocok sekali menggunakan tutorial yang saya bagikan kali ini. Jika anda ingin membagikan sebuah kode di artikel anda sebaiknya menggunakan (Kotak Script) Syntax Highlighting ini. Jika anda membagikan sebuah kode menggunakan kotak script yang lain, alhasil kode nya berantakan sehingga terkadang kode tidak bekerja. Dengan adanya (Kotak Script) Syntax Highlighting ini kode yang anda bagikan tidak lagi berantakan. Ok, langsung saja ke proses pembuatan.

Screenshoot :

Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* CSS Syntax Highlighting */
.post-body pre{position:relative;overflow:auto;background:#333;color:#ddd;font-size:12px;max-height:500px;font-family:monaco,'Courier New',monospace;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#212121;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;user-select:all}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;padding:15px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre[data-codetype="CSS"]:before,pre[data-codetype="HTML"]:before,pre[data-codetype="Javascript"]:before,pre[data-codetype="jQuery"]:before{font-family:sans-serif;background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
pre[data-codetype='HTML']:before{color:#fff;background-color:#3cc888}
pre[data-codetype='CSS']:before{color:#fff;background-color:#00a1d6}
pre[data-codetype='jQuery']:before{color:#fff;background-color:#db0309}
pre[data-codetype='Javascript']:before{color:#fff;background-color:#ff2a00}
pre[data-codetype="CSS"]{color:#e1fc61;background:#000;border:1px solid #fff}
pre[data-codetype='HTML']{color:#33d30e;border:1px solid #fff;background:#000}
pre[data-codetype='Javascript']{color:#ff3600;background:#000;border:1px solid #fff}
pre[data-codetype='jQuery']{color:#ff3600;background:#000;border:1px solid #fff}

3. Simpan Template.

Jika sudah silakan anda simpan template anda, kemudian untuk menguji berhasil/tidaknya kode ini, berikut ini adalah cara menggunakan Syntax Highlighting yang benar.

1. Copy & Paste kode berikut ini lalu kemudian pilih salah satu, misalkan HTML.

<pre data-codetype="HTML" title="HTML"><code>... YOUR KODE (PARSE) HERE ...</code></pre>
<pre data-codetype="Javascript" title="JAVASCRIPT"><code>... YOUR KODE (PARSE) HERE ...</code></pre>
<pre data-codetype="CSS" title="CSS"><code>... YOUR KODE (NO-PARSE) HERE ...</code></pre>
<pre data-codetype="jQuery" title="JQUERY"><code>... YOUR KODE (PARSE) HERE ...</code></pre>

2. Jangan lupa di Parse HTML dulu.

PARSE HTML

3. Letakan kode hasil parse tadi ke bagian "... Your Kode (Parse) Here...".
4. Simpan, Publikasikan.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat (Kotak Script) Syntax Highlighting di Blogger Terbaru

Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru

2018-06-14T01:33:00.002+07:00

CSS Minifier adalah merupakan salah satu website tools yang digunakan untuk kompres kode CSS, dengan mengkompres kode CSS yang ada di template anda, secara otomatis bisa mempercepat loading blog anda. Untuk mengkompres kode CSS anda harus lakukan adalah memasang Form CSS Manifier ini. 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 kompres. Setelah kode CSS sudah di kompres, anda tinggal meletakannya di ]]></b:skin> atau </style>

Pada form CSS Manifier ini adalah versi terbaru dari saya sendiri, dimana saya mendesain agar responsive. Sedikit tambahan juga saya telah mengubah checkbox yang pada umunya nya hanya mengceklis pada bagian kotak saja, kini saya mendesain checkbox menjadi mode on-off.

Screenshoot :

Terdapat 4 tombol yang saya berikan, yaitu tombol Compress CSS, Clear Field, Select All dan Copy To Clipboard. Kekurangan nya ada pada bagian "Copy To Clipboard", Tombol ini hanya berfungsi ketika anda sedang terhubung ke internet, karena pada tombol ini saya hanya menggunakan kode Java Script sederhana. Ok, langsung saja ke proses pembuatan.

Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman
3. Pilih Halaman.
4. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan COMPOSE.

<style type="text/css">
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#2980b9;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #2980b9;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#2980b9 transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{display:none;margin-top:0;margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
.breadcrumbs{display:none;margin-top:0;margin:0}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}
.post-inner{padding:0 0 0 0;margin:20px auto}
.post-body ul#wrapin{display:block;position:relative;margin:30px auto 0 auto}
.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}
.post-body ul#wrapin br{display:none}
#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:15px auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:2px solid #2980b9;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:4px;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px 30 50px;color:#fff}
#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:0;border-radius:5px}
#cssminifier button,#cssminifier button[disabled]:active{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
#cssminifier button:hover,#cssminifier button:active{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{color:#fff!important;font-size:14px;font-weight:bold;padding:15px 25px;border-radius:4px;border:none;outline:none;cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin:10px 5px 15px}
#cssminifier br{display:none}
#belakang{background:#0569ab;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
*{margin:0 auto}
body{background:#fafafa;font-size:16px;font-family:'Lucida Sans',sans-serif}
form{padding:20px}
form label{display:inline-block;position:relative;cursor:pointer;line-height:50px;vertical-align:top;font-weight:bold}
form .form-check{display:inline-block;position:relative;width:50px;height:25px}
form .form-check::before{content:"";display:inline-block;position:relative;width:50px;height:25px;background:#fff;border:1px solid #ddd;border-radius:10px;-moz-border-radius:30px}
form .form-radio{display:none}
form .form-radio + label{padding-left:35px}
form .form-radio + label::before{content:"";position:absolute;left:0;display:inline-block;width:25px;height:25px;background:#fff;margin-right:5px;border:1px solid #ddd;border-radius:50%;-moz-border-radius:50%;box-shadow:2px 2px 2px #bbb;-moz-box-shadow:2px 2px 2px #bbb;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-radio:checked + label::before{background:#34A8BF;border:5px solid #fff;width:17px;height:17px}
form .form-check::after{content:"";display:inline-block;position:absolute;width:21px;height:21px;border-radius:25px;-moz-border-radius:25px;background:#bfbfbf;left:3px;top:3px;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-check:checked::after{left:27px;background:#1bc94d}
fieldset{display:block;-webkit-margin-start:2px;-webkit-margin-end:2px;-webkit-padding-before:0.35em;-webkit-padding-start:0.75em;-webkit-padding-end:0.75em;-webkit-padding-after:0.625em;min-width:-webkit-min-content;border:2px solid #07ACEC;border-radius:4px;}
legend{display:block;margin: 5px;font-weight: bold; -webkit-padding-start:2px;-webkit-padding-end:2px;border-width:initial;border-style:none;border-color:initial;border-image:initial}

    </style>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">CSS Manifier (Compressed)</strong>
</h1>
</div>
<div id="cssminifier">
<span class="clear"></span>
<textarea autofocus="" "cols="30" "rows="20" id="cssField" onfocus="code_check();" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<div id="belakang">
<form action="">
<fieldset>
<legend>SELECTED</legend>
<input checked="true" type="checkbox" id="stripAllComment" class="opt1 form-check">
<label for="stripAllComment">STRIPT ALL COMMAND</label>
<br>
<input type="checkbox" name="check" id="superCompact"class="opt2 form-check">
<label for="superCompact">SUPER COMPACT</label>
<br>
<input checked="true" type="checkbox" name="check" id="betterIndentation" class="opt3 form-check">
<label for="txt3">KEEP IDENTATION</label>
    
<input checked="true" type="checkbox" name="check" id="keepLastComma" class="opt4 form-check">
 <label for="keepLastComma">REMOVE LAST SEMICOLON</label>
    </fieldset>
    </form>

    </div>
</div>
    <div id="belakang">
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
<button onfocus="cssField" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);" type="reset">Clear Field</button> 
<button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function code_check(){
var focuscheck=document.getElementById('cssField');if(focuscheck.value.indexOf('Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog')>0)focuscheck.value='';}
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];
function copyToClipboard() {
  $("#cssField").select();
  document.execCommand("copy"); 
}
</script>
</div>
    </div>

3. Simpan, Publikasikan.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru.

Cara Membuat dan Memasang Photoshop Online di Blogger

2018-06-14T00:23:00.000+07:00

Photoshop adalah aplikasi editing yang terpopuler sekarang dimana anda bisa mengedit foto sesuka hati kalian. Tahukah anda bahwa photoshop itu sebenarnya software? Ya, jika anda ingin menggunakan photoshop yang harus dilakukan adalah menginstall software tersebut. Namun berbeda kali ini, photoshop tersedia versi online. Dimana anda bisa mengedit foto dalam keadaan terhubung ke internet.

Penggunaan photoshop online dangan offline/softwarenya sama saja. Jika anda mahir dalam photoshop anda juga bisa menggunakan photoshop online ini.

Screenshoot :

Sebenarnya ini bukan keseluruhkan kode dari photoshop langsung melainkan kita hanya meng-iframe dari situs pixlr.com, bukan keseluruhan kodenya. Oh ya, pada form ini akan saya matikan dibagian sidebar, breadcrumb, serta comment pada kode CSS. Karena Photoshop Online membutuhkan ruang yang besar, jadi saya menon-aktfikan bagian yang saya sebutkan diatas. Ok, langsung saja ke proses pembuatan.

Cara Membuat dan Memasang Photoshop Online di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Pilih Halaman.
4. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.ribbon{position:relative;z-index:1;padding:1em 2em;}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#07ACEC;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em;}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #07ACEC;z-index:-1;}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent;}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent;}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#07ACEC transparent transparent transparent;bottom:-1em;}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em;}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0;}
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title{display:none;margin-top:0;margin:0;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.breadcrumbs{display:none;margin-top:0;margin:0;}
#comments,#breadcrumb, #sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
</style>

<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Photoshop Online</strong>
</h1>
</div>
<br />
<script type="text/javascript">
    //<![CDATA[
    document.write('<iframe src="https://pixlr.com/editor/" allowfullscreen="allowfullscreen" style="height: 700px; width: 100%;border: none;"></iframe>');
    //]]>
    </script>

Cara Membuat Form Encrypt Code di Blogger

2018-06-12T22:51:00.000+07:00

Encrypt Code adalah mengubah kode-kode pemprograman menjadi berupa kode acak yang biasa disebut kode Base64 atau HexaDecoder. Tujuan dari Encrypt Code ini adalah untuk meng-enkripsi suatu kode agar tidak dapat di ketahui oleh seseorang.

Jika anda adalah seorang pembuat template, alangkah baiknya meng-enskripsi kode pada template anda, terutama pada bagian credit atau coppyright. Jika anda membiarkan kode itu secara utuh seperti normalnya, para pengguna template anda bisa saja menghapus kode bagian credit link nya. Para pengguna template gratisan biasanya hanya mementingkan blognya sendiri tanpa mementingkan betapa susahnya membuat suatu template.

Jika anda tidak ingin template yang anda berikan secara gratis namun versi premium alangkah baiknya enkripsi saja credit link anda dengan alat yang saya berikan ini.

Berikut adalah contoh kode yang sudah di encrypt pada alat yang saya berikan:

<script type='text/javascript'>
//<![CDATA[
document.write(unescape('%68%74%74%70%73%3A%2F%2F%6D%61%79%63%79%62%65%72%2D%64%6F%77%6E%6C%6F%61%64%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F'));
//]]>
</script>

Perhatikan kode diatas? Dapatkah anda menerjemahkannya? Jika tidak, saya akan memberitahukannya. Jadi, mentahan kode utuh diatas adalah: https://maycyber-download.blogspot.com/ namun sudah saya enkripsi menjadi seperti kode diatas, itulah jawabannya.

Sebelumnya saya juga pernah membuat website tools lainnya, silakan anda baca mungkin saja anda perlu :

Baca Juga :

Cara Membuat Parse HTML Tools Terbaru di Blogger - Update
Cara Membuat Kalkulator Penghitung Jumlah Kata di Blogger - Update
Cara Memasang Form CSS Manifier di Halaman Statis Blogger - Versi Lama

Screenshoot :

Tools ini saya buat sendiri, dan banyak sumber referensi dari Google. Saya mendesain nya agar enak dipandang dengan menggunakan kode CSS seadanya karena saya mengoding sendiri dan posisi tidak ada koneksi internet. Tools ini dilengkapi 3 tombol, yaitu tombol Encrypt Code, Reset, dan Copy To Clipboard.

Tools ini hampir semua kode pemprograman support. Jika anda penasaran, silakan anda coba sendiri klik tombol demo dibawah ini.

DEMO

Cara Membuat Form Encrypt Code di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru - Lalu berikan nama "Encrypt Code" atau bebas.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan COMPOSE.

<style>
input#button-on{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
input#button-on:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#belakang{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
.belakang-2{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
textarea{width:94%;height:300px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:2px solid #2980b9;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:8px;resize:none}
.daerah-tombol-2{color:#fff;background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:10px;border-radius:4px}
.hasil{color:#fff;background:#2980b9;text-align:center;padding:20px 40px 20px;margin:20px;border-radius:4px}
button{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
a:link{color: #fff;}
a:link:hover{color: #07ACEC}
    </style>    
<center>
<script type='text/javascript'>
    function doencrypt(theform) { 
     if (theform.code.value == "") { 
      alert("NO CODES FOR ENCRYPTION!"); 
      return false; 
     } else { 
      enctext=encrypt(theform.code.value); 
      codetocopy="<script type='text/javascript'>\n"; 
      codetocopy+="//<![CDATA[\n"; 
      codetocopy+="document.write(unescape('"+enctext+"'));\n"; 
      codetocopy+="//]]>\n"; 
      codetocopy+="</script\>"; 
      theform.ecode.value=codetocopy; 
     } 
     return false; 
    } 

    function encrypt(tx) {
     var codehex='';
     var i;
     for (i=0; i<tx.length; i++) {
      codehex += '%'+hexfromdec(tx.charCodeAt(i))
     }
     return codehex;
    }

    function hexfromdec(num) { 
     hex1 = Math.round(num/16 - .5); 
     hex2 = num - hex1 * 16; 
     return (""+getletter(hex1)+getletter(hex2)); 
    } 

    function getletter(num) { 
     if (num < 10) { 
      return num; 
     } 
     else { 
      if (num == 10) { return "A" } 
      if (num == 11) { return "B" } 
      if (num == 12) { return "C" } 
      if (num == 13) { return "D" } 
      if (num == 14) { return "E" } 
      if (num == 15) { return "F" } 
     } 
    }
function code_check(){
    var focuscheck=document.getElementById('txtarea');if(focuscheck.value.indexOf('Paste your code here...')>0)focuscheck.value='';} 
function copyToClipboard() {
    $("#txtarea").select();
  document.execCommand("copy"); 
} 
    </script>
<div id="belakang">
    <br />
   <div class="hasil">
<span style="font-size: large;"><b> INPUT :</b></span>
        </div>
<form method="post" name="pageform" onsubmit="return doencrypt(this);">
<textarea cols="40" name="code" id="areatxt" rows="10" placeholder="Paste (CTLR + V ) Your Code Here..."></textarea>

    <div class="hasil">
<span style="font-size: large;"><b> RESULT :</b></span>
    <br />
        </div>
<textarea cols="40" name="ecode" id="txtarea" readonly="" rows="11"></textarea>

           <div class="daerah-tombol-2">
<input id="button-on" onclick="doencrypt(pageform);" type="button" value="ENCRYPT CODE"/>
<input id="button-on" type="reset" value="RESET"/>
<button id="txtarea" onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
<script type='text/javascript'>
//<![CDATA[
document.write(unescape('%3C%62%72%20%2F%3E%20%20%20%20%20%20%20%20%20%20%0A%3C%62%72%20%2F%3E%0A%4F%52%49%47%49%4E%41%4C%20%43%52%45%41%54%45%44%20%A9%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%6D%61%79%63%79%62%65%72%2D%64%6F%77%6E%6C%6F%61%64%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3E%4D%41%59%43%59%42%45%52%2D%44%4F%57%4E%4C%4F%41%44%3C%2F%61%3E'));
//]]>
</script>
            </div>
    </form>
<div style="clear: both;">
</div>
            </div>
        </center>

3. Simpan, Publikasikan!

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Jika anda ingin membagikan source kode diatas jangan lupa dicantumkan sumber mengarahkan ke blog saya. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form Encrypt Code di Blogger

Cara Memasang Iklan Adsense di Tengah Postingan

2018-06-12T01:03:00.001+07:00

Peletakan unit iklan adsense memang membutuhkan strategi. Strategi yang digunakan adalah bagaimana supaya peletakan itu mendapatkan klik dari pengunjung. Untuk mendapatkan klik dari pengunjung memang susah. Mungkin dengan menempatkan iklan di tengah postingan bisa membantu anda menambahkan penghasilan.

Menempatkan iklan di tengah postingan ini susah-susah-gampang, kenapa? karena membutuhkan sebuah script agar kode itu tepat ditengah. Biasanya iklan adsense yang terdapat di blog-blog lain yang paling sering di letakkan adalah dibagian awal postingan dan di akhir postingan. Namun berbeda dengan menempatkan iklan di tengah postingan, ini membutuhkan sebuah script.

Sebenarnya peletakan iklan adsense bisa dimana saja, namun peletakan yang di anjurkan adalah di dalam postingan. Karena di dalam postinganlah pengunjung membaca, berkomentar serta meng-klik iklan kita.

Sebelumnya saya pernah membuat artikel tentang peletakan iklan adsense juga, silakan anda baca mungkin saja ini membantu anda:

Baca Juga :

Screenshoot:

Sedikit pembahasan, sistem Google Adsense adalah CPC yang mana jika di artikan dalam bahasa Indonesia adalah BPK jika di artikan lagi adalah Biaya Per Klik. Dari sini kita sudah ketahui bahwa jumlah klik iklan itu sangat berpengaruh dalam penghasilan kita. Ok, sesuai judul kali ini saya akan membagikan Cara Memasang Iklan Adsense di Tengah Postingan. Cara ini sudah dibuktikan Aman, jadi jangan takut Akun anda di Suspend.

Cara Memasang Iklan Adsense di Tengah Postingan

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temuka kode <data:post.body/>
2. Copy & Paste kode berikut ini, kemudian anda ganti kode <data:post.body/> dengan kode dibawah ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>

<!-- KODE IKLAN ANDA DISINI (START)-->
<div style="display:block;text-align:center;margin:15px auto;">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png'/>
</div>
<!-- KODE IKLAN ANDA DISINI (END) -->

</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

3. Simpan Template.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Memasang Iklan Adsense di Tengah Postingan

Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

2018-06-09T02:44:00.002+07:00

Pre Code Sintax Highlighter adalah sebuah tempat text area yang didalamnya berupa berisi kode programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi Pre Code Sintax Highlighter ini adalah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan Pre Code Sintax Highlighter ini tampilan desktop dan mobile akan terasa responsive tidak membuat berantakan kode yang anda bagikan. Selain itu Pre Code Sintax Highlighter ini memudahkan pengunjung juga dalam menyalin kode, karena hanya double click secara otomatis kode terseleksi semua dan anda hanya tinggal menyalinnya.

Screenshoot:

Anda sering membagikan sebuah kode di tutorial anda? Jika iya, berarti anda sangat cocok sekali menggunakan tutorial yang saya bagikan kali ini. Jika anda ingin membagikan sebuah kode di artikel anda sebaiknya menggunakan Pre Code Sintax Highlighter. Jika anda membagikan sebuah kode menggunakan kotak script yang lain, alhasil kode nya berantakan sehingga terkadang kode tidak bekerja. Dengan adanya Pre Code Sintax Highlighter ini kode yang anda bagikan tidak lagi berantakan. Ok, langsung saja ke proses pembuatan.

Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto;}
pre.code{background:#374760;margin:20px 25px;max-height:500px;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08);border: 3px solid #374760;}
pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none;}
pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border: 3px solid #374760;display:block;margin:0 0 0 60px;padding:15px 16px 14px;overflow-x:auto;font-size:13px;line-height:19px;color:#444;}
pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#aaa;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}}
pre.code-html{color:#fff;background: #374760;} 
pre.code-css{color:#fff;background: #374760;} 
pre.code-javascript{color:#fff;background: #374760;} 
pre.code-jquery{color:#fff;background: #374760;} 
pre:hover::after{opacity:0;visibility:visible;}
pre.code-css code{color:#e1fc61;background:#374760;border:1px solid #fff;}
pre.code-html code{color:#33d30e;border:1px solid #fff;background:#374760;}
pre.code-javascript code{color:#ff8100;background:#374760;border:1px solid #fff;}
pre.code-jquery code{color:#f85050;background:#374760;border:1px solid #fff;}

3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

5. Simpan Template!.

Cara Menggunakan :

Untuk memanggil kode, silakan anda copy & paste kode dibawah ini di postingan anda. Untuk bagian HTML, JS, JQuery harus di PARSE terlebih dahulu.

PARSE HTML

<pre class='code code-html'><label><span style="color: #fff">HTML</span></label><code> KODE HTML (PARSE) DISINI </code></pre>
<pre class='code code-css'><label><span style="color: #fff">CSS</span></label><code> KODE CSS DISINI </code></pre>
<pre class='code code-javascript'><label><span style="color: #fff">JS</span></label><code> KODE JAVA SCRIPT (PARSE) DISINI </code></pre>
<pre class='code code-jquery'><label><span style="color: #fff">JQUERY</span></label><code> KODE JQUERY (PARSE) DISINI </code></pre>

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

Cara Membuat Kalkulator Penghitung Jumlah Kata di Blogger

2018-06-09T01:03:00.000+07:00

Apakah anda adalah seorang penulis artikel? Jika iya, pasti yang dibutuhkan seorang penulis artikel adalah jumlah kata dan jumlah karakter dalam suatu artikel. Jika anda menggunakan jasa penulis artikel atau membeli artikel diorang lain pasti orang yang menjual tersebut menawarkan 400 kata = Rp. 10.000,- atau 1000 kata = Rp. 20.000,-. Lantas dipikiran anda, bagaimana penjual artikel itu bisa tahu kalo artikel yang dibuatnya adalah 400 kata atau 1000 kata.

Tahukah anda kalau di aplikasi Microsoft Word juga ada fitur seperti ini. MS Word memilik fitur otomatis menghitung setiap kata dan juga otomatis menghitung jumlah karakter dalam kata. Anda bisa memanfaatkan MS Word untuk membuat artikel. Cara ini banyak digunakan oleh para Blogger yang untuk sementara tidak memiliki koneksi internet. Jika koneksi internet sudah tersedia, anda bisa menyalin artikel dari MS Word ke Blogger.

Namun dengan Tools yang saya bagikan kali ini anda bisa menghitung jumlah kata dan juga jumlah karakter pada kata.

Screenshoot :

Perhitungan kata dan karakter dalam artikel sangatlah penting. Apalagi untuk para Blogger untuk memaksimalkan tulisannya. Dampak memaksimalkan perhitungan kata adalah mengacu pada SEO, kabarnya semakin banyak jumlah kata dan karakter dalam suatu artikel akan semakin SEO artikel tersebut.

Jika anda ingin mengajukan permohonan Google AdSense anda akan berkesempatan akan diterima jika anda memperhatikan perhitungan kata dalam suatu artikel. Menurut Master SEO, Artikel yang bagus itu minimal 400 atau lebih. Banyak kata pada artikel juga belum cukup, jika artikel kurang bagus dan rapih percuma saja. Ok, langsung saja ke proses pembuatan.

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">    
.daerah-tombol-2{color:#fff;background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:30px;border-radius:4px;font-weight:bold;}
.daerah-tombol{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:4px;}
#belakang{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05);}
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}
button{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{display:none;margin-top:0;margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
.breadcrumbs{display:none;margin-top:0;margin:0}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}
.post-inner{padding:0 0 0 0;margin:20px auto}
.post-body ul#wrapin{display:block;position:relative;margin:30px auto 0 auto}
.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}
.post-body ul#wrapin br{display:none}
</style>

<br />
<div id="belakang">
<form id="wordCount" method="get">
<div id="headWordCount">
<textarea 100="" cols="30" height:="" id="textAreaCount" placeholder="Copy and Paste some words here (CTRL + V)" spellcheck="false"></textarea>
        </div>
<br />
<div class="button-group">
<div class="daerah-tombol">
<button id="submitWordCount" type="submit"> HITUNG KATA </button> <button id="resetWordCount" type="reset"> SETEL ULANG </button></div>
<center>
    <div class="daerah-tombol-2">
<div id="boxHasil">
<span style="font-size: large;"><b> HASIL :</b></span>
    <br />
<br />
<div id="hasilKata">
</div>
<div id="hasilKarakter">
</div>
</div>
</div>
</center>
</div>
</form>
<script type="text/javascript">
    var namaNode = document.getElementById("textAreaCount");
    var formNode = document.getElementById("wordCount");
    var hasilNode = document.getElementById("hasilKata");
    var hasil2Node = document.getElementById("hasilKarakter");
var submitNode = document.getElementById("submitWordCount");
    var resetNode = document.getElementById("resetWordCount");   
    document.getElementById("submitWordCount").style.cursor ="pointer";
    document.getElementById("resetWordCount").style.cursor="pointer";
    function textCount(e){
     hasilNode.innerHTML = 0;
     hasilNode.innerHTML = "JUMLAH KATA : " + namaNode.value.split(' ').length;
     hasil2Node.innerHTML = "JUMLAH KARAKTER : " + namaNode.value.length;
     e.preventDefault();
    }
    function resetCount(e){
namaNode.value = "";
     hasilNode.innerHTML ="";
     hasil2Node.innerHTML ="";
     e.preventDefault();
    }
    submitNode.addEventListener("click", textCount);
    resetNode.addEventListener("click",resetCount);
   </script></div>
</div>

3. Simpan, Publikasikan!

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Kalkulator Penghitung Jumlah Kata di Blogger

Lakukan Langkah Ini Agar Blog Anda Cepat di Terima Google Adsense

2018-06-07T23:56:00.000+07:00

Anda salah satu orang yang berkali-kali mengajukan permohonan Google AdSense dan berkali-kali juga kena tolak? Ok, kita pahami dulu maksud penolakan itu. Mungkin anda melewatkan tahap-tahap dimana anda harus mematuhi kebijakan Google AdSense agar blog/situs web anda diterima. Saya pribadi sudah berkali-kali di tolak Google AdSense, dan saya ingin membagikan pengalaman saya, kenapa saya bisa diterima oleh Google AdSense.

Perlu diketahui juga bahwa pihak Google AdSense juga tidak memberitahukan secara detailnya bagaimana cara daftar Google AdSense hingga akhirnya permohonan tersebut diterima. Tim Google AdSense hanya meninjau situs anda secara langsung. Jika sekiranya belum layak? Tim Google AdSense berhak menolak situs anda. Parahnya pihak Google AdSense tidak menjelaskan alasan penolakan tersebut dan hanya memberikan sebuah email yang menyatakan bahwa situs anda tidak memenuhi kebijakan peraturan Google.

Google AdSense dalam penerimaan calon Publisher baru nya terbagi menjadi 2 tahap, yaitu Tahap 1 (Review) Tahap 2 (Approve). Kita mulai dulu dari tahap 1.

Pada Tahap 1, jika anda mengajukan permohonan Google AdSense pasti pihak Google AdSense akan memberitahukan ke Email anda bahwa “Kami Sedang Meninjau Situs Anda”. Disini Pihak Google AdSense sedang meninjau situs anda. Biasanya paling lama 1-2 hari kerja, anda akan mendapatkan Email yang berisikan bahwa situs anda sedang kami tinjau.

Sedangkan pada Tahap 2, Pada tahap 2 prosesnya sangat jauh berbeda. Pada Tahap 2 ini situs anda akan di tinjau secara langsung oleh para tim pakar dari Google AdSense. Google akan meninjau keseluruhan situs anda, bukan hanya dibagian artikel saja tetapi di semua halaman. Proses manual ini yang membuat review tahap 2 ini memakan waktu lebih lama dibanding review tahap 1. Biasanya pada tahap 2 ini memakan waktu 3-7 hari atau hingga 1 bulan karena banyaknya antrian dari berbagai dunia yang mengajukan permohonan Google AdSense juga.

Screenshoot :

Mendaftar dan menjadi mitra/publisher Google AdSense memang terlihat mudah. Anda hanya perlu Sign-up ke http://google.com/adsense dan memasukan alamat blog/situs/web anda dan menungu antrian diterima. Namun pada kenyataan cukup sulit, teruma pada pemula yang baru mencobanya. Menurut saya rintangan yang paling sulit adalah membuat situs yang berkualitas, baik dari segi artikel ataupun gambar thumbnail hasil mengedit sendiri. Pemula akan merasakan apa yang saya rasakan seperti dulu ketika mendaftar Google AdSense. Anda akan terkena tolak minimal 5x bahkan lebih. Tapi jangan pantang menyerah, pasti akan diterima kok. Pasti ada alasan mengapa pihak Google AdSense menolak situs anda. Mungkin anda di suruh merampungkan situs anda dari tahap perancangan.

Saya belum pasti 100% cara yang saya bagikan ini akan ampuh di terima Google AdSense, saya hanya berbagi berdasarkan pengalaman pribadi saya. Semoga ini membantu anda dalam mengajukan permohonan Google AdSense.

Berikut ini adalah syarat permohonan Google AdSense dapat diterima :

1. Jangan Ajukan Permohonan Google AdSense Ketika Situs Sedang Tahap Rancangan (BETA)

Pada bagian ini, jangan anda daftarkan ketika blog/situs/web anda sedang BETA atau tahap-tahap sedang dibuat atau dirancang. Anda pasti sudah tahu-lah bagaimana proses sedang dirancang? Disini fokuskan terlebih dahulu pada artikel, buat artikel sebanyak mungkin. Jika anda menggunakan template orang lain? Sebaiknya di isikan dulu terutama pada bagian menu ganti dengan link yang mengarahkan ke alamat blog/situs/web anda sendiri.

Screenshoot :

2. Buat Artikel Bermanfaat Serta 100% Lolos dari CopyScape.

Agar dapat mudah diterima, buatlah artikel yang bermanfaat serta jangan copy&paste artikel orang lain. Sekarang banyak sekali copaser yang merajalela. Jangan sekali-kali anda copy&paste artikel orang lain. Selain melanggar hak cipta, artikel copas kemungkinan akan terjerumuskan blog/situs/web anda menjadi paling bawah di pencarian Google. Oleh karena itu anda harus membuat artikel 100% lolos dari CopyScape.

3. Jumlah Artikel Minimal 20-30.

Sebenarnya jumlah artikel tidak ditentukan dalam pendaftaran Google AdSense dan tidak ada juga peraturannya. Terkadang hanya 5 artikel saja pihak Google AdSense menerimanya. Tapi berdasarkan pengalaman pribadi saya sendiri, saya membuat artikel sebanyak (seingat saya ada 30) dan diterima oleh pihak Google AdSense. Masing-masing artikel saya saat itu hanya 200-300 kata.

4. Umur Blog Minimal 3-6 Bulan.

Seperti halnya jumlah artikel, umur suatu blog juga belum ada patokan yang pasti. Menurut saya umur blog harusnya diperhatikan. Jangan daftar blog anda ketika baru 1 hari, yang ada anda akan tertolak. Menurut pengalaman pribadi saya, saya mendaftarkan blog saya pada usia 3 bulan dan menurut saya di usia ini sudah ideal.

Screenshoot :

Mengapa harus 3 bulan?

Dalam 3 bulan ini anda sebaiknya membuat dan mempublikasikan banyak artikel. Sehingga artikel anda sempurna dalam pengindex google dan anda pun memiliki pengunjung dari pencarian google.

5. Gunakan Template Responsive.

Menggunakan template responsive juga harus diperhatikan. Karena dengan template yang responsive peletakan iklan nantinya akan lebih mudah. Jika anda tidak bisa membuat template sendiri anda bisa membeli ke orang yang menyediakannya. Karena jika menggunakan template responsive pada blog anda maka pada versi desktop dan versi mobile blog anda akan menyesuaikan dengan perangkat.

6. Buat Halaman Privacy Policy, Disclaimer, Contact Us, Term of Service.

Pihak Google AdSense pernah mengirim email ke saya yang berisikan “Sediakan Menu Navigasi Yang Jelas”. Awalnya saya tidak tahu kesalahan saya, parahnya pihak Google AdSense tidak memberitahukan solusi agar permohonan diterima. Sayapun akhirnya mencari dan membaca di blog orang lain, akhirnya saya menemukan solusinya. Ternyata yang dimaksud Google AdSense ini adalah sediakan menu “Privacy Policy, Disclaimer, Contact Us, Term Of Service” dan akhirnya saya memasang seperti yang terlihat di menu navigasi saya.

Screenshoot :

Disini saya menyediakan link download untuk anda yang kesulitan mencari bagaimana sih membuat halaman untuk Privacy Policy seperti yang saya jelaskan diatas? Silakan anda download artikel dibawah ini. Artikel ini sudah rapih dalam tata Bahasa, menggunakan bahasa yang baik.

Download :

7. Sediakan Menu Navigasi Yang Sederhana dan Jelas

Seperti pada point 6. Sediakan Menu Navigasi Yang Jelas adalah anda diharuskan membuat halaman seperti Privacy Policy, Disclaimer, Contact Us. Jika diblog anda tidak ada menu navigasi silakan anda cari di blog ini, ada banyak kok.

8. Ikhtiar dan bersabar.

Mungkin pertama anda akan terkena tolak, tapi jangan langsung putus asa tetap bersabar dan berikhtiar. Karena di tolak oleh Google AdSense lebih sakit dibanding di tolak oleh Gebetan. :)

Kesimpulan :

Yang harus anda lakukan adalah membuat blog baru, Jangan ajukan permohonan Google AdSense ketika blog anda sedang tahap-tahap dibuat (BETA). Buatlah artikel sebanyak mungkin. Jangan lupa gunakan template responsive, isi semua menu yang tersedia seperti pada bagian menu header dan menu navigasi, isi semua dengan link pada menu navigasi serta kategori pada menu header. Sediakan navigasi yang jelas, pasanglah form privacy policy seperti yang saya jelaskan diatas. Ketika membuat artikel, jangan artikel orang lain yang anda copas. Buatlah konten memadai, jangan membuat konten artikel seperti kekerasan, sara atau artikel menyimpang lainnya. Perlu diketahui blog yang berisikan hanya video tidak akan diterima. Selama 3 bulan gunakan waktu anda untuk membuat artikel serta jangan lupa di submit artikel nya ke Google Webmaster tujuannya agar blog anda memiliki pengunjung.

Demikian, ada banyak sekali berbagai email penolakan dari Google AdSense. Jika ada yang ingin ditanyakan? Silakan berkomentar dibawah ini. Saya akan membalas komentar anda kurang lebih 24 jam, jika tidak ada halangan. Nantikan artikel selanjutnya “Bagaimana saya bisa dapat iklan Matched Content dari Google Adsense.” Thanks for Reading: Lakukan Langkah Ini Agar Blog Anda Cepat di Terima Google Adsense

Cara Membuat Iklan Adsense Melayang di Bawah Blogger

2018-06-01T23:22:00.000+07:00

Peletakan kode iklan adsense sangat berpengaruh dalam penghasilan anda. Jika anda meletakan sembarangan unit iklan tersebut pendapatan anda belum maksimal, jadi butuh strategi untuk mendapatkan earning yang maksimal. Untuk mendapatkan penghasilan yang maksimal, blog kita dibutuhkan mendapatkan klik iklan dari pengunjung. Karena dari jumlah klik pada iklan itu-lah sumber penghasilan sebuah blog. Jika tidak ada satupun pengunjung yang meng-klik iklan anda maka penghasilan anda belum maksimal. Karena sistem Google Adsense adalah CPC yang mana jika di artikan dalam bahasa Indonesia adalah BPK jika di artikan lagi adalah Biaya Per Klik. Dari sini kita sudah ketahui bahwa jumlah klik iklan itu sangat berpengaruh dalam penghasilan kita. Ok, kali ini saya akan membagikan agar klik serta penghasilan anda maksimal. Cara ini sudah dibuktikan Aman, jadi jangan takut Akun anda di Suspend.

Sebelumnya saya juga pernah membuat artikel pembahasan peletakan kode iklan adsense juga, mungkin artikel sebelumnya ini berguna buat anda.

Baca Juga :

Screenshoot :

Sesuai judul saya akan membagikan, Cara Membuat Iklan Adsense Melayang di Bawah Blogger. Seperti pada gambar diatas saya telah membekali script dengan tombol close sehingga pengunjung bisa close iklan jika menurutnya iklan ini menggangu. Jika pada tampilan mobile iklan ini sangat responsive mirip sekali dengan iklan Page Level Ads yang mana iklan tersebut terletak dibawah layar smartphone jika menggunakan browser. Ok, langsung saja ke proses pembuatan.

Cara Membuat Iklan Adsense Melayang di Tengah Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tata Letak

Proses Pembuatan :

1. Buka Tata Letak.

2. Buat Elemen/Gadget Baru - Kemudian pilih HTML/Java Script.

3. Copy & Paste kode berikut ini dan letakkan pada elemen HTML/Java Scipt.

<style>
.a-footerz{margin-top:20px;text-align:center;}
.a-z-beforecontent.pull-left{margin-right:20px;}
.a-z-beforecontent.pull-right{margin-left:20px;}
.a-z-beforecontent,.a-z-insidecontent{margin-bottom:20px;}
.a-z-aftercontent{margin-bottom:20px;}
.ads-floating-left{z-index:999;left:10px;position:fixed;overflow:hidden;text-align:center;top:10px;}
.ads-floating-right{z-index:999;right:10px;position:fixed;overflow:hidden;text-align:center;top:10px;}
.admin-bar .ads-floating-left,.admin-bar .ads-floating-right{top:42px;}
.ads-floating-footer{z-index:999;position:fixed;text-align:center;bottom:0;left:0;right:0;}
.inner-floating-bottom{background:transparent;}
.ads-floating button{text-align:right;font-size:12px;padding:1px 5px;width:100%;display:block;margin:0;background:#fff;border:none;}
</style>
<div class="ads-floating ads-floating-footer">
<div class="container">
<div class="inner-floating-bottom">
<button onclick="parentNode.remove()" title="close">(X)</button>
<center>
<div style="display: block; margin: 15px auto; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" />
</div>
</center>
</div>
</div>
</div>

4. Silakan anda ganti kode dibawah ini dengan kode iklan adsense anda.

<div style="display: block; margin: 15px auto; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZK0E-t97nrKrVTnyR01hHLeBFdUbkP93QW54oEZ4eAqvpflediMZAi7-esK8xb0r-0KOwWdZWD9DZmNPt7EriPzHSILFg_CT2yLwUZLvYu9PewON2VqiL_9QiNam-NYci32z6q-GgMo/s1600/iklan-3.png" />
</div>

5. Simpan Gadget.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Iklan Adsense Melayang di Bawah Blogger

Incomming Search :

Cara Membuat Iklan Adsense Melayang di Bawah versi Mobile, Cara Membuat Iklan Google Adsense Melayang Menghalangi Artikel, Cara Membuat Iklan Adsense Melayang Responsive Mobile di Blogger, Membuat Iklan Adsense Melayang di Layar Bawah Android, Cara Memasang Iklan Adsense Melayang Di Blog, Cara Memasang Iklan AdSense Melayang di Bawah Versi Mobile, Cara Memasang Iklan Adsense Melayang di Kanan dan Kiri Blog, Cara buat iklan Adsense melayang di Kiri dan Kanan Blog yang Aman, Cara Membuat Iklan AdSense Melayang di Blogger, Cara Membuat Iklan Adsense Melayang di Kanan dan Kiri, Cara Membuat Iklan Adsense Melayang di Tengah Blog, Cara Membuat Iklan Adsense Melayang di Bawah Blog

Cara Agar Artikel/Postingan Cepat Terindex di Google Search

2018-05-20T03:37:00.002+07:00

Halo, kali ini saya akan membagikan tutorial cara agar artikel kita cepat terindex di mesin pencarian google. Awalnya saya malas sebenarnya membuat tutorial ini karena akan memakan banyak waktu dan pastinya banyak kata yang saya tulis yang membuat tangan saya pegal dan juga banyak gambar yang perlu saya edit. Sebenarnya artikel ini sudah lama saya simpan di draft Blogger namun hanya setengah saja yang saya tulis dan saya tidak ingin melajutkannya lagi. Namun banyak sekali Blogger asal grup di Facebook kesulitan bagaimana caranya agar artikel cepat teridex. Ya sayapun akhirnya memutuskan untuk menulis sebanyak ini dan menjelaskan secara rinci yaitu bagaimana sih biar artikel kita cepat terindex di pencarian google. Agar artikel kita menjadi urutan nomor satu di pencarian Google memanglah sulit untuk didapatkan, pasalnya karena banyaknya saingan diantara artikel yang anda buat dengan artikel orang lain. Jika anda memiliki blog namun belum mempunyai visitor berikut ini saya akan membuat artikel bagaimana agar artikel anda cepat terindex di Google. Dengan menggunakan cara ini secara tidak langsung anda sudah mengoptimasi SEO (Search Engine Optimized) pada blog anda. Mengapa demikian?

Sebab Google tidak akan mudah percaya begitu saja bahwa blog ini adalah milik anda, maka dari itulah Google membutuhkan proses untuk mengindex atau merayapi blog anda. Tapi jika anda menggunakan tutorial yang saya berikan ini, kemungkinan sangat berpengaruh sekali pada blog anda. Karena pasalnya saya akan membagikan tutorial berdasarkan pengalaman saya sendiri. Sebenarnya Google tidak membutuhkan banyak proses, dan secara otomatis Google akan langsung mengindex blog anda.

Screenshoot :

Artikel yang terindeks oleh Google Search Engine adalah hal yang sangat penting bagi kemajuan dan perkembangan pada blog/website anda, tanpa di indeks blog anda akan terasa sia-sia saja. Karena sakit rasanya kita sudah membuat artikel namun tidak ada yang baca, sudah cape-cape ngetik namun belum juga ada yang berkunjung, sehingga terkadang kita pesimis duluan dan berhenti dalam dunia blogging. Jangan khawatir, disinilah pengetahuan SEO yang harus anda kuasai, tujuannya belajar SEO ini agar konten pada blog anda dikenali dan terindex oleh mesin pencari seperti Google, Yahoo, Bing, maupun Search Engine lainnya karena hampir 70% pengunjung blog itu berdasarkan Search Engine selebihnya mungkin melalui perantara Sosial Media. Berikut ini beberapa teknik atau strategi yang harus anda terapkan agar artikel anda cepat terindex.

Screenshoot :

Sebelum masuk ke proses pembuatan perhatikan screenshoot gambar diatas, jika artikel anda cepat terindex maka antara url yang sudah di submit perbandingan nya sama dengan url yang sudah di indexed berdasarkan grafik sitemaps. Jika di artikan dalam grafik diatas maka :

" Saya memilik artikel sebanyak 197 dan URL pada artikel sendiri itu sudah di submitted (biru) dan Google sudah merayapi atau mengindex artikel saya sebanyak 197 juga. Jika diartikan artikel saya sudah sepenuhnya di index oleh Google."

Cara Agar Artikel Anda Cepat Terindex di Google Search

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Setelan.
3. Cek anda menggunakan HTTP / HTTPS.

Screenshoot :

Silakan anda pilih antara di aktifkan atau tidak (Ya/Tidak) pada pengalihan HTTP/HTTPS. Hal ini sangat perlu diperhatikan, tujuannya agar tidak terjadi kesalahan pada pengindexan oleh Google. Jadi itu ibarat seperti ini, anda menggunakan HTTPS namun ternyata anda men-submit artikel anda menggunakan URL HTTP sehingga Google mengindex artikel anda dalam keadaan HTTP dan robot.txt tidak bisa mengindex artikel anda. Seharusnya URL yang anda submit itu semuanya harus dalam keadaan URL HTTPS sehingga dengan mudahnya Google mengindex blog anda, begitupun sebaliknya.

4. Buka Google Webmaster.
5. Login dengan akun Google anda yang sudah tercantum Blogger.
6. Dashboard - "Add a Property" (Tombol Berwarna Merah).

Screenshoot :

7. Jika sudah silakan masukan URL blog anda.

Ingatlah pada point 3, Jika anda menggunakan HTTP / HTTPS. Jika anda tidak mengaktifkan pengalihan HTTPS pada setalan Blogger tadi maka anda masukan dengan HTTP, contoh: http://maycyber-download.blogspot.com/ jika anda mengaktifkan pengalihan HTTPS pada setelah Blogger maka anda memasukan seperti ini : https://maycyber-download.blogspot.com/

8. Selanjutnya anda akan memasuki Dashboard.
9. Dashboard - Pengaturan (Icon Gerigi) - Pilih "Verification Details".

Screenshoot :

10. Jika sudah, selanjutnya adalah mem-verifikasi bahwa ini adalah situs/blog anda.

klik "Verify using a different method".

Screenshoot :

11. Jika sudah, maka anda akan disuruh memilih beberapa pilihan untuk mem-verifikasi situs anda, silakan anda pilih "HTML Tag".

Screenshoot :

12. Buka Blogger - Pilih Tema/Template.

13. Temukan kode <head>

14. Copy & Paste kode HTML Tag anda seperti gambar diatas, kemudian letakkan dibawah kode <head>

Screenshoot:

15. Jika sudah di pasang pada blog anda, kemudian klik "Verify" pada Google Webmaster nya.

Screenshoot :

16. Dashboard - Pilih "Crawl" - Kemudian pilih "Sitemaps".

Screenshoot :

17. Jika sudah di menu "Sitemaps" - Plih "Add/Test Sitemaps" (Tombol Berwarna Merah).

Screenshoot :

Silakan anda masukkan "Sitemap.xml" untuk menambahkan Sitemaps. Tujuan ditambahkan sitemaps sini adalah agar artikel yang terindex ketahuan. Jika sudah, tekan tombol Submit yang berwarna biru.

18. Biasanya sitemaps akan pending. Berdasarkan yang saya baca dari kebijakan Google untuk masalah pengindexan Google akan merayapi dan mengindex artikel dalam kurun waku 72 jam/ 3 hari.

Apa yang saya lakukan selama sitemaps sedang Pending?

Lakukan lah seperti yang saya lakukan dalam masa pending sitemaps Google Webmaster, berikut ini adalah yang saya lakukan ketika sitemaps sedang pending.

1. Submit URL. - Google Console

Untuk mendapatkan index yang maksimal yang saya lakukan adalah men-submit semua artikel saya ke Google Console. Perlu diketahui, jika anda membuat artikel baru dan sudah mempublikasikan nya yang harus anda lakukan adalah men-submit URL artikel anda ke Google Console ini. Biasanya jika anda men-submit artikel anda ke sini akan mendapatkan index lebih cepat. Sebenarnya ngga perlu di submit juga tidak masalah, seperti yang sudah saya bilang tadi pada point 18, Google akan mengindex dan merayapi blog anda dalam waktu kurun 72 jam / 3 hari. Jadi simple nya begini, Anda membuat artikel - di Publikasikan - Submit URL - Terindex.

Berikut ini adalah cara yang benar untuk submit URL :

Screenshoot :

Caranya anda buka postingan anda, klik kanan mouse pada tulisan lihat, kemudian "Copy link address". Perhatikan gambar biar anda paham.

2. Buka Google Console

Perlu diperhatikan, ketika anda ingin men-submit perhatikan antara HTTP dengan HTTPS pasalnya ini sangat berpengaruh. Jika pada setelah Blogger anda, anda mengaktifkan pengalihan HTTPS di wajibkan semua URL yang akan di index itu menggunakan HTTPS. Jika anda tidak mengaktifkan HTTPS maka anda hanya perlu menghapus huruf "S" pada HTTPS:// biasa nya default nya HTTP dan itu juga wajib semua URL menggunakan HTTP.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Agar Artikel/Postingan Cepat Terindex di Google Search.

Incomming Search :

Cara Agar Artikel/Postingan Cepat Terindex di Google Search, Cara Agar Postingan Cepat Terindex, Cara Agar Artikel Terindex, Cara Agar Postingan Terindex, 3 Cara Ampuh Agar Artikel/Postingan Cepat Terindex Google, Cara Agar Artikel/Postingan Cepat Terindex Google, Cara Agar Artikel Cepat Terindex Google Dalam 1 Detik, Cara Agar Artikel/Postingan Cepat Terindex Google 2018, Cara Agar Artikel Blog Cepat Terindex Google, Cara Agar Artikel Blog Cepat Terindex Google, Cara Agar Artikel Postingan Kita Cepat Terindex Google, Cara Agar Artikel/Postingan Blog Cepat Terindex Google (Search Engine)

Cara Membuat Sitemap Anchor Text Untuk Blogger Terbaru

2018-05-13T01:22:00.002+07:00

Sitemap adalah menampilkan semua artikel dalam satu halaman. Sitemap ini berfungsi untuk memudahkan pengunjung dalam menjelajahi blog anda. Pengunjung anda dapat melihat artikel anda berdasarkan label. Sitemap ini berperan sangat penting yaitu memudahkan pengunjung anda dalam melihat semua artikel anda, karena sitemap ini menempatkan semua artikel anda dalam satu halaman. Walaupun itu artikel baru dibuat ataupun artikel yang sudah lama/lampau, sitemaps ini tetap update di halaman yang dibuat tadi. Alangkah baiknya blog anda dipasangkan Sitemap ini. Tujuannya adalah supaya pengunjung blog anda tidak merasa kebingungan mencari artikel apa saja yang ada di blog anda. Selain itu sitemap tidak perlu diubah-ubah, kerena ketika anda membuat artikel baru dan anda mem-publikasikannya, maka secara otomatis Sitemap ini akan mengindex postingan tersebut berdasarkan label yang dibuat ketika ada membuat artikel.

Screenshoot :

Ok, sebelumnya saya juga sempat membuat tutorial berbagai sitemaps silakan anda baca artikel saya sebelumnya :

Cara Membuat Sitemap dengan Tabel di Blogger

Sebenarnya sitemap versi ini sudah saya publikasika sebelumnya hanya saja untuk sekarang saya update java scriptnya agar widget ini terus aktif dan saya hosting java script nya di github dan juga ada sedikit re-design terutama saya tambahkan dibagian kode CSS nya. Ok, langsung saja ke proses pembuatan.

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan di bagian HTML bukan di COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#toc{width:99%;margin:5px auto;border:4px solid #374760;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);border-radius:4px;}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#374760),color-stop(1,#374760));border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:2px 2px 3px #073763;display:block}
.labl a{color:#fff}
.labl:first-letter{text-transform:uppercase}
.new{color:#ff0000;font-weight:bold;font-style:italic}
.postname{font-weight:normal;}
.postname li:hover{color: blue}
.postname li{border-bottom:1px solid #374760;margin-right:15px}
</style>
<div id="toc">
<script src="https://cdn.rawgit.com/hilmay619/pribadi/master/peta-situs.js" type="text/javascript"></script>
<script src="http://maycyber-download.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

Catatan :

http://maycyber-download.blogspot.co.id silakan anda ganti dengan alamat blog anda.

Screenshoot :

Bila terjadi kesalahan seperti pada gambar diatas? silakan anda klik tutup saja, itu hanya notifikasi peringatan biasa saja.

3. Simpan, Publikasikan!

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Sitemap Anchor Text Untuk Blogger Terbaru

10 Situs/Web Download Software Gratis Terbaik

2018-05-05T22:13:00.001+07:00

Jika anda kesulitan mencari situs untuk mendownload software yang gratis namun full version disini saya akan memberikan 10 situs penyedia software secara gratis terbaik menurut saya. Ketika anda sehabis menginstall ulang windows atau membeli laptop baru pastinya membutuhkan suatu aplikasi bukan? nah dari 10 situs yang saya berikan dibawah ini bisa jadi recommended untuk anda untuk mendownload software buat kebutuhan komputer atau laptop anda. Dari 10 situs tersebut adalah tempat saya mendownload software yang biasa saya kunjungi. Anda bisa mendownload software secara gratis dan pastinya software tersebut sudah full version tanpa membeli key serial number. Ok, langsung saja, inilah daftar 10 situs/web penyedia software secara gratis.

10 Situs/Web Download Software Gratis Terbaik

1. Bagas31.com

Bagas31.com adalah situs penyedia software gratis berasal dari Indonesia. Selain software, disini juga disediakan download gratis game bajakan berukuran besar maupun kecil (PC). Berbagai tools untuk windows, internet, converter, desain terdapat disini. Anda bisa mendownload berbagai software keperluan anda secara gratis disini, bahkan Bagas31.com menyediakan crack atau patch yang membuat software anda menjadi full version tanpa membeli lisensi atau key serial number dari pihak pembuat software, di Bagas31.com ini anda bisa mendownload software keperluan komputer anda.

Kelebihan :

1. Tampilan Responsive dan User Freandly
2. Ada pembahasan cara menginstall software yang anda download.
3. Tidak ada iklan.
4. Bagas31.com meng-upload filenya di Google Drive yang membuat download anda menjadi kenceng karena berada di server Google.

Kekurangan :

1. Terlalu banyak Pop-up iklan yang bermunculan (jika klik dengan sembarang)
2. Bagas31.com menggunakan link shortener yang membuat anda di alihkan terus menerus hingga ke link yang sebenarnya.
3. Bagas31 Menggunakan kotak pencarian (Search) berdasarkan Google CSE yang membuat anda kesulitan.

2. Kuyhaa.me

Kuyhaa.me sama seperti Bagas31.com yaitu berasal dari Indonesia. Disini selain menyediakan download software secara gratis, Kuyhaa ini juga membahas Tutorial seputar windows. Anda bisa mendownload keperluan komputer anda disini, Kuyhaa juga menyediakan crack dan patch yang membuat software anda menjadi Full Verison.

Kelebihan :

1. Tidak ada iklan
2. Tampilan Responsive
3. Kuyhaa.me memilik server download sendiri.
4. Menggunakan Direct Link atau klik langsung download.

Kekurangan :

1. Tampilan Background nya berwarna hitam membuat kita kesulitan membacanya.
2. Menggunakan Safelink di dalam safelink itu terdapat banyak iklan.
3. Semua file yang anda download di Kuyhaa ber-password.

3. Gigapurbalingga.net

Gigapurbalingga.net ini sama seperti saingannya diatas, berasal dari Indonesia. GigaPurbalingga ini mungkin pemilik situsnya berasal dari Purbalingga sehingga dinamakan GigaPurbalingga. Situs ini menyediakan berbagai software full version. Silakan anda kunjungi jika anda ingin mendownload untuk keperluan komputer anda.

Kelebihan :

1. Tampilan Responsive.
2. Simpe dan Menarik.
3. Tidak anda iklan.
4. User Freandly.
5. Admin Fast Respon.

Kekurangan :

1. Menggunakan link shortener yang membuat anda di alihkan terus menerus hingga ke link yang sebenarnya.
2. Sulitnya berkomentar di situs ini.
3. Ada banyak pop-up dan iklan di shortener link yang dituju.

4. Ad4msan.com

Ad4msan.com adalah situs web penyedia software bajakan secara gratis yang ada di Indonesia, selain itu Ad4msan.com ini juga menyediakan game PC yang berukuran besar maupun kecil. Server download di Ad4msan.com ini mempunyai server download sendiri. Server download di Ad4msan.com terasa seperti di Google Drive sangatlah cepat. Jadi untuk anda yang mencari sofware untuk kebutuhan komputer/laptop anda silakan kunjungi Ad4msan.com untuk mendownload software secara gratis dan full version.

Kelebihan :

1. Sedikit iklannya, namun sesekali klik iklan untuk donasi agar web tersebut bisa berkembang.
2. Simple webnya.
3. Menggunakan server download sendiri.
4. Ada MD5 Hash nya, ini yang membuktikan kalau file yang anda download ini sama dengan apa yang di upload oleh Ad4msan.com.

Kekurangan :

1. Menggunakan link shortener yang membuat anda di alihkan terus menerus hingga ke link yang sebenarnya.
2. Tidak ada proses cara installasi, tidak seperti Bagas31.com
3. Tidak Responsive Template.
4. Menggunakan Safelink, ini yang membuat anda di alihkan terus menerus hingga ke link yang sebenarnya.

5. Download.ipeenk.com

Download.ipeenk.com adalah situs penyedia software yang berada di Indonesia. Disini di sediakan software, windows, design dan software lainnya. Tapi jika saya perhatikan situs Download.ipeenk.com ini lebih mencolok ke kategori game, karena di situs Download.ipeenk.com terdapat banyak sekali game. Jadi ketika kalian ingin mendownload game bisa kunjugi Download.ipeenk.com.

Kelebihan :

1. Menggunakan Google Drive ini yang membuat download anda menjadi kenceng karena berada di server Google.

2. Tidak ada iklan, namun banyak iklan pop-up.

3. Responsive Template.

Kekurangan :

1. Terdapat iklan pop-up membuat anda jengkel.

2. Menggunakan link shortener yang membuat anda di alihkan terus menerus hingga ke link yang sebenarnya.

6. Software182.com

Software182.com adalah situs penyedia software yang menggunakan platform Blogger. Entah kenapa situs ini tidak mengupgrade nya ke Wordpress atau CMS lainnya karena di khawatirkan situs tersebut akan di hapus oleh Google. Disini terdapat banyak sekali software, windows, bootable disk untuk kebutuhan komputer anda. Jadi silakan anda kunjungi situs tersebut untuk mendownload kebutuhan komputer anda.

Kelebihan :

1. Tidak ada iklan.
2. Tidak menggunakan shortener, anda bisa mendownload software langsung ke tujuan link aslinya.

Kekurangan :

1. Tidak Responsive.
2. Tombol share dibawah postingannya membuat tidak enak dipandang.
3. Walaupun tidak menggunakan shortener seperti yang lain, situs ini menggunakan pasted.co dimana isinya link untuk mendownload, unik ya!.

7. GetintoPC.com

GetintoPC.com adalah situs penyedia berbagai software, semua software yang anda cari ada disini. Menggunakan server download sendiri sama seperti Ad4msan.com. Situs ini berasal dari negara asing, alias bukan di Indonesia. Jadi jika anda ingin mendownload software kebutuhan komputer anda disini tempat bagus untuk mendownload.

Kelebihan :

1. Tidak ada iklan.
2. Responsive.
3. Menggunakan server download sendiri, dan sangat cepat.
4. Lengkap!

Kekurangan :

1. Menggunakan shortener link buatan sendiri dari GetintoPC.com yang bersever di Linux jadi anda akan dialihkan terlebih dahulu ke halaman dan otomatis file akan terdownload sendiri.

8. TeamOS-hkrg.com

TeamOS-hkrg.com adalah sekumpulan Team untuk mengulas berbagai software. Situs ini berasal dari asing, alias bukan Indonesia. Jika anda ingin mendownload software disini anda diharuskan untuk login, Jika anda tidak login anda tidak dapat melihat link dan gambar pada situs ini, jika anda tidak memiliki akun silakan anda daftar, gratis kok. Disini terpadat banyak sekali software, software yang terdapat disini crack semua dan pastinya membuat software anda menjadi full version. Disini anda bisa mengupgrade akun anda menjadi VIP dimana anda akan merasakan sensasi yang beda jika menggunakan akun VIP. Jadi jika anda ingin mendownload kebutuhan komputer anda silakan anda kunjungi situs tersebut.

Kelebihan :

1. Software disini sangat lengkap.
2. Tidak ada iklan.
3. Responsive Template.
4. Mempunyai akun TeamOS.

Kekurangan :

1. Anda diharuskan login terlebih dahulu untuk mendownload file disini.
2. Menggunakan shortener link milik TeamOS sendiri yang mana anda akan di alihkan terlebih dahulu kemudian ke link yang aslinya.

9. Repack.me

Repack.me situs ini lebih tepatnya adalah Forum, Forum ini terdapat banyak sekali software. Forum ini berasal dari Rusia dari bahasanya yang digunakan pada Forum ini. Jika anda pernah menginstall suatu software dan diawalnya terdapat logo Repack.me seperti gambar diatas, itu adalah hasil Patch/Repackage dari Repack.me. Semua software disini sudah terbukti full version. Jika anda ingin mendownload software disini, anda diharuskan login terlebih dahulu sama seperti TeamOS-hkrg.com jadi silakan anda daftar terlebih dahulu kemudian download software disini.

Kelebihan :

1. Tidak ada iklan.
2. Anda memiliki akun Repack.me sendiri.
3. Tidak menggunakan shortener link seperti situs web diatas.

Kekurangan :

1. Sulit bahasanya, anda harus menggunakan Add Ons for Google Translate untuk menerjemahkan bahasa asing tersebut.
2. Jika ingin mendownload diharuskan untuk login.
3. Menggunakan link Magnet dari Torrent, dll.

10. AkangSuhAr.com

AkangSuhAr.com adalah situs berasal dari Indonesia. Situs ini mirip sekali seperti Kuyhaa dari segi Template. Seingat saya dulu situs AkangSuhAr.com ini template yang digunakan berwarna putih tapi untuk sekarang AkangSuhAr.com sudah mengganti Templatenya. Disini terdapat banyak software terbaru, jika anda ingin mendownload software yang terbaru silakan kunjungi situs tersebut ya.

Kelebihan :

1. Tidak ada iklan.
2. Terdapat cara installasi yang benar.

Kekurangan :

1. Tampilan Background nya berwarna hitam membuat kita kesulitan membacanya.
2. Menggunakan Safelink di dalam safelink itu terdapat banyak iklan.
3. Semua file yang anda download di Kuyhaa ber-password.

Silakan anda kunjungi di salah satu 10 situs web penyedia software tersebut dan pililah tempat yang bagus menurut anda. Catatan sedikit, untuk 10 situs diatas bisa kapan saja berganti domain, jadi disarankan untuk mencari di pencarian google atau langsung ke link tujuan. Sekian dari saya, Semoga Bermanfaat!

Cara Mempercepat Loading Iklan Google Adsense

2018-04-27T23:19:00.002+07:00

Seperti yang kita ketahui bahwa Java Script atau JQuery itu membuat loading di blog kita menjadi lambat. Dengan lambatnya loading tersebut, itu lah yang membuat iklan Google AdSense anda kadang tampil dan juga tidak tampil atau hanya blank putih saja. Itu sebenarnya adalah perdebatan antara koneksi internet yang tidak stabil dan lambatnya suatu blog me-load Java Script yang ada di template blog ada. Saya akan memberikan solusi buat anda agar blog dan iklan google adsense anda cepat loadingnya.

Sebelum saya menjelaskan silakan anda baca: https://support.google.com/adsense/answer/3221666?hl=id
Disitu pihak google menjelaskan tentang kode iklan asinkron dan sinkron. Jika anda belum memahami apa yang dimaksud oleh pihak Google, disini saya akan menjelaskannya. Jadi, kode iklan asinkron dan sinkron bisa ditampilkan hanya dengan 1 java script saja, tujuannya adalah kecepatan dan pengalaman pengguna yang lebih baik seperti yang telah dijelaskan pihak Google. Jika anda kebiasaan menggunakan kode java script iklan adsense terlalu banyak maka dampaknya adalah iklan adsense anda jarang tampil, atau hanya blank putih saja itu disebabkan oleh java script itu dan lemahnya koneksi internet anda. Ok, saya rasa cukup deskripsinya sekarang ke proses pembuatan.

Cara Mempercepat Loading Iklan Google Adsense

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tema/Template.

3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode </head>

2. Copy & Paste kode berikut ini dan letakkan diatas kode </head>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Catatan:

"Jika terjadi kesalahan? Silakan anda Parse HTML terlebih dahulu."

PARSE HTML

3. Jika biasanya iklan Google AdSense seperti ini :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- advertisement-->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4. Silakan anda hapus kode :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> sehingga menjadi seperti ini :

<!-- advertisement -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

5. Sekarang anda hapus semua kode di template anda selain yang ada diatas kode </head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

6. Simpan Template!

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Mempercepat Loading Iklan Google Adsense

Cara Membuat Iklan Link Ads Adsense Menjadi 2 Kolom 5 Baris

2018-04-27T22:36:00.001+07:00

Peletakan iklan adsense memang sangat berpengaruh untuk penghasilan blog, salah satunya adalah iklan link ads ini. Link ads ini jika ingin menampilkan iklan secara otomatis tidak akan berbentuk seperti gambar ilustrasi dibawah ini. Gambar dibawah ini menunjukkan bahwa iklan adsense ini berbentuk 2 kolom dan 5 baris. Untuk anda yang ingin membuat iklan seperti ini juga, silakan simak baik-baik ya.

Posisi peletakan iklan terbaik dan sangat strategis adalah di dalam artikel. Karena didalam artikel lah pengunjung membaca, berkomentar dan juga mengklik iklan anda. Sebaiknya anda meletakan kode unit iklan bertipe link ini di dalam artikel, anda bisa meletakkan nya di akhir postingan, di awal, atau tengah postingan. Jangan sekali-kali meletakkan iklan bertipe link ini di sidebar ataupun footer karena tidak sesuai dengan kebijakan Google AdSense. Sebenarnya peletakan unit iklan Google Adsense bisa dimana saja, tapi disarankan untuk memasangnya di dalam artikel. Oh iya, Menurut senior blogging iklan bertipe link ini adalah iklan yang membayar CPC paling besar looh dibanding iklan yang bergambar, benarkah? Yup, biar anda tau sendiri silakan anda juga memasang iklan bertipe link ini ke template anda. Ok, langsung saja ke proses pembuatan.

Cara Membuat Iklan Link Ads Adsense Menjadi 2 Kolom dan 5 Baris

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style> gunakan CTRL + F.
2. Copy & Paste kode berikut ini dan letakkan diatas kode ]]></b:skin> atau </style>

<style type='text/css'>
.links-ads{width:336px;height:280px}
@media (max-width:450px){
  .links-ads{width:300px;height:250px}
}
@media (min-width:500px){
  .links-ads{width:336px;height:280px}
}
@media (min-width:800px){
  .links-ads{width:600px;height:300px}
}
</style>

3. Buka Google Adsense
4. Buat unit iklan baru.
5. Pilih Iklan text & bergambar.

Screenshoot :

6. Setelah sudah memilih iklan type text & bergambar, selanjutnya cocokan dengan gambar dibawah ini.

Screenshoot :

7. Jika sudah, klik Simpan dan dapatkan kode.
8. Copy & Paste kode iklan anda ke notepad atau bisa langsung di tempel di blog anda.

Screenshoot :

9. Silakan anda ubah <ins class="adsbygoogle" menjadi <ins class="adsbygoogle links-ads".
10. Silakan anda parse kode iklan anda

PARSE HTML

11. Terakhir, silakan anda letakkan kode iklan yang sudah di parse ke template anda.

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Iklan Link Ads Adsense Menjadi 2 Kolom 5 Baris