Latest Posts

thumbnail

Cara Memasang Kode CSS, HTM, dan Javascript di Template Blogger

Cara Memasang Kode CSS, HTM, dan Javascript di Template Blogger
Cara Memasang Kode CSS, HTM, dan Javascript di Template Blogger.

POSTING ini panduan untuk pemula dalam memasang kode-kode yang membangun template blogger, yakni CSS, HTML, dan Javascript.

JavaScript (JS) adalah bahasa pemrograman tingkat tinggi dan dinamis.

JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. KodeJavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah sebuah dokumen yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web/blog kita.

HTML adalah singkatan dari HyperText Markup Language. HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (Wikipedia)

Kita bisa belajar tentang CSS, HTML, dan Javascript ini di W3C School biar tidak terlalu awam soal kode-kode yang membangun blog kita.

Letak / Posisi Kode  dalam Template

Dalam template blog kita, kode CSS ada di antara kode <b:skin> dan </b:skin> dan/atau antara kode <style> dan </style>.

Kodenya diawali dengan titik (.) yang diterjemahkan HTML sebagai class (div=class) dan tanda pagar (#) untuk id (div=id).

Kode HTML ada di hampir seluruh bagian template, terutama di antara kode <body> dan </body>

Sedangkan kode Javascript ada di antara kode <head> dan </head> serta <body> dan </body>. Biasanya ditempatkan di atas </head> atau </body>.

Cara Memasang Kode CSS, HTM, dan Javascript

Cara Memasang Kode CSS, HTM, dan Javascript di Template Blogger sangat diperlukan terutama jika kita mengambil kode di Code Pen.

Kode-kode widget, navigasi menu, dan sejenisnya di sana hanya berupa Kode CSS, HTM, dan Javascript tanpa ada panduan penerapannya. Misalnya, Navigasi Top Menu Responsive untuk blogger.

1. Kode CSS

Kode CSS dipasang di atas kode ]]></b:skin> dalam template blog.
Bisa juga dipasang di atas kode </head> dengan diapit kode <style> dan </style>

2. Kode HTML

Kode HTML dipasang di posisi di mana widget akan dimunculkan. Misalnya, jika akan dimunculkan atau dipasang di bagian paling atas halaman blog, di atas header, maka tempatkan kode HTML di bawah kode <body>

3. Kode JavaScript

Kode Javascript biasanya dipasang di atas kode </head> atau kode </body>

NOTE!
Jika terjadi error, maka tambahkan kode warna merah, seperti ini:

<script type="text/javascript" >
//<![CDATA[
<!--KODE JAVASCRIPT DI SINI -->
//]]></script>



//]]>
-->
Demikian sekilas panduan Cara Memasang Kode CSS, HTM, dan Javascript di Template Blogger. Happy Blogging! (www.contohblog.com).*

thumbnail

Semi AMP - Template Blogger SEO Friendly dengan Sentuhan AMP

Semi AMP - Template Blogger SEO Friendly & Responsive dengan Sentuhan AMP. Gatis. Free Download!

ANDA tentu sudah mengenal AMP, yaitu kependekan dari Accelerated Mobile Pages atau "Halaman Mobile yang Dipercepat". Selengkapnya di laman resmi AMP.

Menurut Google, Accelerated Mobile Pages (AMP) adalah laman web yang dirancang berdasarkan spesifikasi sumber terbuka. Laman AMP hasil validasi disimpan dalam cache AMP Google, yang membuatnya dapat ditayangkan lebih cepat.

Format AMP didukung oleh banyak platform, termasuk Google Penelusuran. Jika laman web yang dicantumkan di hasil penelusuran Google memiliki versi AMP yang valid, Penelusuran dapat mengarahkan pengguna seluler ke AMP yang tersimpan dalam cache.

Nah, CB coba buat template blogger berbasis AMP. Namun, karena CB kurang suka dengan kotak komentar Disqus yang kompatibel dengan AMP, maka CB pasang saja kotak komentar blogger. Akibatnya, template ini tidak valid AMP.

Kode template blogger lainnya juga masih CB pasang. Jadinya template ini SEMI AMP karena memang tidak sepenuhnya berbasis AMP, sehingga tidak Valid AMP, dibuat dengan "campuran" kode template bawaan blogger dan AMP.

Template SEMI AMP ini tetap SEO Friendly, Responsive, dan Fast Loading, sebagaimana Template CB Lainnya.

Semi AMP - Template Blogger SEO Friendly dengan Sentuhan AMP

Semi AMP - Template Blogger SEO Friendly dengan Sentuhan AMP

Semi AMP - Template Blogger SEO Friendly dengan Sentuhan AMP


Gratis. Free Download. Non Removable Credit. No Support!

Cek juga: Galeri Template CB

Desain Semi AMP - template blogger dengan rasa AMP ini simple, clean, bersih, indah, nyaman di mata pengunjung. Happy Blogging! (www.contohblog.com).*

thumbnail

Masih Banyak Blogger Menampilkan Teks Tulisan Rata Kiri-Kanan (Justify)

Masih Banyak Blogger Menampilkan Teks Tulisan Rata Kiri-Kanan (Justify)
Format teks perataan “rata kiri kanan” (justify) menyalahi standar penulisan di website. Harusnya rata kiri (align-left).

MASIH banyak blogger yang menampilkan teks tulisan (posting) dengan text-align rata kiri-kanan (justify/justified). Padahal, salah satu ciri format posting blog yang baik itu rata kiri.

CB sudah bahas soal ini di Gunakan Rata Kiri di Posting Blog Anda. Memang, rata kiri-kanan membuat tampilan teks tulisan menjadi rapi. Tapi, rata kiri-kanan itu bukan standar penulisan di website.

Word Wide Web Concortium (W3C) sudah lama menegaskan, standar penulisan di website, media online, atau situs web itu rata kiri. Lihat saja format teks di Facebook, Twitter, atau di media-media online seperti CNN, BBC, Detik, Kompas, Republika, atau bahkan Google sendiri di halaman hasil pencariannya menggunakan rata kiri.

Alasan utama penulisan teks atau posting blog harus rata kiri adalah karena rata kiri (align left) lebih mudah dipindai (scannable) dan mudah dibaca (readable).

Ingat, format text-align justify atau rata kiri-kanan itu adalah format teks di media cetak --koran, buku, majalah. Media online seperti blog jelas berbeda dengan media cetak dari sisi tingkat keterbacaan (readability) karena tampil di layar.

Ini penjelasan W3C tentang standar penulisan di website atau media online, termasuk blog:

"Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified." (W3C)

Jelas, mulai saat ini, bagi yang baru tahu, segeralah ubah tampilan posting blog Anda menjadi rata kiri (align-left) agar sesuai dengan standar penulisan di web site dan membuat nyaman pembaca (user friendly).

Memang sih, justify terlihat rapi, tapi silakan bandingkan dengan align-left saat dibaca di layar monitor, dipastikan lebih mudah dibaca yang rata kiri.

teks rata kiri-kanan

rata kiri

Tampilan pertama jelas menggambarkan apa yang dikatakan W3C sebagai "The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read".

Tampilan kedua, yang rata kiri, sesuai dengan standar penulisan di website: "The best way to avoid this problem is not to create text layout that is fully justified".

Nah, sekarang terserah Anda, mau ngikut aturan penulisan di media online apa tidak. Jika ngotot menggunakan rata kiri-kanan, dengan alasan rapi, maka dipastikan posting blog Anda tidak sesuai dengan standar penulisan web dan susah dibaca alias tidak ramah pengguna (user friendly).

Apalagi jika teks rata kiri-kanan itu dibaca di HP atau SmartPhone! Ih, bikin pusing sekali. Silakan rasakan sendiri baca tulisan justify di HP Anda dan bandingkan dengan yang rata kiri. 

Jika masih kurang yakin dengan ulasan ringkas di atas, silakan baca tulisan para pakar desain web berikut ini tentang pentingnya rata kiri dalam penyajian teks posting blog:
Kesimpulannya, tampikan teks posting blog rata kiri membuat tulisan mudah dipindai, dibaca, dipahami, ramah pengguna, sesuai dengan aturan penulisan di website, dan membuat blog Anda tampak profesional --minimal menunjukkan Anda paham cara nulis yang benar di media online/blog.

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

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.*

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox