Memasang Tab New Window Menggunakan JavaScript

Memasang tab new window pada umumnya menggunakan tag target='_blank' yang dipasang kedalam url yang difungsikan menggunakan tab new tersebut, namun bagaimana jika menggunakan javascript? Apakah bisa? Tentu bisa, malahan jika menggunakan JavaScript dalam memasang tab new window akan memiliki tampilan lebih bagus yang lengkap dengan tombol new window terpasang dan bisa berwarna juga loh tombolnya

Klik tombol berikut untuk melihat DEMO

Untuk memasang tombol tab new window di blog, silahkan salin kode berikut ini
<form>
<input type="button" value="New Window!" onClick="window.open('http://neuwindow.blogspot.com/2015/01/demo-script-tab-new-window.html','mywindow','width=400,height=200,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes')">
</FORM>

Jika ingin memberi warna pada tombol, masukkan kode berikut ini kedalam script style="background:#bad80a;color:#454545;font-weight:bold;padding:10px;"
Sehingga hasilnya seperti berikut
<form>
<input type="button" value="New Window!" style="background:#bad80a;color:#454545;font-weight:bold;padding:10px;" onClick="window.open('http://neuwindow.blogspot.com/2015/01/demo-script-tab-new-window.html','mywindow','width=400,height=200,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes')">
</FORM>

Keterangan: Ganti kode yang berwarna merah ya..

Silahkan jika tertarik untuk memasang tab new window ini di blog Anda. Meskipun menggunakan script, tidak mempengaruhi loading blog kok.. :)

Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014

Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014 - Pas tanggal 1 Desember 2014, 1 bulan lagi tahun 2015 akan datang.. Cepat sekali waktu ini berjalan... key.. selama 2014 ini saya mengamati beberapa blog dan ternyata dari sekian banya blog yang saya kunjungi rata-rata mereka menggunakan template-template berikut ini, dan tentunya template yang digunakan adalah template yang SEO Friendly dan responsive

Template Blogger Fastest Magz v3.5 Premium
Siapa yang tidak tahu dengan template blogger yang satu ini, satu-satunya template yang saya ketahui yang menjadi korban para Clonner yaitu penjiplak bentuk dan tampilan template blog. Ya, template buatan mas Sugeng ini sudah banyak di clonning bahkan mungkin template aslinya pun sudah dibagi-bagikan secara gratis. Pada bulan November kemarin, template seo friendly dan responsive ini telah di update lagi dengan penambahan fitur Perancang Template yang memungkinkan mengedit warna atau background template ini tanpa harus menyentuh kode-kode di dalam template. Untuk menggunakan template blogger ini, Anda harus membelinya seharga Rp 50.000,.

Template Blogger Kompi Males Gratis
Seandainya template Kompi Males ini dijual juga, mungkin nasibnya akan saya dengan templatenya mas Sugeng, namun mas Adhy Suryadi secara sukarela membagikan template SEO Friendly dan responsive ini secara cuma-cuma dan hasilnya, Template Kompi Males ini menjadi template mainstream bahkan terlalu mainstream karena hampir semua blogger menggunakan template ini

Template Blogger Droid Plus Gratis
Template hasil karya Kang Ismet ini memiliki banyak fitur yaitu Responsive, Valid HTML5 pada Homepage,Valid HT ML5 pada postingan, Valid CSS3, SEO skor 100% untuk template Droid Plus ini dan tentunya fast loading. Template ini dibagikan secara gratis, namun jika Anda ingin menggunakannya secara penuh seperti menghilangkan link credit, Anda bisa menebusnya seharga Rp.50.000,.

Template Blogger Sevida v1.7 Premium
Ada 10 item template blogger yang dijual di Themeforest dan Sevida merupakan template yang paling banyak pembelinya. Pemilik template yang dikenal dengan SatanMKR ini sungguh seorang designer template yang top banget karena mampu menjual templatenya di marketplace sebesar Themeforest karena untuk menjadi seller item disanan dibutuhkan perjuangan dan tidak semabrangan menjual item yang kita miliki. Namun, untuk beberapa templatenya seperti Sevida ini banyak juga ilegal dan ada yang mengaku hasil buatan blogger India. Jika Anda tertarik menggunakan template responsive dan SEO friendly ini, silahkan buy its on Themeforest, only $21 :)

Template Blogger Pertamag Responsive Magazine Gratis
Blogger dari Suarabaya yang dikenal dengan nama Uong Jowo ini tidak perlu diragukan lagu dalam mengolah design templatenya, banyak template yang telah dibuatnya dan hampir kesemua template yang dihasilkan memiliki aliran Magz yaitu tampilan template blog yang mengarah pada tampilan berita. Dan salah satunya adalah template Pertamag yang responsive dan SEO friendly ini. Jika Anda ingin memiliki template-template buatan mas Uong Jowo ini, Anda bisa membuak blognya dan memilih salah satu template yang Anda inginkan dan berkomentar di artikel template tersebut dengan komentar permintaan template yang disertai dengan email Anda karena template akan dikirim via email dan tidak ada link download untuknya :(

Template Blogger Maha SEO Responsive v1.1 Premium
Meruapakan Blogger dari Pandeglang yang dikenal sebagai Rama Banten dengan nama blog Abah Template yang menyediakan berbagai macam jenis template yang SEO Friendly dan responsive. Mungkin belum banyak yang mengenal salah satu designer template blogger ini, jika Anda ingin menggunakan template hasil karyanya silahkan datang ke blognya karena template yang saya suka dari buatan Rama Banten ini adalah penggunaan warna kombinasi yang sangat padu yang membuat tampilan templatenya enak dipadang, sangat indah untuk dilihat :)

Template dari Panduan Template Blog ini
Lama tidak membuat template, apakah saya sudah berhenti membuat template untuk Blogger? Memang saya lama sudah tidak membuat template namun tidak sepenuhnya saya berhenti membuat template blog, minggu kemarin saya sudah membuat template dengan tampilan seperti berikut ini

Template yang saya buat tersebut dalam kategori Portofolio dan Landpage yang saya gunakan untuk bisnis affiliate dan tidak akan saya sediakan untuk umum

Dari kelima template yang saya infokan diatas, sengaja memang saya tidak menyertakan link downloadnya atau blog pemiliknya. Jika Anda ingin memiliki salah satu template diatas, silahkan gunakan Katakunci + Pemilik template tersebut di search engine. Misalnya; template kompi males adhy suryadi kompi ajaib. Dengan begitu akan membantu menaikkan nilai search untuk template yang dicari

Itulah Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014 yang saya nilai sesuai dengan penilaian saya sendiri dengan mengacu pada banyaknya Blogger yang menggunakan, di cloning, di-ilegalkan dan pendatang baru dengan tampilan baru yang menarik. Semoga bermnafaat

Menghapus Variable Definitions Template Blog

Menghapus Variable Definitions Template Blog - Pada artikel sebelumnya saya sudah membuat artikel tentang mengganti warna blog di Variable Definitions dan pada artikel ini yang merupakan artikel lanjutan, saya akan membahas bagaimana menghapus variable definitions template blog yang rata-rata masih digunakan untuk template-template baru atau pun terdapat pada template lama

Baca juga Cara mengganti warna blog di Variable Definitions

Apa itu Variable Definitions?
Pada artikel sebelumnya saya sudah menjelaskannya secara singkat yaitu, Variable Definitions adalah suatu cara yang digunakan untuk mendefinisikan jenis warna, ukuran lebar blog, jarak, atau bentuk font sesuai dengan keingininan untuk mengubah variabel-variable tersebut secara langsung didalam Dashboard Blogger tanpa harus mengganti kode CSS atau HTML didalam template blog. Variable definitions berada didalam kode template blog dengan cara membuka menu Template >> Edit HTML dan Variable Definitions berada setelah atau sebelum kode <b:skin><![CDATA[

Bolehkah Menghapus Variable Definitios Template Blog?
Boleh-boleh saja dan tidak ada yang melarang meskipun template yang digunakan adalah template premium yang penting tidak menjual ulang atau membaginya secara gratis template yang telah dirubah atau diganti kodenya tersebut dan masih mencantumkan link kredit untuk sumber pembuat template tersebut. Untuk menghapus variable definitions yang ada didalam template blog harus mengetahui tentang kode CSS karena value untuk kode yang ada di CSS berada didalam kode yang diterapkan di Variable Definitions. Jika menghapus seluruh kode Variable definitions tanpa memperbaiki atau mengganti value yang ada di kode CSS maka tampilan blog akan berantakan karena didalam kode Variable definitions berbeda dengan kode yang ada di CSS karena value untuk kode CSS sudah terpasang atau sudah ditentukan didalam kode Variable definitions

Perhatikan contoh kode berikut ini
Pada kode dibawah ini merupakan kode value dari komposisi yang ada di kode body yang terdapat didalam Variable definitions yang meliputi Background, Jenis Font, Warna Font dan Jarak Letak pada layer atau Padding

<Group description="Backgrounds" selector=".body">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

Dan dibawah ini adalah penerapan pada kode CSS untuk komposisi value pada body dengan menggunakan definisi variabel untuk value yang telah ditetapkan seperti kode diatas
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Perhatikan pewarnaan pada masing-masing kode Variable dan Value warna yang telah saya tandai untuk Variable Definitions dan pada CSS diatas. Jika Variable definitions ingin di hapus maka harus mengganti variabel dari masing-masing value yang ada didalam CSS

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

menjadi

body {
font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #666666;
background: #ffffff;
padding: 0 0 0 0;

}

Untuk mengganti value pada CSS tidak harus menyesuaikan dengan value yang ada di Variable definitions tapi bisa diganti sesuai dengan keinginan Anda, namun tetap memperhatikan value pada layer (margin atau padding) yang diberikan pada masing-masing elemnent. Untuk mengganti value pada CSS agar tidak mengganti secara satu per satu, gunakan Notepad++ dan lakukan replace pada masing-masing kode value yang akan ditetapkan

Itulah cara menghapus variable definitions pada template blog, intinya hapus semua kode variable Definitions yang ada didalam template blog dan ganti masing-masing variable yang ada di CSS dengan kode value yang diinginkan. Terkahir sebagai catatan, jika Anda menghapus Variable definitions template blog kemungkinan besar code CSS template blog akan semakin bertambah. jadi pertimbangkan dahulu sebelum menghapus definisi variabel template blog ini

Memasang Facebook Open Graph META Tags

Memasang Facebook Open Graph META Tags - Untuk sebuah blog atau website memasang meta tag adalah suatu keharusan karena dengan adanya meta tag yaitu tag judul dan meta tag deskripsi dapat membantu meningkatkan peringkat blog di mesin pencari. Dan untuk memasang meta tag untuk blog saya yakin teman-teman blogger semua sudah pada tahu dan biasanya juga meta tag ini sudah terpasang didalam kode template blog dan sudah memiliki nilai SEO. Namun bagaimana jika ingin memasang Facebook open graph meta tags?

Untuk meta tag yang terdapat pada sebuah blog kita akan menemukan atau melihat beberapa tampilan di halaman pencarian sebuah blog yang secara lengkap menampilkan sebuah komponen yang terdapat pada satu artikel blog secara lengkap yang meliputi Judul artikel, Nama penulis, Keterangan terbit, Deskripsi artikel, Link artikel, Breadcrumbs, dan Gambar artikel atau Gambar penulis

Untuk GooglePlus sendiri juga sudah secara otomatis memberikan penjelasan yang lengkap pada suatu artikel yang telah terindeks oleh mesin pencari dengan tampilan seperti berikut ini

Bukankah hasil yang ditampilkan seperti contoh diatas merupakan Rich-Snippet dari sebuah artikel blog? Yups betul karena rich snippet terbentuk karena adanya pemasangan meta tag yang secara lengkpa sudah terdapat didalam sebuah kode template blog. Dan bagaimana dengan pemasangan facebook open graph meta tags?

Ketika Anda selesai melakukan update terhadap artikel blog dengan telah memperlakukan khusus pada blog Anda agar update artikel yang dilakukan secara otomatis langsung tayang di Media sosial seperti Facebook, maka hasilnya akan terlihat seperti yang terjadi pada salah satu contoh artikel blog saya berikut ini:

Tampilan pada gambar diatas tidak selalu terlihat seperti itu di halaman facebook. Facebook akan menampilkan jika didalam blog sudah terpasang Open Graph Meta Tags dan itu pun harus sesuai dengan CDN pada facebook. Apa itu CDN? Content delivery network dan bisa Anda baca di Wikipedia. Namun akan terlihat berbeda jika didalam blog belum terpasang Meta tag untuk facebook dan berbagi URL dari artikel blog atau blog Anda di Facebook, maka hasilnya akn terlihat seperti berikut ini:

Apa Pengaruhnya Memasang Facebook Open Graph Meta Tags Untuk Artikel Blog?
Perhatikan dua contoh tampilan gambar diatas, bagian atas memiliki Gambar, Judul serta Deskripsi dan pada bagian bawah hanya menampilkan Judul dan Deskripsi dari sebuah url artikel blog yang saya sebarkan di facebook. Padahal jika ada sesuatu yang unik yang disebarkan atau ditampilkan di sosial media seperti facebook akan menimbulkan respon yang sangat baik yang ingin diketahui oleh pengguna yang lain di facebook. Bagitu juga jika menyebarkan link url artikel blog di facebook dan memiliki tampilan yang lengkap dengan disertai gambar yang unik dan judul yang membuat pengguna penasaran untuk melakukan klik terhadap tautan yang kita bagi, bukan suatu kemustahilan Trafik melimpah akan datang dari facebook, bahkan akan mendorong para pengguna facebook untuk melakukan LIKE dan SHARE dengan url yang kita bagi

Baca juga Cara otomatis menampilkan artikel blog di Facebook

Demo: Facebook Open Graph META Tags
Untuk mengetahui fungsi secara langsung dari Meta tag pada artikel ini, silahkan Anda lakukan klik pada tombol SUKA atau BAGIKAN dibawah ini dan lihat hasilnya langsung di halaman facebook Anda (Semoga berhasil..)

<meta property="og:title" content="Memasang Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBroHIbBOpl1MU-oKpWBOAE7G_2X2QJhP_-lOtWDS3vHNRZDFDZPhC7Ns9z2fxP8Rzsm-2OdyBiinQi_eGx7k9gGO7ASMriMmmlpw93NCyF3LWcdGGP65CmpFwyOStnkfuMDbnGSTRC1g/s1600/facebook-meta-tag.png"/>
<meta property="og:site_name" content="Panduan Template Blog"/>
<meta property="og:description" content="Memasang Facebook Open Graph META Tags - Untuk sebuah blog atau website memasang meta tag adalah suatu keharusan karena dengan adanya meta tag yaitu tag judul dan meta tag deskripsi dapat membantu meningkatkan peringkat blog di mesin pencari. Dan untuk memasang meta tag untuk blog saya yakin teman-teman blogger semua sudah pada tahu dan biasanya juga meta tag ini sudah terpasang didalam kode template blog dan sudah memiliki nilai SEO"/>

Jadi dengan menggunakan tag META untuk facebook di blog bisa menjadi perbedaan dalam menarik beberapa pengunjung dari Facebook karena adanya keunikan yang membuat mereka untuk melakukan klik terhadap link tersebut

Baca juga Cara meningkatkan jumlah Visitor melalui Facebook

Lalu seperti apa dan bagaimana cara memasang Facebook open Graph META tags itu? Pada artikel ini memang saya tidak menjelaskan caranya, hanya sebatas memberikan penjelasan kalau memasang meta tag facebook di blog akan memberikan pengaruh besar terhadap trafik blog yang datang dari sosial media khususnya facebook. Untuk pemasangan serat kodenya akan saya jelaskan pada artikel berikutnya

Memasang Password Artikel & Widget

Untuk membaca artikel Memasang Password Artikel & Widget ini

Klik Disini

Key : panduantemplateblog

Validasi Kode HTML5 & CSS Blog

Validasi Kode HTML5 & CSS Blog - Pada saat blogwalking kemarin ada sebuah artikel dari teman saya yang mengingatkan saya akan validasi kode HTML atau CSS blog. Didalam artikel teman saya tersebut dijelaskan bagaimana agar kode HTML yang tidak valid menjadi valid. Setelah membaca artikel yang ada di blognya teman tersebut, saya pun mencoba untuk mengecek kode html blog ini, apakah masih valid atau tidak. Dan ternyata hasilnya sebagai berikut

atau bisa di cek langsung di http://validator.w3.org/check?uri=http%3A%2F%2Fwww.panduantemplateblog.com%2F

Saya cek validasi kode HTML5 & CSS blog ini karena hanya ingin melihat apakah ada kode error yang sama yang seperti dijelaskan oleh +yanto cungkup didalam artikelnya hapus kode dir ltr dan ternyata setelah saya cek hasilnya; tidak ada kode HTML yang error alias kode HTML5 blog ini masih valid atau seperti yang terlihat pada gambar diatas

Baca juga Penggunaan Template Valid Pada Blog

Kenapa saat melakukan validasi kode HTML5 pada blog ini masih memiliki kode html yang valid? Padahal kalau dilihat dari sumber kode blog ini di view-source:http://www.panduantemplateblog.com, Anda semua pasti akan kaget kalau kode template blog ini (html, javascript, dan css) jumlah sangat banyak sekali. Mungkin saking banyaknya, saya beranggapan kalau tidak ada blog yang memiliki kode-kode template sebanyak blog saya ini. Belum lagi kode CSS dan javascript yang tersimpan dalam Google Drive

Baca juga Cara Edit Kode CSS di Google Drive

Jika pada kode HTML5 blog ini valid, namun pada kode CSSnya khususnya CSS3 sungguh lebih sangat mengejutkan. Dengan banyaknya kode CSS yang ada didalam template blog ini, sudah bisa ditebak kalau untuk kode CSS blog tidak valid. Bahkan sangat tidak valid seperti pada tampilan gambar berikut ini

Ternyata banyak error yang terjadi pada kode CSS template blog ini. Apakah itu membuat saya pusing dan harus memikirkannya agar valid CSS3? Tidak, saya tidak mau memikirkan mengenai validasi kode HTML & CSS blog ini karena menurut saya hal ini akan sangat tidak perlu. Valid atau tidak valid kode template blog tidak berpengaruh pada nilai SEO blog. Yang sekarang adalah lebih baik teman-teman meninggalkan komentar untuk artikel blog ini karena itu lebih penting dari segalanya :)