Info Cara Menciptakan Template Blog Responsive Mobile Friendly

Yang dimaksud Cara Membuat Template Blog Responsive Mobile Friendly dalam postingan ini yaitu mengubah template bawaan Blogger menjadi ramah seluler (mobile friendly).

Setelah dibentuk responsive, jangan lupa nonaktifkan tempalate mobile bawaan blogger dengan setting ibarat ini:

Settingan itu pula yang harus diterapkan jikalau Anda memakai Template Blog Responsive/Mobile Friendly. Jika tidak, yang akan tampil di HP nanti template mobile default Blogger.

Cara Membuat Template Blog Responsive Mobile Friendly

1. Buat Blog Baru

2. Pilih Template Simple (Sederhana).

Setelah final menciptakan blog baru, lakukan langkah berikut ini dengan seksama dan dalam tempo sedang saja, hati-hati, jangan buru-buru, untuk menjadikannya responsive.

1. Klik Tema > Edit HTML

2. Temukan instruksi berikut ini di bab atas instruksi template:

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>

3. Hapus instruksi di atas dan ganti dengan instruksi berikut ini:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Temukan dan hapus instruksi berikut ini yang ada di bawah instruksi <b:template-skin>

<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

5. Copas instruksi berikut ini di atas kode  ]]></b:skin>

.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}

6. Temukan instruksi berikut ini di bawah instruksi <b:template-skin>

body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

Hapus dan ganti dengan instruksi berikut ini:

body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}

7. Tambahkan instruksi berikut ini di bawah instruksi tadi:

.main-inner .column-center-outer{
float: left;
width:65%;
}

8. Copas instruksi berikut ini di atas instruksi ]]></b:skin>

/*Responsive*/
@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
}
@media screen and (max-width:768px){
.main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
.Header h1{font-size:30px;text-align:center;}
.Header .description{font-size:14px;text-align:center;}
}
@media screen and (max-width:414px){
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
}
@media screen and (max-width:320px){
.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
.fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
}

9. Save! Simpan Template.

Demikian Cara Membuat Template Blog Bawaan Blogger menjadi Responsive Mobile Friendly.*

Read More

Info Cara Custom Domain Blogger - Mengubah Alamat Blog Dengan Nama Domain Sendiri

Cara Custom Domain Blogger - Mengubah Alamat Blog dengan Nama Domain Sendiri.

Custom Domain yaitu mengubah alamat blog dengan nama domain sendiri.

Misalnya, semula nama dan alamat (url/address) blognya contohblognih.blogspot.com, kemudian diubah menjadi www.contohblog.com

Google menyebut perubahan atau penggantian nama domain ini sebagai Doman Kustom.

Kita dapat melaksanakan Custom Domain blog dengan mudah. Harga sewa domain per tahun juga sangat murah, hanya Rp100 ribuan, bahkan di bawah 100 ribu untuk ekstensi domain tertentu.

Namun, sebelum ke cara Custom Domain, kita simak dulu laba atau kelebihan blog dengan nama domain sendiri dibandingkan subdomain gratisan dari Blogger dengan domain blogspot.com

Keuntungan Custom Domain

Kelebihan Custom Domain Blogger akan menciptakan blog Anda:

1. Ringkas & Praktis Diingat
2. SEO Friendly
3. Kredibel 
4. Mudah Diterima Google AdSense
5. Lebih Profesional
6. Lebih Komersial

Nama dan alamat blog jadi ringkas sehingga gampang diingat. Alamat blog Anda juga akan menjadi jadi lebih pendek (bandingkan contohnya contohblognih.blogspot.com vs contohblog.com).

Custom Domain akan menciptakan blog lebih ramah mesin pencari (SEO Friendly) sebab kredibilitasnya meningkat dibandingkan doman gratisan dari blogger.

Karena lebih kredibel, maka blog Anda akan lebih gampang diterima jadi publisher Google AdSense yang menjadi "impian" sekaligus sumber utama penghasilan para blogger.

Custom Domain juga akan menciptakan blog lebih profesional dan lebih komersial, khususnya bagi blog toko online atau blog bisnis.

Cara Custom Domain Blogger 

Saatnya ke tips cara Custom Domain Blogger atau mengubah alamat blog dengan nama domain sendiri. Custom Domain dilakukan di dua tempat:

1. Dashboard Blogger 
2. CPanel

Karenanya, sebelum melaksanakan Custom Domain, Anda harus siapkan nama domainnya. Silakan beli dulu nama domainnya di Web hosting.

Sudah beli domainnya? Jika sudah membeli dan aktif, lakukan custom domain berikut ini.

#1. Setting di Dashboard Blogger

Login ka akun Blogger Anda, kemudian lakukan langkah berikut ini.

1. Klik Setting > Basic > klik Setup a 3rd party URL for your blog

Akan terbuka settingan menyerupai ini:

2. Isi kolom blog domain dengan nama domain yang sudah Anda beli, diawali dengan www, misalnya www.contohblog.com

3. Kklik “Save”

Akan muncul error sekaligus isyarat CNAME menyerupai berikut ini:

Setting Custom Domain di Dashbord Blogger simpulan untuk sementara. Jangan ditutup dulu. Biarkan saja.

#2. Setting di Cpanel

Buka tab gres (new tab) di browser Anda, kemudian buka situs provider domain daerah Anda membeli domain.

Dalam tips ini kita lakukan Custom Domain di Web hosting Niagahoster yang juga menyediakan Wordpress hosting. 

Cara Custom Domain Blogger di Cpanel Niagahoster

1. Buka www.niagahoster.co.id dan masuk ke akun Anda di Niagahoster > Klik Member Area

2. Klik menu Hosting & Domain 

3. Klik "Kelola" di kanan bawah.
4. Klik DNS Management
5. Klik Custom Blogspot

6. Akan muncul begini:

7. Masukkan CNAME yang ada di halaman Blogger. Buka Dashboard Blogger untuk ambil (copas) isyarat CNAME menyerupai gambar berikut ini:

8. Klik Save!

Biasanya masih belum bisa. Masih ada error. Jika masih error, tunggu beberapa saat, kemudian klik Save lagi, sampai berhasil disimpan.

Lakukan Redirect
Jika sudah berhasil disave atau disimpan, artinya Custom Domain sudah simpulan dan berhasil. Jangan lupa lakukan langkah pamungkas berikut ini:

Klik Edit dan centang "Redirect to...." menyerupai gambar berikut ini:

Custom Domain Blogger seslesai. Silakan buka blog Anda! Jika ada notifikasi pengalihan, klik "Ya".

Demikian Cara Custom Domain Blogger - Mengubah Alamat Blog dengan Nama Domain Sendiri. Good Luck! (CB Blogger).*

Read More

Info Cara Mengubah Tampilan Widget Label Bawaan Blogger

Cara Mengubah Tampilan Widget Label Bawaan Blogger

TAMPILAN widget bawaan blogger sangat sederhana, namun tetap keren alasannya ialah memadukan ukuran aksara variatif.

Jika ingin diseragamkan atau lebih menarik, contohnya menyerupai yang dipasang di template demo NJW ini.

Widhet label merupakan bab dari navigasi hidangan dan internal link yang bagus buat SEO Blog. Google menyarankan semoga para webmaster memudahkan pengunjung mengeksplorasi konten blog.

Cara Mengubah Tampilan Widget Label Bawaan Blogger

Ini kodenya untuk mengubah tampilan atau mempercantik widget label blogger:

.label-size{margin:4px;padding:5px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod=&#39;auto expand&#39;);zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}

Pasang di atas instruksi ]]></b:skin> atau </style>

Bisa juga dipasang di atas instruksi </head>, namun kodenya ditambah instruksi pembuka <style> dan epilog </style> menjadi begini:

<style>
.label-size{margin:4px;padding:5px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod=&#39;auto expand&#39;);zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}</style>

Save template!

Itu dia Cara Mengubah Tampilan Widget Label Bawaan Blogger.*

Read More

Info Cara Menciptakan Sajian Responsive Di Atas Header Blog Plus Media Sosial

Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial

NAVIGASI hidangan blog umumnya hanya satu, ialah di bawah header/logo blog.

Kita dapat menambahnya dengan memasang navigasi hidangan di atas header (top navbar) plus link dan icon media sosial.

Berikut ini Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial. Lihat Demo.

1. Template > Edit HTML
2. Copas aba-aba CSS topmenu berikut ini di atas aba-aba ]]></b:skin>

/*Topmenu plus Social Icon */
.menu-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-bottom:1px dashed #eee}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px 8px 0;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:##666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
.top-menu li .fa {font-size:16px;}
@media only screen and (max-width:768px) {
.menu-top li ul {background:#222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;background:#fff;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#c00;display:inline-block;font-size:14px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#c00;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;color:#616161}
.top-menu li a:hover, nav a:active {background:#f0f0f0;border:none;color:#666;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

3. Copas aba-aba JavaScript navigasi hidangan di atas header blog ini di atas aba-aba </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

4. Copas aba-aba HTML topbar hidangan blogger berikut ini di bawah aba-aba <body> atau di atas aba-aba <div id='header'> atau <div clas='header'>

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
     <li><a href='/p/about.html' title='About Us'>About</a></li>
     <li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
     <li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
     <li><a href='/p/disclaimer' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

5. Save!

Jangan lupa isi link hidangan dan url medsosnya. Demikian Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial.*

Read More

Info Cara Hapus Otomatis Komentar Spam Di Blog

Cara Hapus Otomatis Komentar Spam di Blog.

CARA mengatasi, menghilangkan, menyembunyikan, atau menghapus komentar spam, link aktif, link hidup, di komentar blog dengan memasang kode anti-komentar spam.

Kode anti-spam comments ini ampuh membasmi komentar berisi link hidup/aktif yang biasa disebar oleh blogger lain, termasuk para penjual obat, admin blog judi online, taruhan online, dll.

KODE ANTI KOMENTAR SPAM UNTUK BLOGGER
(Simpan di atad isyarat <body> atau </head>)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type='text/javascript'>jQuery(document).ready(function(){ jQuery("#comments p").find("a").replaceWith("<mark>Spam Detected!</mark> Link aktif otomatis terhapus!!!");});</script>

Catatan:

1. Kode warna biru (jQuery) tidak usah dimasukkan bila sudah ada di template.
2. Anda dapat ganti kata-kata yang warna merah dengan versi Anda.

Anda dapat mengetes hasil Cara Hapus Otomatis Komentar Spam di Blog atau isyarat anti-komentar spam ini dengan komentar menyertakan link hidup. Lihat misalnya di kolom komentar About.

Kode untuk menyertakan link aktif dalam komentar:

Nice gosip gan, kunbalnya ya <a href='http://newjohnywuss.blogspot.com'>NJW</a> !!!

Lihat di kolom komentar di bawah ini, link hidup NJW dalam isyarat di atas akan lenyap dengan isyarat anti-komentar spam di atas.

APA ITU KOMENTAR SPAM?

Comment spam is a term used by spam blacklist servers such as Project Honey Pot to refer to a broad category of spambot or spammer postings which abuse web-based forms to post unsolicited advertisements as comments on forums, blogs, wikis and online guestbooks. Comment spam - Wikipedia, the free encyclopedia.

Demikian Cara Hapus Otomatis Komentar Spam di Blog.*

Read More

Info Arahan Memunculkan Tombol Delete (Hapus) Komentar

Cara memunculkan tombol "delete" (hapus) komentar blog.

Sebenarnya tombol hapus komentar ini tidak terlalu penting mengingat kalau ada komentar yang tidak layak, tidak usah dipublish, dihapus saja di dashboard blogger. Mangkanye, kolom komentarnya dimoderasi, jangan otomatis publish.

Fungsi tombol hapus ini tentu saja buat menghapus komentar yang tidak layak, utamanya komentar spam atau komentar "modus" mendapat backlink.

Kode Memunculkan Tombol Delete (Hapus) Komentar

KODE CSS
Simpan di atas  ]]></b:skin>

.item-control {display:inline-block;}

CARA & KODE LAIN
1. Mungkin alasannya widget "Navbar" bawaan blogger terhapus.
2. Balikin dengan cara simpan aba-aba ini di atas ]]></b:skin>

#navbar-iframe {height:0px;visibility:hidden;display:none;}

3. Simpan aba-aba ini di bawah aba-aba <body>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section>

4. Save!

Demikian Cara memunculkan tombol "delete" (hapus) komentar blog.*

Read More

Info Cara Menghapus Blogger Widget Css Bundle Untuk Mempercepat Loading

Cara Menghapus Blogger Widget CSS Bundle untuk Mempercepat Loading.

WIDGET CSS Bundle merupakan salah satu link yang memperlambat tampilan blog. 

Kita dapat menonaktifkan atau menghapusnya dengan beberapa cara, sehingga tampilan blog lebih cepat (fast loading).

Ini ia isyarat Widget Bundle CSS bawaan blogger:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> 

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' />

Cara Menghapus Blogger CSS Widget Bundle

1. Ganti isyarat <b:skin><![CDATA[ dengan dengan 

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin>*/</b:skin>

<style>

2. Ganti isyarat ]]></b:skin>  dengan </style>

3. Ganti isyarat <b:template-skin> dengan <style>

4. Ganti isyarat </b:template-skin> dengan  </style>

CARA LAINNYA:
Pasang isyarat ini di atas isyarat </head>

<script> $("[href$='css_bundle.css']").remove(); </script>

CARA LAINNYA:

How to Disable Default Blogger Css Bundle. You can remove widget_css_2_bundle.css with this steps below :

1. Ganti isyarat <head> dengan &lt;head&gt;

2. Ganti isyarat </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt;

Demikian Cara Menghapus Blogger CSS Widget Bundle (CSS Stylesheets). Panduan detail ada di CB Blogger.

Sumber

Read More