Menghapus Langgan: Entri & Pos Komentar (atom)

Tulisan Langganan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) merupakaan fitur bawaan blogger. Sebagian besar blogger tidak menyukai fitur itu sehingga ingin menghapus tulisan Langganan atau Subscribe (Atom) tersebut karena tampilannya yang terlalu sederhana sehingga kurang jelas jika dibandingkan dengan Langganan via Email dari FeedBurner yang lebih mudah user interface-nya, dapat dimodifikasi dan lebih menarik perhatian pengunjung blog untuk berlanggan. Untuk itu jika anda ingin menghapus tulisan Langganan: Entri (Atom) dan Subsrcibe to: Posts (Atom), berikut langkah-langkahnya.

Cara Menghapus Langgan: Entri (Atom): dan Subscribe to: Poskan Komentar (Atom)

Langkah 1. Pada Dashboar Blogger anda pilih Template --> Edit HTML

Langkah 2. Klik pada area kosong Edit HTML dan Cari (CTRL+F) kode berikut:

<b:include data='feedLinks' name='feedLinksBody'/>

Langkah 3. Hapus semua kode di atas

Langkah 4. Cari (CTRL+F) kode berikut:

<div class='feed-links'>

Kode lengkap akan terlihat seperti ini:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

Langkah 5. Hapus semua kode diatas dan Simpan Template

Sekian tutorial blogger tentang Cara Menghilangkan tulisan Langgan: Entri (Atom) dan Subscribe to: Posts (Atom). Selamat mencoba dan semoga bermanfaat.

Memperbaiki Kesalahan Perayapan pada Alat Webmaster

Bagaimana cara memperbaiki kesalahan perayapan 404 pada alat webmaster google?

Kita harus tahu dulu penyebab terjadinya kesalahan perayapan itu. Jika sobat ingin melompat ke "Cara Memperbaiki" silahkan, tapi ada baiknya sobat menambah pengetahuan tentang kesalahan perayapan terlebih dahulu. Biasanya kesalahan perayapan dengan kode tanggapan 404 ini terjadi karena dihapusnya url dari suatu post, laman atau komentar yang pada suatu blog dan google bot pernah meng-indeks-nya. Dan ketika google bot mencarinya lagi (crawl), kok tidak ada? Maka dari itu google bot memberikan infonya melalui alat webmaster google agar webmaster yang bersangkutan pada situs terkait tahu kalo url yang pernah di-indeks google bot telah hilang. Dengan harapan webmaster dari situs yang bersangkutan dapat memperbaikinya.

Jenis Kesalahan Perayapan:

1. Dihapusnya Posting/Laman oleh Admin Blog
Admin situs dengan sengaja atau tidak sengaja menghapus postingan atau laman-nya. Lalu bagaimana mengembalikannya? Kemungkinan besar masih bisa dilacak kembali dengan menggunakan browser chache, google user cache dan yang terakhir web archive dengan catatan cache masih ada.

2. Dihapusnya Komentar oleh Admin Blog/Author Komentar
Untuk komentar yang dihapus tidak akan bisa dikembalikan! Pertanyaannya untuk apa dikembalikan? Karena yang paling penting adalah isi dari konten posting/laman situs itu sendiri.
Sebelum memperbaikinya mari kita lihat contoh tampilaan gambar kesalahan perayapan pada blog ini:

Dan apabila anda klik salah satu link yang tertera pada tabel kesalahan perayapan, pada sisi "Detail kesalahan":

Seperti yang sobat lihat "404 tidak membahayakan kinerja situs Anda dalam penelusuran, namun Anda dapat menggunakannya untuk membantu meningkatkan pengalaman pengguna." Maksudnya disini adalah, apabila pengunjung blog sobat mengunjungi link tersebut entah dari mesin pencari goolge, gadget pencarian pada blog anda, atapun url lainnya, maka yang dilihat oleh pengunjung adalah laman dengan tulisan 404 atau seperti yang terlihat pada gambar dibawah ini:

Pada sisi "Ditaut dari" anda dapat melihat link yang terhubung atau link masuk ke blog anda melalui url yang hilang itu. Sungguh sangat disayangkan apabila ada backlink yang hilang dari mata google bot. Apalagi backlink yang berkualitas. Ada "pengalaman" lain pada salah satu posting yang memiliki tanda "/" pada akhir url-nya. Ternyata dapat menyebabkan kesalahan perayapan di mata google bot juga loh.

Untuk itu perlu sekiranya kita membuat pengunjung lebih nyaman dengan memperbaiki kesalahan tersebut sehingga lebih baik dimata pengunjung dan di mata google bot.

Cara Memperbaiki Kesalahan Perayapan

1. Mendapatkan kembali url/link dari posting/laman yang hilang
Jika anda ingin menghidupkan kembali laman/posting yang hilang, anda harus mendapatkan kembali url dari link itu dengan browser chache, google user cache dan yang terakhir web archive. Anda dapat lihat di Cara Mengembalikan Posting Blog yang Dihapus.

2. Menggunakan Custom Redirect (Pengalihan Khusus)
Apabila anda hanya ingin mengalihkan alamat yang hilang atau belum menghidupkan laman/posting itu kembali, anda dapat menggunakan fitur Costum Redirect Blogger. Atau anda dapat juga Mengalihkan Semua URL Kesalahan 404 ke Laman tertentu.

3. Tandai Sebagai Telah diperbaiki
Langkah terakhir adalah dengan meng-klik tombol "Tandai sebagai telah diperbaiki" yang menandakan anda sebagai webmaster yang sah telah memperbaiki kesalahan itu.

4. Periksa url
Anda dapat memeriksa url yang hilang tadi dengan mengunjungi-nya. Apabila sudah sesuai dengan kemauan anda, dihidupkan kembali url-nya atau di-redirect ke alamat tertentu.
Sekian, semoga artikel yang panjang ini dapat bermanfaat bagi sahabat blogger semua. Kalau mau maju, jangan malas untuk membaca dan mencoba ya. Maap karena artikel-nya terlalu panjang, karena saya pribadi ingin menyampaikan secara detail dan membuat konten yang berkualitas sehingga dapat bermanfaat bagi banyak sahabat blogger. Mungkin apabila dari sobat blogger ada yang memiliki saran lainnya dapat dicantumkan pada kolom komentar dibawah.

Cara Mengembalikan Posting Blog yang Dihapus

Bagaimana Cara Mengembalikan Artikel yang telah dihapus?

Banyak blogger yang telah menghapus artikel atau laman yang telah mereka publikasi entah dikarenakan artikel itu kurang berkualitas, tidak relevan atau alasan lainnya. Dan tentunya ketika google bot merayapi blog anda, maka akan muncul kesalahan perayapan 404 pada alat webmaster google. Karena artikel yang pernah diindeks google hilang sehingga google bot memberitahu-nya pada anda tentang kesalahan itu. Dan jika hal itu terjadi anda dapat mendapatkan kembali artikel yang hilang itu sebelum cache dari artikel itu telah dihapus.

Cara Mendapatkan Artikel yang dihapus

Ada 4 cara untuk mendapatkannya kembali. Tapi dengan catatan "Cache untuk artikel yang terkait belum terhapus" selamanya. Disini maskudnya adalah dengan mem-publikasikan ulang artikel/laman yang anda pernah hapus, tentu saja tidak akan ada trafik dan komentar apabila sebelumnya artikel tersebut memiliki komentar. Dan untuk re-ublish pastikan tanggal sesuai dengan tanggal artikel yang terhapus.

1. Mengembalikan Post yang dihapus dengan Cache Google

Ketika anda mempublikasikan suatu artikel, maka google akan membuat versi artikel tersebut dengan cache-nya . Untuk itu anda dapat mencarinya dengan cara sebagai berikut:

a.) Ketikkan seperti berikut pada mesin pencari google,

site:dewainside.blogspot.com ctr atau site:dewainside.blogspot.com/alamat yang hilang

Merah : Alamat Blog anda

Biru : Kata yang terkait dengan artikel yang ingin anda cari

Atau anda dapat langsung mencari alamat yang hilang 404 dari alat webmaster google (Perayapan --> Kesalahan Perayapan).

b.) Klik Cached maka laman akan terbuka sesuai dengan cache terakhir.

c.) Publikasi dengan versi cache

• CTRL+U atau Klik Kanan --> View Page Source
• CTRL+F dan ketik postID maka akan terlihat seperti ini: postID=9189738376971388298 lalu Catat ID anda
• Pada Dashboard blogger anda --> Post --> Edit salah satu posting untuk membuka panel editor
• Gantikan postID yang ada pada bar browser anda dengan postID yang anda catat sebelumnya

• Enter sehingga panel editor akan menampilkan artikel/laman yang pernah dihapus itu
• Sesuaikan Tanggal dan Alamat link lalu Publish

2. Mengembalikan Post yang dihapus dengan Cache Browser

Browsing dengan mode ignito, private, atau sejenisnya tidak akan menyimpan cache. Jika anda belum menghapus cache pada browser anda, maka:

• Buka history brower anda
• Cari dan ketikkan alamat (misal: dewainside.blogspot.com) maka akan muncul list artikel/laman terkait dengan blog anda.
• Copy dan Paste pada pengeditan entri blogger anda

3. Mengembalikan Post yang dihapus dengan Feedburner

Anda cukup cari kata yang terkait dengan artikel yang telah dihapus pada feeburner. Caranya cukup ketikkan alamat feedburner anda di browser.

"http://dewainside.blogspot.com/feeds/posts/default" --> Lalu cari (CTRL+F) artikel yang dihapus melalui kata kunci yang terkait. Edit dan re-publish pada panel editor blog anda.

4. Mengembalikan Post yang dihapus dengan Web Archive-Wayback Machine

Di web archive ini tempatnya arsip-arsip dari setiap website yang ada di internet. Tentunya dengan update secara berkala, kurang lebih 1 tahun. Namun walaupun begitu arsip tersebut dapat dihapus juda dari web archive apabila selama waktu tertentu tidak ada yang membutuhkannya.

• Kunjungi http://archive.org/web/ --> Masukkan alamat url yang error 404 --> Browse History

• Akan tampil beberapa history dari blog anda, pilih sesuka anda mungkin yang terakhir. Copy dan Paste tampilan laman yang muncul. Untuk link hidup silahkan periksa dan ganti dengan link anda sendiri karena link hidupnya berasal dari web archive-nya.

5. Re-Publish Artikel

Setelah anda mengedit artikel yang anda dapatkan kembali lakukanlah publikasi ulang. Dengan ketentuan samakan url link dan tanggal publish artikel yang terhapus agar nantinya anda dapat check list, "Tandai sebagai telah diperbaiki" di alat webmaster. Sehingga pesan kesalahan perayapan 404 di alat webmaster hilang.

Semoga bermanfaat bagi sobat blogger sekalian.

Cara Menggunakan Costum Redirect

Perlunya menggunakan custom redirect?

Fitur pengalihan khusus bawaan blogger ini memungkinkan untuk mengalihkan url tertentu ke alamat url yang diinginkan. Biasanya digunakan untuk mengalihkan alamat url posting dan laman yang hilang menuju laman tertentu yang dinginkan. Terkadang ada juga blogger yang mengalihkannya dengan maksud untuk meningkatkan traffic suatu posting tertentu dan apabila sudah cukup baik trafficnya maka akan dicabut kembali.

Tujuan penggunaan custom redirect

Agar pengunjung blog dapat lebih nyaman. Sehingga ketika pengunjung blog mendatangi url yang tidak ada/hilang 404 maka dengan segera pengunjung akan dialihkan ke alamat tertentu yang diinginkan.

Bagaimana cara menggunakan custom redirect blogger?

Langkah 1. Anda lihat di Setelan --> Preferensi penelusuran --> Edit

Langkah 2. Jika anda belum pernah membuatnya maka cukup masukkan url yang error 404 ke url yang diinginkan. Cukup copy dan paste url alamat link yang hilang pada bar browser sobat setelah tanda "/", contoh:

karena pada form pengisian pengalihan sudah terdapat alamat blog anda.

Klik Permanen --> Simpan --> lalu Simpan Perubahan

Walapun begitu anda dapat juga mengalihkan semua kesalahan perayapan 404 ke alamat tertentu, semisal ke homepage blog anda. Anda dapat membacanya di  Mengalihkan Semua Kesalahan 404 Laman Tidak ditemukan ke Homepage.

Semoga bermanfaat bagi sobat blogger sekalian.

Tampilan Posting dengan Thumbnail ala Majalah/Koran

Tampilan posting dengan thumbnail dan snippet seperti ala majalah/koran yang saya gunakan pada blog ini merupkan salah satu favorit saya. Karena dengan tampilan ini beberapa posting dapat langsung tampil pada homepage blog. Sehingga dapat memudahkan pengunjung blog untuk memilihnya. Pada tampilan ini kita dapat meng-edit-nya dengan mudah pada bagian kode CSS-nya, sehingga dapat menyesuaikan dengan template yang kita gunakan pada blog.

Mungkin sobat dapat lihat dulu:
a.) Tampilan Posting dengan Thumbnail Datar
b.) Tampilan Posting dengan Thumbnail Grid View

Cara Memasang:
Langkah 1. Pada Dashboard blogger lihat ke --> Template --> Edit HTML

Langkah 2. Klik kiri disembarang kotak Edit HTML dan cari (CTRL+F) kode:

<data:post.body/>

Cari dan pilih kode kedua

Langkah 3. Gantikan kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Note: Sobat dapat mengganti tulisan berwarna Merah

Langkah 4. cari (CTRL+F) kode berikut:

<b:include data='post' name='post'/>

Langkah 5. Gantikan kode diatas (<b:include data='post' name='post'/>) dengan kode berikut:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Langkah 6. Cari (CTRL+F) kode:

</head>

Copy dan Paste kode berikut dan letakkan diatas/sebelum kode </head>

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
  var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>

Langkah 7. Tambahkan kode CSS berikut TEPAT dibawah dari kode yang ada diatas.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
    margin-right: 10px;
}
.summary {
    height: 100%;
}
#first { /* Styles Post Pertama */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* warna background post pertama */
    border: 1px solid #E5E5E5; /* border dari post pertama */}
.first-body { /* Style snippet dari post pertama */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height: 1.5em;
}
#first h3 a, #first h3 a:visited { /* Style judul dari post pertama */
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    background: none;
}
#first h3 a:hover { /* warna hover mouse judul post pertama */
    color: #1061A1;
}
.post { /* Styles post kecil  */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* warna background post kecil */
    border: 1px solid #E5E5E5; /* border post kecil */
    overflow: hidden;
}
.posts-thumb { /* Style thumbnails post kecil */
    margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

h3.post-title a{ /* Style judul post kecil */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}
h2.date-header { /* sembunyikan tanggal post */
    display: none;
}
.post-footer {
    display: none;
}
h3.post-title {
    margin: 0px;
}
.readmorebutton {
    margin-top: 5px;
}
.readmorebutton a { /* Styles link baca selengkapnya */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* warna background link baca selengkapnya */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}
.post-comment-link { /* Style comment bubble */
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px solid #E1E1E1; /* border comment bubble */
    background: #EAEAEA; /* warna background comment bubble */
    font-size: 11px;
    position: absolute;
}
#first .post-comment-link { /* Style comment bubble dari post pertama */
    position: absolute;
    top: 10px;
    right: 0px;
}
.post-comment-link a { /* warna link comments bubble*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}
#blog-pager {
    clear: both;
}
</style>
</b:if>
</b:if>

Konfigurasi:

• Pada Langkah 6.

1.) first_no_thumb_sum = 580;

2.) first_thumb_sum = 450;

3.) img_thumb_height1 = 145;

4.) img_thumb_width1 = 165;

1. Mengatur jumlah karakter yang muncul pada post kecil ketika "tidak ada gambar"
2. Mengatur jumlah karakter yang muncul pada post kecil ketika "ada gambarnya"
3. Mengatur ukuran "tinggi" thumbnail gambar pada post kecil
4. Mengatur ukuran "lebar" thumbnail gambar pada post kecil

• Pada Langkah. 7

Mengatur ukuran kolom post pertama

width: auto;

height: 250px;

Mengatur ukuran kolom post kecil

width: 46%;

height: 230px;

Jika ada masalah atau terjadi error sewaktu memasang tampilan ini silahkan tinggalkan keluhan pada kolom komentar dengan masalah yang terjadi, sehingga saya dapat mengetahui apa yang sekiranya salah.

Selamat Mencoba.

Good luck!

Tampilan Posting Grid dengan Thumbnail pada Blogger

Tampilan posting pada homepage blogger secara grid dengan thumbnail ini sangat menarik untuk diterapkan pada blog sobat. Tampilan ini sangat cocok untuk blog yang memiliki gambar/photo pada setiap postingannya. Mungkin blog dengan niche berita, photografi, dll. Walaupun sebenarnya sekarang sobat dapat dengan mudah menggunakan tampilan dengan template dinamic yang notabene memiliki tampilan grid pada homepage-nya. Kalau sobat tidak mau repot sobat pilih saja template dinamic yang tersedia pada costumise template.

Mungkin sobat dapat lihat dulu:
a.) Tampilan Posting Datar dengan Thumbnail
b.) Tampilan Posting ala Majalah/Korang dengan Thumbnail

Kelebihan:

• Adanya Tampilan seperti Pinterest
• Blog terlihat lebih elegan dan profesional

Sebelum Memasang

Sebelum sobat memasang tampilan ini, ada baiknya sobat download template sobat terlebih dahulu.

Backup Template: Pada dashboard blogger --> Template --> Cadangkan/Pulihkan (Pojok Kanan Atas) --> Unduh Template Lengkap

Cara Memasang:

Langkah 1. Pada Dashboard blogger pergi ke --> Template --> Edit HTML

Langkah 2. Klik kiri disembarang kotak Edit HTML dan cari (CTRL+F) kode:

</head>

Langkah 3. Copy dan Paste kode berikut diatas/sebelum </head>:

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZPDSCdKTl4nfPyTG6kYucDAqa-c-wj9GqrMZxKa4NN2KKWZ462TTml2Q6O1y9ya4P2Ll3TSuFYi1Cb7tK0eGj3Or8wjfOqgRr1KwXq5T46gwQqDvCcIyfvjXk8ZPp8LDjvbFWbeOWuAC/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

Langkah 4. Selanjutnya cari (CTRL+F) kode berikut:

<data:post.body/>

Pilih kode yang kedua.

Langkah 5. Lalu gantikan kode diatas dengan kode berikut:

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>

Langkah 6. Pilih salah satu kode style yang sobat suka lalu Paste diatas </head>

Tampilan Pinterest

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative;    
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiEpvCbkpxLNXLELwmwgc-pV573HBrbH2WEOGqERkBRVp43r-AEvaYoWpeCNMbuz-f2rZnPUL14sEpoLQ8_JbEQ8oonolFOpyHZPz4pdLet5TTyIOVbEjRv6OTOnwPptFjy6taE25mJUA/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Tampilan Grid Simple

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}
.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#777;
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Langkah 7. Pratinjau terlebih dahulu. Apabila oke maka sobat dapat Simpan Template.
Selamat Mencoba.

Mengganti Tulisan Poskan Komentar di Blog

Bagaimana cara mengganti tulisan "poskan komentar" pada blog sobat? Seperti yang saya terapkan pada Dewa Inside blog ini. Pada dasarnya sobat dapat mengganti tulisan posting komentar bawaan blogger dengan tulisan ataupun dengan gambar hasil karya sobat ataupun browsing dari internet. Namun pada Dewa Inside blog ini saya hanya mengganti tulisannya saja dengan kata,"Apa Pendapat Anda?" atau "Hai Ganteng/Cantik Komentar Yuks" dengan maksud untuk mengajak pengunjung blog untuk meninggalkan komentar pada posting yang dikunjunginya. Jadi terlihat lebih menarik bukan?

Sobat juga pun dapat menambahkan pesan diatas kotak komentar blog sobat. Pesan yang disampaikan tentunya sesuai dengan keinginan sobat. Biasanya sih berupa aturan dalam berkomentar, tapi itu semua terserah sama yang punya blog. Sobat dapat membaca caranya di Cara Menambah Tulisan diatas Kotak Komentar Blog. Untuk itu sobat coba dulu cara mengganti tulisan "poskan komentar" di blog sobat.

Cara Mengganti Posting Komentar

Langkah 1. Pada Dashboard blogger lihat --> Template --> Edit HTML

Langkah 2. Klik kiri di kotak Edit HTML dan cari (CTRL+F) kode berikut:

<data:postCommentMsg/>

Cari kode diatas sampai terlihat sama atau menyerupai gambar berikut dibawah karena kode itu lebih dari satu. Dan yang ada didalam tag heading <h4 ........................ </h4>

Klik gambar untuk memperbesar

Langkah 3. Ganti semua kode <data:postCommentMsg/> dengan TULISAN sesuka sobat atau dengan URL GAMBAR yang sobat inginkan.

Contoh: <h4 id='comment-post-message'>Apa Pendapat Anda ?</h4>

ATAU

<h4 id='comment-post-message'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHg40APxLERV1-598ep8KJjQ5iqT-UqBm3aEnMlI_dzQi4cjs7k6s_9UvSIqkVEIrsSGFV2SryBdecxI4gSg5zxHxNrKE8fmO9YF5-u_7nl6BgrLZBxdbI90kjMbQDbNYAv4Cq4MN1IqH/s1600/comment.gif"/></h4>

• Berikut gambar yang didapatkan dari internet, sobat dapat membuatnya sendiri ataupun browsing di google:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHg40APxLERV1-598ep8KJjQ5iqT-UqBm3aEnMlI_dzQi4cjs7k6s_9UvSIqkVEIrsSGFV2SryBdecxI4gSg5zxHxNrKE8fmO9YF5-u_7nl6BgrLZBxdbI90kjMbQDbNYAv4Cq4MN1IqH/s1600/comment.gif"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHS7AESX3fj4yZP0YusbvVL2TjCTyH8V3eUl_dPJeobEBOwxbZEIYe-Ws5Uz1tH3A3Kzm56yL5U6-9wccq_fztcrPxiRPZyEdpliMJ_l4kOdBdz7l-afalWdUfYxFOhmaq8JVpRdYini3U/s1600/leave+a+comment2.png"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUOx3HVKeV9uuFd3BGfvhsjScLvKtnKh_nnUBB93zIkwT75kYxhSLDj2R8krwRLwH2LlNGkDgWL1KqUnEycSpfowSoHpwtBLmo6BqbQ5va7U9LytGsne8d3agHI-7YaRayGXoI8eAK7SO/s1600/animated+comment+arrow.gif" />

Jika ada pertanyaan ataupun error yang sobat alami silahkan tinggalkan komentar pada comment section dibawah post ini.
Mudah bukan? Selamat Mencoba.

Cara Menambah Tulisan diatas Kotak Komentar Blog

Menambahkan tulisan atau text diatas kotak atau kolom komentar blogger adalah salah satu cara dimana owner blog dapat memberikan pesan kepada pengunjung blog tersebut. Biasanya pesan yang dicantumkan seperti aturan berkomentar (sopan, tidak mengandung kata-kata sara, p*rn*grapi, dll) ataupun ajakan berkomentar pada blog tersebut. Selain itu sobat juga dapat mengganti tulisan "poskan komentar" dengan text ataupun gambar sesuka sobat. Sobat dapat membaca nanti di Mengganti Tulisan Poskan Komentar di Blog.

Pada posting kali ini saya membahas 2 cara, Cara 1 merupakan bawaan dari blogger yang mudah digunakan. Cara 2 dengan mengedit HTML template blog, Kelebihan untuk cara 2 ini adalah kita dapat mengedit tulisannya dengan membuat background, tulisan miring, bold dan lainnya cukup dengan menambahkan kode HTML.

Cara 1:

Langkah 1. Pada Dashboard blogger sobat scroll kebawah --> Setelan --> Pos dan Komentar. Pada Pesan Formulir Komentar klik Tambahkan.

Langkah 2. Form untuk mengisikan tulisan akan muncul dan isi tulisan sesuai ide sobat.

Langkah 3. Simpan Setelan
Coba sobat lihat salah satu posting sobat apakah pada bagian bawahnya ada tulisannya.

Cara 2:
Langkah 1. Pada Dasboard blogger --> Template --> Edit HTML dan cari (CTRL+F) kode berikut:

<a name='comment-form'/>

Lalu Paste tulisan yang ingin sobat buat diatasnya.
Tips: Sobat dapat membuat tulisan terlebih dahulu di compose post lalu mengeditnya dengan tulisan miring, background, dll. Lalu Copy kode HTML-nya dan Paste diatas <a name='comment-form'/>

Langkah 2. Simpan Template
Coba sobat lihat salah satu posting sobat apakah pada bagian bawahnya ada tulisannya.

Selamat mencoba.

Cara Menampilkan dan Menyembunyikan Gadget di Blog

Menampilkan atau menyembunyikan gadget atau biasa disebut widget blogger di home, posting atau static page (about, contact, dll) merupakan hal dasar yang wajib sobat blogger ketahui. Karena berhubungan dengan tata letak, loading dan keindahan blog itu sendiri. Semisal, sobat ingin menampilkan gadget media sosial di homepage blog sobat, namun tidak muncul di posting sobat dan lain sebagainya.

Mungkin sobat juga tertarik:
a. Membuat Gadget Melayang di Blog
b. Menambah Gadget disamping Header Blog
c. Memberi Warna Background Judul Gadget Blog

Cara Memasang:

Langkah 1. Ingat nama dari gadget yang ingin sobat tampilkan atau sembunyikan. Seperti Facebook atau Google+ atau lainnya. Untuk  gadget HTML/Javascript biasanya tertulis (HTML1, HTML2, dan yang serupa) paling mudah sobat ingat posisinya setelah gadget apa.

Langkah 2. Lihat di Template --> Edit HTML

Langkah 3. Klik kiri di kotak Edit HTML yang muncul dan cari (CTRL+F) nama dari gadget yang ingin ditampilkan/disembunyikan. Misal saya beri contoh gadget "FOLLOW" :

Kode gadget akan terlihat "mirip" seperti ini:

<b:widget id='HTML1' locked='false' title='FOLLOW' type='HTML'>
<b:includable id='main'>
< LETAKKAN KODE TAMPIL/SEMBUNYI GADGET DISINI>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Tulisan Merah adalah tempat sobat meletakkan kode-kode berikut dan jangan lupa untuk menambahkan </b:if> pada setiap kode gadget diatas </b:includable> :

Langkah 4. Copy dan Paste kode berikut dan letakkan diposisi sesuai dengan contoh diatas:

A. Menampilkan Gadget hanya di Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>

B. Menampilkan Gadget hanya di Postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>

C. Menyembunyikan Gadget di Postingan

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

D. Menampilkan Gadget di Laman tertentu

<b:if cond='data:blog.url == &quot;URL LAMAN&quot;'>

URL LAMAN=Alamat laman yang dituju.

E. Menyembunyikan Gadget di Laman tertentu

<b:if cond='data:blog.url != &quot;URL LAMAN&quot;'>

F. Menampilkan Gadget di Laman Statis (about, contact, dll)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

G. Menyembunyikan Gadget di Laman Statis (about, contact, dll)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

Sekali lagi Jangan lupa tambahkan </b:if> pada akhir kode diatas </b:includable>.

Jika sobat memiliki pertanyaan atau error silahkan tinggalkan pada kolom komentar dibawah.

Selamat mencoba dan good luck.

Cara Membuat Gadget Melayang di Blog

Membuat gadget atau widget blog menjadi melayang merupakan hal yang sangat bermanfaat ketika sobat ingin pengunjung blog terus melihat gadget tersebut, contoh yang paling banyak digunakan adalah gadget sosial media (facebook like, google+ follower ataupun follow twitter) seperti yang saya gunakan pada Dewa Inside Blog ini yang berada disamping blog.

Mungkin Sobat juga tertarik:
a. Memberi Warna Background Judul Gadget Blog
b. Menambah Gadget disamping Header Blog
c. Menampilkan/Menyembunyikan Gadget di Blog

Apakah Oke Digunakan pada Gadget Google Adsense?

Tidak boleh! Saya berani bilang tidak boleh karena saya baca Modification of Adsense ad code (Translate apabila sobat kurang paham bahasa inggris) disitu tertulis jelas salah satu teknik yang harus dihindari adalah "Floating ads or units that slide to attract unwarranted attention" membuat adsense melayang. Coba sobat lihat blog/website terkenal iklan google adsense-nya pasti statis saja. Lagipula saya lebih mencari traffic blog dengan menggunakannya pada gadget sosial media.

Cara Memasang:
1. Lihat ke Tata Letak --> Edit gadget yang ingin ditampilkan.

Disini hanya untuk melihat ID dari gadget tersebut. Klik pada bar url dan cari pada bagian kanan bar. Copy atau ingat ID Gadget yang ingin sobat buat melayang.

2. Lihat ke Template --> Edit HTML, klik kiri pada kotak Edit HTML dan cari (CTRL+F) kode:

]]></b:skin>

Copy dan Paste kode CSS berikut diatas/sebelumnya:

.ET_floating {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}

3. Cari kode:

</body>

Copy dan Paste kode berikut diatas/sebelumnya:

<script>

// Sticky widget

// EasyTins Tutorial

//<![CDATA[

ET_makeSticky("HTML1");

function ET_makeSticky(elem) {

    var ET_sticky = document.getElementById(elem);

    var scrollee = document.createElement("div");

    ET_sticky.parentNode.insertBefore(scrollee, ET_sticky);

    var width = ET_sticky.offsetWidth;

    var iniClass = ET_sticky.className + ' ET_sticky';

    window.addEventListener('scroll', ET_floating, false);

    function ET_floating() {

        var rect = scrollee.getBoundingClientRect();

        if (rect.top < 0) {

            ET_sticky.className = iniClass + ' ET_floating';

            ET_sticky.style.width = width + "px";

        } else {

            ET_sticky.className = iniClass;

        }

    }

}

//]]>

</script>

    Note: Ganti HTML1 yang berwarna merah dengan ID Gadget sobat yang ingin dibuat melayang.

4. Simpan Template

Coba lihat blog sobat dan scroll kebawah apakah gadget-nya sudah melayang mengikuti scroll kebawahnya. Apabila ada pertanyaan silahkan tinggalkan pada kolom komentar.

Selamat mencoba dan semoga berhasil.

Cara Menambah Gadget disamping Header Blog

Bagaimana Menambah Gadget Blogger disamping Header

Menambah gadget atau widget disamping header merupakan hal yang sangat baik untuk tata letak blog. Karena biasanya letak sisi kanan header pada setiap blog itu kosong. Untuk itu kita dapat memanfaatkannya dengan menambah gadget seperti iklan ataupun follow sosial media pada tempat kosong itu. Seperti gambar dibawah ini yang pernah saya terapkan pada header Dewa Inside Blog.

Mungkin sobat juga tertarik:

a. Membuat Gadget Melayang di Blog
b. Menampilkan/Menyembunyikan Gadget di Blog
c. Memberi Warna Background Judul Gadget Blog

Memasang Gadget disamping Header Blogger

1. Lihat ke Template --> Edit HTML --> Klik kiri di kotak Edit HTML dan Cari (CTRL+F) kode:

<b:section class='header'

Tampilan full akan terlihat seperti ini:

Copy dan Paste kode berikut diatas/sebelum <b:section class='header'

<div class='swt-blogheader'>

Copy dan Paste kode berikut dibawah/setelah </b:section> (lihat gambar diatas) cari dengan scroll kebawah secara perlahan sampai dapat.

<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
    </b:section>
    </div>
    <!-- /swt-blogheader -->
    <div style='clear: both'/>

2. Cari (CTRL+F) kode:

]]></b:skin>

Copy dan Paste kode CSS berikut diatas/sebelumnya:

/*gadget beside header*/

    .swt-blogheader {

    position: relative;

    width: 100%;

    }

    #header {

    padding: 0;

    margin:0;

    overflow:hidden;

    float:left; width:35%;

    }

    #swt-blogheader-right {

    padding: 0;

    margin:0;

    overflow:hidden;

    float:right;

    width:65%;}

/*gadget beside header end*/

Note: Ubah angka 35% (Header dikiri) dan 65% (Gadget dikanan) apabila posisi-nya kurang pas.

3. Simpan Template

Setiap template memiliki perbedaan, apabila pada layout blogger sobat belum terbagi menjadi dua header dan gadget. Cukup sobat seret gadget yang sobat inginkan tepat dibawah header dan Simpan Perubahan. (Biasanya baru akan terbagi menjadi header dan gadget apabila sobat membuka halaman baru untuk tata letak/layout).

4. Lihatlah Blog sobat

Apakah sudah memiliki gadget disamping headernya. Saya berhasil kok mempraktekkannya, jika sobat gagal atau memiliki pertanyaan silahkan tinggalkan komentar pada kolom komentar yang tersedia.

Selamat mencoba dan semoga berhasil.