Internet Revolusioner: Blogging

Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Kamis, 21 Juli 2016

Benarkah Mozilla tidak mendukung Flash lagi?

Hari ini, Mozilla mengumumkan rencananya untuk tidak mendukung Flash lagi. Mulai Agustus 2016, mulai versi Firefox 48, Mozilla akan memblokir semua konten Flash yang dianggap "tidak penting bagi pengalaman pengguna."

Pada tahun 2017 nanti, Mozilla berencana untuk mengharuskan persetujuan klik (click-to-activate) untuk mengaktifkan untuk Flash, berarti pengguna harus melompat melalui lingkaran lain untuk menjalankan Flash di peramban. Ini juga merencanakan untuk memblokir konten Flash yang tidak terlihat oleh pengguna.

Kenapa Flash Tidak di Dukung Mozilla Firefox
Plugin pada bworser moziila, terutama Flash, telah memungkinkan beberapa pengalaman favorit di Web, termasuk video dan konten interaktif. Tapi plugin ini sering mengalami masalah-masalah untuk browsing terutama masalah stabilitas, kinerja, dan masalah-masalah keamanan untuk browser.

Sehingga pihak Mozilla dan Web secara keseluruhan telah mengambil langkah-langkah untuk mengurangi kebutuhan untuk kontenFlash dalam aktifitas browsing kesehariannya. Walaupun pada bulan Agustus, Firefox akan memblokir konten Flash terntu yang dianggap tidak penting untuk pengalaman pengguna, namun masih mendukung konten Flash warisan (legacy Flash content).

Selama beberapa tahun, Firefox telah menerapkan Web api untuk menggantikan fungsi yang sebelumnya diberikan hanya oleh plugin. Ini termasuk pemutaran audio/video dan kemampuan streaming, clipboard integrasi, cepat 2D dan 3D grafis, WebSocket jaringan, dan akses mikrofon kamera.

Seperti situs web yang telah beralih dari Flash ke teknologi web lainnya, tingkat kecelakaan plugin Firefox telah menurun secara signifikan pada tampilan grafik:

image: blog.mozilla.org

Dengan perubahan kebijakaan ini diharapkan untuk kedepan akan membawa keamanan pengguna Firefox, penggunaan ketahanan baterai, mampu membuka halaman lebih cepat dan lebih responsif browser. Selain itu Hal ini diharapkan untuk mengurangi Flash crash dan hang hingga 10%.

Selasa, 28 Juni 2016

Cara Membuat Gambar Banner Menjadi Responsive di Blog

Cara membuat Image Banner Responsive dalam situs web Anda - Tutorial ini memandu sobat untuk menciptakan sebuah gambar pilihan Anda menjadi responsive HTML5 di blog anda. Dengan menggunakan perintah CSS sederhana kita melakukannya ini semua. Sobat tidak perlu dengan penggunaan JavaScript maupun plugin jQuery jadi sobat hanya memerlukan sedikit pengkodean CSS sehingga gambar menjadi responsif.

Artikel ini hanya sekedar panduan dasar saja yaitu bagaimana gambar bisa menjadi responsive pada blog. Untuk sobat yang blognya sudah menggunakan template responsive sobat tidak perlu melakukan apa-apa cukup upload gambar lalu publish, gambar pun langsung responsive menyesuaian dari perangkat mana blog anda di buka.

Membuat gambar/ bannner menjadi responsive ?

Kali ini saya akan menerapkan CSS3 murni untuk membuat gambar menjadi responsif. Penggunaan gambar dengan gaya dan ukuran global pun tetap gambar tersebut menjadi fit dalam layar dan menempati ruang yang tersedia. Dengan demikian, Gambar akan cukup terbaca di perangkat kecil.

Gambar-gamabr akan responsif pada semua resolusi layar seperti :

Layar ponsel yang lebih kecil
320x480 - iPhone [Potret orientasi]
360x640 - Salah satu ponsel pintar
780X1024 - tablet yang lebih besar atau Desktop 17'
desktop yang lebih besar

Cara Membuat Banner Menjadi Responsive di Blog

Sebelumnya, silahkan dulu untuk melihat demonya disini.

Selanjutnya klik icon perangkat di sudut kanan atas untuk melihat perubahan akan responsive gambar.

Lalu Bagaimana membuat gambar/ bannner menjadi responsive?

Baiklah kita mulai!

Pengkodean yang paling utama yaitu penggunaan img. Taruh code CSS dibawah ini tepat dibawah kode <head> pada file HTML blog anda.

<style type="text/css">
img {
    width: 100%;
    height: auto;
}
</style>

Keterangan :

Kenapa img ? Karena img adalah pemanggilan untuk semua gambar dalam berkas/file HTML yang ditulis dalam tanda kurung.
Penggunaan lebar saya menggunakan width: 100%; dan tingginya auto. Untuk kebutuhan tertentu kita bisa merubah lebar gambar mungkin sekitar 50% atau lebih kecil sesuai dengan resolusi layar.

Berikutnya tulis kode berikut setelah tag <body> di file HTML.

<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />

Sampai disini sebenarnya bila dilihat hasilnya sudah responsive. Namun ada kekurangannya, yaitu gambar ukuran seberapapun akan menyesuaikan lebar dari laya perangkat. Dalam artian bila gambar yang digunakan dengan ukuran lebarnya 728px dan dibuka dengan perangkat desktop maka gambar akan besar seukuran desktop sehingga gambar akan pecah.

Untuk itu kita sedikit melakukan modifikasi pengkodean CSS yang nanti ukuran gambar yang tampil diperangkat sesuaikan dengan perintah pengkodean CSS.

Untuk melakukannya dengan menambahkan kode CSS ini :

.demo_1 { width: 300px; height: auto; } 
@media(min-width: 500px) { .demo_1 { width: 468px; height: auto; } } 
@media(min-width: 767px) { .demo_1 { width: 600px; height: auto; } } 
@media(min-width: 1023px) { .demo_1 { width: 728px; height: auto; } }

Maka penggunaan agar gambar lebih responsive menggunakan kode <div> seperti dibawah ini :

<div class="demo_1">
<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />
</div>

Silahkan lihat kembali demonya disini.

Terima kasih telah bersedia membaca artikel ini, setiap saran atau pertanyaan silahkan posting di bagian komentar di bawah.

Rabu, 22 Juni 2016

Cara Mudah Membuat Form Contact Us di Halaman Blogspot

Halaman Form Kontak di Blogger - Form kontak merupakan hal yang cukup penting bagi pemilik blog. Terutama apabila blog yang memiliki banyak pengunjung, maka form kontak wajib ada. Untuk menunjang keberadaan suatu blog diperlukan komunikasi antara pemilik dengan pengunjung blog. Walaupun telah disedian form komentar di setiap artikel/halaman blog, namun mungkin saja ada beberapa para pengunjung yang bertanya melalui form contact us.

Saat ini, blogger sudah menyediakan widget yang berisi form contact. Sayangnya widget ini hanya bisa ditempelkan pada layout yang ada. Jadi kamu tidak bisa menampilkan widget ini pada halaman khusus blog, semisal dihalaman yang anda inginkan sebagai contoh pada halaman contact us blog ini.

Kali ini saya akan memberikan cara membuat form Contact Us seperti pada blog saya ini secara gratis. Bagi yang menginginkannya ayo kita simak bersama-sama bagaimana cara mudah membuat form contact us di halaman blogspot.

Membuat Widget Form Contact
Untuk langkah awal, masuk ke dasbord lanjutkan ke menu "Tata Letak" dan tambahkan widget Formulir Kontak dan taruh dibawah block "Posting Blog". Lalu taruh disembarang tempat. Lihat seperti gambar dibawah ini.

Akhiri "Simpan setelan"

Menyembunyikan Widget Formulir Kontak
Agar form formulir kontak diatas tidak muncul di sidebar maka perlu kita sembunyikan.

Untuk melakukannya, rujuk ke menu "Template" edit template dengan modus " edit HTML" lalu copykan kode dibawah ini tepat diatas kode </head> :

<style type='text/css'>
#ContactForm1 {display:none}
</style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.hanyalah-contact-form { 
background:#fff; 
box-shadow:-1px 2px 3px #ddd; 
font:12px arial; 
width:80%; 
max-width:600px; 
margin:20px auto; 
padding:15px; 
border:1px solid #ddd; 
} 

.hanyalah-contact-title { 
box-shadow:-1px 2px 3px #ddd; 
text-shadow:0 1px 1px rgba(0,0,0,.3);
margin:0 0 10px 0; 
font-weight:400; 
padding:10px 15px; 
font:16px Arial; 
cursor:pointer; 
text-align:center; 
color:#fef4e9; 
border:solid 1px #999; 
background:#010101; 
} 
.contact-form-name,.contact-form-email,.contact-form-email-message { 
max-width:600px; 
width:100%; 
font-weight:bold; 
} 
.contact-form-name { 
background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkCyii1-id2gwk2BGu1bOWcq72d9CCpALSAm7PxIAWnLi_P0nrts_ws4WsZse2yGZj-qP5vt7R5rTdOcnEgQ-NJOFYtBS9DS4jWo59T2mygrAFKrpsvUe7GnMRpmABVZEnG2NuX0OeRM/s320/name.png) no-repeat 7px 8px; 
background:#f3f3f3; 
border:1px solid #ddd; 
box-sizing:border-box; 
color:#A0A0A0; 
display:inline-block; 
font-family:Arial,sans-serif; 
font-size:13px; 
font-weight:bold; 
height:35px; 
margin:0; 
margin-top:5px; 
padding:5px 15px 5px 28px; 
box-shadow:inset -2px 2px 3px #ddd; 
vertical-align:top; 
} 
.contact-form-email { 
background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2KYIe9-ENFQYCShUo0jvS_YEVYBjiRb-_qwjTg-__lX-ul3SHNkb0ud1Rq5aooG3W-N3nv3xpqNva70aC0-EM3H-LLxqyqMg_wFqDEm3EkbxEma5fedsg4VdEJPi0M9oRWVukUUfu7k/s320/email.png) no-repeat 7px 10px; 
background-color:#F2F2F2; 
border:1px solid #ddd; 
box-sizing:border-box; 
color:#A0A0A0; 
display:inline-block; 
font-family:Arial,sans-serif; 
font-size:13px; 
font-weight:bold; 
height:35px; 
margin:0; 
margin-top:5px; 
padding:5px 15px 5px 28px; 
vertical-align:top; 
box-shadow:inset -2px 2px 3px #ddd; 
} 
.contact-form-email:hover,.contact-form-name:hover { 
border:1px solid #bebebe; 
box-shadow:0 1px 2px rgba(5,95,255,.1); 
padding:5px 15px 5px 28px; } 
.contact-form-email-message:hover { 
border:1px solid #bebebe; 
box-shadow:0 1px 2px rgba(5,95,255,.1); 
padding:10px; 
} 
.contact-form-email-message { 
background:#FFF; 
background-color:#f2f2f2; 
border:1px solid #ddd; 
box-sizing:border-box; 
color:#A0A0A0; 
display:inline-block; 
font-family:arial; 
font-size:13px; 
margin:0; 
margin-top:5px; 
padding:10px; 
vertical-align:top; 
max-width:600px !important; 
height:150px; 
border-radius:4px; 
box-shadow:inset -2px 2px 3px #ddd; 
} 
.contact-form-button { 
cursor:pointer; 
height:32px; 
line-height:28px; 
font-weight:bold; 
border:none; 
} 
.contact-form-button { 
display:inline-block; zoom:1; *display:inline; 
vertical-align:baseline; 
margin:0 2px; 
outline:none; 
cursor:pointer; 
text-align:center; 
text-decoration:none; 
font:14px/100% Arial,Helvetica,sans-serif; 
padding:.5em 2em .55em; 
text-shadow:0 1px 1px rgba(0,0,0,.3); 
box-shadow:-1px 2px 3px #ddd; 
} 
.contact-form-button:hover { 
text-decoration:none; 
} 
.contact-form-button:active { 
position:relative; 
top:1px; 
} 
.hanyalah-button-color { 
color:#fef4e9; 
border:solid 1px #999; 
background:#010101; 
} 
.hanyalah-button-color:hover { 
background:#010101; 
} 
.hanyalah-button-color:active { 
color:#010101; 
}
.contact-form-name { 
background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkCyii1-id2gwk2BGu1bOWcq72d9CCpALSAm7PxIAWnLi_P0nrts_ws4WsZse2yGZj-qP5vt7R5rTdOcnEgQ-NJOFYtBS9DS4jWo59T2mygrAFKrpsvUe7GnMRpmABVZEnG2NuX0OeRM/s320/name.png) no-repeat 7px 6px; 
padding:15px 15px 15px 28px; 
} 
</style>
</b:if>

Akhiri "Simpan Template".

...Selanjutnya.

Membuat Halaman Kontak di Blogger
Terakhir adalah membuat halaman Contact Us atau Contact Me atau Kontak Kami, terserah anda yang mana yang diinginkan.

Sayang dilewatkan : Panduan Lengkap Cara Membuat Blog Gratis Untuk Pemula

Bagaimana caranya?

Masih didalam dasbor pilih tab Laman > Buat laman baru, lalu beri nama judul halamannya.

Lalu klik tombol "HTML" dan pastekan semua kode dibawah ini:

<div class="hanyalah-contact-form">
<div class="form">
<!-- Custom Contact Form By hanyalah start -->
<div class="hanyalah-contact-title" style="font-family: &quot;dancing script&quot;; font-size: 25px;">
Contact Form</div>
<form name="contact-form">
<!-- Name Field -->
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="50" type="text" value="Name" />
<!-- Email ID Field -->
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="50" type="text" value="Email ID" />
<!-- Message Field -->
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
<!-- Send Button --> 
<input class="contact-form-button contact-form-button-submit hanyalah-button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<!-- Clear Button -->
<input class="contact-form-button contact-form-button-submit hanyalah-button-color" type="reset" value="Clear" />
<!-- Validation -->
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<!-- End Custom Contact Form By hanyalah -->
</div>
</div>

Lalu klik tombol "Publikasikan".

Terakhir, silahkan lihat hasilnya.

Selasa, 07 Juni 2016

Cara Mudah Memasang dan Menampilkan Tombol Share WhatsApp di Blogger

WhatsApp adalah salah satu aplikasi komunikasi yang paling populer saat ini jauh meninggalkan aplikasi messenger lainnya seperti Wechat, HangOut terlebih lagi BBM. Saat ini WhatsApp sudah tersedia untuk ponsel maupun Web.

Kepopuleran WhatsApp ini sayang rasanya bila tidak dimanfaatkan bagi mereka yang memiliki situs/blog. Cara yang dimaksud adalah mempromosikan blog, toko online dan sebagainya melalui media WhatsApp.

Bagaimana cara share artikel ke aplikasi WhatsApp ?

Caranya yaitu dengan menggunakan tombol share whatsapp di blogger. Dengan tombol ini kita dengan mudah menshare artikel-artikel yang kita miliki hanya dengan sekali klik tombol share whatsapp layaknya tombol share Facebook, Twitter, Google+ dan banyak lagi.

Untuk demo live, anda bisa membuka sembarang artikel pada blog ini menggunakan Android/Iphone (tidak akan muncul bila via desktop) maka akan tampil tombol share whatsapp . Bisa terlihat seperti gambar dibawah ini :

...untuk berbagi ke sesama pengguna whatsapp, cukup tekan tombol "Bagikan Artikel Ini!".

Lalu pilih teman yang akan di share artikelnya,..

..bila sudah, akhiri tekan icon "Send".

Lalu bagaimana cara menampilkan tombol Share WhatsApp di Blogger ?

Nah, jika anda berniat memasang tombol share whatsapp pada blog anda silahkan copy kode dibawah ini di template dimana tombol-tombol share yang lainnya berada. Dan bila mungkin bisa saja anda tempatkan sesuai keinginan anda.

<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://cdn.jsdelivr.net/whatsapp-sharing/1.3.4/whatsapp-button.js&quot;;h.appendChild(s);}</script>
<a class='wa_btn wa_btn_l' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Bagikan Artikel Ini!</a>
<!-- Whatsapp Share Buttons End -->

Selanjut, lihat tombol share whatsapp sudah muncul. Dan anda kini selangkah lebih maju dari orang lain karena mungkin di blog anda telah memiliki tombol berbagi whatsapp.

Salam Tombol Share WhatsApp!

Senin, 06 Juni 2016

Cara Mudah Memperbaiki Error Pada Struktur Data Blog di Homepage atau Halaman Postingan

Memperbaiki error struktur data blog - Bila anda memiliki blog dengan platform milik blogger, maka blog yang anda miliki harus sudah memenuhi penerapan struktur data blog. Jika tidak maka beberapa struktur blog anda akan mengalami error. Untuk lebih jelasnya, silahkan rujuk pada site Struktur Data Testing Tools di https://developers.google.com/structured-data/testing-tool

Pesan error setelah melakukan testing struktur data blog, biasanya kode-kode errornya meliputi error pada DatePublished, Image/ImgURL, Name, Publisher, DateModified, Author, MainEntityOfPage. Bila memang demikian, maka sesegera mungkin diperbaiki pesan-pesan kesalahan tersebut.

Lalu bagaimana mengatasinya?

..baiklah!

Dibawah ini saya coba membantu untuk memecahkan masalah tersebut.

#1. Mengatasi error pada DateModified di Halaman artikel/postingan :

Silahkan masuk ke dasbor blogger, lalu masuk ke Setelan > Bahasa dan Pemformatan.
Sesuaikan zona waktu blog anda, lalu pilih format tanggal "mm dd, yy" (contoh: June 07, 2016) pada opsi "Format Header Tanggal" akhir Simpan Setelan.

Selanjutnya buka template anda.

Cari kode seperti dibawah ini :

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated'
expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

ubah menjadi :

<span itemprop='dateModified'>
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/></abbr></a></span>

#2. Mengatasi error missing Image :

Cari kode

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

lalu copykan kode berikut ini tepat dibawahnya.

<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta itemprop="url" expr:content='data:post.firstImageUrl'/>
  <meta itemprop="width" content='700'/>
  <meta itemprop="height" content='700'/>
  </div>
</b:if>

#3. Mengatasi error missing Publisher :

Copykan kembali kode berikut ini tepat dibawah pada poin ke #2.

<div itemprop="publisher" itemscope='itemscope' itemtype="https://schema.org/Organization">
   <div itemprop="logo" itemscope='itemscope' itemtype="https://schema.org/ImageObject">
      <meta itemprop="url" content="URL LOGO BLOG"/>
      <meta itemprop="width" content="600"/>
      <meta itemprop="height" content="600"/>
   </div>
 <meta itemprop="name" expr:content="data:blog.title"/>
</div>

Ganti URL LOGO BLOG dengan uRl logo blog anda.

#4. Mengatasi Error missing Author dan Name :

Cari kode seperti ini

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

lalu copy kode berikut ini dibawah kode <p><data:post.body/></p>

<!-- hCard"author" Start --> 
<span class='post-author vcard'> <b:if cond='data:top.showAuthor'> 
<data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> 
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/> 
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> 
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> 
</b:if> 
</b:if> 
</span> 
<!-- hCard"author" End -->

#5. Mengatasi Error MainEntityOfPage :

Copykan kode dibawah ini

<div itemscope='itemscope' itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"/>

letakkan dibawah kode

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

Terakhir simpan template anda!

Sabtu, 04 Juni 2016

Cara Merubah Tampilan Tanggal Artikel Menjadi Tampilan Lama Artikel Telah di Publish

Ubah Tampilan Tanggal Artikel - Benar-benar susah sekali artikel kali ini saya memberikan judulnya. Merubah tampilan tanggal artikel menjadi tampilan lama artikel telah di publish itulah bahasan kali ini.

Saya yakin, anda pasti bingung dengan judul diatas, seperti apa sih maksud dari judul diatas? ..Betul bukan?

Sebenarnya malasah ini sudah saya ketahui semenjak awal blog ini dibuat dengan menggunakan template ini. Namun saya anggap itu mudah untuk mengubah/mengatasinya.

Bagaimana sih maksud tampilan tanggal postingan/artikel yang dimaksud?

ini lhooo.. lihat tampilan tanggal artikel pada gambar dibawah ini.

gambar 1

Nah itu lah yang saya maksud, setiap tanggal artikel yang terbit/publish selalu memunculkan tulisan seperti "... x days ago." atau "... x years ago." (contoh diatas 2 days ago).

gambar 2

Tidak seperti tanggal artikel blog kebanyakan seperti gambar diatas.. "Jun 03, 2016".

Jadi awalnya artikel-artikel blog ini menampilkan tanggal postingan seperti gambar 1. Dengan mengoprek-oprek isi template blog akhirnya saya menemukan kode yang berkaitan dengan tampilan tanggal artikel.

Bagaimana melakukannya?

Jika anda ingin mengubah tampilan tanggal tersebut dari gambar 1 ke 2 ataupun sebaliknya anda bisa mengikuti seperti berikut ini.

Pertama-tama login ke blogger.
Buka template anda, Template > Edit HTML
Cari kode seperti dibawah ini :

<abbr class='published' expr:title='data:post.timestamp' itemprop='datePublished'>

..lalu ubah menjadi :

<abbr class='published timeago' expr:title='data:post.timestamp' itemprop='datePublished'>

Terlihat seperti gambar dibawah ini :

Save tamplate!

Maka hasilnya akan terlihat seperti gambar 1, dan bila ingin tampilan seperti gambar 2 cukup hapus kode "timeago".

Catatan!
Kode <abbr class='published... biasa lebih dari 1 (biasanya sebanyak 3), jika tampilan tidak berubah maka coba dengan satunya begitu seterus sampai tampilan sesuai atau tampilan tanggal artikel berubah.

Sekian, semoga bermamfaat

Selasa, 31 Mei 2016

Panduan Lengkap Cara Membuat Blog Gratis Untuk Pemula

Buat Blog Gratis - Di awal bulan Juni ini saya akan membahas dan mencoba membantu bagi anda yang benar-benar baru di dunia blogging dan berkeinginan untuk memiliki blog secara gratis. Panduan kali ini akan saya pandu dari awal hingga akhir sehingga harapan anda bisa mengelolanya secara mandiri.

Blog yang akan dibangun nantinya adalah menggunakan "mesin" blogger buatan google. Ini dikarena sifatnya memang gratis terlebih lagi dapat di integrasikan ke produk google lainnya, seperti layanan Google Photos, Google HangOuts, Google Maps, Google Webmasters Tools, Google Plus, Youtube, Google Adword hingga Google Adsense tentunya juga Blogger itu sendiri. Tentu ini sangat dimudahkan nantinya karena hanya menggunakan satu alamat email kita bisa menggunakan layanan tersebut (sesuai kebijakan privacy google).

Tak berpanjang lebar saya langsung saja kita lakukan membuat blog secara gratis untuk pemula.

Pertama-tama, anda harus memiliki satu buah akun google (gmail). Jika belum memilikinya anda bisa daftar dengan mengikuti panduan pada artikel saya dengan judul 5 Langkah Mudah Membuat Email Google bagi Pemula.

Berikutnya jika sudah berhasil, inilah tahap yang anda tunggu-tunggu dalam hidup anda untuk memiliki sebuah blog secara gratis. Silahkan klik tautan ini, untuk mendaftar dan membuat blog melalui halaman blogger milik google.

Untuk pertama kali, silahkan masukan alamat email dan password anda lalu klik tombol "Masuk".

Pada halaman dasbor blogger anda mulai lah membuat nama domain yang anda inginkan, untuk melakukannya anda bisa membaca secara rinci pada artikel saya dengan judul Custom Domain pada Blogspot Blogger, sebagai catatan anda ikuti panduan cukup sampai langkah #4 saja, setelahnya silahkan kembali ke artikel ini.

Bagaimana, sudah kah anda berhasil membuat sebuah domain blog ?

..Tentu sudah donk.

Baik, jika sudah, maka sampai sini anda sudah bisa menulis artikel yang anda ingin sesuai niche blog anda. Bagaimana melakukannya? ikuti seperti dibawah ini :

Cara Menulis Artikel Postingan.
Klik tab "Pos" lalu klik tautan "Buat entri baru"

Buat Judul Artikel sebagai contoh dibawah (Hallo Blogger), lalu isi artikel pada kolom yang disediakan, Jika ingin membedakan setiap artikel per kategori kita bisa membuatnya pada tab "Label".

Selanjutnya jika artikel selesai dibuat, kita bisa melihat hasil sementaranya terlebih dahulu dengan mengklik "Simpan" lalu "Pratinjau". Dan sekiranya artikel sudah mantap untuk di publish silahkan klik tab "Publikasikan"

Maka secara otomatis kita diarahkan kembali kehalaman opsi "Pos". Untuk melihat hasil artikel yang kita buat klik opsi "Lihat"

Dan lihat artikel anda sudah terpublish,..

Selanjutnya adalah membuat halaman "Page". Halaman ini biasanya berisi tentang halaman pendukung seperti About me (tentang saya), kontak kami, privacy policy atau halaman daftar isi.

Untuk membuatnya, sama halnya seperti membuat artikel seperti diatas.

Pertama pilih tab Laman > Buat laman baru.

Mengelola Komentar Pengunjung
Tahap berikutnya adalah mengelola komentar, untuk melihatnya adalah anda bisa merujuk tab "Komentar".

Disini kita bisa melihat siapa saja yang berkomentar di blog anda.

Pada tab ini, anda diberikan otoritas penuh mengelola komentar pengunjung dari menghapus konten, menghapus komentar pengunjung yang anda anggap tidak pantas serta memindahkan komentar pengunjung ke "kamar" spam.

Untuk pengelolaan komentar lanjutan, anda bisa mengklik tautan Setelan > Pos, komentar dan berbagi.

Disini kita bisa melakukan setelan komentar yang sesuai kita inginkan. Anda bisa mengutak-atik lalu simpan perubahan lalu lihat blog anda seperti apa perubahan/tampilan komentar pada blog anda.

Saya tidak menjabarkan lebih dalam, karena ini anda pahami dengan sendirinya.

..Jadi silahkan di explor sendiri ya sobat!

[Ikhtisar - Statistik] Cara mengetahui pengunjung Blog.
Pada dasbor akun blogger, kita bisa melihat dan mengetahui berapa jumlah pengunjuan harian, mingguan serta bulanan. Selain itu kita juga bisa mengetahui artikel-artkel mana saja yang paling banyak dilihat/dibaca oleh para pengunjung blog.

Tentu ini sangat menguntungkan karena dengan begitu kita bisa menganalisa lebih lanjut artikel-artikel apa saja yang kiranya bisa anda buat yang relevan dengan blog anda terkait popular post (artikel teratas) pada blog anda.

Untuk mengetahui dan melihat ikhtisar beserta statistik blog, anda bisa membaca artikel saya dengan judul : Cara Mudah Mengetahui Jumlah Pengunjung Blog

[Penghasilan] Dapat uang dari Internet.
Sobat, dengan membuat blog melalui blogger, anda berkesempatan mendapatkan atau menghasilkan uang dengan blog yang anda kelola.

Dengan hanya menulis artikel, kita bisa menghasilkan $ dollar dari internet yaitu dengan bergabung dengan layanan Google Adsense.

..Cara bergabung, silahkan klik tautan "Penghasilan" lalu klik "Sign up Adsense"

Selanjutnya silahkan ikuti intruksi-intruksi yang diminta.

Catatan!
Untuk mengikuti program adsense, ada beberapa syarat-syarat yang perlu diperhatikan diantaranya adalah umur anda minimal 18 tahun, minimal umur blog 6 bulan, jumlah artikel blog sudah diatas 50, dan juga artikel-artikel yang di publish benar-benar fresh konten dan minimal panjang artikel 350 - 400 kata.

Untuk informasi lebih lanjut tentang kelayakan untuk berpartisipasi di google adsense silahkan baca pada halaman kelayakan adsense.

[Kampanye] Promosikan Blog Anda.
Untuk lebih mengenalkan blog anda supaya lebih cepat dan banyak orang yang mengunjungi blog anda, Google menyediakan tab 'Kampanye" yang terintegrasi dengan layanan Google Adwords dimana disana anda disebut sebagai advertiser untuk bisa memasang iklan.

Untuk mengikuti ini, tentu harus mengeluarkan dana untuk memasang iklan pada google adwords.

Bagaimana untuk mengikutinya ?

klik tab "Kampanye" lalu klik tab "Mulai sekarang"

Lalu ikuti intruksi-instruksi berikutnya.

Untuk mengetahui info lebih lanjut, silahkan klik tautan ini.

Tata Letak Widget Blog.
Berikutnya kita mengulas sedikit tentang tata letak blog, khususnya widget untuk blog.

Untuk melakukannya silahkan, klik tab "Tata Letak"

Sebagai contoh diatas kita memasang widget "Label".

Caranya cukup mudah, kita cukup meng-klik tautan "Tambahkan Gadget" maka muncul jendela popup widget.

Silahkan cari widget yang ingin kita gunakan, dalam hal ini sebagai contoh ingin menerapkan widget "label" setelahnya klik tombol "+".

Akhiri klik opsi "Simpan Setelan" dan lihat hasilnya .

[Template] Rubah Tampilan Template Blog
Pada bagian ini kita bisa merubah template yang kita inginkan, pada halaman dasbor sebenarnya sudah disediakan macam-macam template oleh blogger.

Untuk melakukannya silahkan rujuk pada tab "Template"

Untuk merubah tamplate dari buatan blogger, silahkan klik salah satu tamplate yang tersedia seperti terlihat pada poin (2).

Maka akan tampil jendela popup, maka lanjutkan klik "Terapkan ke Blog"

Namun, bila kita ingin mengganti template non-blogger dengan kata lain buatan dari pihak ketiga, silahkan klik 'Edit HTML" pada point (1).

Copy kode template yang didapat, seperti gambar dibawah ini lalu akhiri dengan "Simpan Template"

Cara lain untuk melakukan perubahan template, kita bisa melakukannya melalui Impor Template.

...caranya!

Klik pada tab "Template" lalu klik tautan "Cadangkan / Pulihkan" (1).

Pilih template hasil download dari pihak ketiga (2) lalu unggah (3).

Jikalau sekiranya diperlukan, backuplah template yang sekarang digunakan. Untuk sebelum melakukan pergantian template no.1, 2 dan 3 maka lakukakan dulu backup template dengan cara klik "Unduh template lengkap" (4)

Backup dan Restore Data Konten Blog.
Akhir bahasan ini adalah bagaimana kita bisa mengamankan konten (artikel) blog kita yang sewaktu-waktu bisa saja terhapus dengan tidak sengaja.

Untuk melakukannya, silahkan baca pada artikel saya dengan judul : [Panduan Pemula] Cara Backup dan Impor Konten Data Blogger di Blogspot.

Mungkin cukup sekian saja, dan saya akan berusaha mengupdate artikel ini sekiranya memang ada perubahan-perubahan pada dasbor blogger.

Selanjutnya, jika anda masih mengalami kendala bisa kita diskusikan melalui kotak komentar dibawa.

Salam Blogger!

Senin, 30 Mei 2016

Redirect Halaman 404/Broken Link Blog untuk SEO

Bahasan kali adalah bagaimana caranya kita melakukan pengalihan (redirect ) kode error 404 salah satu URL ke alamat URL lainnya sesuai keinginan kita. Pengalihan ini biasanya disebabkan tidak ditemukannya laman yang dicari pengguna akibat ter-delete (broken link) atau terdeteksinya oleh mesin webmaster tools halaman yang tidak ada. Dampak dari ini semua jika tidak cepat-cepat diatasi/diperbaiki maka akan berpengaruh terhadap SEO blog kita.

Sebenarnya saya telah membahas masalah ini pada artikel saya terdahulu di Cara Mengatasai Pesan Error HTTP 404 Not Found. Secara umum saya menjelasakan apa itu pesan error 404, bagaimana cara mengenal pesan kesalahan Error 404, sampai bagaimana cara mengatasi error 404 secara umum.

Nah, pada kali ini saya akan membantu anda secara spesifik bagaimana cara melakukan pengalihan (direct) halaman/postingan artikel yang tidak ditemukan ke halaman yang anda inginkan.

Cara dibawah ini adalah untuk pengguna blogg ber mesin Blogspot.

Sebagai studi kasus adalah alamat(URL) yang hilang/terdelete adalah :

http://www.hanyalah.com/2016/05/artikel-umum.html

dan akan kita redirect ke halaman baru di :

http://www.hanyalah.com

Untuk melakukan redirect, ikuti tahapannya seperti dibawah ini :

Pertama-tama, login ke akun blogger.
Selanjutnya pilih menu Setelan (1) > Referensi Penelusuran (2).

cara mudah redirect halaman 404 broken link blog untuk seo

Klik pada gambar untuk perbesar

Lihat gambar diatas, untuk memulai klik tombol Pengalihan baru (3) pada opsi "Pengalihan Khusus".
Pada no.(4) ketik /2016/05/artikel-umum.html pada opsi "Dari"
Ketik / pada opsi "Kepada". Ingat untuk mengalihkan ke halaman utama harus mengetik garis miring, seperti terlihat pada gambar diatas.
Lalu centang pada pilihan "Permanen"
Klik "Simpan" lalu "Simpan perubahan"

Selesai..!

Uji, pengalihan khusus yang telah kita lakukan. Jika tahapan diatas telah dilakukan dengan benar maka semestinya pengalihan (direct) halaman URL dapat berjalan dengan baik.

Untuk itu silahkan coba, buka halaman http://www.hanyalah.com/2016/05/artikel-umum.html maka akan secara otomatis di alihkan ke alamat http://www.hanyalah.com.

Cukup mudah bukan?

Rabu, 25 Mei 2016

Cara Mudah Mengetahui Jumlah Pengunjung Blog

Jumlah Pengunjung Blog - Artikel kali ini adalah bagaimana kita sebagai pemilik blog khususnya berdomain blogspot ingin mengetahui jumlah kunjungan blog yang kita kelola.

Pada website pihak ketiga banyak sekali menyediakan layanan trafik blog yang kita kelola. Ada yang harus mendaftar terlebih dahulu ke website layanan tersebut namun ada juga tanpa harus mendaftar dan hanya memasang script/kode yang diberikan untuk dipasang di blog kita setelahnya kita pun bisa langsung memonitorinya.

Nah, kali ini saya akan membagikan artikel cara mudah mengetahui jumlah pengunjung blog dengan menggunakan menu yang ada di dasbor blogger yang kita miliki.

Bagaimana caranya? ikuti tahap-tahap berikut ini.

Pertama-tama, login ke blogger
Selanjutnya pilih blog yang akan di monitoring jumlah pengunjungnya.
Pada menu disebelah kiri, pilih opsi menu "Ikhtisar", maka akan terlihat ikhtisar jumlah pengunjung/penayang blog

Seperti gambar diatas, bisa dijelaskan bahwa grafik yang terlihat adalah jumlah penayangan per hari (jumlah ini termasuk kita sebagai pemilik blog yang mengunjungi halaman blog).
Pada bagian Pembaruan, adalah ikhtisar jumlah komentar, jumlah artikel yang di publish, jumlah penayangan harian, jumlah komentar serta jumlah pengikut untuk blog kita.
Untuk mengetahui ikhtisar lebih lanjut, kita bisa mengklik tautan "Statistik lainnya", maka akan terlihat seperti dibawah ini..

Seperti terlihat pada gambar diatas, dijelaskan disana kita bisa melihat artikel-artikel apa saja yang sering dilihat oleh pengunjung serta dari mana saja lalu lintas pengunjung datang ke blog anda.

Cukup mudah bukan,...?

Nah, dengan adanya menu ikhtisar pada dasbor blogger setidaknya dapat membantu mengetahui jumlah pengunjung blog anda .

Salam Ikhtisar Pengunjung Blog!

Selasa, 24 Mei 2016

[Panduan Pemula] Cara Backup dan Impor Konten Data Blogger di Blogspot

Backup dan Restore Data Blog - Banyak yang bertanya dimana database konten artikel tersimpan pada pengguna blogspot. Berbicara database tentunya kita tidak memiliki hak akses terhadap database yang tersimpan di blogger. Ini dikarenakan domain blogspot maupun domain TLD yang di host ke blogger merupakan layanan gratis memaksa kita untuk tidak bisa melakukan hal tersebut.

Lain halnya jika kita menggunakan layanan tersendiri atau menggunakan web hosting sendiri ke penyelia layanan pihak ketiga, maka semua itu tentunya bisa kita lakukan.

Cara Mudah Backup dan Impor Konten Data Blogger di Blogger

Namun demikian, tidak serta merta kita tidak bisa membackup data konten (artikel) kita di blogger/blogspot. Pihak blogger memberikan kita satu fasilitas yang dapat kita manfaatkan untuk membackup data konten, yang mana jikalau suatu saat di kemudian hari terjadi hilangnya konten-konten blog baik itu terdelete secara disengaja atau pun tidak maka kita dapat merestore kembali dengan data backup yang telah ada.

Untuk, melakukannya ikuti tahap demi tahap seperti dibawah ini :

#Cara Cadangkan (Backup) Konten:

Login ke akun blogger
Pilih menu Setelan > lainnya.
Klik Opsi "Cadangkan Konten", seperti terlihat gambar dibawah ini.

Cara Mudah Backup Konten Data Blogger di Blogger

Berikutnya untuk memulai proses backup konten, silahkan klik tombol "Simpan ke komputer"
Dan lihat, jika proses berhasil maka data backup akan tampil pada sudut kiri bawah pada browser.

#Cara Impor (Restore) Konten:

Login ke akun blogger
Pilih menu Setelan > lainnya.
Klik Opsi "Impor Konten", seperti terlihat gambar dibawah ini.

Berikutnya (biasanya) akan tampil popup seperti dibawah ini, centang "Saya bukan robot".
Agar konten secara otomatis ter publish silankan juga centang "Publikasikan semua pos dan laman yang telah diimpor secara otomatis".

Selanjutnya, anda jawab saja pertanyaan seperti gambar dibawah ini dan akhiri klik tombol "verifikasikan"

Jika berhasil, centang akan terlihat seperti gambar dibawah ini maka silahkan lanjutkan klik tombol "Impor dari komputer".

Rujuk file hasil backup yang telah kita simpan sebelumnya, lalu klik "Open"

Dibawah ini proses restore. silahkan tunggu .....

Proses selesai, ditanda dengan tampilan langsung ke halaman posting seperti terlihat dibawah ini.

Selesai...

Demikian sekilas bagaimana cara melakukan proses backup maupun restore data di blogspot. Semoga bermanfaat.

Minggu, 22 Mei 2016

Cara Mudah Menambahkan Pengarang Blog di Blogger

Artikel kali ini membahas tentang bagaimana cara menambah kan seseorang untuk menjadi pengarang/penulis pada blog di blogger/blogspot.

Cara ini dilakukan bagi anda yang ingin agar orang lain dapat membuat artikel-artikel yang dipublish di blog anda, sehingga bukan saja anda yang bisa mempublish artikel yang dibuat namun orang lain yang anda undang pun bisa menerbitkan artikel-artikelnya.

Cara Menambahkan Pengarang Blog di Blogger

Langsung saja, berikut tahap demi tahap untuk melakukan bagaimana mengundang / menambahkan pengarang/penulis pada blog :

Buka dasbor blogger anda.
Pilih menu Setelan > Dasar.
Gulir kebawah sampai terlihat opsi "Izin", pada kotak pengarang blog isikan alamat email di "+Tambahkan pengarang" teman/seseorang yang akan diundang menjadi pengarang blog.

Jika sudah maka undangan pengarang telah terkirim.

Pada seseorang yang di undang sebagai pengarang blog, di akun emailnya akan masuk email undangan sebagai permintaan persetujuan untuk menjadi pengarang blog, silahkan klik tautan yang diberikan pada isi email yang ada.

Jika semua telah dilakukan, maka pada dasbor blogger kita akan tampil nama dan email pengarang baru pada opsi "Izin" seperti terlihat dibawah ini.

Selesai. anda pun kini mempunyai anggota pengarang blog.

Demikian artikel dengan judul Cara Mudah Menambahkan Pengarang Blog di Blogger

Jumat, 13 Mei 2016

Tips Melindungi Alamat Email Anda dengan ReCAPTCHA

Lindungi Alamat Email Anda dengan ReCAPTCHA - Muak dengan spam? reCAPTCHA Mailhide membantu melindungi kotak masuk Anda dengan meminta orang untuk memecahkan reCAPTCHA sebelum mereka dapat melihat alamat email Anda.

Cara Melindungi Alamat Email Anda dengan ReCAPTCHA

Seperti yang kita ketahui, CAPTCHA adalah program yang dapat memberitahu apakah pengguna adalah manusia atau komputer. Anda mungkin pernah melihat CAPTCHA diwakilkan gambar berwarna dengan teks terdistorsi di bagian bawah formulir pendaftaran Web.

CAPTCHA yang digunakan oleh banyak situs untuk mencegah penyalahgunaan dari "bot", atau program otomatis untuk menghasilkan yang biasanya ditulis spam. Tidak ada program komputer dapat membaca teks terdistorsi serta manusia bisa, sehingga bot tidak dapat menavigasi situs dilindungi oleh CAPTCHA.

reCAPTCHA hanya dapat dipecahkan oleh manusia, sehingga menghentikan spammer mendapatkan akses ke alamat email Anda melalui program otomatis. Sebagai contoh lihat email dibawah ini :

a...@gmail.com

Atau anda bisa juga melihatnya di halaman kebijakan privasi pada blog ini.

Untuk mengetahui alamat email keseluruhan, pengguna harus mengklik "...", maka windows popup akan muncul dan memecahkan reCAPTCHA sebelum mereka dapat melihat alamat email Anda.

Tips melindungi Alamat Email Anda dengan ReCAPTCHA
Nah, lalu bagaimana membuatnya. Sangat gampang, fasilitas hebat yang dimiliki oleh google ini dapat anda buat secara gratis melalui link disini.

Masukkan alamat email dan setelahnya klik tombol "PROTECT IT!"

Maka setelahnya akan muncul kode HTML kepada Anda yang mengharuskan pengguna memecahkan reCAPTCHA email sebelum dapat melihat alamat tersebut

Tips Melindungi Alamat Email Anda dengan ReCAPTCHA

Tinggal copy kan saja kode HTML diatas, kedalam blog dimana ingin ditampilkan.

Sangat gampang bukan.. :)

Hal Yang Perlu di Ketahui Sebelum Melakukan Transfer Domain

Transfer Nama Domain - Untuk bisa melakukan transfer Domain atau cara tranfer nama domain dari tempat lama ke tempat hosting baru, sebetulnya tidaklah terlalu susah sepanjang persyaratannya terpenuhi. Persyaratan utamanya adalah, anda memerlukan EPP Key atau yang juga biasa disebut dengan Security Key/Security Code pada penyedia Domain asal Anda yang sekarang.

Sedangkan biaya transfer domain, rata-rata sama saja dengan dimana kita daftar baru nama domain namun tergantung pada penyedia domain masing-masing. Proses transfer domain ini akan mendapatkan perpanjangan nama domain selama 1 tahun dari tanggal expire domain yang terakhir kali.

Kembali masalah EPP Key,..

..EPP Key diperlukan sebagai identifikasi paling aman (secara Internasional), yang menjadi pedoman antar sistem penyedia domain di dunia sebagai bukti bahwa memang andalah pemilik sah dari Domain yang akan di transfer.

Maka pada saat melakukan order transfer domain anda akan diminta untuk memasukan EPP Key. Dalam tahap ini biasanya anda tinggal melakukan pembayaran atas proses transfer nama domain ini.

Masalah terjadi biasanya setelah proses ini dilalui, kita akan mengalami kendala dalam tahap berikutnya dimana kita tidak / belum mengetahui bahwa selain syarat diatas, masih ada syarat-syarat lain yang mutlak harus terpenuhi.

Syarat Cara Transfer Nama Domain

Syarat - syarat lainnya tersebut adalah :

Whois privacy protect harus dibuka
Domain lock harus dibuka
Umur domain tidak boleh kurang dari 60 hari
Tanggal expire domain tdk boleh kurang dari 10 hari dari pengajuan proses transfer
Email pada registrant kontak whois domain haruslah email yg bisa diakses sendiri

Pengalaman penulis dalam proses transfer domain, tidak mengindahkan 5 persyaratan diatas sehingga mengalami ketertundaan, dari minta dibukakan Whois privacy protect nya yang dikarenakan tidak adanya menu yang dimaksud pada client account, sampai dengan harus perpanjangan nama domain di tempat lama dulu ini dikarenakan tanggal expire domain kurang dari 10 hari.

Transfer Nama Domain
Berbicara tanggal expire domain yang harus tidak boleh 10 hari, ini dikarenakan terlebih dari kekhawatiran atas kegagalan disaat proses transfer domain yang memakan waktu kurun waktu 5-10 hari, sehingga ditakukan menjadi expire saat ditengah-tengah proses tersebut.

Dari berbagai penyelia hosting lainnya malah ada mensyaratkan lebih dari 10 hari seperti tidak boleh kurang dari 14 hari, ini semua kembali agar proses transfer domain tersebut tidak akan mengalami kegagalan.

Untuk itu bagaiamana melakukan/ cara transfer nama domain ini, penulis menyarankan lakukanlah proses ini jika tanggal expire domain anda menyisakan setidaknya 1 bulan.

Terakhir, jika syarat-syarat diatas telah terpenuhi semua, maka kita akan menerima email konfirmasi transfer domain yang harus di approve sesuai isi yang ada di email. Kemudian barulah proses transfer domain akan berjalan dalam 5-10 hari hingga lengkap ter transfer. Selanjutnya kita hanya menunggu sampai semuanya resolved.