Apa Itu Blogger (Blogspot)

Blogger atau Blogspot adalah sebuah layanan publikasi blog yang dibuat oleh Pyra Labs dan diakuisisi oleh Google pada tahun 2003 dan membuatnya menjadi salah satu produk andalan.

Blogger adalah sebuah hosting/file milik Google yang dimana akan memudahkan pengguna untuk membuat sebuah blog atau website. Blogger merupakan salah satu platform blogging yang banyak digunakan. Karena blogger dimiliki oleh raksasa Google menjadi minat para blogger pemula yang ingin mencoba-coba membuat blog secara gratis.

Fitur-fitur Blogger

Fitur	Fungsi
	untuk membuat postingan baru.
	untuk menampilkan rangkuman postingan, baik yang telah anda publikasikan maupun yang masih dalam draft.
	untuk menampilkan informasi ikhtisiar, postingan, sumber lalu lintas dan pemirsa.
	untuk menampilkan informasi komentar. Baik komentar yang dipublikasikan maupun komentar yang terindikasi spam.
	untuk menampilkan informasi tentang program yang dapat memberikan penghasilan.
	untuk menampilkan informasi tentang program yang dapat membantu meningkatkan pemirsa.
	untuk menampilkan informasi halaman. Menambah, menghapus ataupun mengedit halaman.
	untuk menampilkan informasi bentuk blog. Bisa mengedit, menambah, mengurangi gadget untuk melengkapi blog.
	untuk menampilkan informasi tema dasar, tata letak, warna, font, dan lainnya.
	untuk memberikan settingan pada blog.

Kelebihan Blogger

1. Merupakan salah satu produk Google. Sehingga dapat terintegrasi dengan layanan-layanan dari Google yang lainnya.

2. Sangat ramah dengan SEO (search engine optimization) / SEO Friendly.

3. Cukup mudah digunakan dan sangat praktis / User Friendly.

4. Mudah melakukan kostumisasi blog kita sendiri.

5. Bisa dimonetisasi.

Kekurangan Blogger

1. Tampilan dashboard admin yang sederhana.

2. Menulis artikel kurang leluasa, karena tools yang disediakan tidak begiet lengkap.

3. Template yang disediakan sangat sedikit.

4. Harus patuh dan tunduk pada peraturan Google.

Sekian pembahasan tentang Apa Itu Blogger (Blogspot).

Terima kasih
Enjoy your day!

Memasang Kolom Komentar Disqus Untuk Blogger

Memasang kolom komentar Disqus membuat kolom komentar blog kita tampak bagus karena kolom komentar Disqus tampilannya enak untuk dilihat. Tapi kelemahan kolom komentar Disqus akan memperberat load di blog kita.

Jadi bila ingin memasang kolom komentar Disqus disini kita akan memberikan langkah-langkahnya.

Pertama menambahkan gadget Disqus

1. Masuk ke menu Tata Letak dan klik Tambahkan Gadget pada Sidebar

2. Dalam popup Tambahkan Gadget, cari HTML/Javascript gadget dan klik tombol +

3. Masukan judul dengan Disqus dan konten dengan <!-- Disqus comments gadget -->

4. Klik Simpan

5. Lalu klik Simpan stelan

Kedua menambahkan kode Disqus pada template

1. Masuk ke menu Template dan klik Edit HTML

2. Cari kode (Ctrl+F)

<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>

3. Tambahkan kode mobile='yes' 

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>

4. Cari kode widget Disqus. Kodenya seperti ini:

<b:includable id='main'>
 <!-- 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:includable>

5. Ganti kode diatas dengan kode Disqus. Seperti ini:

<b:includable id='main'>
 <script type='text/javascript'>
  var disqus_shortname = &#39;EXAMPLE&#39;;
  var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

  if (!disqus_blogger_current_url.length) {
   disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
  }

  var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
  var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
 </script>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css'>
   #comments {display:none;}
  </style>

  <script type='text/javascript'>
   (function() {
    var bloggerjs = document.createElement(&#39;script&#39;);
    bloggerjs.type = &#39;text/javascript&#39;;
    bloggerjs.async = true;
    bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
   })();

  </script>
 </b:if>
  <style type='text/css'>
   .post-comment-link { visibility: hidden; }
  </style>

  <script type='text/javascript'>
  (function() {
   var bloggerjs = document.createElement(&#39;script&#39;);
   bloggerjs.type = &#39;text/javascript&#39;;
   bloggerjs.async = true;
   bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
   (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
  })();

 </script>
</b:includable>

Ingat ganti EXAMPLE dengan shortname disqus kita. 

Contoh shortname disqus saya ialah serverrendi.

6. Klik Simpan template

7. Selesai, lalu lihat salah satu postingan kita akan muncul kolom komentar Disqus

Jika kolom komentar Disqus tidak muncul, boleh diskusi disini.

Terima kasih 

Enjoy your day!

Blog - Membuat Loading Page

Cara membuat loading sebelum page selesai reload di Blogger.
Jika belum memiliki GIF untuk loading nya bisa download di 5 Website Penyedia Loading Generator.

1. Pilih menu "Template"
2. Lalu pilih "Edit HTML"
3. Cari kode ]]></b:skin>
4. Masukan kode CSS di atas tag ]]></b:skin>
CSS

.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSwBQ2KSslvUKpmmqNYpcWkBwH6NM24T_AGSClc8zALJNiEZIEi6aEmDrcPhdOo4fr5SVIDdWjJJ8jQcIFG9k-4dqRjz94AkcPrtE1vV9SQvXECMIYgvwLhb39EM7Fmwg9XO2egtV1Dc/s1600/loading.gif") center no-repeat #fff;
}

Ket:
Ubah url(..) dengan url GIF anda. Jika belum, upload dahulu ke Blogger.

5. Cari kode <body>
6. Masukan kode HTML di bawah tag <body>
HTML

<div class="loading"></div>

7. Cari kode </body>
8. Masukan kode Javascript di atas tag </body>
JAVASCRIPT

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).load(function() {
$(".loading").fadeOut("slow");
});
</script>

9. Terakhir "Simpan Template"

Terima kasih
Enjoy your day !

Blog - Membuat Widget Recent Post

Cara membuat Widget Blog Recent Post simple dan bisa di custom tampilannya sesuai selera kita.

1. Pilih menu "Tata Letak".
2. Lalu pilih "Tambahkan Gadget" di sidebar.

3. Pilih "HTML/JavaScript".

4. Masukan Judul dengan Recent Post / apapun sesuai selera anda.
5. Setelah itu tinggal masukan kode di bawah ke dalam Konten.

<style>
.RecentPosts li a {
    color: #222222;
    font-family: 'Open Sans',arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.RecentPosts li a:hover {
    text-decoration: underline;
}
.RecentPosts li {
    border-left: 5px solid #242628;
    padding: 0 0 8px 15px;
}
</style>
<ul id="recent-posts" class="RecentPosts"></ul>
<script>
//<![CDATA[
var homePage = "http://serverrendi.blogspot.com/",
numPosts = 7;
function recentPosts(a){
 if(document.getElementById("recent-posts")){
  var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");
  for(var i=0;i<numPosts;i++){
   for(var j=0;j<numPosts;j++){
    if(e[i].link[j].rel=="alternate"){
     link=e[i].link[j].href;break
    }
   }
   var title=e[i].title.$t;
   content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'
  }
  ct.innerHTML=content
 }
}
var rcp=document.createElement('script');
rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';
document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Ket :
Ubah var homePage = "http://serverrendi.blogspot.com/" dengan blog anda.
Ubah numPosts = 7 jika ingin merubah jumlah post yang ingin di tampilkan .

6. Terakhir "Simpan".

Tampilan Widget Recent Post

Jika ingin mempercantik tampilannya kita tinggal ubah ubah CSS nya di dalam tag <style>...</style>

Terima kasih
Enjoy your day !

Blog - Mengatasi Error image: missing and required

Cara mengatasi error "image: missing and required" saat mencoba Structured Data Testing Tools.

1. Pilih menu "Template".

2. Lalu pilih "Edit HTML".

3. Ubah kode.

Cara kesatu

Cari kode / Ctrl+F 

<div class='Image'> 

Ubah menjadi

<div class='Image' itemprop="image">

---

Cara kedua

Cari kode / Ctrl+F 

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

jika kode berbeda ganti dengan

class='post hentry' atau itemtype='http://schema.org/BlogPosting'

Tambahkan kode ini di bawah nya

<b:if cond='data:post.thumbnailUrl'>

<meta expr:content='data:post.thumbnailUrl' itemprop='image'/>

</b:if>

4. Terakhir pilih "Simpan Template".

5. Test kembali blog kita di Structured Data Testing Tools. (Tersenyum)

Terima kasih

Enjoy your day !

Blog - Membuat Breadcrumbs di Blogger

Cara membuat breadcrumbs/navigasi di atas postingan di Blogspot/Blogger.

1. Pilih menu "Template"
2. Lalu pilih "Edit HTML"
3. Kemudian cari kode / Ctrl+F "]]></b:skin>"
4. Copy kode di bawah ini dan paste tepat di atas kode "]]></b:skin>"

.breadcrumbs {
 padding:10px 5px 10px 30px; 
 margin: 0px 0px 15px 0px; 
 font-size:85%; 
 line-height: 1.4em; 
 border-bottom:10px solid #EEEEEE;
}

5. Kemudian cari kode / Ctrl+F "<b:includable id='main' var='top'>"
6. Copy kode di bawah ini dan ganti kode "<b:includable id='main' var='top'>"

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/>
</span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187;
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>
</span>
</b:loop>
&#187;
<span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span>
&#187;
<span>Unlabelled</span>
&#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Archives for <data:blog.pageName/>
</span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span>
<a expr:href='data:blog.homepageUrl'>Home</a>
</span>
&#187;
<span>All posts</span>
<b:else/>
<span>
<a expr:href='data:blog.homepageUrl'>Home</a>
</span>
&#187;
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

7. Terakhir pilih "Simpan Template"

Jika berhasil akan muncul seperti gambar di atas. Jika hasilnya tidak sesuai bisa edit di code CSS nya sesuai selera anda.

Terima kasih
Enjoy your day !