Cara install plugin di wordpress

Artikel ini saya buat karena banyak dari customer saya yang kurang tahu cara install plugin di wordpress. Apa sih itu plugin? Dari yang saya baca dari di wordpress. Plugin yaitu suatu aplikasi untuk menambah fungsionalitas yang sudah ada di CMS WordPress. WordPress sendiri dirancang kodenya ramping dan ringan, untuk memaksimalkan fleksibilitas dan meminimalkan kode. Nah Plugin inilah yang kemudian menawarkan fungsi kustom dan fitur sehingga setiap pengguna dapat menyesuaikan situs mereka dengan kebutuhan khusus mereka.

Fungsi asli dari CMS wordpress sendiri adalah sebagai CMS yang memungkinkan pengguna untuk menginstall blog pada hosting mereka sendiri. Sesuai dengan perkembangan yang ada, fungsi wordpress berubah sebagai website yang bisa memaksimalkan kebutuhan masing masing orang itu sendiri. Misalnya sebagai forum dengan menggunakan plugin BBPress, online shoping menggunakan plugin woocommerce, website berita, social network dengan menggunakan plugin buddypress dan masih banyak lagi website website besar yang menggunakan CMS ini.

Dengan CMS wordpress anda bisa membuat website apapun dari yang lebih anda bayangkan.

Untuk cara install plugin di wordpress itu sendiri ada banyak cara, install manual dengan terlebih dahulu download file lalu maupun install langsung tanpa harus terlebih dahulu download file.

Biasanya jika anda beli plugin premium maka anda harus terlebih dahulu mendownload file tersebut di tempat anda membeli plugin tersebut. Berikut adalah langkah langkah install plugin wordpress secara manual:
1. Silahkan anda terlebih dahulu download file di tempat anda membeli atau mendownload plugin tersebut. Tambahan: Biasanya file yang di download dalam bentuk paket download dan anda diharuskan mengextract nya tapi ada juga plugin yang anda download hanya berupa plugin tanpa anda harus mengextract dan langsung bisa anda install.

2. Setelah anda download file tersebut, silahkan anda masuk ke dashboard wordpress anda. Lalu masuk ke menu Plugins -> Add New

3. Lalu setelah itu dipaling atas ada tombol Upload Plugin silahkan anda klik tombol tersebut.

4. Setelah itu anda klik Browse dan anda upload file zip dari plugin yang anda download setelah itu klik Install Now.

5. Tunggu hingga proses upload selesai. Setelah proses selesai yang anda butuhkan tinggal klik link Activate Plugin.

6. Selesai, tinggal anda setting saja plugin tersebut.

Cara diatas adalah cara install plugin manual, lalu bagaimana cara install otomatis tanpa harus anda upload download dan upload plugin. Cara ini hanya bisa menginstall plugin yang hanya ada pada repositor wordpress itu sendiri. Jadi tidak bisa anda gunakan pada plugin Premium ataupun plugin gratis diluar repositor wordpress.org itu sendiri.

Berikut adalah langkah langkah nya.
1. Setelah anda download file tersebut, silahkan anda masuk ke dashboard wordpress anda. Lalu masuk ke menu Plugins -> Add New

2.Setelah itu anda tinggal cari saja plugin yang dibutuhkan, sebagai contoh disini saya akan menginstall plugin wp editor. Maka anda cari dengan kata kunci wp editor lalu klik enter pada keyboard anda.

Dari gambar diatas semisal kita ingin menginstall plugin wp editor yang ada gambar pensilnya. Maka kita klik saja tombol Install Now pada kotak plugin tersebut.

3. Tunggu hingga proses upload selesai. Setelah proses selesai yang anda butuhkan tinggal klik link Activate Plugin.

4. Selesai, anda tinggal setting saja plugin tersebut.

Cara lainnya adalah upload langsung di server atau bisa juga melalui FTP (File Transfer protocol). Cara ini akan saya terangkan sedikit. Jika anda mengalami masalah pada kedua cara diatas, pastikan anda terlebih dahulu untuk menghubungi pihak hosting anda. Jika terpaksa anda bisa melakukan installasi plugin via upload langsung pada server anda atau melalui FTP. Untuk FTP yang biasa saya gunakan adalah filezilla anda bisa mendownloadnya di https://filezilla-project.org/

Berikut adalah langkah langkah nya:
1. Download plugin anda, silahkan anda extract terlebih dahulu file yang sudah anda download tersebut.

2. Silahkan anda login terlebih dahulu pada server atau pada FTP anda. Untuk masalah ini silahkan anda hubungi server masing masing.

2. Lalu silahkan anda upload file yang sudah diextract tersebut pada folder wordpress/wp-content/plugins/.

3. Setelah anda selesai mengupload file, silahkan anda masuk ke dashboard wordpress anda, lalu masuk ke menu Plugins -> Installated Plugins. Lalu klik Activate pada nama plugin yang telah anda upload.

4. Selesai, tinggal anda setting saja plugin nya.

Note: Jangan terlalu banyak menggunakan plugin karena itu akan memberatkan server.

Troubleshouting saat install plugin:
Trouble: Jika anda mengalami kasus seperti ini:
Unpacking the package…
Installing the plugin…
Destination folder already exists.

Solve: Silahkan anda cek terlebih dahulu apakah plugin tersebut sudah terpasang atau belum, jika sudah terpasang, silahkan anda delete terlebih dahulu plugin tersebut dan install ulang kembali plugin anda.

Trouble: Jika saat installasi anda mengalami kasus seperti ini:
Unpacking the package…
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin install failed.

Solve: Silahkan anda cek terlebih dahulu zip file tersebut, apakah itu plugin, theme atau file zip lainnya yang bukan plugin. Jika emang bukan plugin silahkan anda extract terlebih dahulu file tersebut, kemungkinan itu adalah paket download yang mengharuskan anda untuk mengextract terlebih dahulu file yang anda download untuk kemudian anda upload zip file setelah anda extract file tersebut. Jika masih sama, silahkan anda tanyakan author plugin tersebut. :)

Mudah bukan cara install plugin di wordpress anda.

SimpleSanget high CTR adsense blogger template

Apakah anda pemain adsense dan ingin mengoptimalkan pendapatan adsense anda? Ya, kali ini saya akan kembali memberitakan high CTR adsense blogger template gratis. Dengan menggunakan template sederhana dan simple ini diharapkan anda dapat mengoptimalkan pendapatan adsense anda.

Sedikit intro, desain template ini sangat sederhana, dengan width atau lebar 728 dimana iklan adsense bisa ditempatkan dibawah menu, dan di sidebar support untuk adsense berukuran 160x600, desain yang sempit sangat memungkinkan anda untuk mengoptimalkan adsense anda. Di bagian post gunakan adsense 336x280, dimana setiap pengunjung membuka website akan langsung melihat iklan anda.

Fitur fitur template:
Mobile friendly dan Responsive design
Ini adalah responsive template blogger, artinya template ini dapat bekerja dengan baik di desktop, laptop, tablet bahkan ponsel atau handphone terkecil sekalipun design tetap sempurna dan high quality. Cuma itu?? Tentu tidak, template ini juga dilengkapi dengan custom template mobile, jika anda menggunakan custom template mobile maka template ini dapat bekerja dengan baik. Perfect.

Full SEO, dinamic heading dan valid scheme.org
Hal yang sangat penting dari blogging atau website adalah SEO. Template ini sudah fully SEO, dengan dinamic heading yang tertata rapi baik di halaman index, archive, label maupun di postingan.
Pada index

• h1 di judul blog
• h2 di judul post
• h3 di judul widget

Pada post

• h1 di judul blog
• h2 di related title
• h3 di judul widget

Mendapat nilai 100% di chkme dan template ini sudah menggunakan scheme website terkini, mulai dari header, navigasi, breadcrumbs, blog, blogpost, sidebar maupun di footernya. Great.

High CTR adsense place
Sesuai judul, template ini dapat mengoptimalkan pendapatan adsense anda. Dengan desain yang sempit dan ketika pengunjung membuat website atau blog anda, akan langsung disajikan adsense sehingga kemungkinan klik iklan anda anda akan semakin besar. Desain ini cocok untuk personal blog yang ingin memaksimalkan adsense anda.

Fitur lengkap bisa anda pada table dibawah:

Fitur	Free	Premium
Responsive Design		Cek Fitur
Custom Mobile		Cek Fitur
Mobile Friendly		Cek Fitur
Valid Scheme.org		Cek Fitur
Valid HTML5		Cek Fitur
Valid Feed		Cek Fitur
Fast Load Performance
High CTR
2 Kolom
Adsense Ready
Popular post
Related post
Snippet with thumbnail
Breadcrumbs
Responsive Video
Responsive Image
Responsive Table
Responsive Dropdown Menu
Flat button
Search box
CSS pre and kbd
Custom Box Subscriber	(Feedburner)	(Feedburner)
Social share button
Label Widget
List Link Widget
Remove Footer Credit
No Encrypted Scripts
No Minify CSS
Sale Template

Demo Download Versi Pro($7)

Tutorial cara konfigurasi template SimpleSanget bisa anda lihat di:
Cara Konfigurasi template SimpleSanget

Jika anda berminat untuk versi pro silahkan anda beli di kentooz, tutorial cara melakukan pembelian template di kentooz:
Cara melakukan pembelian tema di kentooz/

Mohon untuk tidak mengklaim template tersebut dan tidak menghapus link kredit jika anda menggunakan yang versi free.

Changelog: 
1.0.4 - 07/10/2017
- Fixed description disappear (change data:post.postSummary with data:post.snippet) - Rechange.

1.0.3 - 17/02/2017
- Fixed description disappear (change data:post.postSummary with data:post.snippet) - Rechange.

1.0.2 - 17/02/2017
- Fixed description disappear (change data:post.snippet with data:post.postSummary)

1.0.1 - 11/1/2017
- Fixed load font and font icon

1.0 - 22/2/2016
- Initial Release

Cara menonaktifkan atau mengganti mobile template blogger atau blogspot

Blogger atau blogspot memiliki fitur custom template mobile. Ketika diakses via handphone atau ponsel, maka yang ditampilkan pada ponsel anda adalah template mobile yang sudah ada sebelumnya. Lalu bagaimana dengan template blogger sudah include custom mobile template, yang anda perlukan adalah mengganti default mobile template blogger dengan custom template.

Berikut adalah langkah langkah cara mengganti mobile template di blogger atau blogsot:
1. Silahkan anda masuk ke menu template pada blogger anda.

2.Setelah itu anda tinggal klik tombol bergerigi pada template mobile di blogger. Lihat gambar dibawah:

3. Setelah anda klik menu tersebut maka akan muncul popup, dan tinggal anda pilih saja template custom atau khusus pada baris paling bawah. Silahkan anda lihat gambar dibawah:

4. Lalu klik simpan. Selesai.

Pertanyaan sekarang bagaimana kalau template yang anda download tidak memiliki custom template mobile atau template tersebut sudah memiliki fitur responsive tanpa custom template?  Yang perlu anda lakukan adalah menggunakan template bawaan dari blogger atau menonaktifkannya. Untuk menonaktifkan template mobile adalah memilih tidak pada pilihan setelah anda klik tombol bergerigi diatas. Lihat gambar dibawah:

Mudah bukan caranya. Semoga bermanfaat.

Cara pasang atau instalasi template blogger atau blogspot

Tutorial kali ini saya akan menjelaskan bagaimana cara pasang atau instalasi template blogger atau blogspot.

Sebelum anda melangkah ke tahap selanjutnya, silahkan anda cari terlebih dahulu template di google atau anda bisa download template blogger yang sudah saya buat di disini.

Biasanya file yang anda download dalam bentuk .zip yang perlu anda lakukan adalah mengextract terlebih dahulu file yang sudah anda download. Klik kanan file yang anda download lalu klik exract to. Silahkan anda lihat contoh gambar dibawah:

Setelah anda mengextract file maka anda akan menemukan file xml didalam folder setelah anda mengextractnya. File itulah yang perlu anda unggah. Langkah selanjutnya anda mulai untuk menginstal template tersebut.

Berikut adalah langkah langkah instalasi template blogger:
1. Sebelum nya yang perlu anda lakukan adalah backup terlebih dahulu template blogger atau blogspot anda. Untuk tutorial backup bisa dilihat di:
Cara mudah backup template blogger atau blogspot.

2. Setelah anda backup template asli anda, silahkan masuk ke menu TEMPLATE Silahkan anda lihat gambar dibawah:

3. Langkah selanjutnya adalah klik menu cadangkan atau pulihkan pada tombol sebelah kanan atas. Lihat gambar dibawah:

4. Setelah itu akan muncul popup. Untuk backup anda bisa klik unduh template lengkap dan taruh pada tempat aman pada komputer anda. Nah tutorial ini adalah cara pasang template blogger maka yang perlu anda lakukan adalah klik browse cari xml anda pada komputer lokal anda lalu klik unggah

5. Setelah anda klik browse maka akan muncul popup untuk mengunggah xml. Berikut adalah contoh popup gambar xml blogger, file xml bisa bernama apa saja, tergantung dari nama template blogger tersebut:

6. Setelah itu anda tinggal klik open, anda akan dibawa pada popup sebelumnya.

Yang perlu anda lakukan pada gambar diatas adalah klik unggah.

7. Tunggu sampai proses selesai. Selesai sudah tahap Cara pasang atau instalasi template blogger atau blogspot.

8. Tahap selanjutnya anda tinggal setting widget sesuai dengan aturan dan fitur masing masing template. Berikut adalah tutorial pasang widget atau gadget pada blogger atau blogspot anda.
Pasang widget atau gadget pada blogger atau blogspot

Sekian tutorial dari saya semoga bermanfaat.

SEOFastBlogger responsive blogger template

Postingan kali ini saya akan membagikan template gratis SEOFastBlogger responsive blogger template. Template ini merupakan template blogger pertama dari saya dan akan saya bagikan gratis atau free blogger template. Dengan menganut desain flat murni, template ini penataan nya sangat rapi, mulai dari margin, padding, pewarnaan, icon font menggunakan fontawesome yang diload secara async sampai font menggunakan google font open sans yang banyak digunakan pada desain desain flat.

Fitur fitur template:
Flat dan Responsive design
Ini adalah responsive template blogger, artinya template ini dapat bekerja dengan baik di desktop, laptop, tablet bahkan ponsel atau handphone terkecil sekalipun design tetap sempurna dan high quality. Cuma itu?? Tentu tidak, template ini juga dilengkapi dengan custom template mobile, jika anda menggunakan custom template mobile maka template ini dapat bekerja dengan baik. Perfect.

Blazing fast atau sangat cepat
Pertanyaan sekarang, dengan design yang sesempurna itu apakah web dapat di load dengan cepat?? Ya, tentu saja, sebelumnya membuat template blogger saya telah membuat design wordpress dengan cepat dan handal di kentooz. Sekarang saya buat template ini dengan tidak jauh beda untuk masalah performance, meskipun ada beberapa fitur blogger yang harus saya pangkas, hasilnya adalah template blogger dengan design yang keren tapi tidak mengurangi performace template itu sendiri. Fastest baik di desktop maupun di mobile dengan nilai lebih dari 90+ baik di gtmetrix maupun di google insight. Incredible.

Full SEO, dinamic heading dan valid scheme.org
Hal yang sangat penting dari blogging atau website adalah SEO. Template ini sudah fully SEO, dengan dinamic heading yang tertata rapi baik di halaman index, archive, label maupun di postingan.
Pada index

• h1 di judul blog
• h2 di judul post
• h3 di judul widget

Pada post

• h1 di judul blog
• h2 di related title
• h3 di judul widget

Mendapat nilai 100% di chkme dan template ini sudah menggunakan scheme website terkini, mulai dari header, navigasi, breadcrumbs, blog, blogpost, sidebar maupun di footernya. Great.

Custom Disqus Comment
Sudah tahu kan disqus dan keuntungan menggunakan komentar disqus dibandingkan dengan komentar bawaan dari blogger. Ya template ini sudah include komentar disqus. Pertanyaan sekarang, kenapa kok saya tidak include komentar blogger? Alasannya selain keuntungan komentar disqus sendiri, alasan utama saya adalah design nya. Ya komentar blogger desainnya sangat aneh menurut saya, oleh karena itu disini saya ganti komentar blogger menggunakan disqus. Selain itu sudah ada fitur lazy load disqus dengan klik, jadi begitu kita klik tombol komentar baru muncul komentar dari disqus, ini dimaksudkan agar performance atau kecepatan blog tidak tergangu. Nice huh.

Valid Feed, HTML5, CSS3di w3c validator.
Fitur yang saya tidak terlalu penting sih.. Karena bisa kita lihat website besar pun tidak ada yang valid. :D Tapi... Meski tidak terlalu penting, template ini sudah valid, baik feed, HTML5, CSS3. Dan saya rasa, ini adalah template blogger pertama, yang sudah valid baik itu Feed, HTML5 mapun CSS3. Jadi yang anda lakukan sekarang cukup buat posting, optimasi penempatan adsense, lakukan SEO off page, dan jalan. Gak perlu lagi lah namanya optimasi template. :D Anda bisa cek validator nya nanti.

Fitur lengkap bisa anda pada table dibawah:

Fitur	Free	Premium
Responsive Design		Cek Fitur
Custom Mobile		Cek Fitur
Mobile Friendly		Cek Fitur
Valid Scheme.org		Cek Fitur
Valid CSS3		Cek Fitur
Valid HTML5		Cek Fitur
Valid Feed		Cek Fitur
Fast Load Performance		Cek Fitur
Disqus Comment
High CTR
2 Kolom
Adsense Ready
Popular post
Related post
Simple Recent Post
Snippet with thumbnail
Breadcrumbs
Responsive Video
Responsive Image
Responsive Table
Responsive Dropdown Menu
Flat button
Search box
CSS pre and kbd
CSS Anti Klik Kanan
Page Number Navigation
Custom Box Subscriber	(Feedburner)	(Feedburner)
Social share button
Label Widget
List Link Widget
Remove Footer Credit
No Encrypted Scripts
No Minify CSS
Sale Template

Demo Download Versi Pro($7)

Tutorial cara konfigurasi template SEOFastBlogger bisa anda lihat di:
Cara Konfigurasi template SEOFastBlogger

Jika anda berminat untuk versi pro silahkan anda beli di kentooz, tutorial cara melakukan pembelian template di kentooz:
Cara melakukan pembelian tema di kentooz/

Mohon untuk tidak mengklaim template tersebut dan tidak menghapus link kredit jika anda menggunakan yang versi free.

Changelog: 
1.0.7 - 07/10/2017
- Fixed thumbnail not display in archive page.

1.0.5 - 17/02/2017
- Fixed description disappear (change data:post.postSummary with data:post.snippet) - Rechange

1.0.4 - 17/02/2017
- Fixed description disappear (change data:post.snippet with data:post.postSummary)

1.0.3 - 11/1/2017
- Fixed load font and fonticon

1.0.2 - 7/6/2016
- Fixed rich snippet 

1.0.1 - 20/2/2016
- Fixed padding search input in mobile 
- Fixed responsive image in mobile 
- Fixed pre background 
- Fixed analytic 

1.0 - 19/2/2016
- Initial Release

Conditional tag di blogger atau blogspot

Saya akan sedikit menjelaskan apa itu conditional tag. Conditional tag adalah membatasi suatu perintah program pada kondisi tertentu menggunakan sintak tertentu atau dalam bahasa awamnya adalah suatu proses dimana proses tersebut dalam kondisi tertentu harus dilakukan atau tidak dilakukan. Saya kira anda sudah tahu lah pengertian dari conditional tag, dijabarkan sendiri saja.

Lanjut, seperti halnya bahasa pemrograman lain seperti php, javascript, dan lain sebagainya, blogger atau blogspot pun memiliki conditional tag. Dari yang saya pelajari conditional tag di blogger cenderung lebih sedikit, mudah dan simple dibandingkan dengan conditional tag lainnya.

Berikut saya coba daftar kan beberapa conditional tag di blogger atau blogspot anda yang mungkin berguna bagi anda dalam pembuatan dan edit template.

Condition #AND
Dalam bahasa awam jika kondisi A dan kondisi B terpenuhi maka lakukan perintah ini. Di logika saja ya.

<b:if cond='data:blog.pageType == "index"'>
   <b:if cond='data:blog.searchQuery'>
     <!-- Perintah ini dijalankan di halaman search_page AND index_page -->
   </b:if>
</b:if>

Condition #OR
Dalam bahasa awam jika salah satu kondisi A atau kondisi B terpenuhi maka lakukan perintah ini. Di logika saja ya.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 
  <!-- Perintah ini dijalankan di halaman static_site foo OR static_site bar -->
      <b:else/>
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/bar.html"'> 
  <!-- Perintah ini dijalankan di halaman static_site foo OR static_site bar -->
   </b:if>
</b:if>

Condition #NOT
Dalam bahasa awam jika tidak pada kondisi A maka lakukan perintah ini. Di logika saja ya.

<b:if cond='data:blog.pageType != "index"'>
  <!-- Perintah ini dijalankan pada semua halaman NOT(kecuali) halaman index pages -->
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <!-- Perintah ini dijalankan pada semua halaman NOT(kecuali) homepage -->
</b:if>

Ok saya kira sampai disini anda sudah tau mengenai logika dari conditional tag blogger atau blogspot menggunakan if then else dari API blogger.

Lanjut. Berikut adalah daftar kondisi tertentu untuk conditional tag di blogger atau blogspot

Pada archive page.

<b:if cond='data:blog.pageType == "archive"'>
  <!-- Perintah ini dijalankan pada semua halaman archive-->
</b:if>

Pada Error page atau 404.

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- Perintah ini dijalankan pada semua halaman error -->
</b:if>

Pada index_page.

<b:if cond='data:blog.pageType == "index"'>
  <!-- Perintah ini dijalankan pada semua halaman index -->
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- Perintah ini dijalankan hanya di halaman homepage -->
</b:if>

Pada item

<b:if cond='data:blog.pageType == "item"'>
  <!-- Perintah ini dijalankan pada semua halaman item -->
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'> 
  <!-- Perintah ini dijalankan hanya pada halaman item dengan url namablog.com/2014/08/foo.html-->
</b:if>

Pada halaman label

<b:if cond='data:blog.searchLabel'>
  <!-- Perintah ini dijalankan pada semua halaman label -->
</b:if>

<b:if cond='data:blog.searchLabel == "foo"'>
  <!-- Perintah ini dijalankan hanya pada halaman label dengan nama label 'foo' -->
</b:if>

Pada halaman pencarian atau search

<b:if cond='data:blog.searchQuery'>
    <!-- Perintah ini dijalankan pada semua halaman pencarian atau search -->
</b:if>

<b:if cond='data:blog.searchQuery == "foo"'>
  <!-- Perintah ini dijalankan hanya pada halaman pencarian dengan kata kunci 'foo' -->
</b:if>

Pada halaman statik

<b:if cond='data:blog.pageType == "static_page"'>
  <!-- Perintah ini dijalankan pada semua halaman static atau statik -->
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 
  <!-- Perintah ini dijalankan hanya pada halaman statik dengan nama halaman 'foo' -->
</b:if>

Pada custom mobile template

<b:if cond='data:blog.isMobile == "true"'>
  <!-- Perintah ini dijalankan pada semua custom template mobile -->
</b:if>

Kondisi lainnya bisa anda coba cari template masing masing, semisal anda menemukan kondisi berikut:

<b:if cond='data:post.thumbnailUrl'>
  <!-- Perintah ini dijalankan jika ada perintah data:post.thumbnailUrl -->
</b:if>

Artinya jika perintah data:post.thumbnailUrl tidak terlaksana atau null maka perintah didalam tag tersebut tidak akan dijalankan.

Contoh kasus:

Saya tidak ingin menampilkan <div class="gmr">Halo saya adalah element HTML</div> pada halaman item yang lain tolong ditampilkan, dari sini kita bisa baca sesuai logika kita. Maka yang harus anda lakukan adalah memasukkan tag sebagai berikut:

<b:if cond='data:blog.pageType != "item"'>
  <div class="gmr">Halo saya adalah element HTML</div>
</b:if>

Pemrograman tidak harus anda hafal semua tag yang ada, tapi bagaimana anda membuat suatu logika program sehingga bisa kita jalankan sesuai dengan keinginan kita atau dalam bahasa kerennya algoritma pemrograman.

Mudah bukan. Silahkan anda bermain dengan conditional tag yang ada, masih banyak conditional tag yang tidak saya tulis diatas.

CSS blockquote cantik dan sederhana di blogger atau blogspot

Kali ini saya akan membuat tutorial bagaimana cara membuat blockquote yang cantik dan sederhana menggunakan pseudo element blockquote:after dan blockquote:before pada blogger anda.

Kebanyakan tutorial blockquote menggunakan p atau paragraph didalam sebuah elemen blockquote, tetapi di beberapa platform blog seperti blogger, hal ini tidak berlaku, karena kebanyakan blogger tidak meggunakan paragraph(P) tapi menggunakan line break(BR) untuk posting nya.

Berikut adalah CSS blockquote nya:

/* CSS blockquote */
blockquote{font-family: Georgia, "Times New Roman", serif;margin:0px;color: #b4b4b4;font-weight: 400;line-height: 20px;font-style: italic;text-indent: 65px;position: relative;background: #fff;border-left:3px solid #f8f8f8;padding: 20px;}
blockquote:before{content: '\201C';position: absolute;font-size: 85px;top: 25px;left: -45px;color: #3498DB;}
blockquote:after{content: '\201D';position: absolute;font-size: 85px;bottom: -10px;right: 25px;color: #3498DB;}
blockquote p {display: inline;}

Keterangan diatas:
Jika anda ingin mengganti warna tanda quote cukup ubah kode color: #3498DB;. Jika anda kode warna apa yang cocok bisa anda coba generate color dihalaman flat ui color picker.
Diatas menggunakan kode blockquote p {display:inline} untuk menjaga agar markup HTML p dalam blockquote tampilannya tidak menurun.

Diatas adalah kode dasar CSS nya, jika anda ingin mengubahnya pada blogger anda, silahkan anda edit template dan anda cukup menghapus kode css blockquote{} ganti dengan kode CSS diatas.

Jika anda tidak tahu cara edit template Berikut adalah tutorialnya:
Cara edit template blogger atau blogspot.

Lalu bagaimana penggunaan blockquote di html? Anda cukup memasukkan markup HTML sebagai berikut:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>

Hasil dari kode diatas bisa anda lihat pada demo dibawah:

Demo blockquote

Mudah sekali bukan, semoga bermanfaat

Cara memasang widget recent post sederhana di blogger atau blogspot

Tutorial kali ini saya bahas cara memasang widget recent post sederhana di blogger atau blogspot. Tampilan simple dan sederhana karena cuma judul saja yang ditampilkan. Tanpa menurunkan performance blogger anda.

Langsung saja berikut adalah langkah langkah nya:
1. Silahkan anda backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Langkah selanjut adalah anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Setelah masuk ke halaman editor template anda, taruh kode javascript berikut sebelum kode </head>:

<b:if cond='data:blog.isMobile == "false"'>
 <script type='text/javascript'>
 //<![CDATA[
  function recentpostslist(json) {
   document.write('<ul>');
   for (var i = 0; i < json.feed.entry.length; i++) {
    if (i == json.feed.entry.length) break;
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
     if (json.feed.entry[i].link[j].rel == 'alternate') {
      entryUrl = json.feed.entry[i].link[j].href;
      break;
     }
    }
    var entryTitle = json.feed.entry[i].title.$t;
    var item = '<li>' + '<a href="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</a></li>';
    document.write(item);
   }
   document.write('</ul>');
  }
 //]]>
 </script>
</b:if> 

Keterangan: saya menggunakan kode <b:if cond='data:blog.isMobile == "false"'> jadi ketika anda menggunakan custom template mobile javascript diatas tidak akan ditampilkan tapi jika anda ingin tetap meload javascript tersebut di mobile mudah tinggal hapus kode <b:if cond='data:blog.isMobile == "false"'> dan </b:if>.

4. Langkah berikutnya anda cukup memasukkan di widget atau gadget HTML/Javacript nya saja kode berikut:

<script src='/feeds/posts/default?orderby=published&amp;max-results=7&amp;alt=json-in-script&amp;callback=recentpostslist'/>

Kode diatas adalah untuk menampilkan semua posting terbaru sebanyak 7 buah. Anda bisa mengubah kode: max-results=7 dengan angka 5 untuk menampilkan 5 postingan terbaru.
Jika anda ingin menampilkan posting terbaru untuk label tertentu anda bisa memasukkan kode berikut:

<script src='/feeds/posts/default/-/namalabelanda?max-results=7&amp;alt=json-in-script&amp;callback=recentpostslist'/>

Ubah kode namalabelanda dengan label yang ingin anda tampilkan. Jika anda tidak tahu cara memasukkan widget di blogger silahkan lihat tutorial:
Cara menambahkan atau memasang gadget atau widget di blogger atau blogspot.

Untuk demo anda bisa lihat di blog ini pada sidebar ada widget recent post.

Mudah sekali bukan. Semoga artikel tersebut bermanfaat buat anda.

Cara menambahkan atau memasang gadget di blogger atau blogspot

Gadget blogger adalah fitur dari flatform blogger yang berfungsi untuk mempermudah anda dalam pengaturan tampilan blog anda. Banyak sekali gadget blogger yang bisa anda tambahkan untuk memperindah dan mempercantik blog anda.

Gadget blogger terdiri dari bermacam macam widget, nah disini saya akan coba list beberapa widget yang tersedia di dashboard blogger anda:
1. Entri unggulan. Widget ini untuk menampilkan featured post atau posting unggulan untuk blog anda.

2. HTML/Javascript. Widget ini berfungsi untuk memasukkan fungsi HTML atau Javascript pada blog anda.

3. Profil. Menampilkan informasi tentang diri Anda kepada pengunjung.

4. Arsip Blog. Mempermudah pengunjung untuk menavigasi blog Anda dengan tautan ke pos lama.

5. Header Halaman. Tampilkan judul dan deksripsi blog Anda.

6. Gambar. Menambahkan gambar dari komputer Anda atau dari mana pun di web.

7. Dan masih banyak lagi, seperti label, laman, daftar link, text, entri popular, kotak penelusuran, dan masih banyak lagi.

Saya tidak akan bahas widget tersebut, yang akan saya bahas disini adalah bagaimana sih cara menambahkan atau memasang gadget di blogger atau blogspot.

Langsung saja berikut adalah langkah langkahnya:
1. Silahkan anda masuk ke dashboard blogger anda di blogger.com Setelah itu anda masuk ke halaman tata letak. Silahkan anda lihat gambar dibawah:

2.Setelah itu anda dibawa ke halaman tata letak. Di template yang saya buat sendiri kurang lebih tampilan sebagai berikut:

Keterangan gambar diatas tergantung dari template yang digunakan masing orang, tiap template beda beda dalam hal peletakan widget atau gadget nya.

3. Langkah berikutnya anda tinggal klik Tambahkan Gadget (lihat gambar diatas) maka akan  muncul popup pilihan gadget atau widget yang sudah tersedia, lalu anda klik tombol + untuk widget yang ingin anda tambahkan. Lihat gambar dibawah:

4. Selanjutnya anda akan dibawa ke pengaturan widget atau gadget, silahkan atur widget anda, jika sudah selesai dengan pengaturan widget anda yang perlu anda lakukan adalah klik tombol simpan untuk menyimpan widget, klik hapus untuk menghapus widget atau klik kembali untuk kembalik ke tampilan daftar gadget yang ingin anda tambahkan, berikut adalah contoh tombolnya:

Catatan tambahan:
- Jangan pernah menambahkan widget terlalu banyak karena itu akan menambah beban blog anda.
- Seperti kita ketahui judul gadget bawaan dari blogger tidak SEO friendly karena menggunakan tag h2. Tinggal ganti saja kode <h2><data:title/></h2> dengan kode <h3><data:title/></h3> kalau di theme yang saya buat silahkan ditambahkan kode <h3><span><data:title/></span></h3>. Atau bisa menambahkan kode tag h4. Untuk cara edit template bisa anda lihat tutorial:
Cara edit tempate di blogger atau blogspot
- Remove juga kode <b:include name='quickedit'/>

Mudah sekali bukan, semoga artikel diatas bermanfaat.

Cara membuat daftar isi atau sitemap di blogger atau blogspot

Daftar isi atau biasa disebut sitemap adalah navigasi yang dirancang untuk memudahkan pengunjung mengakses konten atau topik diperlukan oleh mereka. Selain itu daftar isi atau sitemap terdiri dari semua link posting dalam 1 tempat sehingga pengunjung lebih betah dan bounce rate pun akan semakin turun. Daftar isi atau sitemap juga dapat membantu bot search engine untuk memudahkan pengindexan situs anda.

Sudah tau apa itu sitemap dan fungsinya. Sayangnya blogger atau blogspot tidak menyediakan semacam widget tetapi kita dapat menambahkannya. Oke, kali ini saya akan coba membahas bagaimana cara menambahkan fitur sitemap atau daftar isi pada blogger atau blogspot anda.

Berikut adalah langkah langkah cara membuat daftar isi atau sitemap di blogger atau blogspot:
1. Sebelum lanjut ke edit template, silahkan anda backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Silahkan anda terlebih dahulu untuk memasukkan CSS table nya, untuk CSS table bisa dilihat di:
Cara membuat flat table responsive di blogger atau blogspot

4. Ok saya anggap anda sudah melakukan 3 langkah diatas, langkah selanjutnya adalah membuat page atau halaman lalu masuk ke HTML editor, bagi yang belum tahu cara membuat halaman bisa dilihat di tutorial berikut:
Cara menambahkan halaman di blogger atau blogspot anda

5. Setelah anda di HTML editor, masukkan kode berikut:

<div id="bp_toc">Loading TOC. Please wait....</div>

<script type='text/javascript'>
//<![CDATA[
   var postTitle = new Array();     // array of posttitles
   var postUrl = new Array();       // array of posturls
   var postDate = new Array();      // array of post publish dates
   var postSum = new Array();       // array of post summaries
   var postLabels = new Array();    // array of post labels

//global variables
   var sortBy = "datenewest";         // default value for sorting ToC
   var tocLoaded = false;           // true if feed is read and ToC can be displayed
   var numChars = 250;              // number of characters in post summary
   var postFilter = '';             // default filter value
   var tocdiv = document.getElementById("bp_toc"); //the toc container
   var totalEntires =0; //Entries grabbed till now
   var totalPosts =0; //Total number of posts in the blog.

//main callback function
function loadtoc(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="POST TITLE",a="Click to sort by title",l="DATE",r="Click to sort by date",i="LABELS",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Click to show all posts"),s+='<div class="table-responsive">',s+='<table class="table">',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",s+="</div>",e==postTitle.length)var c='<span class="toc-note">Displaying all '+postTitle.length+" posts<br/></span>";else{var c='<span class="toc-note">Displaying '+e+" posts labeled '";c+=postFilter+"' of "+postTitle.length+" posts total<br/></span>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait... TOC is loading")}function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Table of Contents</a> <span style="font-size:11px;color:red;">Terbaru!</span>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0;
//]]>
</script>
 
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

6. Tinggal anda klik publikasikan saja. Maka anda tinggal melihat hasilnya.
Kode diatas saya dapat dari blog bloggerplugin yang sudah saya modifikasi HTML sehingga cocok digunakan buat website responsive dan menggunakan css flat resposive table pada artikel yang sebelumnya sudah saya buat.

Ok selanjutnya adalah dimana sih saya bisa lihat demonya, silahkan anda klik tombol demo berikut:

Demo Sitemap

Ok sob, sekian tutorial dari saya semoga bermanfaat.

Cara menambahkan halaman di blogger atau blogspot anda

Seperti halnya CMS lain, blogger juga dilengkapi dengan fitur pages atau yang biasa kita sebut halaman atau halaman statis atau static pages. Fitur ini kadang sering kita diabaikan. Halaman atau page dan posting atau post sangat berbeda. Post biasanya kita buat dan kita jadikan konten artikel sedangkan halaman statis biasanya digunakan untuk konten yang tidak berhubungan dengan sebuah artikel. Halaman tidak akan muncul di home atau beranda anda seperti post.

Artikel kali ini saya akan menunjukkan kepada anda bagaimana cara untuk membuat atau menambahkan page atau halaman baru pada blogger anda.

Langsung saja, berikut adalah langkah langkah yang harus anda tempuh:
1. Silahkan anda masuk ke blogger anda di blogger.com
2. Lalu silahkan anda masuk ke menu laman. Lihat gambar dibawah:



3. Lalu silahkan anda klik menu laman baru di navigasi atas. Silahkan lihat gambar dibawah:


4. Setelah itu anda tinggal isi judul entri dan konten untuk halaman anda. Lihat penampakan setelah anda masuk ke menu laman baru:



Sedikit keterangan gambar diatas:
- Judul itu diisi dengan judul halaman anda.
- Text editor html atau visual disini maksudnya adalah tombol compose dan HTML, jika anda ingin memasukkan tulisan saja lebih baik anda masuk ke compose tapi jika anda ingin memasukan semacam kode kode HTML, css atau javascript maka anda diharuskan masuk ke HTML, karena nanti jika anda memasukkan nya di compose maka kode yang anda masukkan di compose akan berbentuk tulisan di konten anda. Fitur ini harus anda mengerti karena nanti ada beberapa tutorial yang mungkin akan membutuhkan fitur HTML, seperti membuat sitemap, halaman kontak dan lain sebagainya itu ditulis di HTML bukan di compose.
- Konten isikan konten anda disini.
- Tombol terdiri dari 4, yaitu publikasikan, simpan, pratinjau dan tutup, jika anda ingin mempublikasikan halaman anda maka tekan tombol publikasikan, jika ingin disimpan sebagai draft maka klik Simpan, jika halaman ingin dilihat dulu sebelum di publish tekan Pratinjau, jika ingin kembali ke menu halaman maka tekan tutup.

5. Langkah terakhir anda tinggal tekan tombol publikasikan. Maka halaman anda sudah jadi dan bisa dilihat di visitor, tinggal anda masukkan saja di menu navigasi anda, untuk setting navigasi nanti akan saya kasih tutorialnya.

Mudah bukan, silahkan anda berkreasi dengan halaman anda.

Cara membuat flat table responsive di blogger atau blogspot

Table sulit untuk dibuat responsive, tetapi bisa diakali dengan memanfaatkan query media dan overflow. Dengan memanfaatkan query media dan overflow saya akan mencoba menerangkan langkah demi langkah bagaimana cara membuat flat table responsive di blogger atau blogspot.

Seperti yang sudah kita tahu table bisa sangat luas. Sederet data row bisa bersama sama untuk masuk ke dalam sebuah table. Table dengan width 100%, bisa dikecilkan dan dibesarkan tetapi ketika layar di kecilkan row table akan terlihat sempit dan mungkin teks akan bertumpuk tumpuk. Inilah sebabnya kenapa table sulit dibuat responsive.

Desain responsif adalah tentang bagaimana kita menyesuaikan desain dengan layar yang memiliki ukuran berbeda. Jadi disini ketika website dibuka pada layar yang lebih sempit semisal ponsel makan table akan tetap terlihat lebih lebar dan kita bisa menggeser table ke arah samping. Sehingga layout design responsive tidak rusak dan kita bisa membaca table dengan lebih mudah.

Lalu apakah ini bisa diterapkan pada blogger? Bisa. Disini saya akan memandu anda dalam membuat table yang responsive dengan warna metro dan desain flat tanpa border.

Berikut adalah langkah langkah cara membuat flat table responsive di blogger atau blogspot:
1. Lagi lagi saya ingatkan untuk membackup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Silahkan anda masukkan responsive meta tag terlebih dahulu di blog anda. Taruh kode <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> setalah kode <head>.

4. Langkah selanjutnya adalah, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

Kode diatas adalah menggunakan media screen max-width: 767px. Maka ketika lebar maksimal layar 767px maka lebar table akan tetep dan akan ada scroll dibawah table.

5. Berikut adalah contoh penggunakan flat responsive table pada HTML atau postingan anda. Perlu diingat jika ingin dimasukkan pada template blogger maka gunakan single quote(') dan jika ingin dimasukkan pada postingan gunakan double quote("), berikut adalah kodenya:

<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>Nama Pertama</th> 
    <th>Nama Terakhir</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>Gian</td> 
    <td>MR</td>  
  </tr>
  <tr> 
    <td>Kaka</td> 
    <td>Slank</td> 
  </tr>
  <tr> 
    <td>John</td> 
    <td>Lennon</td> 
  </tr>
</tbody> 
</table>
</div>

Berikut adalah hasil kode diatas:

Nama Pertama	Nama Terakhir
Gian	MR
Kaka	Slank
John	Lennon

Tips: Untuk mengganti warna biru pada table diatas bisa ganti kode background-color:#3498DB;

Ok sob mudah bukan, selamat berkreasi...

Cara membuat blogger anda valid HTML5

Sebelum melangkah ke topik utama, mari kita bahas terlebih dahulu apa sih HTML5? HTML5 adalah bahasa markup yang digunakan untuk penataan dan konten di World Wide Web(WWW). Bahasa HTML versi ini diselesaikan, dan diterbitkan, pada 28 Oktober 2014 melalui World Wide Web Consortium (W3C). HTML5 adalah revisi kelima dari standar HTML sejak awal World Wide Web(WWW). Versi sebelumnya, HTML4 adalah standar pada tahun 1997. Jadi HTML5 adalah revisi kelima dari sejak dikeluarkannya HTML. Bahasa ini support untuk browser modern seperti IE8+, mozilla, chrome, dll. IE7 kebawah tidak support untuk HTML.

Apa sih keuntungan dari valid HTML5, banyak artikel yang saya baca banyak sekali keuntungan dari valid HTML5, saya sendiri tidak terlalu pusing mementingkan keuntungannya, hanya sekedar keren keranan saja. Buktinya website seperti, google, facebook bahkan tempat belajar CSS, HTML(www.w3schools.com) pun tidak valid HTML5. Tidak hanya itu, framework HTML seperti bootstrap, pure css, materializecss pun tidak valid. Nah loh..

Lantas kenapa banyak blog ingin berlomba lomba untuk memvalidkan blognya di w3c. Saya sendiri kurang tahu alasan mereka apa, tapi blog saya sendiri(http://gianmr.blogspot.co.id/) sengaja saya buat untuk valid di semua validator, tidak percaya silahkan cek saja di http://validator.w3.org/unicorn/ tidak hanya valid html5, tapi juga CSS3, international languange, dan feed. Tujuan sendiri hanya untuk membangun kepercayaan dari pengunjung, bahwa design yang bagus belum tentu tidak valid untuk html5 dan CSS3.

Lanjut ke pembahasan utama, bagaimana sih cara membuat blogger anda valid HTML, berikut adalah langkah langkah yang bisa anda terapkan di blog anda:
1. Seperti biasa saya ingatkan, sebelum anda mengedit blog anda, alangkah baiknya backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3.Setelah itu silahkan anda masuk ke editor template anda,

<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ganti dengan kode:

<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<meta charset='UTF-8'/> 

4. Langkah selanjutnya adalah cari kode:

<b:include data='blog' name='all-head-content'/>

Lalu ganti kode diatas dengan kode:

<meta content='blogger' name='generator'/>
<meta charset='UTF-8'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

5. Langkah berikutnya adalah kita remove default css dari blogger, cari kode:

<head>

Lalu ganti kode diatas dengan kode:

&lt;/head&gt;&lt;!--<head/>--&gt;

6. Hapus semua kode berikut:

<b:include name='quickedit'/>

7. Hapus juga semua kode berikut:

<a expr:name='data:post.id'/>

8. Lalu kita hapus juga semua kode berikut:

<b:include data='post' name='postQuickEdit'/>

9. Ganti semua kode & dengan &amp;
10. Selesai sudah...

Buat diperhatikan valid HTML5 tidak ada hubungannya dengan SEO.

Perlu diperhatikan:
- Jangan lupa tiap anda posting gambar selalu gunakan kode alt di img nya.
- Hindari penggunakan <center>
- Hilangkan kode border pada tag img

Anda bisa cek valid html di:
http://validator.w3.org/nu/

Untuk cek keseluruhan termasuk CSS3, international languange dan Feed bisa di cek di:
http://validator.w3.org/unicorn/

Ok cukup sekian, kalau bingung anda bisa berkomentar. Atau nanti saya akan coba share template valid buatan saya, stay tune.

Cara membuat flat button 3d cantik di blogger atau blogspot

Tutorial kali ini saya akan membahas bagaimana cara membuat flat button 3d cantik di blogger atau blogspot anda, seperti di blog ini. Untuk trik disini kita cukup memanfaatkan efek ketebalan box-shadow ketika button normal, di hover atau ketika button aktif. Logikanya ketika button normal box-shadow akan terlihat tebal, ketika pengunjung menghover button maka box-shadow di button akan terlihat lebih tipis dan ketika button aktif maka box-shadow akan hilang.

Dengan memanfaat warna metro dan tampilan yang flat button akan semakin cantik dan membuat blog kita akan terlihat sedikit cantik dan profesional.

Langsung berikut adalah langkah langkah nya:
1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Setelah masuk ke halaman editor template anda, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

/* CSS button */
.gmr-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
.gmr-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
.gmr-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
.gmr-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
.gmr-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
.gmr-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
.gmr-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
.gmr-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
.gmr-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
.gmr-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
.gmr-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
.gmr-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
.gmr-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
.gmr-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
.gmr-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
.gmr-btn-block{width:100%;position:relative;display:block;text-align:center;}
.gmr-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}

4. Cara penggunaannya anda cukup memasukkan kode class nya saja di button anda class='gmr-btn' pada template anda, atau kalau memasukkan di postingan anda bisa memasukkan kode class="gmr-btn". Untuk block button atau button dengan width 100% anda bisa memasukkannya class class="gmr-btn gmr-btn-block". Untuk memasukkan warna anda bisa cukup memasukkan class="gmr-btn gmr-btn-red gmr-btn-block" maka button anda berwarna merah dengan width 100%. Berikut adalah contoh html yang sudah saya buat.

<button class="gmr-btn">Button 1</button>
<button class="gmr-btn gmr-btn-red">Button 2</button><br />
<button class="gmr-btn gmr-btn-green">Button 3</button>
<button class="gmr-btn gmr-btn-yellow">Button 4</button><br />
<button class="gmr-btn gmr-btn-gray">Button 5</button>
<button class="gmr-btn gmr-btn-purple">Button 6</button><br />
<button class="gmr-btn gmr-btn-orange">Button 7</button>
<button class="gmr-btn gmr-btn-dark">Button 8</button><br />
<button class="gmr-btn gmr-btn-dark gmr-btn-block">Button 9</button>

Dibawah adalah hasil dari kode diatas:





Mudah bukan silahkan anda berkreasi sendiri dengan css anda.