Menambahkan kode JavaScript di Blogger

Saat menambahkan kode javascripts dalam template editor Blogger, kita sering menghadapi beberapa Kesalahan XML aneh seperti Kesalahan parsing XML, baris 768, Kolom 20: Isi elemen harus terdiri dari data karakter well-formed atau markup. Ini merupakan kesalahan yang terjadi ketika kode JavaScript tidak terbungkus dengan baik, atau kode tersebut tidak ditulis dengan benar. Tutorial ini akan menjadi berguna bagi mereka yang baru mulai belajar tentang template Blogger dan pengembangan plugin. Pada artikel ini, saya akan menunjukkan Bagaimana cara yang benar menambahkan kode JavaScript di dalam Blogger

Contoh kesalahan:

Sebelum memasang kode baru dalam template anda harus memastikan bahwa tag script atau kode ditutup dengan benar. Sebagian besar kesalahan pemula adalah untuk menutup tag script, dan pada akhirnya hal tersebutlah yang menyebabkan terjadinya pesan kesalahan. Bagi para pemula, mereka menggunakan kode seperti ini:

jQuery(document).ready(function($) {
... bla bla bla dst ...
});

lalu menempatkannya dalam template dan menyimpannya.

Dari kode diatas, jelas dapat dilihat bahwa tag <script> tidak digunakan untuk membungkus yang di akhiri tag </script> dan ini adalah tindakan yang salah. Teknik yang benar adalah dengan membungkus dan menutup dengan kode tag yang benar, seperti yang kita lakukan dalam HTML sederhana. Mari kita pelajari cara yang tepat untuk caranya.

Cara yang Benar Menambahkan kode JavaScript di Blogger

Menambahkan Script di Blogger sangat mudah, Yang perlu Anda lakukan adalah:

Masuk ke Blogger.com > blog Anda > Template > Edit HTML.

Sekarang tergantung pada Anda di mana Anda ingin menyisipkan coding JavaScript Anda. Namun, saya lebih suka menambahkannya di atas tag </head> atau </body> karena ini adalah tempat di mana semua hal-hal teknis yang diproses. Berikut adalah cara untuk menempatkan kode javascript:

<script type='text/javascript'>
//<![CDATA[

... kode javascript anda ...

//]]>
</script>

dan akan terlihat seperti ini:

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
... bla bla bla dst ...
});
//]]>
</script>

Setelah script yang benar ditambahkan dalam template Anda silahkan tekan tombol tombol "Simpan Template", dengan cara ini Anda tidak akan menghadapi kesalahan. Yang berarti bahwa JavaScript secara benar ditambahkan dalam template blogger Anda.

Saya harap tutorial ini telah membantu Anda untuk belajar bagaimana menambahkan kode javascript di blogger. Semoga bermanfaat...

Memahami CSS Unit: Pixels, EM, dan Persentase

Satuan berperan penting untuk mengukur dan membangun hal-hal seperti rumah, jembatan atau menara, dan membangun sebuah website pun tidak terkecuali. Ada beberapa metode pengukuran yang digunakan di Web, khususnya dalam CSS, yaitu Pixel, EM dan Persentase.

Dalam posting ini, kita akan mempelajari melalui unit-unit ini untuk mendapatkan wawasan lebih lanjut ke dalam unit pengukuran.

PX

Pixel adalah unit pengukuran tetap dan unit terkecil pengukuran layar tapi jangan bingung ini tidak terkait dengan Pixel yang mendefinisikan resolusi layar. Pixel dalam CSS tidak ada hubungannya dengan resolusi layar. Ketika kita mencoba melihat halaman web tetap pada lebar 1024px mengatakan pada tablet dengan 1024px oleh resolusi layar 480px, halaman web tidak muat di layar.

Saya sudah mengalami masalah ini dan menemukan bahwa Pixel di CSS sebenarnya bukan unit linear - itu sebenarnya pengukuran radial. Pada dasarnya, Pixel di CSS mengukur panjang area tampilan bukannya resolusi layar, sehingga resolusi layar 1024px tidak berarti bahwa layar juga 1024px dari panjang.

EM

EM adalah pengukuran relatif. Dalam CSS, EM mengacu pada perkalian dari ukuran font default dari perangkat atau dokumen itu sendiri, itulah sebabnya saya secara pribadi sebagai kata EM menekankan, tapi tentu saja jangan mengambil kata saya untuk itu.

Berikut adalah contoh; katakanlah dalam dokumen, ukuran font diberi ukuran 16px. 1em sama dengan 16px, 2em sama dengan 32px dan seterusnya. Meskipun EM secara tradisional digunakan untuk huruf ukuran dan sebenarnya itu adalah unit standar yang digunakan dalam gaya peramban untuk mengukur ukuran font, kita juga bisa menggunakan EM untuk menentukan panjang sebuah elemen.

Satu-satunya kendala ketika bekerja dengan EM unit itu tidak cukup intuitif, tetapi ada dua cara praktis yang dapat kita pakai untuk menangani hal ini. Pertama, kita dapat menggunakan kalkulator ini, PX untuk EM, melainkan kalkulator berguna yang sering saya gunakan.

Persentase

Hal ini lebih mudah dengan persentase, yang mengukur relatif dengan panjang induk. Ketika lebar induk 800px maka 50% akan menjadi 400px. Dalam beberapa tahun terakhir, sebagai Desain Responsif mulai menjadi standar desain web, satuan persentase disesuaikan untuk digumakan.

Baiklah, mari kita lihat contoh berikut; kode di bawah ini mendefinisikan kontainer dan pemilih kelas utama dengan 60% untuk lebar, tapi kelas ini mengacu pada parrent yang berbeda sehingga mereka menghasilkan panjang yang berbeda. Kontainer akan mengambil 60% dari browser lebar viewport, sementara Yang utama akan mengambil Lebar kontainer sebagai direct parrent.

    .container {  
        width: 60%;  
        margin: 100px auto;  
        background-color: #eaeaea;  
        padding: 1%;  
        height: 250px;  
        font-family: Arial;  
        text-align: center;  
    }  
    .main, .aside {  
        line-height: 253px;  
    }  
    .main {  
        width: 60%;  
        height: 100%;  
        float: left;  
        background-color: #ccc;  
    }  
    .aside {  
        width: 40%;  
        height: 100%;  
        background-color: #aaa;  
        float: left;  
    }  

Dengan demikian, akan memberi kita hasil seperti berikut:

Sebagai persentase juga merupakan unit relatif, sehingga memiliki kendala yang sama seperti unit EM juga. Hal ini tidak jelas berapa banyak 15px persentase dari 500px? Hal ini biasanya terjadi ketika kita menerjemahkan satuan px dari tahap desain untuk dokumen web dalam banyak kasus. Ada dua cara yang bisa kita ambil untuk hal ini, baik kita melakukannya secara tradisional dengan kalkulator atau jika Anda merasa nyaman dengan menggunakan CSS Pre-prosesor, Anda dapat memanfaatkan persentase () fungsi dari Sass.

Semoga berguna dan bermanfaat...

Membuat efek gelembung dengan pure CSS

Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada.

Efek ini dapat tampil dengan baik pada mesin browser Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Peningkatan progresif dengan pseudo-elemen

Dengan HTML sederhana seperti <div>Konten</ div> atau <p>Konten</p> Anda dapat menghasilkan efek gelembung seperti berikut ini:

Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah...

Dengan menerapkan CSS3 properti seperti border-radius dan sejenisnya Anda dapat menghasilkan bentuk yang lebih kompleks dan orientasi. berikut ini adalah css contoh dasar:

.efek-gelembung {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* efek gelembung */
.efek-gelembung:after {
   content:"";
   display:block; /* mempaiki tampilan pada FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

untuk menggunakan css diatas pada html, silahkan gunakan kode dibawah ini:

<div class="efek-gelembung">

/..........  Tulisan anda disini   ............./

</div>

Demikian saja, semoga berguna untuk anda yang membutuhkan...

Cara Membuat Efek Peel Away dengan jQuery

Pertama, peel away adalah sebuah efek seperti robekan sampul. Sama seperti widget lainnya Peel ini juga akan muncul di sudut kanan atas website/blog Anda. Setiap kali pengunjung mengarahkan mouse mereka di sudut kanan atas situs web/blog Anda, maka iklan tersembunyi dengan jQuery efek peel away akan muncul. lihat screenshot berikut untuk mempelajari cara kerjanya.

Cara Membuat Efek Peel Away pada Blogger:

Perhatikan petunjuk berikut dan terapkan dengan benar, Ingat: cara yang sama juga akan bekerja pada WordPress atau platform lain.

Buka Blogger.com >> Template >> Edit HTML.
Sekarang Dalam pencarian Template cari kode tag ]]></b:skin> dan di atasnya paste StyleSheet CSS coding berikut. Tidak perlu untuk melakukan kustomisasi di StyleSheet tersebut. Namun, jika diperlu silahkan untuk menyesuaikan.

.admin-bar #PagePeel{top:27px;}
/*Extra 20px height and width to allow for shadow and movement*/
#PagePeel{
    height:120px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    width:120px;
    z-index:9999;
}
#PagePeel svg{
    overflow: hidden;
    position: absolute !important;
    right: 0;
    top: 0;
}
#PagePeel .pointCursor:hover{cursor:pointer;}
#mycontent { position:relative; margin-left:30px; }

Sekarang setelah menambahkan CSS cari tag </head> dan tepat di bawahnya Paste kode JavaScript berikut. Namun, anda juga bisa memasangnya di Html/JavaScript sesuai dengan kebutuhan.

<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc'></script>
<div id="mycontent">Peel Away Effect By <a href="http://defandaky.blogspot.com">defandaky.blogspot.com</a></div>
<script type='text/javascript'>
/* <![CDATA[ */
var PagePeelProParams = {"smallImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkINec5zRITJbnSoIt5MlMD-o74mZnq7mXFBwxdbkEjvotMEnQCm-sPmrIlfeYAg-bCGFO0FEVfeIbJZ36bvglncG_fJCw9e3dYfRSxrbqOPZYVubJ_mzIdSdqEJTiK2-00QJHEPzX_X0/s1600/DottedAdvertSmall.png","largeImageUrl":"Gambar anda disini","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://url anda.com","pagePeelActivateEvent":"hover"};
/* ]]> */
</script>

kustomisasi:

Ganti Gambar anda disini dengan link gambar anda dan http://url anda.com dengan link yang ingin dituju.

Setelah memodifikasi widget sesuai dengan kebutuhan dan keinginan Anda, silahkan untuk menyimpan template dengan menekan "Simpan Template". Itu saja dan situs Anda telah memiliki efek peel. Semoga bermanfaat...

URL pendek posting di Blogger dengan Bit.ly

Apa itu Bitly - bitly adalah layanan online yang menyediakan URL pendek untuk posting Anda sehingga Anda dapat lebih mudah untuk berbagi dengan teman, keluarga, dan di web/blog. Layanan ini cukup populer di situs microblogging twitter karena merupakan layanan default pemendek url sejak Mei 2009. Link yang diperpendek dengan layanan ini adalah permanen dan akan terlihat seperti http://bit.ly/6wgJO ini. ini bukan hal baru, tapi mungkin ada salah satu sobat yang membutuhkan.

Cara Menghasilkan Auto URL Pendek untuk Tulisan Anda di Blogger dengan Bit.ly

Hal pertama login ke Dashboard Blogger Anda. Sekarang Setelah log in, pergi ke blog Anda >> Template >> Edit HTML >> dan cari kode tag ]]></b:skin>. Setelah Anda menemukannya, tepat di atasnya paste kode CSS berikut.

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

Sekarang setelah menyisipkan kode css ke template Anda, Sekali lagi masih dalam editor template, cari kode <div class='post-footer'> dan paste coding JavaScript berikut di atasnya yang akan menghasilkan URL mempersingkat dan menampilkan mereka di akhir posting Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shoternUrl'>
<form id='shorturl'/>
<!-- short url widget script start -->
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result[&#39;longUrl&#39;] = r;
break;
}
document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script></div>
</b:if>

Setelah semuanya selesai, jangan lupa tekan tombol "Save" dan otomatis skrip memperpendek URL siap di blog Anda. Sekarang lihat dan periksa blog Anda untuk melihat Hasil otomatis memperpendek URL Tulisan Anda di Blogger. semoga berguna...

Smooth scrolling pada komentar

Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini:

Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini

1. Login ke akun blogger Anda.
2. Pilih Template » Edit HTML.
3. Pastikan template Anda terpasang jQuery library yang terletak diatas </head>

lihat css berikut ini:

div:target .comment_inner{
border:1px solid #6db500;
-webkit-transition:border-color 5s ease-out;-moz-transition:border-color 5s ease-out;-ms-transition:border-color 5s ease-out;-o-transition:border-color 5s ease-out;transition:border-color 5s ease-out;
}
div:target .comment_child .comment_wrap .comment_inner{
background: #fff;border:1px solid #2f4f45;
}

4. Cari kode berikut ini:

<b:includable id='comments' var='post'>

lalu letakkan css diatas di dibawahnya dalam kode <style>...</style> atau jika malas taruh saja diatas </b:skin>

Sedangkan anda yang masih menggunakan komentar bertingkat bawaan blogger bisa memakai css dibawah ini

.comment .comment-block:target{border:2px solid #800000;}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:2px solid #bbb;}

5. Kemudian cari kode tag ini dalam template anda </body>
6. Tepat diatasnya, pastekan kode di bawah ini:

<script type='text/javascript'>  
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });
}
jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
</script>

7. Simpan perubahan dan selesai.

Lihat perubahan pada daftar komentar blog anda. semoga berguna...

Efek shadow dengan css :before :after pseudo-elemen

Dalam tutorial ini kita akan menciptakan kotak dengan efek bayangan hanya dengan CSS. Kita akan menggunakan CSS shadow properti yang merupakan salah satu properti CSS favorit saya yang akan Anda lihat dalam tutorial ini dan betapa mudahnya Anda dapat menggunakannya untuk kreasi anda sendiri. Properti box-shadow memungkinkan Anda untuk dengan mudah membuat beberapa bayangan pada elemen kotak dengan menetapkan nilai untuk warna, ukuran, blur dan offset.

Properti box-shadow menerima 2-4 opsi, opsi yang diperlukan adalah horisontal offset dan offset vertikal, dua pilihan opsional tersebar jarak dan warna.

box-shadow: horizontal vertical spread colour;

Sedikit contoh:

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Semua browser terbaru mendukung properti box-shadow. seperti:

Internet Explorer 9.0 dan di atasnya
Firefox 3.5 dan di atasnya
Krom 1 dan di atasnya
Safari 3 dan di atasnya
Opera 10.5 dan di atasnya

Dengan ini semoga anda dapat menciptakan dan membuat tampilan lebih unik. silahkan pilih diantara efek dibawah ini yang anda suka:

HTML

<div class="kotak gaya-v1">
    <h3>Gaya v.1</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}


/* Gaya v.1 */
.gaya-v1{
 -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
         box-shadow: 0 10px 6px -6px #777;
}

HTML

<div class="kotak gaya-v2">
       <h3>Gaya v.2</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.2 */
.gaya-v2
{
  position: relative;
}
.gaya-v2:before, .gaya-v2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.gaya-v2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

 

HTML

<div class="kotak gaya-v3">
       <h3>Gaya v.3</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.3 */
.gaya-v3
{
  position: relative;
}
.gaya-v3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

HTML

<div class="kotak gaya-v4">
        <h3>Gaya v.4</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.4 */
.gaya-v4
{
  position: relative;
}
.gaya-v4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

 

HTML

<div class="kotak gaya-v5">
        <h3>Gaya v.5</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.5 */
.gaya-v5
{
  position: relative;
}
.gaya-v5:before, .gaya-v5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.gaya-v5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

 

HTML

<div class="kotak gaya-v6">
      <h3>Gaya v.6</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.6 */
.gaya-v6
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v6:before, .gaya-v6:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

 

HTML

<div class="kotak gaya-v7">
        <h3>Gaya v.7</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.7 */
.gaya-v7
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v7:before, .gaya-v7:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.gaya-v7:after
{
 right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

 

HTML

<div class="kotak gaya-v8">
         <h3>Gaya v.8</h3>
</div>

CSS

.kotak h3{
 text-align:center;
 position:relative;
 top:80px;
}
.kotak {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/* Gaya v.8 */
.gaya-v8
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gaya-v8:before, .gaya-v8:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.gaya-v8:after
{
 right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

Semoga bermanfaat....

Membuat Expand/Collapse komentar blogger

Pada dasarnya kode ini hanya menyembunyikan isi dari elemen DIV yang berisi bagian komentar blog Anda yang hanya terbuka setelah Anda mengklik tombol yang dibuat untuk memunculkannya, elemen DIV pun akan disembunyikan kembali ketika tombol tersebut diklik untuk kedua kalinya.

Ikuti petunjuk di bawah untuk memasangnya di blog Anda. Seperti biasa, lebih baik anda membuat cadangan template Anda terlebih dahulu sebelum melanjutkan untuk membuat perubahan apapun pada kode.

1. Dari dalam Dashboard Blogger Anda, pergi ke 'Template'
2. Klik 'Edit HTML' maka tombol 'Lanjutkan'
3. Carilah tag </head> dengan menekan Ctrl + F dan kemudian copy lalu paste kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_comment_db&quot;).hide();
$(&quot;h3.pesan_comment_db&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</script>

4. Selanjutnya, dengan menekan 'Ctrl + F' lagi, cari kode tag ]]></b:skin> dalam kode html

5. Paste kode CSS berikut di atasnya

h3.pesan_comment_db {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIrNInnyT7KRKZiu-HU1LV8Wm54RfHfyLs-CyYcadqZGvnJH0-qj9zWO34KBd3KLfSEUPBJ1-xshUrGXHvbDekmRrhWunifW62hqKy_aaZtsI5Hno6T86WUdYHdy41c3PFvpIwCERoYvw/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px; 
}

h3.active {
background-position: bottom left;
color:#ddd;
}

.toggle_comment_db {
padding-left:10px;
overflow: hidden;
clear: both;
}

Anda dapat mengubah lebar tombol dengan mengedit 518px sesuai dengan lebar template anda. silahkan mengubah warna font, ukuran, dan gaya teks sesuai keinginan anda.

Berikutnya letakkan link teks untuk menyembunyikan bagian komentar.

6. Sekali lagi, menggunakan 'Ctrl + F', cari kode berikut:

<b:includable id='comment-form' var='post'>

7. Dan kemudian paste kode berikut dibawahnya:

<h3 class='trigger'>Klik untuk berkomentar</h3>
<div class='toggle_container'>
<div class='block'>

Sekarang cari tag </b:includable> penutup tag <b:includable id='comment-form' var='post'> kemudian paste kode berikut di atasnya:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'>
<a href='http://defandaky.blogspot.com' style='color:#CAC8C8;'><i>Blogger Tutorial</i></a>
</p>
</div>
</div>

Seperti ini hasilnya:

<b:includable id='comment-form' var='post'> 
<h3 class='trigger'>Klik untuk berkomentar</h3>
<div class='toggle_container'>
<div class='block'>

.....kode panjang.....

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'>
<a href='http://defandaky.blogspot.com' style='color:#CAC8C8;'><i>Blogger Tutorial</i></a>
</p>
</div>
</div>
</b:includable>

8. Sekarang 'Preview' untuk melihat hasilnya, dan jika Anda merasa cukup dengan hasilnya, simpan template anda dan sudah selesai.

Semoga bermanfaat...

:before dan :after Elemen Pseudo pada Sidebar

Ini adalah metode lain menggunakan properti :before dan :after dan akan bekerja tanpa masalah di browser apapun, termasuk IE8. trik ini akan membagi bar header sidenar ke kiri dan kanan bagian, di mana kiri akan berisi judul dan kanan link terkait.

Ide menghasilkan Adobe ini sebenarnya dibahas oleh css-trik yang disesuaikan dengan Blogger.

Bagaimana cara membuat Adobe seperti diatas pada Blogger

Langkah 1. Login ke dashboard Blogger Anda> pilih Template> Edit HTML, kemudian klik dimana saja di dalam kode area untuk mencari - tekan CTRL + F dan temukan tag </head>

Langkah 2. Tepat di atasnya, copy dan paste kode ini:

<style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Langkah 3. Simpan Template.

Langkah 4. Sekarang buka Tata letak dan Tambah Gadget HTML/JavaScript baru dan pilih salah satu kode di bawah ini untuk masing-masing judul widget:

Latar belakang biru:

<div class="module blue">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang kuning:

<div class="module yellow">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang hijau:

<div class="module green">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang merah:

<div class="module red">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Catatan: ubah teks "Judul Widget" dengan judul widget Anda dan more teks di sebelah kanan, kemudian tambahkan Link URL untuk itu.

Langkah 5. Setelah Anda menyimpan HTML/Javascript gadget yang berisi kode di atas, drag dan drop mereka tepat di atas widget Anda dan Simpan Pengaturan tersebut.

Semoga berhasil...

Post info di bawah judul artikel

Ketika tidak ada komentar yang dibuat untuk posting Anda, ada link yang mengatakan 'Jadilah yang pertama untuk berkomentar!' dan ketika hanya ada satu komentar maka akan muncul '1 komentar sejauh ini'. Jika Anda ingin membuat blog Anda lebih bergaya dengan mengganti teks-teks dengan beberapa ikon lucu kecil bersama dengan default Nama Penulis, Post Date, Label dan Komentar, maka cukup ikuti langkah-langkah berikut:

Langkah 1. Dari Dashboard Blogger Anda, klik pada pilihan Template, kemudian tekan tombol Edit HTML
Langkah 2. Cari kode di bawah ini, klik dalam template editor tekan CTRL + F dan paste kode dalam kotak pencarian lalu enter

<div class='post-header-line-1'>

Jika Anda tidak dapat menemukan kode di atas, cari kode berikut ini:

<div class='post-header'>

Langkah 3. Paste kode berikut di bawah/setelah kode di atas:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tzXV6JJdKUPRFeM175ndGhr4IQXZGkLjDQk8Lh7d2shU2AnAcdNQRY_QnTRUJZmdldNmcrM9bLXVLnx4v27v3G_r9jGUHveNbswjEKjuAD5UQqSaGLTa2aPCuFtZBSdsHcEN68D0vJx4/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo8-b3y7bG5wbgeMrp5vDpIzO0-ogyrWSDrb6cq4cO0yphJksvVDDyGMKDPLw2Uue0rCyKpYuDA31pcVcXQ_DyF5ckwMziW3cqLZALgR_v9DV0Mpz0j00PAbcNeD9C3Rlt5jZKqenKCdC/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BNMpBkCtIJmu8S0x4dwesOFcPHJnKMBMf1HBuzOeY7fgfMK2fKDP9hJgP68ZS3g5EeaZjJFe76OAe6K_R3-eKXOd_c2wMfHGpl0bjIyadAdx22UGnbulFbKqaJhzJnKcRoatebqrWu-f/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJ_upFmYn_j3IZJlr7YzW1Clyq3WGJjC-isfxhl7ewXIDdWk5XSO524FFDgEdwD-Bez5kkMVi1NwjPQl3dFgVcXvoaLwvNQVn0cp9nTTosZrr2Mq1vzKx3RT8ryXNVxgxy3Fb8DB_FxEZ/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Jadilah yang pertama mengomentari!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Komentar sejauh ini<b:else/><data:post.numComments/> Komentar sejauh ini</b:if> </b:if></a>
          </b:if>
     </b:if>
</span> 

Bagaimana cara untuk menyesuaikan:

Jika Anda ingin mengubah ikon, silahkan mengganti alamat URL di atas diwarnai dengan:

• Merah - Penulis
• Hijau - Tanggal
• Biru - Label
• Orange - Komentar gelembung

Ganti dengan alamat URL gambar Anda.

Langkah 4. Simpan template dan selesai

Semoga berhasil dan sukses...

Posisi gambar avatar Komentar

Ini adalah Trik Cepat untuk memperbaiki gambar avatar komentar blogger yang tidak sesuai. Saya melihat di banyak blog gambar avatar Komentar mereka tidak berada dalam posisi yang benar dan ukuran yang pas. Hal ini karena CSS default Komentar Sistem dan Komentar Threaded. yang ada dalam template Anda dan menyebabkan tampilan gambar avatar tidak benar. berikut ini adalah sebuah tip dengan css untuk Reset gambar Avatar dan Gaya Image.

Berikut Ini adalah ulang CSS untuk Komentar Gambar Avatar dan bekerja untuk kedua default Komentar Sistem dan System Threaded Komentar.

1. Masuk ke Blogger Dashboard> Pilih Blog Anda dan Klik Menu Dropdown
2. Pilih Template> Klik Edit HTML
3. Cari kode tag ]]></b:skin> dan letakkan kode di bawah ini diatasnya:

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

Catatan: Ukuran standar diatur ke 50px. jika Anda ingin Mengubah ukuran avatar maka cukup memodifikasi CSS di atas.

Bagaimana cara membuat bulatan pada Gambar Avatar Komentar Blogger?

Berikut cara membuat bulatan gambar Avatar dalam komentar blogger. berikut ini adalah CSS untuk itu, css ini akan mengatur ulang ukuran avatar normal dan putaran Image. (jadi jangan gunakan CSS di atas)

Cari kode tag ]]></b:skin> dan letakkan kode di bawah ini sebelum kode tersebut

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Catatan: Ukuran standar diatur ke 50px. jika Anda ingin Mengubah ukuran avatar maka cukup memodifikasi CSS di atas.

4. Jangan lupa simpan template anda.

Jika posting ini sangat berguna bagi Anda? maka silakan di bagikan keteman lainnya Terima kasih. Jangan lupa tinggalkan komentar Anda.

Cara membuat sebuah halaman di Google+

Terdapadat sebuah kelebihan yang terdapat di halaman Google Plus jika dibandingkan dengan halaman fanspage Facebook, dimana halaman Google Plus terintegrasi dengan hasil pencarian dari pada Google Search Engine, kita cukup memberi tanda plus/tambah (+) sebelum melakukan pencarian pada google, misalkan kita mengetikan +julia perez atau +dewi persik maka secara otomatis Google akan memberikan hasil result pencarian tertentu yang terkait dengan halaman pada Google Plus tersebut.

Dari kelebihan diatas, jika anda memiliki halaman pada Google Plus yang berhubungan dengan kata kunci tersebut maka halaman tersebut akan muncul dan tentunya ini baik untuk  trafik jika halaman anda terhubung pada blog/website anda melalui tautan. jadi jika tertarik ikuti langkah dibawah ini untuk cara membuat halaman di Google Plus. Caranya pun mudah dan tidak butuh waktu lama.

1. Silahkan kunjungi https://plus.google.com/pages/create.
2. Pilih jenis halaman yang ingin anda buat, Ada bisnis, Perusahaan, Seni dan produk. Saya sendiri memilih jenis (Lainnya) karena jenis halaman saya tidak sama dengan jenis yang disediakan.

3. Silahkan beri judul halaman anda dengan alamat blog yang ingin dipromosikan. Jangan lupa beri tanda centang bahwa anda setuju pada persyaratan dan kententuannya, kemudian klik tombol ( Lanjutkan ).

4. Beri logo/gambar untuk halaman dan latar juga edit sesuai lainnya, beri ceklist untuk pemberitahuan jika laman/halaman baru dibuat.

5. Klik tombol selesai.

Sekarang anda telah memiliki halaman di Google Plus, dan tinggal anda promosikan linknya ke teman dan sahabat anda.

Semoga bermanfaat...

Mengompress data Javascript tools YUI Compressor

Mungkin blog tanpa javascript akan terasa biasa saja dan menjadi kurang menarik, itu semua menurut saya. karena dengan javascript kita dapat menciptakan hal - hal cantik dengan efek yang terlihat unik untuk sebuah tampilannya. dengan semakin majunya javascript berbagai hal yang terbilang berhubungan dengan blog kini banyak tercipta, bila anda tidak mengenak apa itu javascript maka anda akan jadi seorang blogger yang ketinggalan jaman. jangan pernah berpikir untuk menghindarinya jika anda hanya berpikiran untuk masalah kecepatan loading website. Pemakaian Javascript yang sesuai dengan fungsi saya rasa tidak ada masalah, asalkan memang didukung dengan server yang mampu, terlebih yang menggunakan platform blogspot yang dihost langsung pada platform tersebut. jika anda merasa ingin lebih membuat javascript ringan dalam waktu load blog anda, silahkan ikuti trik kompres javascript berikut ini.

Ada beberapa layanan Online yang sudah support YUI Compressor yang bisa kita coba, diantaranya yang sering saya gunakan adalah YUI Compressor Online dan Online YUI Compressor. banyak sekali tools javascipt compressor diluar sana yang bisa anda coba, namun hanya sedikit yang benar-benar bekerja dengan baik menurut saya. Dari sekian banyak tools yang saya coba hanya YUI Compressor  yang dikembangkan langsung melalui dapur Yahoo Developer  Network ini saja yang benar-benar berkerja tanpa kesalahan (error). cara untuk menggunakan pun cukup mudah, silahkan masukkan semua kode data javascript yang anda inginkan, dengan catatan tanpa menyertakan tag:

<script type='text/javascript'>... kode javascript ...</script>

Tampilan Online YUI Compressor

Tampilan YUI Compressor Online

Silahkan anda gunakan sesuai kebutuhan anda tool compressor javascript diatas, sebenarnya jika dibahas mungkin akan lebih menarik namun terlalu panjang dan mungkin anda akan malas untuk menyimaknya, untuk lebih jelasnya tentang mengompres javascript ini langsung saja anda buka dan pelajari saja ya secara langsung dialamat websitenya disini.

Semoga membantu anda....

Edit CSS tanpa masuk ke dalam Edit HTML

Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan tampilan yang enak di pandang juga untuk memenuhi bagaimana agar blog kita bisa tampil sempurna di semua browser. jadi bila sobat ingin tahu templatenya bagus atau tidak, cek dulu disemua browser bagaimana tampilannya.

Kembali lagi pada cara Meng-edit CSS tanpa harus masuk ke dalam halaman Edit HTML, Sebenarnya ada cara yang sangat mudah mengedit  CSS tanpa harus masuk berulang kali ke halaman Edit HTML blogger, kita hanya perlu membuka halaman blog lalu mengedit kode CSS secara live (Online) tanpa perlu takut terjadi kesalahan dan error, yang kita perlukan hanyalah tools buatan Chrispederick yang di beri nama Web Developer tools ini lah yang akan membantu meringankan tugas kita mengedit Code CSS di blogger dengan lebih menghemat waktu. tidak hanya CSS, tool ini juga bisa digunakan untuk fungsi lain.

Bagaimana cara mengedit CSS dengan tools Web Developer?

1. Buka Browser Firefox lalu Download Web Developer

2. Installasi sesuai petunjuk, jika sudah terinstall maka akan muncul Toolbar Web Developer dengan munculnya menu icon

3. Untuk mengedit CSS pilih icon CSS -> lalu klik Edit CSS maka akan muncul jendela baru Edit CSS

4. Ada beberapa tab pilihan yang bisa digunakan untuk mencoba mengedit CSS, sebaiknya buka Embedded Styles disinilah Code CSS Blogger yang siap kita permak tanpa takut terjadi kesalahan.

5. Untuk mempermudah mengetahui lokasi kode CSS yang ingin di edit, anda hanya perlu mengaktifkan fungsi Style Information caranya  klik  icon CSS -> lalu klik Style Information.

6. Arahkan mouse untuk mencari lokasinya css yang ingin anda ambil untuk di edit, pada jendela baru akan muncul informasi dari kode CSS yang ditemukan.

7. Selamat berkreasi dengan keinginan anda.

Perlu di perhatikan bahwa tools ini hanyalah alat bantu untuk mempermudah anda mengedit CSS, Tools diatas bukan otomatis melakukan perubahan css yang langsung terpasang di template, untuk hasil akhir dari kode CSS yang sudah anda edit tetap harus di simpan secara manual ke dalam html template pada halaman Edit HTML blog anda.

Sedikit penjelasan:

All Styles - Memungkinkan Anda mematikan setiap gaya di website.
Browser default Styles - Setiap browser memiliki cara sendiri dalam menentukan bagaimana elemen ditampilkan, ini akan membiarkan Anda menghapus gaya tersebut.
Embedded Styles - Menghapus gaya yang dikodekan di bagian atas halaman
Inline Styles - Menghapus gaya yang dikodekan inline dengan elemen
Linked Style Sheets - Menghapus style sheet yang terhubung eksternal
Print Styles - Jika Anda memiliki sebuah style sheet terpisah (s) untuk pencetakan ini akan membersihkan mereka.
Individual Style Sheet - Memungkinkan Anda secara khusus memilih style sheet untuk menonaktifkan.

Semoga berguna dan bermanfaat...

Simpan dokumen online di box.com

Salah satu situs file hosting yang kini sedang diminati oleh pengguna internet untuk menyimpan file dokumen seseorang di internet adalah box.com. Hal ini disebabkan karena box.com menawarkan kapasitas ruang simpan yang lumayan besar yaitu 5 GB secara gratis bagi pengguna Personal. Dengan cara mudah untuk mendaftar dan tanpa syarat, Selain itu file yang disimpan di box.com juga terjamin keamanannya dan jarang dihapus oleh administrator box.com. selain itu, tampilan yang sederhana juga memudahkan pengguna untuk mengorganisasikan file yang diunggah dengan baik.

Jika anda tertarik dan ingin menyimpan file di box.com silahkan mendaftar dengan langkah berikut ini:

Silahkan buka situs box.com.

Klik Sign Up.

Klik Sign Up pada layanan Personal untuk mendapatkan akses gratis 5 GB.

Lengkapi data untuk membuat akun baru di box.com dan klik continue.

Konfirmasi pendaftaran akun akan dikirim ke email anda. Buka inbox email anda dan klik URL yang diberikan untuk verifikasi akun baru anda.

Akun sudah diverifikasi dan siap digunakan. Klik Log in and Get Started untuk mulai menggunakan box.com.

Pada layanan Personal, box.com menawarkan fasilitas unggah file gratis dengan kapasitas 5 GB. Jika anda membutuhkan kapasitas unggah file yang lebih besar, anda dapat meng-upgrade ke layanan Business atau Enterprise untuk mendapatkan kapasitas ruang simpan lebih besar dan layanan yang lebih baik. atau jika anda ingin cara yang gratis juga coba dengan membuat akun baru pada layanan Personal untuk mendapatkan ruang simpan tambahan tanpa harus keluar biaya.

Semoga berguna dan bermanfaat...

Meringankan load konten avatar comment

Load/waktu muat blog memang mempengaruhi trafic, faktanya pengunjung malas membuka sebuah halaman blog yang menyita waktu load yang lama yang bila mungkin digunakan untuk membuka halaman blog lain bisa sudah membaca beberapa halaman. Maka dari itu, banyak para blogger bekerja keras menerapkan berbagai cara untuk menjadikan blog mereka memiliki waktu muat yang singkat, dengan meringkas css, mengurangi gadget, memperkecil image atau memasang script tertentu.

tapi jangan salah arti, untuk sebuah halaman web/blog yang belum pernah di kunjungi rata - rata akan sedikit memakan waktu muat yang lumayan, tetapi dengan catatan anda baru pertama mengunjungi dan jika sudah untuk kedua dan seterusnya akan terasa ringan, kecuali jika halaman blog tersebut memang berat dalam load akan seterusnya begitu.

Kali ini saya akan berbagi salah satu trik untuk membuat load/waktu muat blog menjadi lebih ringan dengan cara mengubah ukuran avatar komentar menjadi lebih kecil agar waktu muat komentar pun menjadi cepat. kenapa kok tidak memakai css saja? kenapa tidak ukuran avatarnya langsung yang di crop? pertanyaan tersebut sering sekali hadir.

Begini, Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar yang akan diproses oleh mesin browser setelah itu barulah ditampilkan sesuai perintah tampilan css, sedangkan pemotongan untuk ukuran kecil terkadang akan membuat tampilan avatar pecah. Blogger mempunyai cara yang unik dalam menentukan ukuran gambar, untuk ukuran gambar asli biasanya ditandai denga kode s512 atau s1600 pada URL gambar. Gambar yang sobat upload memiliki beberapa ukuran yang mungkin berbeda, dengan merubah ukurannya sobat bisa menentukan berapa pixel gambar yang akan di tampilkan.

Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar dibawah ini :

Setelah saya rubah, maka ukuran avatar berganti menjadi seperti berikut ini :

Dibawah ini adalah url avatar saya

http://lh6.googleusercontent.com/-PGirmW8eUT4/AAAAAAAAAAI/AAAAAAAAAVU/vCdAXXjNDaY/s512-c/photo.jpg

silahkan di copy dan paste di addres bar anda untuk mencoba, kemudian ganti s512 menjadi s65 misalkan kemudian muat, gambar akan berubah menjadi 65x65px ( pixel ).

Jadi semua yang saya tulis di atas adalah cara memperkecilnya bukan dengan CSS, melainkan dengan JavaScript. Untuk memasangnya, simpan kode dibawah ini pada template anda, letakkan diatas kode tag </body>

<script type='text/javascript'>
//<![CDATA[
var avatar=$("#comments");
avatar.find('.avatar-image-container img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s65-c/")).removeAttr('longdesc width height');
});
//]]>
</script>

ubah ukuran s65-c sesuai dengan keinginan anda atau sesuai template komentar, misalkan bisa s75, s80, s90 dan seterusnya.

Semoga berguna untuk anda...

Membuat persentase ketika scroll digulung

Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulungan telah mencapai element batas maka di scroll akan muncul pensentase angka menjadi 100%.

Cara memasang scroll persentase pun tidak sulit, anda hanya perlu

Langkah 1 : Silahkan masuk ke akun Blogger dan pilih Template lalu Edit HTML. Copy dan pastekan kode dibawah ini di atas </style> atau ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}

#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #333;
}

Langkah 2 : Copy kode berikut ini dan letakkan di bawah kode tag </head>

<div id='scroll'></div>

Langkah 3 : Paste JavaScript ini di atas kode tag </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Langkah 4 : Simpan Template.

Lihat hasilnya dengan buka halaman blog anda dan scroll/gulung halaman.

Semoga berguna dan berhasil....

Memahami CSS dan Penerapan CSS pada HTML

Css sendiri berfungsi untuk mendesain tampilan/layout agar terlihat lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template anda dan tentunya anda pun akan sedikit menggunakan kode kode pada blog.

• CSS adalah singkatan dari Cascading Style Sheets
• CSS digunakan untuk mendesain tampilan dari html, jadi intinya jika anda mau belajar css, belajar dahulu html .
• CSS  dapat digunkana untuk meringkas pekerjaan.
• CSS mempunyai kode kode untuk mendesain tampilan html ke bentuk yang berkualitas. 

CSS biasanya dipisahkan kedalam tiga tipe :

1. Internal CSS : CSS yang terdapat dalam halaman HTML.
2. Eksternal CSS : CSS yang disisipkan/ditambahkan pada halaman HTML dengan cara dipanggil melalui link.
3. Inline CSS

Pada umumnya, menggunakan Eksternal CSS lebih di anjurkan karena  memberikan konsistensi untuk site-wide dan mengurangi kompleksitas atau pengulangan dari pada menggunakan Internal CSS. Adapun keuntungan apabila sobat menggunakan CSS adalah :

• Menambahkan tampilan baru pada halama HTML sobat.
• Meperbaharui seluruh tampilan website/blog sobat hanya dengan sedikit merubah/menambahkan kode CSS.
• Mebuat setiap halaman web/blog sobat menjadi lebih interaktif dan menarik.

Anda dapat menambahkan kode CSS ke dalam halaman HTML sobat dengan cara :

Menggunakan file CSS.
Menggunakan elemen <style> pada bagian head HTML sobat.
Menggunakan atribut  "style" pada setiap elemen HTML sobat (misalnya, <p style = "...">...</p> ).

Dibawah ini contoh-contoh penggunaan CSS pada halaman HTML.

<html>
<head>
<style type="text/css">
body {
background-color:#d0e4fe;
}
h2 {
color:red;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:18px;
}
</style>
</head>

<body>

<h2>Contoh CSS</h2>
<p>Di sini isi kontent.</p>

</body>
</html>

Penulisan kode css ( SYNTAX )

dalam penulisan kode css, BERBEDA dengan kode-kode html. di dalam css terdapat selector dan declarations, perhatikan gambar dibawah ini:

Selector :

simbol kode - kode yang di pakai untuk nantinya dapat di terapkan pada html ,sebagai contoh ( body, h1,h2,h3,a,header,outerwrapper, dan lain sebagainya)

Declaration :

bisa kita lihat dari contoh di atas bahwa di dalam declaration terdapat pula properti - properti  dan juga value, jadi intinya declaration itu adalah kumpulan dari properti dan juga value yang di ringkas dalam satu paket dengan awalan pembuka "{" dan di tutup dengan "}"

Property :

proeprty adalah atribut - atribut style yang dapat anda ubah untuk mendesain html sesuai ke butuhan blog/web anda. dalam setiap properti memiliki Value ( nilai ).

Value :

Value adalah nilai - nilai dari property seperi yang telah saya jelaskan sebelumnya.

CSS comment ( tulisan yang tidak terbaca oleh mesin ) atau biasa di sebut comment.

untuk menambahkan tulisan coment hal yang harus anda lakukan adalah menambahkan kode "/*" pada awal kata dan di akhiri dengan kode "*/". lihat contoh dibawah ini:

/*Disini tulisan comment*/
p { text-align:center;
/*Di sini tulisan yang tidak terbaca */
color:black; font-family:arial;
}

Fungsi ID dan CLASS pada CSS

Fungsi ID :

ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya.
ID di  lambangkan dengan simbol "#" ( pager )
ID di tulis ke html/body  dengan style "<div id="nama_selector">" di tutup dengan kode </div>
   
Contoh singkat penggunaan ID

#nama-selector {
text-align : center;
color : red;
background : #ffffff;
margin :0px;
padding:10px;
}

Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "nama-selector" pada html/body seperti di bawah ini :

<div id="nama-selector"> di tutup kode </div>

Fungsi CLASS :

Class digunakan untuk menentukan style pada sekelompok element
Class biasanya terdapat di dalam selector ID
Class memungkinkan kalian untuk menetapkan style tertentu  untuk setiap element html  dengan banyak class yang sama .
Class di lambangkan dengan simbol "." ( titik )

lihat contoh di bawah ini agar lebih jelasnya :

.center {text-align:center;}

dari contoh di atas kita coba tambahkan kode html h1 agar letaknya menjadi di tengah ( di tengah karena css class di atas menggunakan nilai center, jika anda menggunkan kode css lain juga bisa, asalkan sesuai ketentuan. berikut hasil penggabungan kode di atas dengan h1.

p.center {text-align:center;}

Jika anda seorang Blogger atau  ingin menjadi Web Design menguasai CSS adalah suatu keharusan dikarenakan seluruh Themes/Template semua untuk pengeditan suatu template semua menggunakan bahasa CSS atau CSS Rule.

Semoga membantu dan berguna...