baca in

Tampilan Form Komentar baru milik blogger

Hari ini blogger melakukan update pada tampilan formulir kotak komentar, menilai dari tampilan formulir komentar blogger sebelumnnya tampulan sekarang ini terbilang lebih memiliki gaya. jika para blogger sebelumnya melakukan berbagai bentuk modifikasi agar form komentar di blog mereka terlihat apik, tampilan sekarang sudan terbilang baguslah dari sebelumnnya dengan perubahan subscrib by mail menjadi chexbox notifikasi komentar membuat kotak komentar blogger lebih baik.

untuk sobat mungkin butuh sedikit penyesuaian pada kotak komentar blogger yang baru ini, dengan sedikit merubah ukuran pada cssnya, karena kotak komentar terbaru blogger kini memiliki jarak dalam dan garis tepi yang akan terpotong jika melebihi lebar. untuk cssnya coba lihat kode berikut:

.comment-form {max-width: 100%;!important;}
#comment-editor {width:102.3%!important;margin-left:-8px;}

kode di atas untuk elemen posting yang memili lebar 630px, jika lebar elemen posting sobat lebih dari 630px silahkan gunakan css berikut:

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

untuk lebih pasnya sesuaikan saja dengan lebar elemen posting blog anda. letakkan kode css diatas sebelum kode tag ]]></b:skin> atau dalam tag <style>

catatan: margin-left:-8px; saya gunakan untuk menggeser kotak komentar agar tidak memiliki jarak sisi dalam atau padding, jika blog anda menggunakan padding atau jarak pada sisi dalam elemen untuk konten lebih baik margin-left:-8px; dihapus.

Kekurangan kotak komentar blogger terbaru

Jika blog sobat menggunakan atau blog berbahasa indonesia, maka pada tombol publikasi komentar sedikit terlihat kurang pas dan melebihi ukuran sehingga terlihat agak gimana gitu.

Demikian saja semoga tambah keren tampilan blog sobat semua...

Menghapus link judul posting dan halaman

Setiap postingan dan halaman berisi judul link yang menunju ke posting atau ke sebuah halaman yang sama yang tidak diperlukan. Baca tutorial ini untuk menghapus link dari judul postingan dan judul halaman.

Jika Anda menggunakan template Blogger yang telah disesuaikan, dalam template Anda memiliki link judul posting pada tiap posting atau halaman. Link ini benar-benar tidak penting karena link menunjuk ke halaman yang sama yang telah dikunjungi dan dibuka.

Bagaimana cara menghapunya, ikuti langkah berikut:

Masuk ke akun Blogger anda kemudian pilih Template> Edit HTML
Klik di dalam editor template dan tekan Ctrl + F, temukan kode tag dibawah ini kodenya seperti ini:

<b:if cond='data:post.url'>
<a expr:href='data:post.url' ><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

Ganti kode diatas dengan kode berikut:

<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

Pratinjau sebelum anda menentukan untuk menyimpan, jika sudah benar dan sesuai silahkan klik simpan template.

Semoga berguna dan bermanfaat...

Membuat tooltip sederhana menggunakan jQuery

Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog.

Untuk kali ini, saya akan berbagi membuat tooltip dengan jQuery walaupun ini sudah bukan bahasan baru tapi mungkin ada kawan blogger yang belum tahu dan untuk itu silahkan ikuti caranya dibawah ini:

Pertama silahkan login ke akun Blogger anda
Pilih Template lalu Edit HTML
Sekarang kita buat CSS terlebih dahulu untuk tampilan tooltipnya seperti berikut

/* tooltip */
.db-simple-tooltip {
display:none;
position:absolute;
border:1px solid #071585;
background-color: #1e90ff;
border-radius:3px;
padding:5px;
color:#fff;
font-size:14px !important;
box-shadow: 0 1px 2px black;
}

Silahkan anda ubah sesuai keinginan dan tempatkan di atas </b:skin>

Lalu buat jQuery untuk memproses perintah tooltipnya

<script type='text/javascript'>
//<![CDATA[  
$(document).ready(function() {
// Tooltip only Text
$('.db-tooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="db-simple-tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.db-simple-tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.db-simple-tooltip')
        .css({ top: mousey, left: mousex })
});
});
//]]>
</script>

Pastikan template sobat sudah tersimpan jQuery, Tambahkan sript diatas sebelum tag </body>
Simpan perubahan template anda.

Sedikit cara untuk penerapan pada template.

Untuk menerapkanya ke link posting seperti judul blog ini, silahkan cari kode

<a expr:href='data:post.link'><data:post.title/></a> atau <data:post.title/>

jika di dalam template sobat hanya berupa <data:post.title/> sebaiknya beri link seperti kode diatas dan tempatkan kode class='db-tooltip' dan expr:title='data:post.title' diantaranya seperti berikut:

<a class='db-tooltip' expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

ingat, kode <data:post.title/> ada dua, yaitu untuk judul posting dan judul halaman dibedakan dengan conditional cond='data:post.url' dan cond='data:post.link' anda bisa membuat pilihan, mana yang akan anda beri efek tooltip judul posting atau judul halaman bisa juga keduanya.

Cara penggunaan lainnya

<a class="db-tooltip" href="http://defandaky.blogspot.com" title="Tutorial">Dafiin Blog</a>
<p class="db-tooltip" title="Menyisipkan tooltip pada tag p">Menyisipkan tooltip pada tag p</p>
<img class="db-tooltip" title="Tooltip sederhana" src="gambar.png"/>

Demikian semoga berguna dan bermanfaat...

Situs gallery template download gratis

Buat sobat yang sedang bingun mencari tempat untuk menemukan template sesuai keinginan bisa berkunjung ke beberapa situs koleksi template berikut, dengan pertimbangan sisi kemudahan dalam mengedit template, kelengkapan metadata, dan pengelompokan ke masing-masing kategori. tidak hanya itu, template dalam koleksi semuanya merupakan template berkualitas. langsung saja kunjungi.

SORA TEMPLATE

Dari sisi koleksi tempalate, sora template lumayan banyak koleksinya. Namun blog in belum menerapkan pengkategorian masing-masing template. Tapi nggak usah khawatir, template yang disediakan rata-rata bagus.

http://www.soratemplates.com/

JOHNY TEMPLATE

Johny Template ini termasuk juga penyedia template yang bagus. Selain menyediakan template, dia juga menyediakan tutorial tapi khusus yang doyan bahasa inggris. Oya selain ada blogspot dan wordpress di sini juga ada joomla.

http://johnytemplate.blogspot.com/

DELUXE TEMPLATES

Deluxe template ini tergolong gudangnya template. Why? koleksinya sudah banyak banget, ada hampir 1600 an template (asline si pas saya posting baru nyampe 1568 heheh)asiknya lagi, tidak hanya khusus blogger, yang pakai wordpress juga welcome tinggal pilih. dan seperti biasa free.

http://www.deluxetemplates.net/

BOCIM TEMPLATE

Template ini enak dipakai. Pengelompokan favorit lebih ke arah by topic. Apakah animals. Business, Casino, entertaiment, dll. Rata-rata desainnya tidak rumit. Simpel bahkan. Ini yang bikin blog kamu jadi ringan loadingnya.

http://www.freetemplatesblogger.info/

BTEMPLATES

Template blog ini mudah, koleksinya banyak, mudah dipakainya juga. Yang jadi rujukan pertama di blog ini adalah pemilihan template dari sisi column. Apakah 1 column, 2 column, 3 column, 4 column.

http://btemplates.com/

TEMPLATEISME

Template blog gratis yang satu ini memang belum sangat banyak koleksinya, tetapi enak dipakai. Dari authornya, menyediakan petunjuk html code dibawah masing-masing postingan untuk membantu pengguna. Mereka juga mau diajak berkonsultasi kalau templatenya terdapat gangguan sehingga ada gangguan. Petunjuk html tambahan ini sudah dipisah-pisahkan dan ditunjukkan dimana tempat mengeditnya.

http://www.templateism.com/

MY BLOGGER THEMES

Template ini yang saya suka adalah adanya pengelompokan seperti ads ready untuk yang mau bikin blog banyak iklan, Bookmark ready untuk yang ingin lebih mudah blognya di bookmark, dropdown menu untuk yang suka pakai menu dropdown Tersedia juga footer column dan slideshow.

http://www.mybloggerthemes.com

Semoga berguna...

Borneo Books Template Gratis Satu Kolom

Demo Download

Borneo Books Template blogger dengan desain yang sederhana elegan 1 kolom dan memiliki ikon jaringan sosial untuk penunjuk posting Anda, majalah gaya untuk blog pribadi blogger ini desain template borneotemplates.com

Fitur borneo

Gaya desain Majalah
1 colums mainpage
3 kolom footerpage
menu yang elegan
Navigasi horizontal dropdown
Otomatis readmore
Jauhkan aspek rasio pasca thumbnail mengubah ukuran
Twitter berbagi di homepage
Facebook suka pada homege
Tombol Berbagi siap pada postpage
Warna hitam putih
Tata letak tampilan tunggal

Semoga berguna...

Seleksi otomatis tag blockquote dan pre

Jika blog anda adalah sebuah blog yang terkadang menyuguhkan kutipan/baris tag kode untuk tutorial blogger maka trik ini sangat berguna untuk diterapkan. selain mempermudah pengunjung untuk menyalin kode tag anda berikan trik ini juga mempercepat pengunjung anda menyalin kode tag yang terkadang cukup panjang tanpa harus memblock semua kode secara manual.

Trik ini menggunakan metode javascript dan jQuery yang tergolong mudah, contoh javascript lihat di bawah ini

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

kode di atas adalah kode javascript gambaran sebelum anda memasang ini, juga sedikit belajar untuk memahami.

Contoh Penggunaan

Parameter pre akan kita gunakan sebagai referensi menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang memiliki ID pre

Membuat Fitur Seleksi Otomatis pada Tag PRE dengan javascript

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

Membuat Fitur Seleksi Otomatis pada tag PRE dengan jQuery

$('pre').on("click", function() {
    autoSelect(this);
});

Sedangkan dalam eksekusi perintah bila menggunakan doble-click baru ke seleksi, javascriptnya seperti berikut

pre[i].ondblclick = function() {
    autoSelect(this);
};

atau

$('pre').on("dblclick", function() {
    autoSelect(this);
});

untuk blockquote silahkan lihat kode berikut ini

var blockq = document.getElementsByTagName('blockquote');
for (var i = 0, len = blockq.length; i < len; i++) {
    blockq[i].onclick = function() {
        autoSelect(this);
    };
}

atau

$(document).ready(function() {
  $('blockquote').on("click", function() {
    autoSelect(this);
  });
});

Ganti tag elemen PRE dengan blockquote jika anda ingin yang di proses adalah elemen blockquote, Semua contoh di atas hanya gambaran saja, sekarang kita akan menerapkan semua yang saya gambarkan di atas pada blogger.

1. Login ke akun Blogger anda
2. Cari kode tag penutup </body> di HTML template anda
3. Jika sudah ditemukan, pastekan kode di bawah ini diatasnya

<script type='text/javascript'>
var blok = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; blok.length; i++) {
  blok[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

4. Simpan perubahan template anda dan buka salah satu posting yang memiliki baris kode dan coba klik ganda.

Kode di atas mencakup elemen PRE jika anda ingin menerapkannya dalan elemen quote ganti saja yang saya beri warna dengan blockquote.

Semoga berguna.....

Background berganti otomatis dengan jQuery

Dekorasi website Anda dengan warna menarik selalu menjadi prioritas pertama dari seorang blogger. karena dengan tampilan yang enak di pandang dan rapi para pengunjung akan betah. Ini adalah alasan, mengapa orang selalu lebih memilih template dan tema Profesional untuk situs web mereka. tidak ada salahnya untuk menambahkan bebersapa modifikasi sebagai penambah manis. Sebelumnya saya pernah mendapati sebuah blog yang warna bacground berganti secara acak, hari ini di artikel ini, saya akan menunjukkan Cara untuk membuat pergantian warna background blog Anda secara acak dengan jQuery di Blogger.

Hal pertama yang perlu Anda lakukan adalah menambahkan file JavaScript ke template Anda.
Buka Blogger.com >> Blog Anda >> Template >> Edit HTML >>
Sekarang dalam template, cari kode tag berakhir </ head> .
Setelah menemukan akhir tag </ head> paste coding JavaScript berikut di atasnya dan Simpan Perubahan.

<script>
$(function() {
    function randomColor() {
        return 'rgb('+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+')'
    }
    $('body').each(function(i) {
       $(this).css('background', randomColor());
    });
});
</script>

Sekarang, setiap kali Anda atau orang lain akan menavigasi situs Anda pada setiap halaman maka akan telihat warna latar belakang yang berbeda. Warna akan terus berputar otomatis, sampai/kecuali Anda menghapus script dari template.

Semoga berguna....