Latest Posts

thumbnail

Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot)

Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot)
Cara Memindahkan Isi (Konten, Posting, Tulisan) Blog dari WordPress ke Blogger (Blogspot).

BLOGGER dengan platform wordpress bisa dengan mudah pindah atau beralih ke blogger (blogspot) dan memindahkan isinya (konten, posting) juga dengan mudah.

Alasan pindah ke Blogger terutama faktor Google AdSense.

Di WP gratisan tidak bisa memasang AdSense, kecuali blog dengan CMS WP Selfhosted. Kalau yang gratisan gak bisa.

Baca Juga: Kelebihan Ngeblog di Blogger vs WP

Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot)

Bagaimana Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot)?

1. Buat dulu blognya di Blogger. Turorial: Cara Membuat Blog di Blogger
2. Login ke akun Wordpress.com Anda.
3. Di Dashboard WP, klik Tools > Export

download konten wp

download konten wp

4. Simpan filenya --dengan ekstensi .xml-- di tempan aman dan mudah ditemukan.

5. Convert file hasil download di WP tadi di halaman ini: WordPress to Blogger Converter

wordpress to blogger converter

6. Klik "Choose File" dan ambil file .xml hasil download / export di WP tadi. Simpan di folder yang mudah ditemukan.

Link Convert Lainnya: WP2BLOGGER

Proses Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot) di blog WordPress Selesai. Kini beralih ke Blogger.

PROSES MEMINDAHKAN KONTEN WP ke BLOGGER

7. Masuk atau buka akun Blogger Anda. Di dashboard, klik Setting > Other > Import seperti gambar berikut ini:

Setting > Other > Import

8. Akan muncul  seperti ini:

impor file wp

9. Anda bisa klik "Otomatis publikasikan" bisa juga tidak. Jika tidak dicentang, maka posting akan menjadi draft yang bisa diedit kembali sebelum dipublikasikan.

10. Klik "Import from Computer" dan ambil file .xml hasil convert di langkah ke-5, klik Open, dan tunggu hingga proses selesai.

BERES!


Blogger ke WordPress

Bagaimana kalau sebaliknya, yaitu memindakan isi blog Blogger ke WordPress? Prosesnya sama, namun impor-ekspornya dibalik.

1. Di Blogger : Eksport / Back-up
2. Di WP : Import.

Untuk convert file download Blogger ke WP: Blogger to WP App

Blogger to WP

Demikian Cara Memindahkan Isi Blog WordPress ke Blogger (Blogspot). 

Sudah banyak tips cara pindah blog dari wp ke blogger, namun banyak link convert filenya yang sudah mati. Link convert wordpress to blogger dan blogger to wodpress di atas setidaknya masih berfungsi saat posting ini ditulis, Jumat (17/2/2017).

Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

Mengatasi Ringkasan Auto Readmore yang Tidak Muncul

Mengatasi Ringkasan Auto Readmore yang Tidak Muncul di Halaman Depan Blog.

BARUSAN, sebelum menulis posting ini, CB lagu desain template baru. Tiba-tiba ringkasan posting halaman depan (auto readmore) tidak muncul. CB cek blog lain, ada yang masih muncul, ada yang tidak muncul alias hilang.

Eh... blog CB ini juga mengalami nasib yang sama! 

Mengatasi Jumlah Ringkasan Auto Readmore yang Tidak Muncul
Ringkasan Auto Readmore Tidak Muncul.*

Mengatasi Jumlah Ringkasan Auto Readmore yang Tidak Muncul
Ringkasan Auto Readmore Muncul Normal.*

Ternyata, blog lain, misalnya blog Masyadi dan blog Kang Mousir, juga mengalami nasib yang sama, yaitu  ringkasannya kosong alias tidak muncul, hanya judul doang, seperti dalam screenshot berikut ini.

Ringkasan Auto Readmore yang Tidak Muncul

Ringkasan Auto Readmore yang Tidak Muncul


Apa pasal? Ternyata, masalahnya adalah kode snippet bawaan blogger yang entah sedang error atau memang sudah tidak berfungsi mulai hari ini, Kamis (16/2/2017), yaitu kode <data:post.snippet/> 

Jadi, semua blog yang menggunakan Auto Readmore tanpa JavaScript akan mengalami hal yang sama, setidaknya saat CB cek sebelum menulis posting ini.

Berikut ini solusinya setelah CB melakukan trial and error, yaitu dengan menggunakan metode Membatasi Jumlah Ringkasan Posting Halaman Depan Blog.

Mengatasi Ringkasan Auto Readmore yang Tidak Muncul

Cara mengatasi Ringkasan Auto Readmore yang Tidak Muncul, sekaligus membatasi jumlah ringkasan (snippet/summary) di halaman depan blog (auto readmore), lakukan langkah ini:

1. Klik Template > Edit HTML
2. Copas kode berikut ini di atas kode </head> 

<script type='text/javascript'>
snippet_count = 140;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

3. Cari (Ctrl+F) dan Ganti SEMUA kode <data:post.snippet/> dengan kode ini:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

CATATAN:
Jika kode <data:post.snippet/> tidak ditemukan, seperti di template New Johny Wuss dan CB Simple Magz, maka kodenya yang harus diganti seperti ini:

<div class='post-snippet' expr:data-snippet='data:post.snippet'/>

Hapus kode tersebut dan ganti dengan kode ini:

<div class='post-snippet'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</div>

4. Atur jumlah ringkasan di kode snippet_count = 140; 

Untuk template New Johny Wuss, CB Simple Magz, dan sejenisnya (dua kolom auto readmore halaman depan) jumlah karakternya 70 atau 100 saja, sesuaikan dengan tampilan dan gambar thumbnail.

Demikian Mengatasi Ringkasan Auto Readmore yang Tidak Muncul. Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

Media Sosial Berperan Besar Meningkatkan Jumlah Pengunjung Blog

Media Sosial Berperan Besar Meningkatkan Jumlah Pengunjung Blog
SEO Media Sosial Tingkatkan Pengunjung Blog
Gambar: blog.dlvrit.com.*
Media Sosial Beran Besar Meningkatkan Jumlah Pengunjung Blog. Kita tahu, peringkat blog kita juga ditentukan Google salah satunya berdasarkan Social Signal, yaitu like, share, and comments di media sosial, terutama Facebook dan Twitter.

Media sosial bahkan sudah masuk trik SEO tersendiri, yang dikenal dengan istilah Social Media Optmization (SMO). CB sudah share soal SMO, juga tips SEO lainnya di posting Pengertian SEO, SEM, SMO, dan SMM.

CB baru saja baca berita tentang peran media sosial dalam meningkatkan pengunjung blog atau website. Memang, berita tentang situs berita atau media online, tapi berlaku juga buat blog.

Diberitakan USA Today, hasil survei John S. dan James L. Knight Foundation menunjukan, media sosial dan link (tautan) yang tersebar di media sosial adalah media yang paling sering ditempuh pembaca untuk mendapat berita online (membuka website/blog).

Hasil survei yang dirilis Kamis (9/2/2017) itu menunjukkan, sebanyak 2.004 pembaca berita online menyatakan 36% di antara mereka mengaku mengakses berita online langsung ke situs tertentu. Sebanyak 35% lainnya memilih media sosial sebagai sumber beritanya. Sebanyak 65% mengaku menggunakan kedua cara tersebut.

Setelah membuka situs berita, 56% pembaca berita online mengaku bisa mengingat nama situs berita yang telah mereka kunjungi. Sedangkan 44% sisanya mengaku sama sekali lupa sumber berita yang mereka baca.

Pembaca berita online mengaku lebih mudah mengingat nama situs berita yang dibuka sendiri, dibanding berita yang dibuka dari media sosial, email, maupun broadcast teman. Survei menemukan 14% diantara mereka mengingat CNN, 12% mengingat Fox news, 10% mengingat Facebook dan sisanya tidak ingat sama sekali situs apa yang menjadi sumber beritanya.

Survey Pew sebelumnya bahkan menunjukan 47% orang Amerika mendapat berita dari Facebook. Pembaca berita online muda lebih sering mengandalkan media sosial untuk sumber beritanya.

Mereka mengaku 47% sumber beritanya adalah media sosial. Sedangkan hanya 42% kelompok usia 30-49 yang mengandalkan Facebook, dan 23% kelompok usia diatas 50 tahun yang memanfaatkan Facebook.

Data hasil survey di atas menunjukkan Media Sosial Beran Besar Meningkatkan Jumlah Pengunjung Blog. Maka, para blogger disarankan membuat akun media sosial, terutama Facebook (Fans Page), Twitter, Google Plus, untuk menyebarkan link update postingnya.

Demikian salah satu trik meningkatkan jumlah pengunjung blog. Baca juga: Cara meningkatkan jumlah pengunjung blog. 

Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

Cara Membuat Navigasi Menu Responsive Keren untuk Blogger

Cara Membuat Navigasi Menu Responsive Keren untuk Blogger.

KALI ini CB share lagi Cara Membuat Navigasi Menu Responsive Keren untuk Blogger, melengkapi tips desain blog sebelumnya tentang Navigasi Menu Mobile-Friendly.

Tampilannya seperti gambar di bawah ini. Keren 'kan? Demo selengkapnya bisa dicek di sumber.

Cara Membuat Navigasi Menu Responsive Keren untuk Blogger

Cara Membuat Navigasi Menu Responsive Keren untuk Blogger

Langkah pertama ada masuk dulu ke kode xml template blog Anda: Template > Edit HTML. Setelah itu pasang kedua kelompok kode navigasi menu responsive untuk bloggr berikut ini.

KODE CSS & JAVASCRIPT  MENU RESPONSIVE
Simpan di atas kode </head>

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu &gt; ul:after {
  content: &quot;.&quot;;
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: &#39;Source Sans Pro&#39;, sans-serif;
  line-height: 1;
  background: #6bb9f0;
  background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
  background: linear-gradient(to top, #54aeee, #82c4f2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;
 
}
#cssmenu &gt; ul &gt; li {
  float: left;
}
#cssmenu.align-center &gt; ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center &gt; ul &gt; li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right &gt; ul &gt; li {
  float: right;
}
#cssmenu &gt; ul &gt; li &gt; a {
  padding: 10px 15px 11px 15px;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu &gt; ul &gt; li:first-child &gt; a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#cssmenu.align-center &gt; ul &gt; li:first-child &gt; a {
  border-radius: 0;
}
#cssmen.align-right &gt; ul &gt; li:first-child &gt; a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#cssmenu &gt; ul &gt; li:hover &gt; a,
#cssmenu &gt; ul &gt; li.active &gt; a {
  color: #444444;
}
#cssmenu &gt; ul &gt; li:hover &gt; a,
#cssmenu &gt; ul &gt; li &gt; a:hover {
  background: rgba(125, 125, 125, 0.04);
}
#cssmenu &gt; ul &gt; li:after {
  content: &#39;&#39;;
  position: absolute;
  top: 12px;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .15;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right &gt; ul &gt; li:after {
  right: auto;
  left: -1px;
}
#cssmenu &gt; ul &gt; li:before {
  content: &#39;&#39;;
  position: absolute;
  top: 12px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right &gt; ul &gt; li:before {
  right: auto;
  left: 0px;
}
#cssmenu &gt; ul &gt; li:last-child:after,
#cssmenu &gt; ul &gt; li:last-child:before {
  display: none;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen &gt; ul,
#cssmenu.small-screen.align-center &gt; ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen &gt; ul &gt; li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen &gt; ul &gt; li &gt; a {
  padding: 18px 25px;
}
#cssmenu.small-screen &gt; ul &gt; li:after,
#cssmenu.small-screen &gt; ul &gt; li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px 19px 25px;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: &quot;&quot;;
  position: absolute;
  right: 25px;
  top: 20px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fcfefb;
  border-bottom: 2px solid #fcfefb;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: &quot;&quot;;
  position: absolute;
  right: 25px;
  top: 30px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}
</style>
<script>//<![CDATA[
(function($) {
  $.fn.menumaker = function(options) {
     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);
      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }
        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }
          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
      });
  };
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
});
});
})(jQuery);
//]]>
</script>

KODE HTML MENU RESPONSIVE 
Simpan di bawah kode header. Jika akan ditampilkan di atas header, simpan di atas kode header. Kode header biasanya diakhir dengan kode <!-- /header-wrapper -->

<div id='cssmenu'>
<ul>
   <li class='active'><a href='/'>Home</a></li>
   <li><a href='/p/about.html'>About</a></li>
   <li><a href='/p/static-page.html'>Static Page</a></li>
   <li><a href='#' target='_blank'>Tutorials</a></li>
   <li><a href='#'>Customization</a></li>
</ul>
</div>

Demikian Cara Membuat Navigasi Menu Responsive Keren untuk Blogger. Barangkali menu blog Anda saat ini kurang keren dan mau diganti :) Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

Pengertian Template Blog Responsive - Mobile Friendly

Pengertian Template Blog Responsive - Mobile Friendly
Pengertian Template Blog Responsive - Mobile Friendly - Ramah Perangkat Mobil alias HP/Smartphone.

Template blog saya sudah responsive belum? Blog saya sudah responsive?

Demikian pertanyaan yang muncul dari blogger "newbie", setidaknya blogger yang belum paham atau belum tahu apa arti sebenarnya template responsif.

Template blog responsive adalah desain tampilan blog yang ukurannya mengikuti lebar dan tinggi perangkat (device) yang digunakan untuk membukanya, dalam hal ini perangkat mobile (mobile devices) alias SmartPhone aka HandPhone (HP).

Template, blog, atau website responsive disebut juga situs yang ramah mobil (mobile-friendly). Responsive menjadi salah satu faktor SEO penting sehingga blog disukai mesin pencari (seo friendly) dan disukai pengguna (user friendly).

Cara Mengetahui Template Blog Responsive

Google sudah menyediakan halaman khusus untuk mengecek apakah blog atau website kita responsive apa belum, yaitu Mobile-friendly test.

Mobile-friendly test.


Buka link tersebut, masukkan alamat blog Anda, dan klik RUN TEST. Hasilnya, jika blog Anda sudah responsive, akan seperti seperti ini. Di samping kanan juga muncul penampakan blog kita jika dibuka di HP.

Mobile-friendly test.

Selain di Mobile Friendly Test milik Google itu, kita juga bisa cek ke-resposive-an blog kita di link berikut ini:

  1. Am I Responsive
  2. Troy Labs Daum

Di Troy Lab lebih lengkap ukuran HP-nya, mulai dari 320 Pixel hingga Tab 800 Pixel. Silakan cek blog Anda di sana, namun cek yang lebih akurat tentu saja langsung buka di HP Smartphone atau Android Anda.

Template  blog yang CB bagikan di sini, terutama setelah trend responsive design, semuanya responsive, termasuk Template Simple White yang gatis dan koleksi template seo friendly di koleksi template blogger di Galeri Template CB.

Cara Setting Template Blog Responsive

Sebenarnya blogger sudah menyediakan versi HP-nya jika template blog kita belum responsive, yakni template reponsif bawaan blogger (mobile template), dengan settingan seperti ini --klik "Yes. Show mobile template on mobile devices".

aktifkan template responsive blogger

Namun, jangan lupa, jika Anda sudah mendownload template responsive gratis atau premium, setting templatenya bukan seperti di atas, tapi umumnya seperti ini --klik "Yes. Show desktop template on mobile devices".


aktifkan template responsive blogger

Jika Anda menggunakan template responsive, namun tampilan di HP masih template bawaan blogger, itu karena settingan templatenya tidak mencentang "Yes. Show desktop template on mobile devices".

Tempate blog responsive menjadi WAJIB di era kebanyakan pengguna internet membuka web lewat HP seperti sekarang. Google bahkan sudah meluncurkan algoritma MobileGeddon pada 21 April 2015 yang mengutamakan blog atau website yang mobie-friendly.

Apakah blog Anda sudah responsve? Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

7 Tips for Making Your Website Friendlier to Smartphone Users

7 Tips For Making Your Website Friendlier To Smartphone Users
7 Tips For Making Your Website Friendlier To Smartphone Users. Guest Post by David Wicks.

WHAT do you do when looking for an item or an unknown location? You Google, right?

Just like you do, there are a billion other people around the world who Google for information on products and services and almost all these online searches are done using smartphones and/or tablets.

You know what this means; for your practice to be read and for you to generate convertible leads, your website must be responsive to these different devices. 

The leading search engine, Google has even mentioned that mobile readiness or responsiveness of a website is important in ranking. Therefore, your site should be navigable and easily accessible on a mobile phone.

7 Tips for Making Your Website Friendlier to Smartphone Users

Desktops have been outstripped by mobile devices and you should implement the following strategies for your site to be reached:

1. Use simple content

Bulky content is agonizing for most readers. Even the richest content can be summarized. Failure to do this leads to high abandonment rates since mobile readers tend to have shorter attention spans compared to desktop readers.

To appeal to readers, reduce the length of sentences. Cut down unnecessary phrases. Have powerful content at the front. Use short but strong headlines. Write short paragraphs and focus at the center of the screen with your content.

2. Get rid of unplayable content

You know what this means. Even though you have license-constrained content or flash content, you must remember that this content isn’t accessible by mobile users.

If they cannot read or listen to the content, then your potential client will be disappointed thus abandoning your ship.

Such unplayable content should be eliminated. You should also get rid of application prompts and any faulty redirects to keep potential clients on your site.

3. Reduce the resource intensive content

Despite the heavy and intensive technological advancements made in the past few years, mobile devices lack the power possessed by laptops and desktop computer devices. Generally, mobile phones have a lower bandwidth. The under-the-hood element is highly likely to render the complex java scripts and heavy videos inaccessible.

If you have ads, these should be retracted as well since they are intensive, annoying, and they often render your site unusable through a mobile phone device.

4. Place more emphasis on frequented pages

The reason why your website and your digital marketing strategy needs to incorporate a web analytical tool like Google Analytics is because such tools give insights into which sites or pages get more access.

If the online store gets more visits, then you must focus your resources in these areas. Ensure that the product description tab is very responsive and the checkout process using the phone is efficient. Make the site that gets more clicks as effective as possible.

5. Opt for smaller images

Big in very high-resolution images take a lot of bandwidth and more time to load. For someone on their phone, this isn’t plausible and one will leave the page. Make use of smaller images that are clear but of low resolution.

6. Low downtimes

How much time does it take before your site is back up? Though you cannot have a site with zero downtime, it is possible to have a site with above 99% uptime.

7. High loading speeds

Your website should load fast whether searches are done on a desktop or a mobile phone. People get frustrated with slow loading speeds and your site and the pages should load up fast.

In conclusion, mobile readiness and friendliness is critical in inbound and outbound marketing currently. The tabs should be visible and connection to social media sites clear and easily accessible. (www.contohblog.com).*

Author Bio
David Wicks is a web design specialist with years of experience in website design and digital marketing. Look through www.internetmarketingcompanies.com/dental-seo-seo-for-dentists-that-works/ for more details.

thumbnail

4 SEO Trends that are Defining the Internet

4 SEO Trends that are Defining the Internet
4 SEO Trends that are Defining the Internet. Guest Post by Walter Moore.   

Google’s much expected algorithm is already here and as an online marketer, it is important to review your SEO strategy to stay ahead of the pack. 

The SEO landscape has changed tremendously with search engines becoming smarter. 

With advances in search engine optimization tools, you can now get much more from your website by leveraging these new ideas.

Here are some of the trends that you should look out for:

1. Video is King


If your website is not leveraging video content, then you are missing out on the gravy train. Video content is the most popular marketing tool today and it will continue dominating search engine result pages (SERPs). 

Videos engage your target audience much more easily and they are rapidly shared on all internet platforms. A Marketing Land Report shows 62% of all Google searches are video and this is bound to grow. A Quicksprout study shows that video earns 50% better organic page ranks on Google.

2. Mobile Optimization

Smartphones have now overtaken desktops in internet use. According to Pew Internet Research, 4 out of 5 smartphone users use their devices to shop. 

Over 1.2 billion people are using smartphones to access the internet and mobile traffic now accounts for 15% of all internet traffic. These numbers highlight the importance of responsive web design in order to tap into this large market.

3. The Place of Social Content

If your business is not on Facebook and Twitter, then you are losing out on a great marketing opportunity. 

Business conversations are now taking place on social media networks. An eMarketer study shows that 76% of marketers use social media and these numbers are growing. 

With billions of users on social media networks, it is crucial. Social networks are now being indexed by search engines and your SEO expert must build a social media marketing strategy to help your business grow.

4. The Mobile App Craze

There is an app for virtually everything you want to do. Mobile users are finding it easier to start their internet experience through a mobile app and your website must have such an app to increase lead and sales conversion.

Of course there are other trends including voice search and your business must keep learning to stay ahead.*

thumbnail

Simple White - Template Blog SEO Friendly Terbaru Gratis!

Simple White - Template Blog SEO Friendly Terbaru Gratis! Free Download.

TEMPLATE Blogger SEO Friendly adalah template blog yang ramah mesin pencari, yaitu mudah dan cepat terindeks Google.

Ciri utama Template Blog SEO Friendly antara lain ringan, cepat tampil (fast loading), dan responsive alias mobile-friendly.

Template Simple White ini dibagikan gratis karena sudah lama CB tidak berbagi template gratis, sejak membagikan CB Basic - SEO Friendly Responsive Blogger Template.

Dinamakan Simple White karena memang desainnya sederhana dengan dominasi warna putih. Template simple merupakan Trend Desain Web masa kini dan masa depan yang mobile-first oriented.

Simple White - Template Blog SEO Friendly Terbaru Gratis! Free Download

Simple White - Template Blog SEO Friendly Terbaru Gratis!


Template ini ringan banget. File templatenya aja di bawah 100 kb. Cocok buat Anda yang ora neko-neko soal tampilan blog tapi fokus ke konten dan sing penting cepat terindeks Google, bersih, ringan, dan postingan berkualitas.

Fitur Template silakan cek sendiri di Chkme, GT Metrix, Mobile-Friendly Test, dan Structured Data Testing Tools. Intinya: template ini seo optimized.


Template Blog Simple SEO Friendy Terbaru Gratis - Free Download. Didesain sederhana, seo optimized, fast loading, responsive, untuk blogger yang mengutamakan konten dan indeks Google.
NO SUPPORT FOR FREE TEMPLATE 

Good Luck & Happy Blogging! (www.contohblog.com).*

thumbnail

Cara Memasang Featured Posts Image Slider Otomatis Responsive di Blogger

Cara Memasang Featured Posts Image Slider Otomatis Responsive di Blogger.

WIDGET Featured Posts Image Slider atau slider berisi featured post plus gambar responsive (mobile-friendly) ini cocok untuk blog toko online (Lihat DEMO).

Misalnya, untuk menampilkan promo, diskon, atau produk unggulan. Featured Post Image ini bisa menampilkan posting per label/kategori, juga posting terbaru.

Cara Memasang Featured Posts Image Slider Otomatis Responsive di Blogger

Berikut ini fiturnya
Featured posts slider is an advanced widget equipped with these features:
  • Author Avatar - Unique!
  • Displays recent posts dynamically inside Slider. - Unique!
  • Displays recent posts from a specific category/label.
  • Slider with two animations: Slide & Fade - Unique!
  • Clickable Comments Count
  • Custom Date Format
  • Clickable Animated Featured Image Thumbnails
  • Option to increase or decrease Image Resolution for quality- Unique!
  • Support for Third-party Images and YouTube Video thumbnails - Unique!
  • Title Length is adjustable

Cara Memasang Featured Posts Image Slider Otomatis Responsive di Blogger

1. Simpan di bawah kode <head> atau di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
Note! Abaikan tiga kode link teratas jika sudah ada di template Anda.

2. Simpan di atas kode ]]></b:skin>

.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}
.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}
.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}
.mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.mbt-s .flex-control-paging{display:none}
.flex-direction-nav{position:relative;top:-250px}
.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}
.mbt-s li a{color:#0080ff;text-decoration:none}
.mbt-s i{color:#999;padding-right:5px}
.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block}
.mbt-s .icontent{line-height:1.5em;margin-top:5px}
.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
.mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}
.mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}
.mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}
.mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
.mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
.mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
.mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}
.mbt-s .icomments a:hover{text-decoration:underline}
.mbt-s .icomments:before{content:'f086';padding:0 3px 0 7px;color:#fff}
.mbt-s .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}
.mbt-s .idate:before{content:'f073';padding:0 5px;color:#fff}

3. Save Template!
4. Klik Layout >  pilih Add a Gadget > HTML/JavaScript
5. Masukkan kode ini:

<script type="text/javascript">
$(window).load(function() {
  $('.mbt-s').flexslider({
animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});</script>
<div class="flexslider mbt-s">
<ul class="slides">
<script type="text/javascript">
var ListBlogLink = "http://namabloganda.blogspot.com";
var ListCount = 6;
var ListLabel = "NamaLabel";
var TitleCount = 66;
var ImageSize = 600;
function mbtslide(json) {
for (var i = 0; i < ListCount; i++)
{
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                      
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm - 1)];  
if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/).pop();
   
    if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]")/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]")/)[1];
}
else
{
ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
}
var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a></div><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span><span class='icomments'>"
+ListComments +
"</span> <span class='idate'>"
+ D +
" "
+ M +
"</span></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a></div></li>";
document.write(listing);
} }
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslide'></"+"script>");
</script>
</ul></div>

6. Save!
7. Pindahkan widget ke atas area "Blog Post"
8. Save!

Kini  Featured Posts Image Slider Otomatis Responsive sudah terpasang di Blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*


thumbnail

Cara Daftarkan Blog dan Sitemap ke Google untuk Cepat Indeks

Cara Daftarkan Blog dan Sitemap ke Google
Cara Daftarkan Blog dan Sitemap (Submit URL & Sitmep) ke Google untuk Cepat Indeks.

CARA mendaftarkan blog dan sitemapnya ke mesin pencari Google ini merupakan bagian dari Tips SEO Dasar bagi Blog Baru.

Dalam Panduan Pengoptimalan Mesin Telusur, Google menegaskan, hanya dua cara inilah yang membuat Google akan cepat mengenali dan mengindeks blog Anda.

"Tidak ada yang dapat menjamin peringkat #1 di Google," kata Google.

"Hati-hati terhadap SEO yang mengklaim dapat menjamin peringkat, menyatakan memiliki "hubungan khusus" dengan Google, atau mengiklankan "pengiriman prioritas" ke Google. Tidak ada pengiriman prioritas untuk Google."

"Kenyataannya, satu-satunya cara untuk mengirimkan situs ke Google secara langsung adalah melalui laman Tambah URL kami atau dengan mengirimkan Peta Situs dan Anda dapat melakukannya tanpa biaya sedikit pun."

Jelas, hanya ada dua cara untuk mendaftarkan blog ke Google, yaitu:
  1. Daftarkan atau Tambah URL 
  2. Daftarkan Peta Situs (Sitemap)
Kedua langkah yang ada dalam satu rangkaian di Google Webmaster Tool itu WAJIB dilakukan agar blog mudah dan cepat terindeks Google, sebagaimana dikatakan Google sendiri di atas.

Cara Daftarkan Blog dan Sitemap ke Google untuk Cepat Indeks

Cara Mendaftarkan Blog ke Google

  1. Buka Google Submit URL
  2. Masukkan Alamat Blog Anda di kolom yang tersedia
  3. Lanjutkan dengan klik menu Search Console
  4. Klik Add a Property
  5. Masukkan Alamat Blog Anda
  6. Klik HTML tag
  7. Ada kode verifikasi yang harus Anda copas ke template blog Anda.
  8. Setelah kode dicopas, klik Verify
  9. Muncul konformasi terverifikasi, lalu klik Continue
  10. Klik Sitemaps > Add/Test SITEMAP
  11. Masukkan sitemap.xml  di kolom yang tersedia, di belakang alamat blog Anda.
  12. Klik Submit
  13. Klik Refresh the page

Fetch as Google
  1. Lanjutkan dengan klik menu  Fetch as Google
  2. Klik FETCH
  3. Klik Request Indexing
  4. Centang I'm not a robot
  5. Cawl only this URL
Beres. Kini  blog Anda sudah masuk daftar antrean Google untuk segera terindeks dan tampil di halaman hasil pencarian.

VIDEO
Video Berikut ini menunjukkan cara mendaftarkan blog ke Google sekaligus Submit Sitemap dan Fetch as Google.

VIDEO: SUBMIT URL & SITEMAP KE GOOGLE WEBMASTER TOOL


Untuk mendaftarkan blog ke mesin telusur populer liannya, yaitu Bing/Yahoo!, silakan baca Cara Daftarkan Blog ke Bing Yahoo. Good Luck & Happy Blogging! (http://www.contohblog.com).*

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox