Cara Buat Daftar Isi Blog Keren Dengan Flat Ui

Cara Buat Daftar Isi Blog Keren Dengan Flat Ui

fezarzone    08.15    Comment   

Ini yaitu postingan pertama blog gres aku . postingan ini akan mengulas mengenai pembuatan daftar isi pada blog. Sebenarnya sudah sangat banyak cara-cara yang beredar untuk menciptakan daftar isi pada blog (blogspot) sendiri, tetapi mungkin banyak sobat blogger yang mencari daftar isi yang dapat dibilang menarik dan keren tidak monoton atau gitu-gitu saja, oleh karna itu kini aku akan sedikit mengulas mengenai cara pembuatan daftar isi di blog yang disertai dengan gambar thmbnail, daftar isi sendiri juga merupakan media untuk mempermudah para pengunjung yang ingin mengetahui postingan apa saja yang ada didalam blog ataupun website kita. sepakat Langsung saja, berikut Cara pembuatan :

Daftar Isi/Site Map

HTML Code SiteMap

1. Login ke blog Anda
2. Pilih Laman, lalu klik laman gres (buat laman baru)
3. Ketikkan aba-aba dibawah ini, tetapi pilih mode posting pada HTML bukan yang mode posting Compose dengan hukum ganti seoblogfaster.blogspot.com dengan alamat blog anda. 

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Pasang CSS Code SiteMap

1. Buka hidangan template
2. Edit HTML
3. Pastekan aba-aba dibawah ini sempurna diatas </style>

 /* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

simpan template dan lihat kesudahannya  itu yaitu Sitemap / daftar isi anda.

Ganti warna yang kalian suka
#f5f5f5 = header Abu2
#ffaaa4 = Header Pink
#666    = backgroun abu2
dan seterusnya
lihat : Kode Warna Flat UI Color Material Desigen

Cara Buat Daftar Isi Blog Keren Dengan Flat Ui

Cara Buat Daftar Isi Blog Keren Dengan Flat Ui

fezarzone    08.15    Comment   

Ini yaitu postingan pertama blog gres aku . postingan ini akan mengulas mengenai pembuatan daftar isi pada blog. Sebenarnya sudah sangat banyak cara-cara yang beredar untuk menciptakan daftar isi pada blog (blogspot) sendiri, tetapi mungkin banyak sobat blogger yang mencari daftar isi yang dapat dibilang menarik dan keren tidak monoton atau gitu-gitu saja, oleh karna itu kini aku akan sedikit mengulas mengenai cara pembuatan daftar isi di blog yang disertai dengan gambar thmbnail, daftar isi sendiri juga merupakan media untuk mempermudah para pengunjung yang ingin mengetahui postingan apa saja yang ada didalam blog ataupun website kita. sepakat Langsung saja, berikut Cara pembuatan :

Daftar Isi/Site Map

HTML Code SiteMap

1. Login ke blog Anda
2. Pilih Laman, lalu klik laman gres (buat laman baru)
3. Ketikkan aba-aba dibawah ini, tetapi pilih mode posting pada HTML bukan yang mode posting Compose dengan hukum ganti seoblogfaster.blogspot.com dengan alamat blog anda. 

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Pasang CSS Code SiteMap

1. Buka hidangan template
2. Edit HTML
3. Pastekan aba-aba dibawah ini sempurna diatas </style>

 /* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

simpan template dan lihat kesudahannya  itu yaitu Sitemap / daftar isi anda.

Ganti warna yang kalian suka
#f5f5f5 = header Abu2
#ffaaa4 = Header Pink
#666    = backgroun abu2
dan seterusnya
lihat : Kode Warna Flat UI Color Material Desigen

Cara Menghosting Java Script Di Goole Drive Sendiri

Cara Menghosting Java Script Di Goole Drive Sendiri

fezarzone    08.15    Comment   

Javascript

Membuat java script sendiri tentu memerlukan daerah hosting file tersebut. Sebenarnya sudah banyak tutorial di Google yang menjelaskan cara hosting file di Google Drive. Saya mencoba memperjelas dan memudahkan cara hosting file khususnya file js blogger untuk defer javascript dan keperluan lain.

Cara menghosting file js di Google Drive berikut yaitu langkah-langkahnya.

1. Membuat File Java Script dengan Ekstensi .js

Menghosting file js di Google Drive, maka langkah pertamanya yaitu menyiapkan file jsnya terlebih dahulu yang akan kita hosting. Contoh saja, berikut cara menghosting sebuah javascript menyerupai di bawah ini yang saya ambil dari tutorial memasang komentar Blogger, Disqus, dan Facebook. yang diperoleh dari blog kompiajaib.

 <script type='text/javascript'>
//<![CDATA[
var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script> 

Perhatian: Java script tidak semuanya ditulis dengan //<![CDATA[ di awal dan  //]]> di tamat isyarat javascript-nya.

Maka, dalam menciptakan file js yang diambil dari javascript di atas, silahkan copy isyarat di di antara kode <script type='text/javascript'>
//<![CDATA[
dan

//]]>
</script>

Contoh;

 <script type='text/javascript'>

//<![CDATA[

var disqus_shortname="USERNAME DISQUS";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});

//]]>

</script>

contohnya dengan nama java.js kemudian seimoan dengan mengklik tombol Save.

2.  Menghosting JS di Google Drive

Setelah mempunyai file js, selanjutnya kita akan menghosting file js tersebut di Google Drive. anda tentu saja sudah mempunyai Google Drive yaitu prodak google yang sanggup diakses gratis dengan email google kita.

Sekarang kanal Google Drive anda dan login dengan akun Google Anda.

Setelah anda masuk, Kemudian buatlah folder gres khusus untuk hosting file-file js. caranya, klik tombol NEW di kiri atas kemudian pilih option Folder dan silahkan anda beri nama folder-nya dengan Hosting JS.

Jika folder selesai dibuat, langkah selanjutnya adalah:

1. klik kanan pada folder yang anda buat tadi dan pilih option Share, 
2. Dialog box akan muncul, pada obrolan box yang muncul, klik Advance di pojok kanan bawah obrolan box tersebut.
3. Terakhir pada obrolan box berikutnya, klik Change pada option Private - Only you can access dan pilih On - Public on the web kemudian klik tombol Save.

3. Membuat URL Java Script

Setelah langkah penempatan java script pada google Grive selesai, kini tinggal mengkopi URL java script tersebut.

Pada obrolan box berikutnya silahkan copy URL di bab atas box yang biasanya otomatis sudah di-block jadi kita tinggal CTRL + C aja di keyboard kemudian klik tombol Done pada obrolan box tersebut dan paste URL tadi di notepad.

Contoh URL java sript

https://drive.google.com/folderview?id=0Bz4YdwRI3rnCNk85QzV3N01RbFU&usp=sharing

 Kode yang diwarnai pada URL di atas yaitu isyarat yang diharapkan untuk langkah selanjutnya. Lalu buat URL menyerupai ini.

https://googledrive.com/host/KODE ID FOLDER

Silahkan ganti KODE ID FOLDER dengan isyarat yang yang telah diwarnai di ats tadi.

Simpan URL folder java script anda alasannya yaitu akan kita perlukan untuk langkah selanjutnya. Namai saja URL tadi dengan nama URL Folder Hosting JS.

4. Upload Java Script

Untuk meng upload file JS kita dalam ekstensi .js, silahkan klik 2 kali pada folder Hosting JS yang kita buat tadi di Google Drive. Setelah folder terbuka, silahkan upload file js yang sudah kita buat pada langkah pertama tadi dengan klik tombol merah NEW di pojok kiri atas dan pilih option File Upload.

Untuk memanggil file JS yang kita hosting di Google Drive tadi, kita tinggal menambahkan nama file js yang kita upload tadi pada URL Folder Hosting JS yang sudah anda buat tadi.

contoh:

https://googledrive.com/host/0Bz4YdwRI3rnCNk85QzV3N01RbFU/contoh.js

Dengan ini anda berhasil menciptakan URL tersebut yang kita sebut sebagai URL hosting js di Google Drive. Setelah itu, tinggal mengganti nama file js saja untuk memanggil file js lainnya yang diupload pada folder anda tersebut di Google drive.

UPDATE

Saat ini Google sudah menutup hosting file untuk Java Script pada Google Drive menyerupai di atas. Silahkan gunakan alternatif lain menyerupai Github atau Firebase.

Cara Menciptakan Kolom Komentar Disqus, Blogger, Facebook Jadi Satu Show Hide

Cara Menciptakan Kolom Komentar Disqus, Blogger, Facebook Jadi Satu Show Hide

fezarzone    08.15    Comment   

Komentar Blogger

Membuat Komentar Disqus diblog memang sudah banyak dijelaskan diblog lain, tapi ini yaitu bagaimana cara menciptakan kolom komentar disqus, facebook, dan blogger menjadi satu. sehingga pengunjung blog sanggup menentukan dengan sistem apa ia akan berkomentar.

komentar facebook pada blog juga tentunya akan masuk pada pemberitahuan akun facebook user yang berkomentar, sehingga memudahkan pengguna facebook untuk berkomentar dan mengetahui aktivoitas konten yang ia pernah komentari.

Bagi anda yang ingin mencoba untuk menerapkannya, silahkan ikuti langkah-langkahnya pembuatannya di bawah ini.

1. Kode CSS Multiple Komentar

Silahkan letakan isyarat CSS ini di atas isyarat </head>. Jika sebelumnya sudah memasang komentar blogger, maka anda harus menghapus isyarat CSS komentar blogger sebelumnya terlebih dahulu.

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ #comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif} #comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd} #comment_block{padding-top:25px} .comment_header{margin-left:5px} .comment_avatar{height:48px;width:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU76G25deasC6vEdqZQO09TmKkmVJ-0ZdaRk3M_obZiEgwwUIoR9mfpCC2WnHJkV1CD4toK7pHSATbZtz2vhiNJ0VHDknKdqFdSe-hWJFe-Ajwaq5KPTW9i4G7iedzjaVif-_g40tVoTw/s48/anon48.gif) center center no-repeat #F0F0F0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px} .comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none} .comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px} .comment_name a{text-decoration:none;font-weight:500} .comment_name a:hover{color:#0088b2;text-decoration:none} .comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em} .comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0} .comment_body p img{vertical-align:middle} .comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1} .comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px} .comment-set{margin-bottom:30px} .comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px} .comment_child .comment_wrap{padding-left:50px} .comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666} .comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important} .unneeded-paging-control{display:none} .comment_reply_form{padding:0 0 0 48px} .comment_reply_form .comment-form{width:100%} .comment_reply,.comment_service a{display:inline-block} .comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px} .comment-form,.comment_img,.comment_youtube{max-width:100%!important} .comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px} .comment_form{margin-top:-20px} .comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700} .comment_form a:hover{color:#fff} .comment_author_flag{display:none} .comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px} a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666} #comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .comment-form{margin-top:25px!important} .comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0} .comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444} .comment_youtube{width:400px;height:225px;display:block;margin:auto} .comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box} .comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent} .deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px} .blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555} iframe.blogger-iframe-colorize{max-height:250px} .small-button a{color:#f1f1f1!important} .small-button a:hover{color:#fff!important} .blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee} .blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none} .facebook-bar{margin:20px 20px 0 5px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none} .blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box} .blogger-box,.facebook-box{display:none} .fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important} .fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff} .comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px} .comment-text:after{content:'\f061';font-family:FontAwesome;color:#555;margin-left:5px} /*]]>*/ </style> </b:if>

alasannya yaitu tamplate yang anda gunakan mungkin mempunyai pengaturan yang berbeda, silakan anda atur sendiri untuk menyesuaikan tampilan

2. Kode HTML Multiple Komentar (Disqus, Facebook, dan Blogger)

Peletakan isyarat HTML ini penting untuk memunculkan kolom komentar yang sudah didesain dengan CSS diatas. tanpa isyarat ini maka kolom komentar mustahil sanggup tampil pada blog sobat.
perhatikan langkah ini baik-baik alasannya yaitu pada cara inilah yang menentukan kolom komentar disqus, facebook, dan blogger anda dimunculkan.

a. Menghapus Kode HTML Sistem Komentar Sebelumnya

Sebelum anda memasang isyarat HTML multiple komentar ini, sebaiknya anda hapus terlebih dahulu semoga tidak terjadi kesalahan.

Cari isyarat yang ibarat di bawah ini

               <b:includable id='comment-form' var='post'>...</b:includable>               <b:includable id='commentDeleteIcon' var='comment'>...</b:includable>               <b:includable id='comment_count_picker' var='post'>...</b:includable>               <b:includable id='comment_picker' var='post'>...</b:includable>               <b:includable id='comments' var='post'>...</b:includable>

b. Mengganti Kode HTML dengan Sistem Multiple

Setelah Kode diatas ditemukan dan di hapus, Kemudian ganti semua isyarat di atas dengan isyarat di berikut ini.

               <b:includable id='comment-form' var='post'>   <div class='comment-form'>     <b:if cond='data:mobile'>       <h4 id='comment-post-message'>         <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>       <p><data:blogCommentMessage/></p>       <data:blogTeamBlogMessage/>               <b:if cond='data:blog.pageType == &quot;static_page&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>     <b:else/>       <h4 id='comment-post-message'><data:postCommentMsg/></h4> <div id='threaded-comment-form'>       <p><data:blogCommentMessage/> <span class='small-button'> <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span> </span>   </p> <div id='emo-box' style='display:none'>   <div class='comment_emo_list'/> </div>       <data:blogTeamBlogMessage/>               <b:if cond='data:blog.pageType == &quot;static_page&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>       </div>     </b:if>     <data:post.friendConnectJs/>     <data:post.cmtfpIframe/>     <script type='text/javascript'>       BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);     </script>   </div> </b:includable>               <b:includable id='commentDeleteIcon' var='comment'>   <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>     <b:if cond='data:showCmtPopup'>       <div class='goog-toggle-button'>         <div class='goog-inline-block comment-action-icon'/>       </div>     <b:else/>       <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>     </b:if>   </span> </b:includable>               <b:includable id='comment_count_picker' var='post'>   <b:if cond='data:post.forceIframeComments'>     <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>     </span>   <b:else/>     <b:if cond='data:post.commentSource == 1'>       <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>       </span>     <b:else/>       <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>         <data:post.commentLabelFull/>:       </a>     </b:if>   </b:if> </b:includable>               <b:includable id='comment_picker' var='post'>   <b:if cond='data:post.forceIframeComments'>     <b:include data='post' name='iframe_comments'/>     <b:if cond='data:post.showThreadedComments'>       <b:include data='post' name='comments'/>     <b:else/>       <b:include data='post' name='comments'/>     </b:if>   <b:else/>     <b:if cond='data:post.commentSource == 1'>       <b:include data='post' name='iframe_comments'/>     <b:else/>       <b:if cond='data:post.showThreadedComments'>         <b:include data='post' name='comments'/>       <b:else/>         <b:include data='post' name='comments'/>       </b:if>     </b:if>   </b:if> </b:includable>               <b:includable id='comments' var='post'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='facebook-bar commentbtn' onclick='toggleVisibility(&apos;facebook-box&apos;)'> Facebook </div> <div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'> Blogger </div> <div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'> Disqus </div> <div class='comment-text'> Pilih Sistem Komentar Yang Anda Sukai </div> <div class='clear'> </div> <div class='disqus-box' id='disqus-box'> <div class='comments' id='comments'> <b:include data='post' name='disqus-comment'/> </div> </div> <div class='blogger-box' id='blogger-box'> <div class='comments' id='comments2'>         <b:if cond='data:post.allowComments'>          <h3 id='total-comments'><data:post.commentLabelFull/></h3>                     <b:if cond='data:post.commentPagingRequired'>           <span class='paging-control-container'>            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>            &#160;            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>            &#160;            <data:post.commentRangeText/>            &#160;            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>            &#160;            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>           </span>          </b:if>                                <div class='clear'/>          <div id='comment_block'>           <b:loop values='data:post.comments' var='comment'>            <div class='data:comment.adminClass comment-set' data-level='0' expr:id='data:comment.anchorName'>             <b:if cond='data:post.adminClass == data:comment.adminClass'>              &lt;div class=&#39;comment_inner comment_admin&#39;&gt;             <b:else/>              &lt;div class=&#39;comment_inner&#39;&gt;             </b:if>              <div class='comment_area'>              <div class='comment_header'>              <div class='comment_avatar'>       <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>               </div>               <div class='comment_name'>                <b:if cond='data:comment.authorUrl'>                 <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>                <b:else/>                 <data:comment.author/>                </b:if>                <b:if cond='data:comment.author == data:post.author'>                   <span class='comment_author_flag'>Admin</span>                </b:if>               </div>                        <div class='comment_service'>                <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>                          </div>               <div class='clear'/>              </div>              <div class='comment_body'>               <b:if cond='data:comment.isDeleted'>                <span class='deleted-comment'><data:comment.body/></span>               <b:else/>                <p><data:comment.body/></p> <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'><i class='fa fa-reply'/> Balas</a>                           <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               <div class='clear'/>                                                      </b:if>                                                   </div>               <div class='clear'/>             &lt;/div&gt;             <div class='clear'/>             </div>             <div class='comment_child'/>             <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>                       </div>           </b:loop>                     </div>           <div class='clear'/>          <b:if cond='data:post.commentPagingRequired'>           <span class='paging-control-container'>            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>            &#160;            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>            &#160;            <data:post.commentRangeText/>            &#160;            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>            &#160;            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>           </span>          </b:if>          <div class='clear'/>          <div class='comment_form' id='comment-form'>                          <b:if cond='data:post.embedCommentForm'>            <b:if cond='data:post.allowNewComments'>                                                                  <b:include data='post' name='threaded-comment-form'/>            <b:else/>             <data:post.noNewCommentsText/>            </b:if>           <b:else/>            <b:if cond='data:post.allowComments'>             <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>            </b:if>           </b:if>          </div>         </b:if>        </div>                   <script type='text/javascript'>        //<![CDATA[        if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}        //]]>        </script>           <script type='text/javascript'>             <b:if cond='data:post.numComments != 0'>          var Items = <data:post.commentJso/>;          var Msgs = <data:post.commentMsgs/>;          var Config = <data:post.commentConfig/>;         <b:else/>          var Items = {};          var Msgs = {};          var Config = {&quot;maxThreadDepth&quot;:&quot;0&quot;};         </b:if>        //<![CDATA[ function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;      //]]>          </script> </div> <div class='facebook-box' id='facebook-box'> <div class='comments-fb'> <b:include data='post' name='fb-comments'/> </div> </div> </b:if> </b:includable>               <b:includable id='disqus-comment' var='post'>             <script type='text/javascript'>                 var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;                 if (!disqus_blogger_current_url.length) {                     disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;                 }                 var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;                 var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;             </script>             </b:includable>               <b:includable id='fb-comments' var='post'>             <div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>             </b:includable>

3. Mengganti Multiple Komentar Lama dengan HTML disqus, facebook dan blogger

Cari isyarat yang ibarat di bawah ini.

               <b:includable id='threaded-comment-form' var='post'>...</b:includable>               <b:includable id='threaded_comment_js' var='post'>...</b:includable>  
 
 

Kemudian ganti semua isyarat di atas dengan isyarat di bawah ini.

               <b:includable id='threaded-comment-form' var='post'>   <div class='comment-form'> <div id='form-wrapper'>     <b:if cond='data:mobile'>       <p><data:blogCommentMessage/></p>       <data:blogTeamBlogMessage/>               <b:if cond='data:blog.pageType == &quot;static_page&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>     <b:else/> <div id='threaded-comment-form'>       <p><data:blogCommentMessage/> <span class='small-button'> <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span> </span>   </p> <div id='emo-box' style='display:none'>   <div class='comment_emo_list'/> </div>       <data:blogTeamBlogMessage/>               <b:if cond='data:blog.pageType == &quot;static_page&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>       <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>         </b:if>       </div>     </b:if> </div>     <data:post.friendConnectJs/>     <data:post.cmtfpIframe/>     <script type='text/javascript'>       BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);     </script>   </div> </b:includable>               <b:includable id='threaded_comment_js' var='post'>   <script type='text/javascript'>     (function() {       var items = <data:post.commentJso/>;       var msgs = <data:post.commentMsgs/>;       var config = <data:post.commentConfig/>;        //<![CDATA[ function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;      //]]>   </script> </b:includable>  

4. Kode Javascript Komentar Disqus dan Facebook

Letakan isyarat javascript di bawah ini sempurna di atas isyarat </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script type='text/javascript'> //<![CDATA[ var disqus_shortname="USERNAME DISQUS"; var disqus_url = disqus_blogger_current_url;  (function () {     "use strict";     var get_comment_block = function () {         var block = document.getElementById('comments');         if (!block) {             block = document.getElementById('disqus-blogger-comment-block');         }         return block;     };     var comment_block = get_comment_block();     if (!!comment_block) {         var disqus_div = document.createElement('div');         disqus_div.id = 'disqus_thread';         comment_block.innerHTML = '';         comment_block.appendChild(disqus_div);         comment_block.style.display = 'block';         var dsq = document.createElement('script');         dsq.async = true;         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';         (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);     } })();  !function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");      var divs = ["disqus-box", "blogger-box", "facebook-box"];     var visibleDivId = null;     function toggleVisibility(divId) {       if(visibleDivId === divId) {         visibleDivId = null;       } else {         visibleDivId = divId;       }       hideNonVisibleDivs();     }     function hideNonVisibleDivs() {       var i, divId, div;       for(i = 0; i < divs.length; i++) {         divId = divs[i];         div = document.getElementById(divId);         if(visibleDivId === divId) {           div.style.display = "block";         } else {           div.style.display = "none";         }       }     }  $(".commentbtn").click(function (e) { $(this).addClass("btncurrent").siblings().removeClass("btncurrent"); }); //]]> </script> </b:if>    Ganti isyarat USERNAME DISQUS dengan username Disqus blog Anda. Setelah itu anda sanggup menghosting isyarat javascript yang ada di antara isyarat //<![CDATA[ dan isyarat //]]>.

Jika anda tidak mempunyai hosting sendiri untuk java script disqus maka Anda sanggup memakai Google Drive untuk menghosting javascript-nya.
kalau belum tau cara meng hosting java script anda sanggup mempelajarinya di cara hosting java script.
Setelah meng-hosting javascript komentar disqus anda, silahkan gunakan javascript defer sehingga hasil java script diatas risikonya akan menjadi ibarat di bawah ini.

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> </b:if>  

kalau anda sudah menghosting script maka ganti isyarat URL HOSTING JAVASCRPT DI SINI dengan url hosting javascript anda tadi.

6. Selesai

Perhatikan baik-baik langkah demi langkahnya, semoga tidak terjadi kesalahan. jangan lupa untuk membackup terlebih dahulu template blog anda. semoga kalau anda tidak berhasil template anda rusak maka masih mempunyai salinan lamanya. dan pastikan blog anda sudah suport font awesome semoga hail menciptakan kolom komentar disqus dan facebook anda maksimal.

Cara Menciptakan List Pos Tauto Read More Sumaries Pada Home Page Blogger

Cara Menciptakan List Pos Tauto Read More Sumaries Pada Home Page Blogger

fezarzone    08.15    Comment   

3 teladan model sumaries

Cara menciptakan auto read more manis pada home page blogger. jikalau kita menciptakan blog dan dengan mengunakan template standart, maka list post pada home page terkesan kaku dan monoton. mungkin kita juga bosan dengan template bawaan blogger yang kaku itu. Atau mungkin jikalau kita mwnginstal template yang kita download dari sumber template gratisan mungkin akan terkesan pasaran dan tidak sesuai harapan.
nah kali ini saya akan membagikan cara begaimana menciptakan list post pada halaman depan atau recent post di Home Page blogger menjadi berbeda. dan mungkin saja cocok dengan impian anda.

jikalau anda berminat merupah tampilan home page blogger anda, maka dapat dengan mengikuti langkah-langkah berikut.

Baca Juga Cara Membuat Post By Label Seperti Blog Magazine

Masuk Pada laman Template Edit HTML

Masuk blogger
Pilih Menu Template
Klik Edit HTML

Setelah anda masuk Pada laman pengeditan HTML Blogger, lalu Cari instruksi <b:includable id='pos t' var='pos t'>
Untuk Mencari Kode tersebut dengan Praktis Klik CTRL+F lalu ketikan instruksi tersebut pada kolom pencarian di pojok atas.

Jika sudah anda temukan maka ganti dengan instruksi berikut:

 <b:includable id='post' var='post'>    <article expr:class='"blogger-post blogger-post-" + data:blog.pageType' expr:id='"post-" + data:post.id'>     <b:if cond='data:blog.pageType != "item"'>       <b:if cond='data:blog.pageType != "static_page"'>         <div class='blogger-post-part blogger-post-thumbnail-area'>           <b:if cond='data:post.thumbnailUrl'>             <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>           </b:if>         </div> </b:if>     </b:if>      <div class='blogger-post-part blogger-post-body-area'>        <h3 class='blogger-post-title'>         <b:if cond='data:post.title'>           <b:if cond='data:post.link'>             <a expr:href='data:post.link'><data:post.title/></a>           <b:else/>             <b:if cond='data:post.url'>               <b:if cond='data:blog.url != data:post.url'>                 <a expr:href='data:post.url'><data:post.title/></a>               <b:else/>                 <data:post.title/>               </b:if>             <b:else/>               <data:post.title/>             </b:if>           </b:if>         <b:else/>           [Untitled]         </b:if>       </h3> <div class='blogger-post-body'>         <b:if cond='data:blog.pageType == "item"'>           <data:post.body/>         <b:else/>           <b:if cond='data:blog.pageType == "static_page"'>             <data:post.body/>           <b:else/>             <b:if cond='data:post.snippet'>               <data:post.snippet/>             <b:else/>               No content.             </b:if>           </b:if>         </b:if>       </div> <footer class='blogger-post-footer'>         <div class='blogger-post-footer-line blogger-post-footer-line-1'>           <span class='blogger-post-author vcard'>             <b:if cond='data:top.showAuthor'>               <data:top.authorLabel/> <span class='fn'>               <b:if cond='data:post.authorProfileUrl'>                 <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>               <b:else/>                 <span class='g-profile'><data:post.author/></span>               </b:if>               </span>             </b:if>           </span> <span class='blogger-post-timestamp'>           <b:if cond='data:top.showTimestamp'>             <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>           </b:if>           </span> <span class='blogger-post-comment-link'>           <b:if cond='data:blog.pageType != "item"'>             <b:if cond='data:blog.pageType != "static_page"'>               <b:if cond='data:post.allowComments'>                 <a expr:href='data:post.url + "#comments"'><data:post.commentLabelFull/></a>               </b:if>             </b:if>           </b:if>           </span>         </div> <div class='blogger-post-footer-line blogger-post-footer-line-2'>           <span class='blogger-post-labels'>             <b:if cond='data:post.labels'>               <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>               </b:loop>             </b:if>         <b:include data='post' name='postQuickEdit'/>           </span>         </div> </footer>     </div> </article> </b:includable> 

selanjutnya Pilih salah satu dari tiga model berikut

Model Home Page Blogger 1

Home Blogger 1

 #blog-pager {clear: both;} .blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;} .blogger-post:after {  content:" ";  display:block;  clear:both;} .blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;} .blogger-post-title a{color: #777;} .blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJ5SRAlRiGxV0JXfsn6z_-E1tFqTWuUAoC5M_y71sPpkCcLrEqvMXAm4vT6q9nd-iyNdHAZ_uz6SWn4eqcj0iiTjFBQRXYrR2AcB7iRaJLdYe2_c48R9k_opOyKOlaStwFHjAehxyVi1S/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;} .blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;} .blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;} .blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;} .blogger-post-footer a{color: #888;} .blogger-post-item, .blogger-post-static_page {width:auto;} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px;} .icon-action {width: 10px;height:10px;} 

Model Home Page Blogger 2

Home Blogger 2

 .blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;} .blogger-post:after { content:" "; display:block; clear:both;} .blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;} .blogger-post-title a{color: #888;} .blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJ5SRAlRiGxV0JXfsn6z_-E1tFqTWuUAoC5M_y71sPpkCcLrEqvMXAm4vT6q9nd-iyNdHAZ_uz6SWn4eqcj0iiTjFBQRXYrR2AcB7iRaJLdYe2_c48R9k_opOyKOlaStwFHjAehxyVi1S/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;} .blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;} .blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;} .blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;} .blogger-post-footer a {color: #888;} .blogger-post-item, .blogger-post-static_page {height:auto} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px} .icon-action {width: 10px;height:10px;} 

model Home Page Blogger 3

Home Blogger 3

 .blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;} .blogger-post:after {  content:" "; display:block;clear:both;} .blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;} .blogger-post-title a{color: #888;} .blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJ5SRAlRiGxV0JXfsn6z_-E1tFqTWuUAoC5M_y71sPpkCcLrEqvMXAm4vT6q9nd-iyNdHAZ_uz6SWn4eqcj0iiTjFBQRXYrR2AcB7iRaJLdYe2_c48R9k_opOyKOlaStwFHjAehxyVi1S/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;} .blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;} .blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;} .blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;} .blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;} .blogger-post-footer a {color: #888;} .blogger-post-item, .blogger-post-static_page {height:auto} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px} .icon-action {width: 10px;height:10px;} 

Catatan:

• Untuk mengubah gambar default saat tidak ada thumbnail, ganti url gambar berjenis JPG maupun PNG yang kita inginkan (contohnya :url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJ5SRAlRiGxV0JXfsn6z_-E1tFqTWuUAoC5M_y71sPpkCcLrEqvMXAm4vT6q9nd-iyNdHAZ_uz6SWn4eqcj0iiTjFBQRXYrR2AcB7iRaJLdYe2_c48R9k_opOyKOlaStwFHjAehxyVi1S/s1600/no-image-available.png); 

• Untuk mengubah Background, ganti instruksi warna violet: (#F6F6F6 untuk background post) dan (#E9E9E9 - untuk goresan pena pada footer.)

• Tambahkan gaya instruksi CSS yang kita pilih, persis diatas tag instruksi  "]]></b:s k in>"

Merubah Resolusi dari gambar Thumbnails.

Sekarang kita akan memperbaiki/merubah resolusi thumbnail standard (Standard pada teladan diatas s72-c resolution), itulah yang mengakibatkan thumbnails terlihat "BLUR"/kurang jelas. maka langka selanjutnya yakni cari instruksi HTML berikut ini '<b:widget id='Blog1' :

 <b:if cond='data:blog.pageType != "static_page"'>   <b:if cond='data:blog.pageType != "item"'>  <script type='text/javascript'>                  function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img"); for(var i=0;i<thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; } } changeThumbSize("Blog1",210);                  </script>   </b:if> </b:if> 

lihat baik-baik  ANGKA 210 ("changeThumbSize("Blog1",210);" ) angka tersebut yakni resolusi gambar gres yang ingin kita terapkan dan resolusi tersebut juga tergantung pada ukuran masing-masing thumbnail yang termasuk dalam instruksi CSS di atas (thumbnail default). Jika kita meningkatkan ukuran thumbnail, kita juga perlu memodifikasi ukuran ini juga.

Simpan perubahan template anda dengan mengklik tombol Save.

Selesai...

Jangan Lupa membackup template anda terlebih dahulu untuk mencegah kerusakan template.

Kotak Isyarat Atau Syntax Highlighter Premium Features

Kotak Isyarat Atau Syntax Highlighter Premium Features

fezarzone    08.15    Comment   

syntax blog

Setelah sebelumnya sudah memposting cara Kotak instruksi atau Syntax Highlighter ibarat arlina, kali ini yaitu cara menciptakan sintax full features dari blog bule

baik pribadi saja berikut langkah-langkahnya:

1. Masuk Laman Template edit HTML

Seperti biasa kalau mau merubah template maka masuk laman edit HTML.
lalu letakan javascript di bawah ini sempurna diatas instruksi </head>

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script> 

2. Menerapkan CSS Syntax Highlighter
Unttuk memasang instruksi CSSnya copy instruksi berkut dan letakan di atas ]]></b:skin>

.dp-highlighter{font-family:"Consolas","Monaco","Courier New",Courier,monospace; font-size:12px; background-color:#E7E5DC; width:99%; overflow:auto; margin:18px 0 18px 0 !important; padding-top:1px; /* adds a little border on top when controls are hidden */}  /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span{margin:0; padding:0; border:none} .dp-highlighter a, .dp-highlighter a:hover{background:none; border:none; padding:0; margin:0} .dp-highlighter .bar{padding-left:45px} .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar{padding-left:0px} .dp-highlighter ol{list-style:decimal; /* for ie */background-color:#fff; margin:0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */padding:0px; color:#5C5C5C} .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li{list-style:none !important; margin-left:0px !important} .dp-highlighter ol li, .dp-highlighter .columns div{list-style:decimal-leading-zero; /* better look for others,override cascade from OL */list-style-position:outside !important; border-left:3px solid #6CE26C; background-color:#F8F8F8; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:14px} .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div{border:0} .dp-highlighter .columns{background-color:#F8F8F8; color:gray; overflow:hidden; width:100%} .dp-highlighter .columns div{padding-bottom:5px} .dp-highlighter ol li.alt{background-color:#FFF; color:inherit} .dp-highlighter ol li span{color:black; background-color:inherit}  /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol{margin:0px} .dp-highlighter.collapsed ol li{display:none}  /* Additional modifications when in print-view */ .dp-highlighter.printing{border:none} .dp-highlighter.printing .tools{display:none !important} .dp-highlighter.printing li{display:list-item !important}  /* Styles for the tools */ .dp-highlighter .tools{padding:3px 8px 3px 10px; font:9px Verdana,Geneva,Arial,Helvetica,sans-serif; color:silver; background-color:#f8f8f8; padding-bottom:10px; border-left:3px solid #6CE26C} .dp-highlighter.nogutter .tools{border-left:0} .dp-highlighter.collapsed .tools{border-bottom:0} .dp-highlighter .tools a{font-size:9px; color:#a0a0a0; background-color:inherit; text-decoration:none; margin-right:10px} .dp-highlighter .tools a:hover{color:red; background-color:inherit; text-decoration:underline}  /* About obrolan styles */ .dp-about{background-color:#fff; color:#333; margin:0px; padding:0px} .dp-about table{width:100%; height:100%; font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important} .dp-about td{padding:10px; vertical-align:top} .dp-about .copy{border-bottom:1px solid #ACA899; height:95%} .dp-about .title{color:red; background-color:inherit; font-weight:bold} .dp-about .para{margin:0 0 4px 0} .dp-about .footer{background-color:#ECEADB; color:#333; border-top:1px solid #fff; text-align:right} .dp-about .close{font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important; background-color:#ECEADB; color:#333; width:60px; height:22px}  /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments{color:#008200; background-color:inherit} .dp-highlighter .string{color:blue; background-color:inherit} .dp-highlighter .keyword{color:#069; font-weight:bold; background-color:inherit} .dp-highlighter .preprocessor{color:gray; background-color:inherit} 

3.  menerapkan Java Script Syntax
untuk memasang java scriipt syntax anda cari terlebih dahulu instruksi </body>. letakan instruksi berikut diatas instruksi </body>

<!-- Add-in Script for syntax highlighting --> <script language="javascript"> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script> 

4. Membuat Postingan dengan Syntax atau Kotak Kode

a. Kode Syntax untuk Java Script

<pre class="JScript" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre> 

b. Kode Syntax untuk CSS

<pre class="CSS" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre> 

c. Kode Syntax untuk HTML

<pre class="HTML" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre> 

d. Kode Syntax untuk Jquery

<pre class="JQuery" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI </pre> 

Selesai...

demikian cara menciptakan syntax highlighter. baca juga cara menciptakan kotak Kode post blog