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

DemoDownload

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....

Trik CSS Reset Stylesheet template Blogger

Untuk mengatasi error saat menerapkan trik validasi html5 sobat bisa mencoba dan menggunakan cara ini yaitu menyembunyikan CSS Reset Stylesheet, Kodenya seperti berikut:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' />

dan kode kedua

<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=2319533736235461549&zx=df9721d1-d17f-485e-96d4-e45eb5d6db36"/>

Tidak hanya itu saja dengan trik dan langkah menyembunyikan CSS Reset Stylesheet ini kita bisa menghilangkan error widget pada W3C dan mengurangi kode CSS pertama yang mengakibatkan loading blog lebih berat Dan untuk kode CSS kedua yang terkadang menmbulkan error pada penerapan validasi HTML5.

Langsung saja buka template blog sobat dan cari kode

<b:skin><![CDATA[

.........Kode CSS panjang.........

]]></b:skin>

Jika sudah ditemukan ganti kode tag <b:skin><![CDATA[ dengan kode berikut:

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

dan kode tag ]]></b:skin> dengan kode

</style>

Penting: biasanya langkah ini akan berefek pada widget default blogger sehingga perlu di atur ulang. lalu blog-pagger yang perlu di atur ulang karena bertumpuk di tengah cukup dengan mengganti cssnya dengan css di bawah ini

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}

Jika sobat masih menggunakan template yang memakai  variable seperti

/* Variable definitions

   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#000000">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#1E90FF">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#073763">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#000000">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#800000">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#000000">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#333333">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#1E90FF">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 24px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

silahkan hapus dan rubah semua nilai yang terdapat di dalam cssnya, karena akan muncul error ketika template disimpan. atau jika sobat tetap ingin memppertahankannya dengan trik yang sobat punya.

Demikian semoga berguna....

Membuat template blogger menjadi valid HTML5

Cara Membuat Template Blog Menjadi 100% Valid HTML5 - Setelah beberapa hari saya tidak update, kali ini saya akan memberikan review baru, review yang bisa Anda coba untuk mesin pencari agar lebih menyenangi blog Anda.

Jadi, jika blog Anda Valid HTML5 tentu saja sudah membuat blog Anda ramah di mesin pencari, jadi jika Anda tidak tahu blog Anda valid atau tidak dapat Anda lihat di validator.org.

Jika blog Anda masih banyak kesalahan, kali ini saya akan mencoba untuk membuat blog Anda Valid HTML5 yaitu dengan cara sebagai berikut:

1. Pertama-tama Anda hapus kode di bawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
<head> 

lalu ganti kode yang anda hapus di atas dengan kode berikut

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

2. hapus kode tag

</html> dan ganti dengan tag </HTML>

3. Perhatikan tips berikut ini

Hindari Tag <center> karena HTML5 tidak mendukung kode berikut sehingga sebaiknya diganti dengan kode lain seperti <p align="center">contoh teks</ p>
atau dengan

<div style="align:center;"></div>

4. Setelah itu, silahkan hapus kode html di bawah ini:

<div class='post-share-buttons goog-inline-block'>
--------- CODE --------------------
</div>

Kemudian hapus kode ini:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>

Juga kode berikut

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

5. Anda juga harus mempertimbangkan penggunaan atribut yang tepat:

• Penggunaan atribut harus ditambahkan ke image alt = "teks" title = "text anda"
• Hilangkan kode image anchor dalam tag img.
• Hapus border pada kode tag img.

6. Kurangi penggunaan widget yang tidak benar-benar diperlukan seperti

• Google+ Followers
• follower
• Share Button
• Statistic (counter number of visitors)

Demikian cara membuat template valid html5 dan semoga bermanfaat...

Styles template blog dengan CSS Reset

Mengatur ulang gaya template blogger Anda, sering disebut sebagai CSS Reset atau Reset CSS adalah proses ulang (atau lebih tepatnya - pengaturan) gaya dari semua elemen ke nilai dasar sehingga menghindari perbedaan lintas-browser karena built-in pengaturan gaya default. Dengan mengatur ulang style blog Anda, Anda menghindari default ke gaya built-in browser, yang berbeda dari browser ke browser.

CSS Reset avoids menghindari inkonsistensi peramban

Misalnya, Anda menggunakan tag anchor <a> dalam dokumen HTML Anda. Biasanya, browser seperti Internet Explorer dan Firefox akan membuat itu di beri style biru dan digarisbawahi.

Tapi lima tahun dari sekarang, seseorang memutuskan untuk merilis browser baru (sebut saja UltraBrowser) dan mereka memutuskan bahwa mereka tidak suka biru dan link digarisbawahi - jadi bukannya mereka mengatur gaya default tag <a> merah dan boldfaced. Jika Anda selalu menetapkan nilai dasar untuk elemen <a> Anda, maka dijamin bahwa itu akan selalu sama, terlepas dari apa UltraBrowser berpikir elemen <a> akan terlihat sama.

Reset ke tempat semuanya dimulai

Konsep CSS reset pertama kali kembali dibahas secara resmi ketika dinosaurus masih berkeliaran di internet (2004 tepatnya) oleh Andrew Krespanis. Dalam artikelnya, ia menyarankan menggunakan pemilih yang universal (*) pada awal file CSS Anda untuk memilih semua elemen dan memberi mereka nilai 0 untuk margin dan padding, seperti:

* {
  margin: 0;
  padding: 0;
}

Tindakan pemilih yang universal seperti pencarian wildcard, mirip dengan pencocokan ekspresi reguler dalam pemrograman. Karena dalam kasus ini, * ini tidak didahului oleh pemilih lain, semua elemen (dalam teori - beberapa browser tidak sepenuhnya mendukung itu) adalah pertandingan dan karena itu semua margin dan paddings dari semua elemen dihapus (sehingga kita menghindari jarak perbedaan yang ditunjukkan).

Menerapkan pemilih margin / padding reset universal untuk contoh kita sebelumnya, sekarang kita menghapus semua spasi konsisten antara semua browser (dengan kata lain, kita tidak membuat browser berpikir untuk kita, kita menunjukkan kepada mereka siapa yang jadi bos).

Contoh: Menerapkan pemilih margin / Padding reset yang universal

Anda dapat melakukannya dengan beberapa cara - Anda dapat menempatkan margin (atau padding) di awal atau di atas paragraf Anda, atau keduanya. Anda dapat menggunakan ems sebagai unit atau piksel atau persentase.

Yang penting adalah bahwa kita memilih cara browser akan memunculkan itu. Sebagai contoh kita, saya memilih untuk menambahkan margin (bukan padding) baik di atas paragraf dan di bagian bawah - tapi itu pilihan saya, Anda mungkin ingin melakukannya secara berbeda.

Inilah yang saya gunakan:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Mendeklarasikan aturan gaya setelah pemilih universal.

Note: Contoh yang saya gunakan untuk diskusi adalah contoh sederhana. Jika Anda hanya menggunakan paragraf untuk halaman web Anda dan tidak ada unsur-unsur lain, Anda tidak akan ingin me-reset margin Anda ke 0 menggunakan pemilih yang universal hanya untuk menyatakan aturan gaya yang tepat setelah untuk paragraf Anda. Kita akan membahas ini lebih lengkap bersama dengan praktik terbaik lainnya nanti di bawah halaman.

mari kita telusuri contoh. Saya menggunakan Eric Meyer CSS reset Reloaded verbatim dalam contoh setelah menyatakan aturan gaya untuk margin <p> saya.

Menghindari redundansi dengan Reset CSS dan deklarasi gaya berikutnya

Alasan lain saya tidak suka memiliki stylesheet terpisah untuk reset CSS saya adalah bahwa hal itu dapat menyebabkan redudansi dengan aturan style lain setelah itu. Ini praktek yang baik untuk tidak mengulangi gaya Anda, dan meskipun kadang-kadang tidak dapat dihindari (karena Anda malas seperti saya), Anda harus melakukan upaya untuk mencoba. Kembali ke Eric Meyer CSS reset Reloaded seperangkat aturan, ia memberikan nilai default untuk line-height, warna, dan latar belakang dari elemen body seperti:

body {
  line-height: 1;
  color: black;
  background: white;
  }

Jika Anda sudah tahu bahwa gaya atribut tubuh (misalnya):

     background-color: # cccccc
     color: # 996633
     dan Anda ingin ubin gambar latar belakang horizontal

tidak ada gunanya menyatakan CSS pemilih lain untuk elemen body nanti di dokumen - Anda harus mengganti bagian CSS reset sebagai berikut:

body {
  line-height: 1;
  color: #996633
  background:#ccc url(your-tiled-image.gif) repeat-x top left;
  }

Jangan takut untuk menggunakan penilaian Anda sendiri. Tweak, re-struktur, menghapus, dan menambahkan hal-hal seperti yang Anda lihat cocok dan karena berkaitan dengan gaya tertentu.

Eric Meyer menekankan hal ini dalam diskusi tentang CSS reset Reloaded dengan pernyataan:

[...] Itu jauh dari titik di sini: bahwa ini bukan kasus "setiap orang harus menggunakan gaya ini dalam cara tertentu tanpa perubahan".

Demikian semoga bermanfaat...

Copy area tertentu dengan css

Sebagian besar Blogger Asli menghadapi masalah plagiarisme. Umumnya para blogger baru tidak memahami nilai kualitas konten. Anda menghabiskan banyak waktu untuk menulis posting blog Anda tetapi pencuri konten berkunjung ke blog Anda dan menyalinan semua pekerjaan Anda. Beberapa kali para pencuri konten berhasil bisa menjadi yang pertama di Google Search dibanding Anda, Jadi cache kepala untuk Anda.

Anda dapat memasang skrip anti copas dalam blog anda tetapi jika Anda menawarkan beberapa kode tutorial atau teks yang akan disalin di blog Anda, Anda tidak bisa menggunakan script. jadi hari ini, saya akan berbagi trik untuk menonaktifkan copas kecuali Kode tertentu yang Anda bolehkan disalin menggunakan css.

Keuntungan dari CSS berikut:

     Tidak ada javascript, Jadi tidak mempengaruhi waktu load blog Anda.
     Ia bekerja di semua browser utama.
     Anda bisa menggunakan css ini di semua jenis blog niche.

Bagaimana menambahkan CSS ini ke blog Anda?

     Login ke Blogger> Dashboard
     Klik pada Drop Down Menu dan pilih Template
     Backup Template Anda sebelum membuat perubahan ke blog Anda
     Sekarang Klik Edit HTML

Tekan Ctrl + F dan cari kode di bawah ini.

]]></b:skin>

Paste kode berikut di atasnya.

.post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;} blockquote {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;} 

editing CSS

Ganti Blockquote dengan tag HTML Anda yang Anda gunakan untuk menampilkan kode. Contoh ini: Saya menggunakan tag blockquote untuk menyorot kode (yaitu)

<blockquote>

............kode disini..........

</ blockquote>

Jadi, di atas saya menggunakan tag blockquote css. jika Anda menggunakan seperti <code> teks Anda </code>, Anda perlu mengganti blockquote dengan code. Sekarang kode css Anda akan terlihat seperti,

.post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;} code {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}  

Silahkan simpan template anda

Semoga berguna dan bermanfaat...

Mempercepat loading blog dengan javascript

Salah satu cara untuk trik mempercepat load blog yang saya temui dengan memasang sedikit javascript pada html,  Cara dibawah ini sebenarnya hantya melakukan sebuah prinsip meminimalisasi loading gambar yang ada demgan resolusi atau ukuran yang terbilang besar. Untuk mengecek sobat bisa cek seberapa lama dan berat waktu muat blog menggunakan iwebtool yaitu website yang memang berguna untuk mencoba test speed sebuah website.

Selanjutnya, masuk ke akun Blogger Anda dan buka Editor Template lalu cari kode tag

</head>

Copy kode berikut ini tepat diatas kode  </head>

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5dtZbljMc5npXvtgMea9yAlwdUq0lR9h4lRZLcc7zdcV12ju4pqjdMHvdnUZ8YHLsT-ITPR18beZTfoPy1mXKycYRGYu7-PIQcIY1ATexSMiuj2kU5EPF7nxeZLPezAhh7Hrc6p0aMPE/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

Jangan lupa simpan template anda

Semua kode di atas saya dapat dari http://truebloggertricks.blogspot.com dan silahkan sobat pahami sendiri, berguna atau tidak menurut sobat bisa dirasakan sendiri dan jika merasa tidak berpengaruh silahkan dibuang saja.

semoga berguna dan bermanfaat...

Tombol scroll back to top auto hide

Penggunaan tombol ini sebenarnya untuk memudahkan ketika telah selesai menggulung ke bawah maka dengan menekan/klik tombol ini halaman akan otomatis tergulung keatas tampa pengunjung bersusah melakukan penggulungan keatas. kali ini saya akan berbagi untuk membuat tombol scroll back to top yang otomatis keluar ketika halaman di gulung saja, dan akan kembali disembunyikan ulang ketika halaman telah sepenuhnya kembali keatas/seperti semula ketika halaman tidak di gulung demo lihat di blog ini. trik ini berguna supaya pengunjung anda tidak melihat tombol yang selalu melayang dan terlihat aneh...

Langsung saja ikuti trik berikut ini, kita akan membuat batasan scrolltop seperti berikut:

$('#tombol-atas').click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
}); 

perhatikan: Saat tombol kembali-ke-atas diklik, animasikan nilai scrollTop menuju 0 dengan durasi selama 900ms

diatas ini merupakan kode dasar, yang sebenarnya sudah bisa digunakan namun tombol back to top belum di sembunyikan secara otomatis yang mungkin sedikit mengganggu karena terus melayang di bawah halaman.

Selanjutnya kita akan membuat script yang menjadikannya tombol back to top otomatis tersembunyi ketika halaman masih dalam posisi semula dan belum digulung,

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show();
    } else {
        $('#tombol-atas').hide();
    }
});

ini adalah jika scroll/gulungan belum dilakukan hingga pada batas yang telah ditentukan maka tombol back to top tidak akan dijalankan/disembunyikan. dan jika halaman telah mencapai batas ukuran lebih dari 300 maka tombol akan di munculkan/jalankan dan sebaliknya terus menerus. hasilnya dua kode diatas seperti berikut:

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show(); //lihat jika jarak diatas 300
    } else {
        $('#tombol-atas').hide(); //sembunyikan jika jarak di bawah 300
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900); //kecepatan scroll top 0 saat diklik durasi 900ms
    return false;
});

Untuk memambah efek agar telihat lebih bagus, Anda bisa menerapkan efek-efek umum JQuery seperti fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau Anda juga bisa menciptakan efek animasi sendiri. Di tombol back to top ini menggunakan efek .fadeIn() dan .fadeOut():

Sekarang menerapkannya ke template anda, copy kode dibawah ini:

<a href='#' id='tombol-atas' title='Menuju keatas'>
    <img src='url-gambar-tombol-anda'/>
</a>

Letakkan dalam element wrapper template anda/dibawah footer, jangan lupa untuk memberi gambar tombol anda. anda juga bisa membungkusnya dengan element id/class tertentu yang anda inginkan.

Lalu tambahkan css berikut:

#tombol-atas {
  position:fixed !important;
  position:absolute; 
  bottom:10px;
  right:10px;
  z-index:999;
} 

dan langkah terakhir, silahkan letakkan kode jQuery ini dibawah HTML nya

<script>
$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').fadeIn();
    } else {
        $('#tombol-atas').fadeOut();
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
});
</script>

Jangan lupa simpan perubahan, dan lihat hasil dari pekerjaan anda.

Semoga berguna...

Cara untuk membuat floating sidebar

Bagaimana mengubah sidebar Anda menjadi sebuah bar yang mengambang?. Tutorial ini menjelaskan, cara mengubah sidebar yang ada untuk floating bar. Teknik ini dapat diterapkan untuk widget tunggal, bukan seluruh sidebar, sehingga widget hanya melayang saat kalaman digulung le atas atau ke bawah.

Hal ini dapat dibuat dengan menambahkan kode Javascript ke blog Anda. Pertama, cek apakah Anda telah memasukkan jQuery pada template blog Anda. Hal ini dapat dilakukan dengan langkah buka Template Blog> Edit HTML. Kemudian cari kode ini

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

Jika ada, maka baik. Jika tidak tambahkan kode di atas tepat di bawah kode ]]></b:skin>, cari menggunakan Ctrl + F dan pencarian.

Kemudian cari salah satu kode di bawah ini. Dalam template default

<div class='sidebar_wrapper'>

Atau dalam sebagian besar template blogger kustom (Jika Anda tidak dapat menemukannya, aau id Anda berbeda)

<div id='sidebar-wrapper'>

Sekarang salin kode di bawah ini dan tempel di atas kode </body>.

<script type="text/javascript">
        $(function() {
            var offset = $(".sidebar_wrapper").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".sidebar_wrapper").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".sidebar_wrapper").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Ganti teks yang berwarna merah dengan nilai yang anda ingin (jika Anda menggunakan template lain). Untuk template kustom, nilai bisa apa saja seperti sidebar-wrapper, misalnya. Jika id = "melayang", ganti kode warna merah dengan #melayang dan jika class = 'melayang', lalu ganti dengan .melayang. anda bisa memberi jarak atas dengan mengganti

nilai$(".sidebar_wrapper").stop().animate({
                        marginTop: 0
                    });

Menjadi

$(".sidebar_wrapper").stop().animate({
                        marginTop: 20
                    });

Demikian saja, semoga berguna dan sukses.......

Membuat logo blog secara online

Berikut adalah daftar 10 situs bagus yang akan membantu Anda untuk membuat logo online gratis tanpa menggunakan perangkat lunak apapun. Logo adalah tanda yang membedakan dan memberikan lambang bagi blog atau website yang berbeda dari pesaing Anda. Hal ini penting untuk produk atau jasa yang akan dilihat dan logo membantu Anda mendapatkan itu. Tapi, tidak selalu mungkin untuk kita mengambil layanan profesional untuk membuat logo blog atau website Anda. Tetapi pada saat yang sama Anda dapat membuat logo Anda sendiri secara gratis dengan banyak pilihan yang tersedia secara online. Itulah yang akan saya bahas dalam artikel ini. Aku mengumpulkan sejumlah situs yang akan membantu Anda untuk membuat logo online gratis dan menyimpan banyak uang yang Anda miliki sebagai pengeluaran dalam layanan membuat logo mahal.

Berikut Daftar 10 situs untuk membuat logo secara online

1. Creatr – Web 2.0 Logo Generator

Ini adalah situs yang sangat mendasar di mana Anda dapat membuat logo secara gratis dan Anda dapat memilih dari beberapa template yang telah ditetapkan. Misi Anda hanya memasukkan teks, warna logo dan ukuran font dan logo akan dihasilkan. Beberapa efek juga tersedia seperti Anda dapat menempatkan logo terbalik.

2. CoolText – Logo and Graphics Generator

Seperti namanya, situs ini benar-benar keren untuk membuat logo online gratis tanpa software apapun. Anda bisa mendapatkan logo mengesankan tanpa banyak karya desain. Cukup memilih jenis gambar yang Anda inginkan, mengisi formulir dan Anda akan memiliki gambar kustom Anda sendiri dibuat dengan cepat. Anda juga dapat membuat tombol secara gratis di sini.

3. Simwebsol – Design and Create Free Logos

Jika Anda ingin lebih banyak fleksibilitas dalam gaya grafis logo Anda, Anda dapat menggunakan situs ini. Ini adalah generator logo sederhana dengan gaya dan pilihan yang free. Cukup memilih pengaturan yang Anda inginkan dan tekan OK untuk mendapatkan logo yang Anda inginkan.

4. Flamingtext – Logo Design and Image Tool

Apakah desain logo perangkat gratis di mana Anda dapat membuat logo Anda sendiri, tombol dan banyak lagi. Anda dapat menggunakan logo ini di situs web Anda di signature email Anda, atau di mana pun Anda inginkan. Anda memiliki pilihan besar gaya puluhan atau ratusan model. Dengan warna latar belakang yang berbeda, hanya ada imajinasi Anda.

5. Free-flash-generator

Ingin membuat teks brilian flash profil Anda atau blog? Generator ini akan membantu Anda dan membuat Anda layanan besar. Cukup memilih gaya, font, ukuran, dll dan menampilkan kode. Salin ke halaman Anda dan Anda sudah memiliki logo. Ada lebih dari 3 juta kemungkinan kombinasi gaya untuk logo.

6. Logoease – Free Logo Design

Situs ini memungkinkan Anda untuk dengan mudah membuat logo online gratis tanpa software apapun. Desain yang sederhana dan antarmuka yang intuitif memungkinkan Anda untuk membuat desain sendiri menghasilkan logo yang berkualitas dalam hitungan menit. Format file yang didukung adalah eps,.. Png,. Jpg. Anda dapat menyimpan dan men-download hingga 10 logo secara gratis kapan saja.

7. Banner Snack

Bagi penggemar animasi, situs ini memungkinkan Anda untuk membuat logo kilat. Membuat logo animasi gratis Anda sendiri untuk situs web. Ini juga mendukung membuat spanduk Flash. Anda dapat membuat logo dan slogan, teks huruf, warna dan banyak pilihan untuk memilih dari dan ukuran logo Anda sendiri dan lebih kemudian download kreasi Anda.

8. Onlinelogomaker – Free Logo Creator – Free Logo Maker

Situs ini mengatakan dibuat hanya untuk satu tujuan: untuk memberikan perangkat gratis untuk merancang logo profesional untuk semua orang dan juga berfokus pada kegunaan dan kualitas. Situs ini gratis sehingga Anda dapat mulai membuat merek Anda segera.

9. LogoSnap – FREE Logo Design, Business Card, Letterhead, Envelope Maker

Situs ini ditujukan bagi mereka yang mencari cara gratis untuk membuat logo dan mendesain kartu nama. Jika Anda membutuhkan solusi cepat untuk ini maka Anda berada di tempat yang tepat. Anda sekarang dapat membuat logo perusahaan dan bisnis kartu unik Anda sendiri dalam waktu yang sangat singkat dengan situs ini.

10. Logo Maker

Situs ini ditujukan untuk pengusaha, membantu mereka memulai usaha, mahasiswa dan organisasi lainnya. Situs ini sekarang diakuisisi oleh HP sehingga layanan sangat profesional. Ini memiliki berbagai pilihan gambar dan penampilan yang berbeda. Adalah penting bahwa Anda meluangkan waktu Anda dan menelusuri semua logo perusahaan Anda untuk menemukan satu yang paling sesuai dengan kebutuhan Anda.

Semoga dapat membantu anda dan bermanfaat...

Effect Blur pada Item CSS3 dan jQuery

Dalam tutorial ini saya ingin menunjukkan kepada Anda bagaimana untuk membuat efek blur sederhana untuk item berbasis teks. Idenya adalah untuk memiliki satu kotak teks yang akan berefek kabur saat Item dalam fokus cursor. Hal ini akan membuat semacam "fokus" efek yang menarik perhatian ke item saat yang lain kabur. Kita akan menggunakan CSS3 transisi dan beberapa jQuery untuk menerapkan efek tersebut. hasil terbaik dapat dilihat di Safari atau Chrome (di sini anda akan mendapatkan transisi halus).

Karena kita akan menggunakan transisi, efek ini hanya akan bekerja dengan baik di browser yang mendukung efek ini. Jadi mari kita mulai!

Kode Markup

Struktur ini akan menjadi bagian dengan beberapa artikel. Setiap item artikel akan memiliki header dan paragraf:

<section class="ib-container" id="ib-container">
    <article>
        <header>
                         <h3><a href="#">Judul Anda</a></h3>
             <span>Teks Lainnya</span>
        </header>
        <p>Cuplikan teks</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>

CSS

Wadah utama untuk lebar tetap dan berpusat :

.ib-container{
    position: relative;
    width: 800px;
    margin: 30px auto;
}

Mari kita float ( artikel keluar akan mengambang ) dengan bantuan dari :before dan :after pseudo elements:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Sekarang , mari kita beri gaya pada item artikel. kita akan membuat efek melayang dan menambahkan dua bayangan pada kotak.

.ib-container article{
    width: 140px;
    height: 220px;
    background: #fff;
    cursor: pointer;
    float: left;
    border: 10px solid #fff;
    text-align: left;
    text-transform: none;
    margin: 15px;
    z-index: 1;
    box-shadow:
        0px 0px 0px 10px rgba(255,255,255,1),
        1px 1px 3px 10px rgba(0,0,0,0.2);
    transition:
        opacity 0.4s linear,
        transform 0.4s ease-in-out,
        box-shadow 0.4s ease-in-out;
}

Untuk browser WebKit kita akan menambahkan

-webkit-backface-visibility: hidden

untuk menghindari flicker singkat.

Gaya elemen teks dan membuat beberapa tipografi yang bagus. Warna dan teks - bayangan setiap elemen:

.ib-container h3 a{
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    opacity: 0.8;
}
.ib-container article header span{
    font-size: 10px;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
    padding: 10px 0;
    display: block;
    color: rgba(255, 210, 82, 1);
    text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
    text-transform: uppercase;
    opacity: 0.8;
}
.ib-container article p{
    font-family: Verdana, sans-serif;
    font-size: 10px;
    line-height: 13px;
    color: rgba(51, 51, 51, 1);
    text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
    opacity: 0.8;
}

Dan sekarang kita akan menambahkan transisi ke ketiga. Sekali lagi, tiga sefek yaitu: opacity, text-shadow dan warna:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
    transition:
    opacity 0.2s linear,
    text-shadow 0.5s ease-in-out,
    color 0.5s ease-in-out;
}

Kelas blur akan diterapkan ke semua turunan dari item saat melayang, untuk membuat kotak terlihat kabur. kita juga akan menurunkan efek opacity sedikit:

.ib-container article.blur{
    box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
    transform: scale(0.9);
    opacity: 0.7;
}

Dalam rangka untuk membuat elemen teks terlihat buram, kita akan membuat warna transparan dengan menetapkan opacity dari nilai RGBA ke 0, dan kita akan memperbesar efek text-shadow jarak blur :

.ib-container article.blur h3 a{
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
    opacity: 0.5;
}
.ib-container article.blur header span{
    text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
    color: rgba(255, 210, 82, 0);
    opacity: 0.5;
}
.ib-container article.blur  p{
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    color: rgba(51, 51, 51, 0);
    opacity: 0.5;
}

Item saat melayang akan sedikit membesar dan menyesuaikan bayangan kotak. Kita juga akan menetapkan z.index tinggi untuk menjamin bahwa item akan selalu berada di atas yang lain:

.ib-container article.active{
    transform: scale(1.05);
    box-shadow:
        0px 0px 0px 10px rgba(255,255,255,1),
        1px 11px 15px 10px rgba(0,0,0,0.4);
    z-index: 100;   
    opacity: 1;
}

Terakhir, tapi bukan akahir, kita akan mengatur opacity elemen teks ke 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
    opacity; 1;
}

CSS dari semuanya telah selesai, Mari kita lihat JavaScriptnya.

JavaScript

Jadi, ketika kita memiliki lebih dari satu artikel, kita akan memberikan semua artikel lainnya efek kelas blur:

var $container = $('#ib-container'),
 $articles = $container.children('article'),
 timeout;

$articles.on( 'mouseenter', function( event ) {
  
 var $article = $(this);
 clearTimeout( timeout );
 timeout = setTimeout( function() {
  
  if( $article.hasClass('active') ) return false;
  
  $articles.not($article).removeClass('active').addClass('blur');
  
  $article.removeClass('blur').addClass('active');
  
 }, 75 );
 
});

$container.on( 'mouseleave', function( event ) {
 
 clearTimeout( timeout );
 $articles.removeClass('active blur');
 
});

Demikian langkah dari semuanya, Saya harap Anda menikmati tutorial kecil ini dan dapat berguna....

Sosial Subscribe Wordpress Untuk Blogger

Hari ini saya berbagi untuk Anda Widget Berlangganan Sosial Sederhana Gaya Wordpress Untuk Blogger. Saya yakin bahwa ini akan menggoda para pembaca Anda untuk melihat Anda di fb page atau twitter land mark. Ini merupakan Gaya Widget Berlangganan Sosial WordPress + Fan page. Widget ini juga akan menanamkan Google mark up penulis di blog Anda sehingga Google gambar profil akan ditampilkan di Google ketika orang mencari situs Anda. Ikuti langkah-langkah di bawah ini untuk menambahkan widget ini ke blog Anda.

Bagaimana menambahkan Widget Berlangganan Sosial
 
Langkah 1-Pergi ke Blogger Dashboard
Langkah 2-Tata Letak-> Tambah elemen-> Html / java Script.
Langkah 3-Paste kode di bawah ini ke bagian isi

<br />
<style type="text/css">.btnt-chronicl-social {  width: 320px;  margin: -10px;  } .btnt-chronicl-social ul {  margin: 0;  padding: 0;  } .btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; } .btnt-chronicl-social ul li a {   color: #fff;   display:block;  } .btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; } </style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/url feed anda">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://url twitter anda">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://url facebook anda">Find me on Facebook</a></li>
<li><a class="google" href="https://url google anda">Join me on Google+</a></li>
<li><a class="linkedin" href="http://url linkein anda">Connect with me on LinkedIn</a></li>
</ul>
</div>
<p>

Langkah 4-Save Html / java script.

Itu saja ... Pergi ke halaman blog Anda dan lihat apakah muncul atau tidak .... Jangan lupa untuk menggunakan kotak komentar untuk menyampaikan pikiran Anda yang berharga ...

Membuat gambar menjadi Responsif

Ethan Marcotte, orang yang menciptakan istilah Desain Web Responsif, dinyatakan dalam artikelnya bahwa Fluida Gambar adalah salah satu bahan Desain Web Responsif. Masalah dengan Gambar Fluid adalah bahwa meskipun gambar tampaknya menjadi responsif dan bisa cocok dengan baik dalam berbagai ukuran viewport, ukuran gambar yang di download oleh pengguna terlepas dari media gambar yang sedang dilihat sama.

Ini adalah salah satu masalah yang paling dibicarakan di kalangan pengembang web. Dan ada banyak untuk melakukan sebelum RWD bisa menjadi benar-end solusi untuk membangun sebuah website mobile yang dioptimalkan. Saat ini ada berbagai teknik dan alat-alat yang muncul yang mencoba untuk memecahkan masalah ini, Mari kita lihat.

1. Adaptive Gambar

Adaptive Image adalah sebuah script PHP kecil yang mendeteksi ukuran layar pengguna dan memberikan gambar yang tepat untuk ukuran layar. Ini tidak memerlukan perubahan markup <img> Anda saat ini, tetapi pelaksanaannya agak menakutkan bagi pengguna yang kurang tech-savvy.

2. Gambar responsif Menggunakan Cookies

Keith Clark memiliki pendekatannya sendiri untuk melayani gambar responsif dengan Cookie. Secara teknis mendeteksi screensize dengan menggunakan JavaScript dan ukuran ukuran gambar yang tepat dengan menggunakan PHP sebelum disajikan dan dimuat pada halaman.

Namun, teknik ini memiliki banyak masalah dan membutuhkan lebih banyak eksperimen sebelum dapat menjadi solusi praktis. Anda dapat membaca penjelasannya serta mendapatkan kode dari artikel di blog Clark, Gambar Responsif Menggunakan Cookies.

3. Sencha.io Src

Sencha adalah kerangka pengembangan mobile yang memungkinkan kita untuk membangun aplikasi asli yang tampak dengan HTML, CSS dan JavaScript. Jika Anda membangun aplikasi Anda dengan Sencha, Anda dapat memanfaatkan API, Sencha.io Src, untuk mengubah ukuran gambar Anda dengan cara yang cerdas, berdasarkan pengguna ukuran layar perangkat.

API memiliki satu set fungsi yang memungkinkan fleksibilitas atas output.

4. HTML5 Gambar Elemen

Hal ini tampaknya menjadi standar masa depan citra responsif. Sebuah elemen baru yang disebut <picture> diusulkan untuk memungkinkan kita untuk mengatur berbagai sumber gambar, dan juga untuk merujuk pada breakpoint yang sumber gambar harus disajikan, seperti:

<picture id="images">  
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">  
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">      
</picture> 

Elemen ini, bagaimanapun, masih dalam tahap Working Draft. Hal ini belum berlaku. Sampai saat itu Anda dapat menggunakan polyfill disebut Picture Fill.

Picture Fill

Picture Fill adalah JavaScript library kecil yang dikembangkan oleh Scott Jehl. Ini meniru bagaimana <picture> bekerja menggunakan elemen <span>.

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">  
        <span data-src="small.jpg"></span>  
        <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>  
</span>

Plugin

Jika Anda menggunakan WordPress sebagai platform penerbitan Anda, Anda beruntung, karena ada beberapa plugin yang melayani foto dalam cara yang mirip dengan unsur <picture>.

•     PB Responsive Image
•     WP Responsive Image
•     Simple Responsive Image
•     Picture Fill WP

Jika Anda menggunakan Drupal, ada sebuah proyek yang disebut Picture yang bekerja dengan cara yang sama.

5. Focal Point

Focal Point kerangka kerja yang memungkinkan pengembang untuk "memotong" gambar dan mengontrol fokus pada titik fokus untuk desain responsif. Teknik ini murni dilakukan dengan CSS, penulis hanya menambahkan kelas dalam elemen yang berisi gambar.

Perlu dicatat bahwa meskipun trik dalam teknik ini adalah dengan menggunakan overflow: hidden untuk menyembunyikan bagian dari gambar. Jadi gambar tidak (secara teknis) dipotong, yang berarti kita men-download ukuran gambar yang sama. Selain itu, hal ini juga mungkin tidak bekerja dalam kasus di mana gambar tidak dibungkus dengan elemen.

Demikian semoga berguna...

Meta Keyword Otomatis di Setiap Posting

Apakah anda sudah paham dan tahu Meta keyword, ini adalah yang biasa dipasang di deskripsi halaman utama blog, keyword sangat penting, tapi anda juga harus memasang di dalam setiap posting artikel blog anda agar lebih cepat terjaring oleh google, bisa anda gambarkan betapa lamanya, apalagi bagi anda yang sudah banyak memiliki artikel. untuk memasang trik ini, ikuti langkah berikut:

1. Login ke akun blogger.com anda
2. Pilih dan klik Templat Edit
3. Cari kede di bawah ini dengan tekan ctrl + f

<title><data:blog.pageTitle/></title>

 jika sudah di temukan, blok semua dan ganti dengan kode berikut:

<b:if cond='data:blog.url == &quot;http://alamat blog anda.blogspot.com/&quot;'> <title><data:blog.pageTitle/></title> <meta name='DESCRIPTION' content='isi deskripsi blog anda'/> <meta name='KEYWORDS' content='isi dengan keyword'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/> </b:if>

4. klik save template atau simpan perubahan.

Cara di atas adalah untuk sobat yang belum pernah atau pertama kali melakukan trik ini, sebelum sobat belum pernah memasang meta tag deskripsi. untuk yang sudah pernah ikuti cara berikut:

sama seperti langkah pertama, login ke akun blogger cari kode brikut atau yang pernah sobat pasang di bawah <b:include data='blog' name='all-head-content'/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if></b:if>

jika sudah ditemukan hapus semuanya dan ganti dengan kode d bawah ini

<b:if cond='data:blog.url == &quot;http://alamat blog anda.blogspot.com/&quot;'> <title><data:blog.pageTitle/></title> <meta name='DESCRIPTION' content='isi deskripsi anda'/> <meta name='KEYWORDS' content='isi dengan keyword'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/> </b:if>

lalu klik simpan atau save templat. semoga bermanfaat...