Mengganti Posting Baru, Lama dan Home menjadi Gambar Text

Mengganti Posting lebih baru, beranda dan posting lama menjadi gambar atau tulisan. Link tersebut adalah link yang muncul pada bagian bawah post body blogger. Link tersebut berfungsi untuk mengalihkan pengunjung blog yang meng-kliknya untuk menuju ke posting selanjutnya atau posting sebelumnya dari posting yang sobat sedang lihat. Anda juga dapat mengganti tulisan posting lebih baru dan posting lebih lama menjadi judul postingan.

Sesuai dengan judul pada posting ini, maka ada 2 tipe cara yang akan dipakai. Pertama dengan tulisan biasa dan kedua dengan menggunakan gambar entah dari web penyedia gambar ataupun kreasi dari sobat lalu di-upload. Langsung saja berikut cara merubahnya.

Mengganti Beranda, Posting Baru dan Lama

Langkah 1. Sign In ke Blogger --> Template --> Edit HTML

Langkah 2. Klik pada kotak kosong Edit HTML dan cari (CTRL+F) salah satu kode berikut:

<data:newerPageTitle/>
<data:olderPageTitle/>
<data:homeMsg/>

Tampilan penuh-nya akan terlihat seperti ini:

  <b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

      </span>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

      </span>

    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

A. Mengganti Link Posting Baru, Lama dan Home dengan Text
Sobat cukup mengganti kode dibawah ini dengan text sesuai keinginan:
<data:newerPageTitle/> --> link posting baru (misal: Next Post, Lanjut Gan, dkk)
<data:olderPageTitle/>  --> link posting lama (misal: Previous Post, Sebelumnya Gan, dkk)
<data:homeMsg/>         --> link home (misal: Homepage, Laman, dkk) --> cukup 1 kata

B. Mengganti Link Posting Baru, Lama dan Home dengan Gambar
Sobat cukup tambahkan kode berikut ini pada awal setiap kode yang berwarna.

<img src="URL Gambar"/>

Contohnya:

<img src="URL Gambar"/><data:newerPageTitle/>
<img src="URL Gambar"/><data:olderPageTitle/>
<img src="URL Gambar"/><data:homeMsg/>

Tentunya sobat sudah terlebih dahulu upload gambarnya. Upload gambar dapat dengan mudanh menggunakan posting blogger yang disimpan (draft).

Langkah 3. Simpan Template

Sekian.
Semoga bermanfaat.

Mengganti Posting Baru dan lama menjadi Judul

Mengganti tulisan link posting lebih baru (newer post) dan posting lama (older post) yang ada pada bagian bawah post body blogger menjadi judul postingan. Karena sobat menggunakan template default blogger pasti tulisannya posting lebih baru, beranda dan posting lama. Pada dasarnya hal itu bukanlah suatu masalah karena bukan link mati. Namun untuk lebih menarik perhatian pengunjung blog selain dari memasang widget-widget pada sisi samping dan bawah blog, sebaiknya kita dapat mengganti tulisan link posting baru dan posting lama menjadi judul posting ataupun menjadi gambar/text.

Mengganti Posting Lebih Baru dan Posting Lama

Langkah 1. Pada Tata Letak --> Tambahkan Gadget

Langkah 2. Windows Pop-up akan terbuka, lalu scroll kebawah untuk mencari HTML/Javascript

Langkah 3. Copy dan Paste kode berikut didalam kotak kosong gadget HTML/Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Catatan: Kode Merah merupakan jQuery, jika sobat pernah memasang kode semacam itu pada blog, sobat tidak perlu lagi menambahkannya.

Langkah 4. Simpan dan letakkan posisi gadget tadi dibawah Blog Posts

Langkah 5. Simpan Setelan

Sekarang lihat apakah tulisan posting baru dan lama sudah terganti dengan judul posting pada blog sobat. Selamat jika berhasil dan apabila ada error silahkan dicheck lagi mungkin ada kode yang kurang. Apabila ada pertanyaan silahkan diposkan pada kolom komentar dibawah.

Sekian.
Semoga dapat bermanfaan bagi sahabat blogger sekalian.

Cara Memperbaiki Error 404 Blogger

Memperbaiki kesalahan 404 laman tidak ditemukan pada blog hosting blogger dengan top level domain ataupun blogspot adalah hal yang mudah. Untuk mengatasi error 404 ini cukup menggunakan fungsi redirect bawaan blogger. Ada dua fungsi redirect, yaitu pengalihan kesalahan 404 yang secara universal akan mengalihkan postingan atau laman yang hilang ke destinasi url link tertentu yang sedang dibahas pada artikel ini dan pengalihan khusus yang hanya mengalihkan secara individu alamat laman dan postingan tertentu.

Redirect error 404 blogger adalah mengalihkan semua broken link entah dari postingan atau laman statis ke alamat url tertentu, biasanya beranda blog. Berbeda dengan pengalihan custom redirect blogger yang secara individual mengalihkan alamat laman dan postingan lama ke alamat yang baru bisa permanen 301 ataupun yang sementara 302.

Muncul kesalahan 404 laman tidak ditemukan?

Error 404 biasa terjadi dikarenakan bot google tidak dapat menemukan alamat posting atau laman link tertentu yang sudah terdaftar pada peta situs google webmaster blog kamu. Tidak ditemukannya laman tersebut terjadi karena pemilik situs telah menghapus laman terkait. Sehingga google bot memberikan pesan error 404 untuk memberikan info kepada webmaster pada blog terkait.

Pada dasarnya error 404 ini tidak mempengaruhi blog terkait pada mesin pencari google. Namun bagi pengunjung, maka mereka akan melihat pesan tersebut dan dapat langsung pergi dari blog kita. Sehingga untuk menyamankan pengunjung dan menjaga mereka untuk tetap di halaman blog kita, diperlukan pengalihan laman yang hilang ke laman lainnya.

Sumber gambar : https://ja-wall.demo.joomlart.com/en/pages/404-page

Cara mengetahui laman yang hilang?

Tentu saja kembali ke google webmaster tools pada tiap pemilik blog. Pada dashboard Alat Webmaster Google pilih blog Anda --> Perayapan --> Kesalahan Perayapan. Disana Anda akan melihat laman apa saja yang error yang dilaporkan oleh bot google.
Selengkapnya dapat lihat >> Memperbaiki kesalahan perayapan pada alat webmaster google.

Cara Menggunakan redirect 404 blogger

Cara 1. Redirect 404 menggunakan tulisan

Langkah 1. Copy kode dibawah berikut:

Maaf Laman yang Anda cari tidak ada.
Anda akan dialihkan ke homepage.
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.href= "https://dewainside.blogspot.com/"
}, 3000);
</script>

Keterangan:
Tulisan yang berwarna merah tentu dapat kamu ganti dengan tulisan sesuai dengan keinginan kamu.
3000 = waktu delay 3 detik
https://dewainside.blogspot.com/ = URL blog Anda

Langkah 2. Pada dashboard blogger pilih Setelan >> Preferensi penelusuran >> Kesalahan dan pengalihan >> Edit kotak kosong "Pesan Khusus untuk Halaman Tidak Ditemukan" dengan Paste kode yang sudah dicopy diatas dan Simpan perubahan.

Cara 2. Redirect 404 menggunakan variasi gambar

Langkah 1. Kamu dapat dengan mudah menggunakan fitur Postingan >> Entri baru dan gunakan kotak edit Compose untuk upload gambar kreatif error 404 buatan kamu atau dari pencarian google.

Lalu pada tab HTML beri alamat link yang mau kamu tuju untuk mengalihkan error 404 laman tidak ditemukan, contoh alamat beranda blog. Copy semua kode htmlnya dan tidak perlu dipublikasi cukup di simpan sebagai draft.

Langkah 2. Sama seperti menggunakan tulisan saja pada cara 1. Buka Setelan >> Preferensi penelusuran >> Kesalahan dan pengalihan >> Edit kotak kosong "Pesan Khusus untuk Halaman Tidak Ditemukan" Lalu kamu Paste kode html gambar error 404 yang sudah diedit tadi dan Simpan perubahan.

Note:
Selain itu kamu dapat menyetel otomatis pengalihan pada Edit HTML blogger didalam tag <head> dengan kode html pengkondisian berikut apabila ingin mengalihkan otomatis.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title>404 ~ Page Not Found! | <data:blog.title/></title>
<meta content='3;/' http-equiv='refresh'/>
</b:if>

Sekian, semoga artikel ini bermanfaat bagi para blogger semua.

Mengkompres Gambar PNG, JPG, JPEG pada Blog

Mengkompres (compress) gambar baik itu PNG ataupun JPG untuk blog adalah hal yang cukup penting untuk blog. Selain kode - kode seperti Java Script, dkk-nya, gambar sangat mempengaruhi kecepatan dari loading page suatu blog ketika diakses. Apalagi yang mengakses page tersebut memiliki kecepatan internet yang lambat. Tentunya akan membuat loading page menjadi lebih lama. Untuk mengetahui berat loading page blog Anda, dapat dilihat di --> Memeriksa Kecepatan Blog dengan PageSpeed Insight (Punya Mbah Google). Selain itu gambar juga berpengaruh pada SEO meskipun moderate, sehingga kita perlu mengikuti Aturan Pemakaian Gambar yang Friendly SEO.

Berikut Situs yang saya rekomendasikan untuk mengkompres gambar menjadi sangat kecil tetapi tetap mempertahankan kualitas dari gambar tersebut. Saya sudah mencoba dan membuktikannya sendiri, yakni:

•  https://tinypng.com

Anda cukup meng-upload gambar ke situs itu secara otomatis situs itu akan mengkompres gambar Anda dan setelah selesai Anda cukup men-download-nya pada bagian pojok kanan.

Berikut penampakan hasil dari kompresi:

Dapat Anda lihat file .png yang awalnya 22,3 KB dikompres menjadi 7,2 KB dimana menghemat 68%. Setelah itu saya pun bandingkan hasilnya, sebelum dan setelah dikompres. Ternyata hasilnya dapat dikatakan sama, saya tidak bisa membedakannya dengan mata orang awam seperti saya ini dan kemampuan skill low dibidang gambar/photo. Secara teknis saya tidak tahu lebih jauh, mungkin bagi sobat yang master ataupun jago dibidang gambar/photo tahu alasan teknis-nya.

Sekian.
Semoga bermanfaat dan Selamat mencoba. :)

Tampilkan Posting Datar dengan Thumbnail pada Blogger

Bagaimana membuat tampilan posting dengan thumbnail di homepage blog? Template default dari blogger memanglah kurang begitu menarik, khususnya bagian homepage-nya. Untuk membuatnya lebih menarik sobat blogger dapat menampilkan thumbnail (gambar) dari postingan blog sobat di homepage seperti pada Blog Dewa Inside ini. Tentunya sobat juga harus meng-upload gambar pada setiap postingan sobat agar muncul thumbnail pada postingan-nya. Selain itu, untuk lebih mempercantik template default dari blogger ini sobat dapat memberi warna background pada setiap posting maupun gadget yang berada pada sidebar blog sobat. Dapat sobat baca di --> Memberi Warna Background Judul Posting Blog dan Memberi Warna Background Judul Gadget di Blog. Kalau begitu langsung saja berikut cara memasang thumbnail pada postingan yang tampil di homepage.

Mungkin sobat dapat lihat dulu:

a.) Tampilan Posting dengan Thumbnail ala Majalah/Koran

b.) Tampilan Posting Grid view dengan Thumbnail

Cara Memasang: 

1. Pergi ke Template --> Edit HTML

2. Klik di kotak Edit HTML dan cari (CTRL+F) kode dibawah ini:

<data:post.body/>

    Pilih kode yang kedua

3. Ganti kode diatas dengan kode berikut:

<!-- thumbnail in homepage start -->

 <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;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#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>

<!-- thumbnail in homepage end -->

Catatan: *Tulisan Read More dapat sobat ganti sesuai keinginan.

*Perhatian: Dengan Anda mengganti kode <data:post.body/> , dikemudian hari apabila Anda ingin menambahkan kode lainnya seperti kode iklan, dll cukup tambahkan diatas atau dibawah-nya. Di atas berarti nanti tampilan iklan diatas posting, dibawah berarti nanti tampilan kode iklannya dibawah posting.

4. Klik di kotak Edit HTML dan cari (CTRL+F) kode dibawah ini:

</head>

5. Copy dan Paste kode berikut diatas-nya:

<!-- thumbnail in homepage start -->

 <script type='text/javascript'>

posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;

</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 +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

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

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

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

<!-- thumbnail in homepage end -->

Catatan: 

*Untuk mengatur jumlah kata yang ditampilkan jika posting tidak memiliki gambar, edit 490. Untuk mengatur jumlah kata yang ditampilkan jika posting memiliki gambar, edit 400.

*Untuk mengatur besar thumbnail (gambar), edit 160(tinggi) dan 180(lebar).

6. Preview kalau sobat ingin melihat dulu dan Save Template

Selamat Mencoba :)

Enjoy your new homepage.

Memberi Warna Background Judul Posting Blog

Template default blogger memang tidak menyediakan edit warna background judul posting pada Costumise-nya. Padahal dengan memberi warna background pada judul posting, dapat membuat lebih fokus pembaca mana judul dan mana isi. Selain itu membuat tampilan blog default blogger kita menjadi terlihat sedikit lebih menarik dari sebelumnya. Untuk itu agar bisa memberi warna background judul posting di blog sobat dapat lakukan pada Edit HTML-nya. Langsung saja berikut sobat ikuti langkah-langkahnya.

Langkah - Langkah: 

1. Pergi ke Template --> Edit HTML

2. Klik pada kotak Edit HTML dan cari (CTRL+F) kode:

h3.post-title, h4 {

    Kode lengkapnya akan terlihat seperti ini:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

3. Tambahkan kode berikut dibawah-nya:
    Pada dasarnya cukup tambahkan kode "background" saja. Karena tidak butuh garis bawah (kecuali sobat hanya
    ingin garis bawah), dan pading hanya untuk merapikan saja.

background:#3778cd;
border-bottom:4px solid #3778cd;
padding:1px 2px 3px 4px;

    Jadi akan terlihat seperti ini:

h3.post-title, h4 {

  font: $(post.title.font);

  color: $(post.title.text.color);

background:#3778cd;
border-bottom:4px solid #3778cd;
padding:1px 2px 3px 4px;

}

Catatan:
*background:#3778cd; --> Warna background. Sobat dapat lihat macam-macam kode warna di --> Kode Warna RGB
*border-bottom:4px solid #3778cd; --> Garis bawah
*padding:1px 2px 3px 4px; --> Merapikan posisi latar pada tulisan. 1px(atas), 2px(kanan), 3px(bawah), 4px(kiri).
 Sobat dapat belajar banyak kode HTML, CSS, Javascript, dkk di --> www.w3schools.com ada test hasil-nya juga.

4. Preview untuk melihat tampilan, jika cocok sobat dapat Save.

Sobat dapat lihat juga --> Cara Memberi Warna Background Judul Widget di Blog yang berada pada sisi samping tampilan blog sobat.
Selamat mencoba :)

Memberi Warna Background Judul Gadget di Blog

Sama hal-nya dengan Memberi Warna Background Judul Posting Blog, dapat membuat fokus pembaca akan isi suatu konten atapun gadget. Untuk postingan kali ini adalah memberi warna background judul widget (Artikel Populer, Komentar terakhir, dkk) yang biasanya berada pada sisi samping tampilan dari blog sobat. Seperti banyak orang bilang, perbedaan warna itu dapat menarik perhatian mata agar lebih fokus akan suatu hal.

Mungkin sobat juga tertarik:

a. Membuat Gadget Melayang di Blog

b. Menambah Gadget disamping Header Blog

c. Menampilkan/Mrnyembunyikan Gadget di Blog

Langsung saja berikut langkah-langkah untuk memberi warna background pada judul widget di blog.

Langkah - Langkah:

1. Pergi ke Template --> Edit HTML

2. Klik pada kotak Edit HTML dan cari (CTRL+F):

h2 {

    Kode lengkap akan terlihat seperti ini:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);

3. Tambahkan kode berikut di bawah-nya:

background:#3778cd;
border-radius: 11px 0px 11px 0px;

    Jadi akan terlihat seperti ini:

h2 {

  font: $(widget.title.font);

  color: $(widget.title.text.color);

  background:#3778cd;
  border-radius: 11px 0px 11px 0px;

Catatan:
*background:#3778cd; --> Warna background, Anda dapat memilih warna background (#3778cd) di --> Kode Warna RGB
*border-radius: 11px 0px 11px 0px; --> Mengatur bentuk latar background (11px 0px 11px 0px).
 Sobat dapat lihat di --> www.cssportal.com/css3-rounded-corner untuk lebih detail-nya.

4. Preview untuk melihat dan kalau cocok Save Template

Selamat mencoba :)