Tuesday, 28 February 2017

Menghapus "Diberdayakan oleh Blogger" Melanggar Aturan Google?

Menghapus "Diberdayakan oleh Blogger"
Apakah Menghapus "Diberdayakan oleh Blogger" - Powered b Blogger Melanggar Aturan Google?

ADA pertanyaan "menggelik" dari blogger newbie: apakah Menghapus Atribusi "Diberdayakan oleh Blogger" (Powered by Blogger) di Footer Blog Melanggar Aturan Google?

Jawabannya, tidak melanggar atau bukan pelanggaran. Alasannya, seperti diobrolkan para blogger di Product Forum Google, soal atribusi Powered by Blogger atau Diberdayakan oleh Blogger itu sama sekali tidak disebutkan dalam Kebijakan Konten ataupun kebijalan blogger lainnya.

Yang tidak boleh itu menghapus Credit Link desainer template gratis, karena melanggar hak cipta, dan bisa diadukan oleh sang desainer ke DMCA Google.

Yang juga tidak boleh dilakukan antara lain Copy Paste tanpa menyebutkan sumbernya. Banyak lho postingan CB yang dicopas blogger lain, tapi kalo menyebutkan sumber, tidak masalah.

Google, dikabarkan The Verge, menerima puluhan juta permintaan penghapusan konten yang melanggar hak cipta, tiap hari.

Kembali ke soal Diberdayakan oleh Blogger. Sejauh ini banyak, bahkan kebanyakan blogger, menghapusnya, dan tidak ada masalah.

Tujuan menghapus Diberdayakan oleh Blogger biasanya karena ingin terlihat profesional. Walaupun profesionalitas blogger bukan dilihat dari sisi itu, tapi KONTEN BERKUALITAS.

Maka, saran CB bagi blogger pemula, jangan "sibuk" ngurusi tampilan. Sibukkan diri dengan ngurus konten atau postingan. Bahkan blog dengan template bawaan blogger nan sederhana, banyak yang nangkring di halaman satu (page one) Google, karena kualitas tulisannya.

Ada sering menemukan "makalah mahasiswa" saat Googling kan? Itu dia. Makalah adalah karya ilmiah, sehingga dinilai berkualitas oleh Google. Diposting di blog paling sederhana pun, tanpa bantuan Trik SEO, bisa menguasai halaman pertama hasil pencarian (SERP).

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

Labels: ,

posted by Download Lagu Terbaru 1019 @ February 28, 2017  

Friday, 24 February 2017

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

Labels:

posted by Download Lagu Terbaru 1019 @ February 24, 2017  

Tuesday, 21 February 2017

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

Labels: ,

posted by Download Lagu Terbaru 1019 @ February 21, 2017  

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

Labels: , ,

posted by Download Lagu Terbaru 1019 @ February 21, 2017  

Thursday, 16 February 2017

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

Labels:

posted by Download Lagu Terbaru 1019 @ February 16, 2017  

Wednesday, 15 February 2017

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

Labels:

posted by Download Lagu Terbaru 1019 @ February 15, 2017  

Saturday, 11 February 2017

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

Labels: ,

posted by Download Lagu Terbaru 1019 @ February 11, 2017  

Wednesday, 8 February 2017

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

Labels:

posted by Download Lagu Terbaru 1019 @ February 08, 2017  

Saturday, 4 February 2017

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

Labels: ,

posted by Download Lagu Terbaru 1019 @ February 04, 2017