Tutorial Menciptakan Blog Yang Baik Dan Benar Gratis (Blogger Pemula)

Tutorial Menciptakan Blog Yang Baik Dan Benar Gratis (Blogger Pemula)

fezarzone    08.15    Comment   

Blogger -

Tutorial Membuat Blogger Pemula dari 0 Sampai Jadi

Membuat blog bukan hal yang sulit. Namun, menciptakan blog dengan benar perlu perhatian khusus dan detilenya dihentikan terlewatkan biar blog sanggup diakses oleh semua kalangan. Apabila blog sudah gampang diakses khususnya dari mesin pencari ibarat Google, tentusaja apa yang kita tulis akan lebih mengatakan manfaat bagi lebih banyak orang yang mencari. Kemudahan jalan masuk mesin pencari terhada blog kita disebut SEO. Baca: Memahami SEO dan Mekanismenya Pada Mesin Pencari Google

Mengapa Saya Harus Membuat Blog di Blogger / Blogspot?

Kenapa harus menciptakan blog di blogger / blogspot? padahal, banyak juga penyedia layanan blog gratis selain blogger, ibarat WordPress, Webly, BlogDetik dan lain lain. Sebenarnya simpel, untuk menentukan platform mana yang terbaik untuk menciptakan blog. Saya menentukan blogger / blogspot, alasannya berbagai kelebihanya, antara lain:

1. Blogger itu Milik Google - Blogger.com sering kita kenal sebagai blogspot, alasannya pada domain yang kita buat harus menyertakan blogspot.com. Kita tahu Google yaitu mesin pencari terbaik di dunia. Sehingga, secara tidak eksklusif blogger merupakan penyedia layanan blog yang istimewa, selain itu blogger gampang sekali mendapat peringkat baik di mesin pencari.
2. Blogger itu User Friendly - Apa itu User Friendly? user friendly yaitu sesuatu yang gampang digunakan. Inilah salah satu alasan kengapa saya menyarankan pada Anda untuk menciptakan blog di blogger.com / blogspot, selain gratis, blogger.com juga gampang untuk digunakan, walaupun bagi para pemula.
3. Blgger itu SEO Friendly - Apa itu SEO Friendly? SEO friendly yaitu ramah dengan mesin pencari. Blogger itu gampang sekali di meningkatkan secara optimal tidak perlu repot mendownload sebuah pluggin. Dan kalau Anda tidak paham dengan coding HTML, banyak kok penyedia templat SEO frindly yang gratis tanpa harus repot menutak-atik code HTML.
4. Blogger Bisa di Daftarkan Google Adsesnse - Apa itu Google Adsense? Google Adsense Adalah Salah Satu Produk Google Inc. Adsense menunjukkan jasa periklanan kepada pemilik website sebagai media publikasi iklannya. Publisher adsense akan diberikan laba atau dibayar oleh pihak Google kalau iklan yang terpampang pada website publisher diklik oleh pengunjung. Jika Anda menciptakan blog di WordPres secara gratis, Anda tidak sanggup berafiliasi dengan perusahaan raksasa ini. Anda hanya diberi kesempatan untuk menulis artikel saja, kecuali Anda mempunyai pengunjung yang banyak untuk dipasangi iklan dan itupun kalau ada yang mau. Tapi blogger.com bisa mendapat uang dengan gampang kalau Anda diterima sebagai publisher Google Adsense. Ya, walaupun tidak gampang diterima, tapi masih banyak cara lain untuk mendapat uang dari blog gratis ibarat blogger. atau bisa saya bantu untuk mendapat akun Google Adsense, Baca: Jasa Pembuatan Akun Google Adsense Non Hosted

Walaupun ada juga kelemahan blogger, tapi secara keseluruhan blogger mempunyai berbagai kelebihan dibanding platform lainnya. Jadi, masihkah Anda ragu menciptakan blog di blogger?

Apa Manfaat Memiliki Sebuah Blog?

beberapa manfaat yang terperinci diantaranya:

1. Meningkatkan kualitas goresan pena Anda - Kemampuan MENULIS tentu tidak didapatkan begitu saja, harus dilengkapi dengan latihan yang rutin. Dengan menciptakan blog akan membantu Anda untuk menulis secara cepat dan berkualitas.
2. Membuat bunyi Anda didengar - Dari pada Anda melaksanakan demo yang entah ngefek atau tidak, dengan menciptakan blog Anda bisa menyuarakan aspirasi Anda biar orang banyak mendengarkan Anda! tentunya dari blog yang anda tulis.
3. Membuat perbedaan - Jika Anda berbeda dengan orang kebanyakan, dimana orang lebih suka hura-hura, anda sanggup menciptakan hal bermanfaat dengan menulis blog, itu manis sekali!
4. Menghasilkan uang - Blog yang menhasilkan uang memang butuh waktu dan komitmen. tetapi, orang menciptakan uang riil dari blog tidaklah mudah, tapi kalau Anda bersungguh sungguh pasti semua terwujud.

Langkah - Langkah Membuat Blog Step By Step Bagi Pemula

1. Memiliki akun Google (Gmail)
2. Login ke blogger.com

login google akun

3. Anda akan ditujukan laman pemilihan admin

4. Plih jenis Admin yang anda mau (G+ / Blogger)

Memilih akun admin blog (G+/Blogger)

Karakteristi admin G+

• Terintegrasi dengan G+ Lebih SEO
• Bisa auto share setiap publish Post
• Profil yaitu profil G+

Karakteristik akun blogger

• Tidak terintegrasi dengan akun Google
• Tidak Share auto ke G+
• Bague untuk blog walker
• Profil Blogger

5. Selesaikan data diri pada akun yang dipilih

6. Jika sudah simpulan maka lanjut ke blogger

Akun Blogger

Akun Google (G+)

 7. Buat blog gres klik blog gres / new blog

Buat Blog Baru

8. Buat judul Blog dan domain

9. Blog sudah jadi tinggal tulis artikel yang anda inginkan

Dasboard Blogger

Tampilan Blog

10. Untuk mengakses blog anda tinggal ketikan Domainanda.blogspot.com
Sekian tutoprial menciptakan blog, Semoga bermanfaat.

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