Tampilkan postingan dengan label blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label blogspot. Tampilkan semua postingan

Kamis, Agustus 24, 2017

Tombol Reply / Balas Hilang di Blogspot

0 komentar
Sedikit curhat ketidaktahuan saya selama beberapa tahun menggunakan blogspot ini. Saya sering kali bermasalah dengan tombol reply atau balas di kolom komentar yang tidak muncul. Just why? Kenapa hilang? Kenapa ga muncul padahal template versi demonya baik-baik aja, tombol balas dan hapus ga pernah pisah? Saya searching di google berhari-hari sampe kepala pening. Saya coba kode ini itu dan tidak ada yang berhasil. Ternyata oh ternyata setingan di blogger-nya yang bermasalah, bukan di template-nya. Ok, saya mengaku cupu, haha ....

1. Buka blogger kalian
2. Klik Setingan - Postingan, komentar, dan berbagi
    Bagi yang menggunakan bahasa Inggris silakan menyesuaikan sendiri :P

tombol reply balas di blogspot

3. Lihat bagian komentar
    Ubah Lokasi Komentar menjadi Tersemat atau Embedded !
    Ingat ya! TERSEMAT! EMBEDDED!
    Jangan yang Full atau Penuh!
    Nanti tombol balas dan hapus ga akan bersanding di pelaminan .... T_T

menampilkan tombol reply balas di blogspot

4. Simpan.

Sebelumnya, setelan Lokasi Komentar blog saya Penuh atau Full dan cuma muncul tombol Hapus atau Delete saja. Ini nih risiko belajar menggunakan blogspot, tetapi ga ada masternya. :)) *lebai
Sekarang tampilannya sudah cantik. Saya bisa membalas pesan pengunjung blog, fyuh ....
tombol balas dan hapus di komentar blogspot


Eiitt, meskipun setelan di blogger sudah benar TERSEMAT atau EMBEDDED, ada kalanya tombol Reply atau Balas tidak berfungsi ketika di-klik. Nah, ini yang bermasalah ada di bagian kode template bloggernya. Berikut cara mengatasinya.

1. Masuk ke blogger kalian lagi.
2. Klik Tema - Edit HTML
3. Cari kode di bawah ini (cukup copy-paste bagian teratasnya saja, nanti otomatis ketemu semua kok)

<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = &#39;<data:post.id/>&#39;;
      var feed = &#39;<data:post.commentFeed/>&#39;;
      var authorName = &#39;<data:post.author/>&#39;;
      var authorUrl = &#39;<data:post.authorUrl/>&#39;;
      var blogId = &#39;<data:top.id/>&#39;;
      var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': 2
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

4. Ganti semua kode di atas dengan kode berikut.

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

5. Simpan template.

Kalau ternyata masih bermasalah, ganti aja template-nya karena saya bukan master-nya bidang ini, hihihi ....

GoodLuck

Minggu, November 02, 2014

Membuat Related Posts Artikel Terkait dengan Thumbnail dan Ulasan Singkat

0 komentar
akhirnya, saya merombak secara keseluruhan tampilan blog saya ini. sebelumnya, template yang saya gunakan hanya cantik di luar, namun banyak cacat di dalam. saya harus menambal di sana sini demi bisa dikenal oleh google. ok, sekarang itu tidak terlalu penting. yang paling pokoknya adalah konten artikel kita, banyak dan berkualitas. padahal artikel saya baru 100 lebih sedikit, hihihi ... on progress-lah ya .... :)

dulu saya menggunakan related post (artikel terkait) yang bentuknya list, hanya menampilkan judul dan link yang berhubungan dengan suatu artikel. hampir seperti gambar di bawah ini tampilannya.

related post artikel terkait berbentuk list vertikal yang ditampilkan hanya judul dan link artikel

tidak ada salahnya saya mencoba tampilan related post dengan tambahan tumbnail dan sedikit ulasan. tentu saja tampilan ini akan lebih menarik "mata" pengunjung blog kita. tampilannya kira-kira seperti di bawah ini

related post artikel terkait berbentuk list vertikal lengkap dengan thumbnail, judul, link, dan cuplikan atau ulasan singkat


Langkah-langkah membuat related posts (artikel terkait) dengan thumbnail dan cuplikan artikel adalah sebagai berikut :

1. masuk ke template - edit html
2. cari kode </head> dan pastikan kode di bawah ini di atas </head>



3. cari kode post-footer, mungkin ada beberapa kode tersebut di template blogger. saya menggunakan blok kode post-footer yang kedua. silakan dicoba sendiri.

taruh kode di bawah ini tepat di atas kode post-footer



4. simpan kembali template anda


Selamat mencoba ....

Jumat, Oktober 31, 2014

Cara Membuat Daftar Isi Blog Sitemap di Blogspot

0 komentar
ok, untuk kedua kalinya saya membuat artikel tentang cara membuat daftar isi blog atau yang sering disebut dengan nama sitemap. sitemap ini memudahkan pengunjung blog untuk melihat secara keseluruhan artikel apa saja yang sudah dimuat oleh blogger. sitemap yang satu ini terlihat lebih eye catching menurut saya daripada tutorial saya sebelumnya karena ada tambahan label new untuk recent posts.

cara membuat daftar isi blog sitemap dengan tampilan yang lebih menarik dengan tambahan label new untuk recent posts

here, we go ...

1. kode html untuk sitemap berdasarkan label

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">
</script>
<script src="http://jasfora.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

ganti teks warna merah dengan nama blog masing-masing.

namun, tampilan yang dihasilkan hanya tampilan standar. untuk mendapatkan tampilan sitemap yang lebih menarik, gunakan kode di bawah ini menggantikan kode di atas

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://jasfora.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

2. kode html untuk sitemap berdasarkan tanggal publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://jasfora.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. kode html untuk sitemap berdasarkan tanggal publikasi plus kotak

<div style="background-color: none; border: 1px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://jasfora.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

copy-paste salah satu kode di atas ke laman baru. masuk ke blog anda, klik laman - laman baru. isi judul dan pastenya kode di atas dalam bentuk html, kemudian publikasikan.

Selamat mencoba ....

Minggu, Juni 01, 2014

menambahkan javascript anti frame

0 komentar
menambahkan javascript anti frame - kok javascript anti frame? ya karena memang ada kode iframe. javascript. iframe merupakan kode yang dapat menampilkan suatu blog atau web secara utuh di blog maupun web kita sendiri ataupun orang lain. tentu saja tidak masalah jika kita menggunakan kode iframe di blog atau web kita sendiri. semakin menguntungkan juga ketika ada blog atau web kita ditampilkan di blog atau web orang lain dengan kode iframe ini. karena blog atau web yang ditampilkan utuh dengan kode iframe ini, secara otomatis trafik blog atau web kita akan semakin bertambah. nah masalahnya adalah ketika kode iframe yang kita pasang di blog atau web kita itu menuju ke URL lain. kita mendapat trafik, blog atau web lain itu juga mendapat trafik. misalnya saja jika kita diharuskan memasangkan kode ini karena suatu kontes blog.

kode iframe default yang digunakan adalah :
<iframe> </iframe>

Sabtu, Mei 17, 2014

mengaktifkan robot.txt di blogspot

0 komentar
mengaktifkan robot.txt dan robot header tag di blogspot - sebenarnya setiap blog di blogspot sudah mempunyai file robot.txt yang dipasang secara default dengan format sebagai berikut

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://jasfora.blogspot.com/feeds/posts/default?orderby=UPDATED

memotong artikel blog : read more atau baca selengkapnya

2 komentar
cara memotong artikel di blog yang terlalu panjang - beberapa minggu yang lalu saya secara tidak sengaja menemukan sebuah web yang digunakan untuk mengukur performansi suatu blog atau web. nah lewat web tersebut bisa saya ketahui kalau blog saya tidak mengikuti google guidelines untuk beberapa poin.
1. tidak ada sitemap secara eksplisit yang digunakan untuk memudahkan pengunjung blog
2. mempunyai lebih dari 100 link, eksternal maupun internal, yang pada kenyataanya tidak disukai oleh google, selain membuat loading blog menjadi lambat juga bisa dikira spam
3. tidak melengkapi gambar dengan keterangan judul dan deskripsi (ALT) di bagian properties gambar, google itu bukan manusia, mana tahu gambar ini gajah gambar itu jerapah, bantulah google.

Sabtu, November 24, 2012

solusi undefined date pada blogspot

0 komentar
Kadang-kadang newbie menemui masalah yang sebenarnya sangat mudah solusinya, yaitu munculnya kata undefined pada tampilan blog untuk tanggal dan bulan. Hal ini disebabkan format yang tidak sama antara format date pada header dan format timestamp-nya sehingga harus disamakan formatnya.

1.  buka akun blogger
2.  klik setelan (blog ini menggunakan format bahasa indonesia) - bahasa dan pemformatan
3.  samakan format header dan timestamp-nya seperti gambar di bawah ini

Menulis kode program atau script di blog

0 komentar
Untuk para newbie, menuliskan kode program atau script di blog merupakan hal yang tidak mudah. Hal ini disebabkan blog memfilter kode tersebut sebagai bagian dari script di blog. Script yang sudah susah payah diketik tiba-tiba raib alias tidak muncul di artikel. Diulang lagi pun hasilnya juga demikian. Agar script tersebut muncul, blogger diharuskan melakukan encoding (enkripsi) terhadap simbol-simbol yang berperan pada script di blog sehingga tidak digeneral sebagai script seperti kode html, php, maupun java.

Sebagai contoh tanda < diubah menjadi &lt; dan > menjadi &gt; pada text editor

<body>

&lt;body&gt;

Karena blogger pastinya tidak hafal kode-kode penggantinya, tinggal buka saja http://www.blogcrowds.com/resources/parse_html.php kemudian copy dan paste cuplikan kode program yang diinginkan. Setelah itu, copy dan paste lagi ke text editor.

Good luck

memasang tombol like facebook, twitter, dan google+ untuk berbagi artikel

0 komentar
Seringkali blogger bingung bagaimana caranya agar pengunjung bisa melakukan share suatu artikel ke suatu social media seperti facebook, twitter, dan google+ masing-masing pengunjung blog tanpa melakukan copy paste secara manual. Dengan cara ini pengunjung tinggal menge-klik tombol yang disediakan.

Langkah-langkahnya sebagai berikut

1. Login ke akun blogger
2. Klik template - edit HTML
3. Centang Expand Template Widget 
4. Temukan kode di bawah ini :

Jumat, November 23, 2012

mengenal blogspot secara lebih dekat

0 komentar
Yak, sudah beberapa hari ini saya belajar memperbaiki template blogspot sehingga menjadi lebih menarik, dari memilih tampilan lewat mbah google. Template yang cukup bagus dengan nama water color. Cukup di search aja di google. Seperti inilah contoh tampilannya

template blogspot