link komentar terbuka di tab baru threaded comment

Membuat Link Komentator Terbuka di Tab Baru

Kang Ismet

Komentar

Selasa, 25 September 2012

28 Komentar

Membuat Link Komentator Terbuka di Tab Baru. Beberapa bulan kebelakang Blogger telah menerapkan Threaded Comment (Komentar Bertingkat). Tentunya sobat sudah kenal dengan sistem komentar ini, yaitu komentar dengan fitur Reply/Balas.

Terlepas dari kekurangan dan kelebihannya dari segi SEO, sangat susah untuk menerapkan target="_blank" untuk membuka link komentator di tab baru dalam sistem komentar bertingkat ini (Threaded Comment). Dan banyak juga rekan-rekan blogger yang bertanya cara membuat link komentator pada sistem baru ini agar terbuka di tab baru.

Setelah mencari,berdiskusi, trial and error dengan rekankan  blogger, akhirnya saya mendapatkan kode dari Mas Sodiyc (admin : Blog Sodiyc & Acun) untuk membuka link komentator di tab baru ini.

Membuat Link Komentator Terbuka di Tab Baru Pada Threaded Comment

1. Login ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Simpan kode ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Lewati langkah di atas apabila template sobat sudah mempunyai kode jQuery

3. Simpan kode dibawah ini sebelum </body>

<script type='text/javascript'>
jQuery(document).ready(function($){ $(&#39;.comments .comments-content .user a&#39;).click(function(){ window.open(this.href); return false; }); });
</script>

5. Simpan

Apabila masih belum terbuka di tab baru, ada kemungkinan blog sobat masih menggunakan komentar lama. Untuk solisinya, silahkan upgrade dulu ke sistem komentar terbaru (threaded comment).

menambah lebar coment

Cara Menambah Lebar Form Komentar

Kang Ismet

Komentar

Minggu, 07 Juli 2013

82 Komentar

Menambah Lebar Form Komentar - Ada pertanyaan dari sahabat di Forum blog ini dan  Forum Diskusi , tentang bagaimana cara merubah ukuran form komentar. Walau pun pertanyaannya sudah terjawab, saya kira masih ada sahabat yang belum mengetahui cara melebarkan form komentar ini.

Banyak template yang saya lihat formnya yang tidak seimbang dan agak mengganggu keindahan blog, baik bagi pemilik atau pengunjung..

Banyak cara yang bisa dilakukan, kalau kata Bang Haji : Banyak jalan menuju Roma...  Setelah trial and error, saya menemukan cara yang paling mudah dan hasilnya presisi, tidak berat sebelah.

Untuk merubah ukuran /melebarkan kotak komentar, simpan kode ini di atas ]]></b:skin>

#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Sebelum penambahan kode CSS diatas, kurang lebih seperti ini

Setelah penambahan kode CSS, hasilnya seperti ini :

Semoga bermanfaat.

Filter Kata-kata Kotor dalam Komentar

Kang Ismet

Javascript, Komentar

Rabu, 29 Mei 2013

94 Komentar

Filter Kata-kata Kotor dalam Komentar - Siang tadi di blog saya yang lain, saya mendapatkan komentar dengan kata-kata yang jorok / kotor. Biasanya komentator dengan kata-kata kotor seperti itu merupakan komentator 'pengecut'. Kenapa saya katakan 'pengecut'? biasanya mereka tidak berani unjuk gigi dan hanya menggunakan Anonymous untuk berkomentar.

Saya berfikir bagai mana cara nya mengatasi kata-kata kasar / jorok / kotor pada komentar. Saya menemukan beberapa tutorial, namun ketika saya coba, pada recent comment tetep terlihat kata-kata aslinya.

Akhirnya saya mencoba utak-atik JavaScript dan berhasil untuk memfilter kata-kata yang jorok / kasar pada komentar, juga pada recent comment.

Bagi sahabat yang ingin memasangnya, simpan JavaScript ini di atas </body>

<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/badwords.js'></script>

Cara kerjanya yaitu menggantikan kata-kata yang kotor menjadi kata 'kereeen'. Untuk DEMO silahkan sobat klik DISINI dan silahkan berkomentar dengan kata-kata yang jorok/kotor. Apabila belum berubah, berarti kata-kata tersebut belum masuk database script dan akan saya tambahkan kemudian.

Apabila ingin mengubahnya, silahkan copy javaScriptnya dan upload ke Google Code / Google Drive.

Semoga bermanfaat..

TEMPLET SITUS IKLAN

Template Iklan Baris untuk Blogger / Blogspot V.3

Kang Ismet

Free template

Minggu, 05 Februari 2012

309 Komentar

Template Iklan Baris Gratis untuk Blogger / Blogspot V.3. Setelah beberapa lama tidak berbagi template, kali ini saya coba membuat  Template Iklan Baris Gratis untuk Blogger.

Bagi sobat yang sudah mempunyai web iklan blogger, gabung di jaringan Sebar Media
klik DISINI

Template ini dilengkapi dengan iklan gratis, iklan premium, iklan banner. Ada beberapa pengaturan manual, untuk membuat iklan premium atau iklan banner. Lumayan ribet, tapi mudah untuk difahami kok.

Kenapa menggunakan blogger? jelas rekan2 sudah tau jawabannnya.. gratis, unlimited bandwith, unlimited hosting, apa lagi ya.. silahkan tambahkan sendiri deh...

Kembali lagi ke template iklan baris versi blogger sob, tampilannya kaya gambar ini:

DEMO  |   DOWNLOAD

Selanjutnya simak baik-baik petunjuk penggunaannya.

About Us

1. Masuk ke Edit HTML
2. Centang Expand Template Widgets
3. Temukan dan edit kode

<div class='about'>
<h3>Pasang Iklan Baris Gratis Tanpa Daftar</h3>

<p>Iklan Baris Gratis ini disediakan untuk anda sebagai pemilik usaha, barang dan jasa serta berbagai peluang bisnis dan peluang usaha supaya anda bisa menunjukkan - mempromosikan produk jasa anda kepada seluruh dunia di internet. Promosi merupakan darah bagi kelancaran bisnis anda... untuk itu silahkan datang sesering mungkin untuk mempromosikan dan pasang &quot;Iklan Baris Gratis&quot; anda di website ini.</p>
<p>Pasang Iklan Baris Gratis disini bisa untuk jenis iklan apa saja, misalnya: iklan rumah, properti, jasa, domain hosting, laptop komputer, villa, kendaraan motor mobil, handphone hp bekas baru, bisnis mlm, segala jenis barang dan jasa.</p>
<p>Pasang iklan Anda, Gratis sepuas-puasnya di seluruh network Kami yg lain:</p>

<ul>
<li><a href='http://iklan-baris-gratis.com/' target='_blank'>Iklan-Baris-Gratis.com</a></li> 
<li><a href='http://iklanokepunya.co.cc/' target='_blank'>IklanBarisGratis.net.ms</a></li>
<li><a href='http://ads.kangismet.net/' target='_blank'>Ads.Kangismet.net</a></li>
</ul>
</div>

Main Banner 468x60 (di atas iklan premium)

1. Masuk ke Edit HTML
2. Centang Expand Template Widgets
3. Temukan dan edit kode

<div class='main_banner'>
<ul>
<li><a href='http://www.asiakita.com/?id=aysahis' rel='external nofollow' target='_blank'><img src='http://i928.photobucket.com/albums/ad122/feihung_design/asiakita.gif'/></a></li>
<li><a href='http://iklanbaris.kangismet.net/p/pasang-banner.html' title='pasangn banner'><img alt='pasang iklan' src='http://iklanokepunya.co.cc/images/bnrs/468x6061.gif'/></a></li>
</ul>
</div>

Iklan Premium

1. Buat Postingan Baru untuk Iklan Premium
2. Buat Widget HTML/JavaScript diatas postingan, untuk isi widget edit kode ini:

<div class="premium">
<h3>
<a href="URL Iklan Premium yang tadi dibuat">Judul Iklan</a></h3>
<img src="URL gambar, kalau mau pake gambar"  />Isi Potongan Iklan

<div class="kirimpremium">
Dikirim oleh : Nama Pengirim, Alamat, No Telp | <a href="URL Pengiklan" target="_blank">Kunjungi Website</a>
</div>
</div>

Supaya iklan premium tampil pada halaman utama saja, maka ikuti langkah ini :

1. Masuk ke Edit HTML
2. Centang Expand Template Widgets
3. Temukan <!-- Iklan Premium dan Postingan *** --> dibawahnya akan terlihat kode seperti ini:

<b:section class='main section' id='main' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

Tambahkan <b:if cond='data:blog.url == data:blog.homepageUrl'> sebelum <div class='widget-content'> dan </b:if> sesudah </div> maka hasilnya seperti ini:

<b:section class='main section' id='main' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div class='widget-content'>
    <data:content/>
  </div></b:if>

Banner 125x125 dan 160x600

Buat Widget HTML/JavaScript, contoh kode:

<center>
<a href='URL tujuan' title='judul'><img alt='' src='URL gambar'/></a>
</center>

Banner 300x250

1. Masuk ke Edit HTML
2. Centang Expand Template Widgets
3. Temukan dan edit kode

<div class='sidebar_banner'>
<ul>
<li><a href='http://webiklanbaris.kangismet.net'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORZ0t2Fahay5AZtckEeUpkfZ9LwEqi43ZLDN-YhggrkC36mbKvqRjIwBdjBqQdWASCQ76qheblvMryRkSH2vXH36SMzm9TojxVrqaHmX7QXAnWvOQZ4ktG-9L3kMJJb3-HkJDylT9o8U/s1600/ikbar22.jpg'/></a></li>
<li><a href='http://iklanbaris.kangismet.net/p/pasang-banner.html' title='pasangn banner'><img alt='pasang iklan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8tceESrHEn4NF02nh01DlrEkI9WxpxyLI9MJ-QQo9baMcXO9nFZVvZ-A7Y_ZCQqELlE-MO8tVkKzQiKX1glXuw40BTqPXi0J28liQ433RNhOwjiEghgmd4u5t2wqkmucu6nUGrHwgAg/s1600/300x250.jpg'/></a></li>
</ul>
</div>

Membuat Form Iklan

Banyak penyedia pembuatan form gratis diantaranya EmaiMeForm, JotForm dan lain-lain. Saya sendiri menggunakan JotForm. Untuk lebih detail lihat penjelasan di bawah, cara membuat Form Iklan Gratis, dan langsung tampil di blog.

Form Iklan Gratis

Seperti apa yang saya tungkapkan di atas, saya menjelaskan pembuatan form di Jotform, bagi yang menggunakan penyedia lain, silahkan cari referensinya.

1. Aktifkan pengeposan via email Dashboard > Setelan > Email & Seluler
    contoh: kangismet.secretWords@blogger.com, isi secret words nya.
2. Kunjungi dan lakukan registrasi di JotForm (form registrasi di kanan bawah)
3. Buat form iklan gratis, silahkan berkreasi
4. Hal yang perlu diperhatikan pada pembuatan form agar sesuai dengan template:

Pada tab Form style
    -  Background rubah menjadi #CEEEFE
    -  Width ganti 300

Pada tab Setup & Embed
    -  Email Alerts > Add New Email > Notification Email > Recipient E-Mail isi email pengeposan
       di Blogger
    -  Klik Switch to Text Mode (di kanan bawah) kemudian hapus semua kode
    -  Klik kolom Subject, klik Judul Iklan sebelah kanan

    -  Dibawahnya klik Gambar:Image, Isi Iklan, kemudian tulis Dikirim Oleh , klik lagi dibawahnya
       Nama, Kota, No Telp dan Website, klik Finish. Hasilnya kurang lebih seperti ini :

Template Iklan baris ini saya buat gratis, harap tidak menghilangkan atau mengedit footer link. Menghilangkan atau mengedit link merupakan pelanggaran hak cipta.

Semoga Template Iklan Baris Gratis untuk Blogger / Blogspot ini bermanfaat bagi anda.

Membuat Recent Posts dan Recent Comments di Blogspot

Membuat Recent Posts dan Recent Comments di Blogspot

Kang Ismet

Blogger Tutorial

Kamis, 15 April 2010

2 Komentar

Untuk menampilkan Recent Post dan Recent Comments, hanya memerlukan beberapa langkah mudah. Berikut lankah langkahnya :

1. Membuat Recent Post
Masuk ke Dasbor > Tata Letak > Elemen Halaman > Tambah Gadget > Feed

Kemudian isi dengan http://namablogkamu.blogspot.com/feeds/posts/default atau apabila sudah mempunya domain sendiri isi dengan http://www.namablogkamu.com/feeds/posts/default kemudian klik Lanjutkan > Simpan

2. Membuat Recent Comments
Kembali lagi masuk ke Dasbor > Tata Letak > Elemen Halaman > Tambah Gadget > Feed.
Kemudian isi dengan http://namablogkamu.blogspot.com/feeds/comments/default atau apabila sudah memiliki domain sendiri isi dengan http://www.namablogkamu.com/feeds/comments/default 
Contohnya lihat dibawah blog ini.
Sudah mencoba?

Free Download File Button PSD - Hay Sahabat Fiqri Apa Kabar ? Kali Ini Saya Akan Berikan File Button PSD Untuk Desain Widget, Post Kali Ini Baru Pertama Kali Ngepost Tentang File Sebelumnya Hanya Tutor Dan Template Saja. Ya Demi Para Agan-Agan Yang Ingin Mencari Lebih Jauh Lagi Tentang Desain, File Ini Digunakan Untuk Widget,Atau Tombol-Tombol Social Media Nah Didalam File Tersebut Juga Terdapat Button Untuk Social Media Tinggal Kita Yang Mengaturnya Sedemikian Mungkin Agar Terlihat Menarik, Oke Kembali Ke Topic Saat Ini Banyak Website-Website Yang Menyediakan File PSD Gratis Untuk Website Terbaru Karena Hal Itu Saya Tertarik Membuat Post Ini Tentunya Untuk Desain Blog Agar Lebih Bagus Nantinya Oke Setelah Saya Berikan Spesifikasi Dan Alasannya Saya Juga Akan Memberikan Screenshot Sebelum Saya Memberikan Link Download :
1. Flat-UI Button

2. Longshadow Button

3. Social Button Blog

Bagaimana? Tertarik ? Nah Seperti Itu Lah Macam File Button PSD Bagus Bukan ? Nah Selanjutnya Adalah Link Downloadnya Oke Berikut Adalah Link Download :

Download
Sekian Posting Saya Hari Ini, Semoga Bermanfaat..

Membuat Sticky Widget Sidebar di Blogspot/Blogger

Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.

Untuk melihat DEMO, silahkan scroll ke bawah dan lihat ke kanan. Sobat akan menemukan widget yang selalu mengikuti, itulah yang disebut 'Sticky Widget'

Pembaharuan 10 November 2013 : Mempersingkat kode sehingga lebih mudah untuk dipasang.

Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript

Menambah kode CSS

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

Tambahkan JavaScript

Simpan kode ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Ganti #HTML7 dengan ID widget yang akan dibuat sticky.

Selamat berkreasi dengan S