Cara Menambahkan Widget Artikel Terbaru Tanpa Gambar Di Blog

Widget artikel terbaru berisi pos yang baru saja kita publiskan, widget ini juga salah satu widget yang terpenting untuk blog selain popular post, widget ini dapat membantuh pengunjung untuk melihat artikel terbaru kita dari halaman manapun, tidak ahrus dari halaman depan.

Widget ini juga berfungsi untuk menarik perhatian pengunjung, jadi ketika selesai membaca suatu artikel, maka pengunjung dapat melihat artikel terbaru, fungsinya sama seperti artikel terkait. Nah pada pos kali ini saya akan mengajarkan cara menambahkan widget artikel terbaru tanpa gambar di blog

Cara Menambahkan Widget Artikel Terbaru Tanpa Gambar Di Blog :

1. Buka blogger.com

2. Pilih blog yang akan ditambahkan widget artikel terbaru

3. klik Tata Letak

4. Klik Tambahkan Gadget, terserah kalian mau di sidebar, footer, atau header

5. Lalu klik HTML/JavaScript

6. Copy kode dibawah 

<script src="https://sites.google.com/site/seocips/seocips-script/artikel-terbaru-seo.js"></script>
<script>var numposts = 8; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://tipikomu.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

angka 8 adalah jumlah artikel yang muncul pada widget

ubah http://tipikomu.blogspot.com jadi url blog kalian

7. Beri judul Artikel Terbaru lalu paste kode yang sudah di copy tadi lalu klik Simpan

Silahkan cek hasilnya di blog kalian

Demikian Cara Menambahkan Widget Artikel Terbaru Tanpa Gambar Di Blog semoga dapat membantu kalian

Cara Mengganti Header Judul Blog Menjadi Gambar

Header adalah bagian atas sebuah blog, pada bagian ini terletak judul dan deskripsi blog, header juga dapat memberitahukan apa isi blog tersebut. Header ini adalah bagian penting karena ketika kita membuka blog maka yang pertama dilihat pengunjung pasti header. Header ini juga berguna untuk mempermudah pengunjung untuk mengingat blog kita.

Contohnya kita menggunakan template gratisan kemungkinan ada blogger lain yang juga menggunakan template seperti kita. Jika sudah seperti ini maka pengunjung akan sulit mengingat blog kita. Header gk selalu harus terlalu bagus yang penting simple dan mudah di ingat. Header juga harus sesuai ama konten blog dan kalau bisa isikan header dengan deskripsi

di bawah ini header yang sekarang saya gunakan

Cara Mengganti Header Judul Blog Menjadi Gambar 

Pastikan kalian sudah memiliki gambar untuk dijadikan header, kalau belum ada silahkan buat dulu

, sebelum membuat gambar yang akan dijadikan header tentukan dulu ukuran gambarnya. Jika sudah memiliki gambar untuk dijadikan header ikuti saja langkah dibawah ini

1. Buka blogger.com lalu pilih blog yang akan di ganti headernya

2. Klik Tata Letak 

3. Klik Edit pada bagian Gadget Header Halaman

4. Klik Choose File

5. Pilih gambar yang akan dijadikan header lalu klik Open
catatan : centang susutkan agar sesuai, ini membuat ukuran gambar sesuai dengan blog, namun centang pada saat gambar sedang proses upload/loading agar tidak memperkecil ukuran gambar yang asli dan membuat gambar tidak blur

6. Centang Selain judul dan keterangan agar tidak menampilkan judul blog dan keterangan blog lalu klik Simpan

Dengan begini header kalian sudah terganti menjadi gambar, dan ini membuat blog kalian dapat lebih mudah untuk di identifikasi

Nah itu tadi Cara Mengganti Header Judul Blog Menjadi Gambar semoga dapat membantu kalian

Cara Membuat Tombol Back to Top di Blog

Back to top adalah sebuah tombol yang ketika di klik maka halaman yang sedang kita kunjungi atau halaman yang sedang aktif dibrowser kita akan otomatis scroll keatas tanpa harus mengscrollnya lagi menggunakan touchpad atau mouse, tentu saja tombol ini akan sangat berguna bagi pengunjung blog kalian, tombol ini akan memudahkan pengunjung kalian untuk menscroll keatas dengan hanya mengklik tombol back to top.

 Kalian bisa menemukan contoh tombol back to top di blog ini ketika kalian menscroll kebawah makan tombol back to top akan muncul sendirinya di sudut bawah kanan, nah pada pos kali ini saya akan mengajarkan cara membuat tombol back to top

Cara Membuat Tombol Back to Top di Blog :

1. pastikan html blog kalian memiliki kode jquery, kodenya seperti ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

atau seperti ini

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

kalau html blog kalian belum memiliki kode seperti diatas cukup tambahkan saja
- masuk ke blogger.com lalu pilih blog yang ingin ditambakan kode jquery
- klik Template > Edit Html
- cari kode </head> (tekan ctrl+f lalu ketik </head> di kolom yang muncul lalu tekan Enter)
- lalu copy salah satu code diatas lalu paste tepat diatas kode </head>
- lalu klik Simpan Template

2. klik Tata Letak 

3. klik Tambahkan Gadget di sidebar

4. pilih HTML/JavaScript

5. copy dan paste code dibawah ini

<style>.mbw-back-to-top {    position: fixed;    bottom: 2em;    right: 10px;    text-decoration: none;    padding: 1em;    display: none;    cursor:pointer;}</style><img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LbptDxPl3S2rkEWyhWWcxfbVmDiGlfEPk-6qYFFX0NdONhDfHFg32vjdTnT-93NhDQeURyO-i6m1iJBYmy_2F6Xzf9jcZQ1ZppNR6ywuJOnBBpmJzmJfzYrW4L81bAhsZWFAjn6x-Rc/s1600/back+to+top.png" /><script type="text/javascript">/*****mybloggersworld.com***/jQuery(document).ready(function() {    var offset = 220;    var duration = 500;    jQuery(window).scroll(function() {        if (jQuery(this).scrollTop() > offset) {            jQuery('.mbw-back-to-top').fadeIn(duration);        } else { //www.mybloggersworld.com            jQuery('.mbw-back-to-top').fadeOut(duration);        }    });       jQuery('.mbw-back-to-top').click(function(event) {        event.preventDefault();        jQuery('html, body').animate({scrollTop: 0}, duration);        return false;    })});</script>

kalian bisa merubah kode warna merah dengan url gambar back to top yang ingin kalian tampilkan di blog, kalian bisa mencari gambar back to top di google atau membuatnya sendiri
nah dengan begini blog kalian sudah mempunyai tombol back to top yang akan mempermudah pengunjung untuk menscroll keatas

semoga Cara Membuat Tombol Back to Top di Blog bisa bermanfaat dan berguna bagi kalian

Cara Membuat Sitemap Simpel di Blog

Sitemap atau Peta Situs adalah salah satu alat bantu untuk para webmaster yang mempermudah pengenalan peta situs di dalam website. Sederhananya sitemap adalah daftar isi yang membantu pengunjung blog kita untuk melihat artikel kita. Semua artikel yang sudah dibuat akan muncul pada sitemap dalam tampilan yang simpel. Sitemap pun sangat berguna bagi perkembangan blog, nah pada pos kali ini saya akan mengajarkan cara membuat sitemap simpel di blog
keuntungan mempunyai sitemap di blog adalah mempermudah pengunjung mencari artikel yang ingin dibaca


Cara Membuat Sitemap Simpel di Blog :

1. Buka blogger.com lalu pilih blog yang akan dibuatkan sitemap

2. klik Laman lalu klik Laman Baru

3. beri judul Sitemap

4. lalu klik HTML lalu copy dan paste kode dibawah

<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://tipikomu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

ubah tulisan warna biru dengan url kalian

5. lalu klik Publikasikan

nah dengan begini sitemap sudah jadi, namun bagaimana cara memunculkannya di blog? itu pintar-pintarnya kalian saja, kalian bisa menaruhnya di widget atau di tab navigasi kalau kalian punya
nah itu tadi Cara Membuat Sitemap Simpel di Blog semoga bermanfaat

Cara Membuat Read More/Baca Selengkapnya di Blog

Blogger menyediakan template yang sangat banyak, namun pada template yang disediakan blogger kita melihat pada halaman utama blog posnya sangat panjang, namun biasanya ada template yang memang sudah mempunya fitur read more, nah pada pos kali ini saya akan mengajarkan cara membuat read more/baca selengkapnya pada template yang di sediakan blogger

Cara Membuat Read More/Baca Selengkapnya di Blog :

1. klik Template > Edit HTML

2.tekan ctrl + f pada keyboard lalu ketik </head> lalu tekan Enter

3. copy kode dibawah dan paste tepat diatas kode </head>

<!--ReadMore-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</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 = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->

4. klik Simpan Template

5. tekan ctrl + f lalu ketik id='post' var='post' lalu tekan Enter

6. klik  tanda panah yang ada pada kiri tulisan yang sudah dicari

7. lalu cari kode  <data:post.body/> tekan ctrl + f lalu cari kode tersebut dengan menekan Enter

8. lalu ganti kode <data:post.body/> dengan kode dibawah ini

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

kalian bisa mengganti Baca Selengkapnya menjadi Read More atau apapun sesuai keinginan kalian

9. klik Simpan Template

nah itu tadi Cara Membuat Read More/Baca Selengkapnya di Blog semoga bisa membantu kalian

Cara Membuat Judul Blog Pada Address Bar Bergerak

pernahkah kalian melihat blog yang judul blognya pada address bar bergerak, biasanya orang membuatnya bergerak agar judul blognya terlihat semua karena biasanya ada judul blog yang terpotong pada address bar, tapi ada juga yang membuat judul blognya bergerak karena ingin keliatan keren, pada pos kali ini saya akan mengajarkan cara membuat judul blog pada address bar bergerak

Cara Membuat Judul Blog Pada Address Bar Bergerak :

1. buka Tata Letak

2. klik Tambahkan Gadget

3. pilih HTML/JavaScript

4. copy kode ini

<script type='text/javascript'>
//<![CDATA[
msg = " ----JUDUL BLOG----- ";
msg = " JUDUL BLOG " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

JUDUL BLOG bisa kalian ganti sesuai dengan judul blog kalian

5. paste kode yang sudah di copy tadi ke kolom Konten lalu klik Simpan

sekarang kalian bisa lihat blog dan lihat apa yang berubah

semoga Cara Membuat Judul Blog Pada Address Bar Bergerak ini dapat membantu kalian