CSS Efek Kertas Menumpuk

Ini Script CSS

<style>
  body {
  background: #666;  
}
  .papers {
  background-color: white;
  height: 350px;
  padding: 20px;
  width: 260px;
  -webkit-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
 
}
</style>

 Script HTML
<div class="papers"> Content </div>

Demo

Read more ...

Membuat CSS Top Shadow

Kali ini saya akan memberikan Tutorial yang sangat sederhana yaitu Membuat CSS Top Shadow.
CSS Top Shadow Adalah Efek shadow yang berada di bawah Addres Bar atau di atas Heder suatu Website/Blog, Efek ini Keren jika di pasang di pasang di Web/Blog Anda. Langsung saja kita Mulai Cara Membuat CSS Top Shadow.

Cara Memasang CSS Top Shadow

Copy saja Kode CSS dibawah ini ke tempat kode css Web/Blog Anda

body:before {
    content:"";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    z-index: 100;
}

 Itu saja yang bisa saya sampaikan selamat mencoba CSS Top Shadow di Web/Blog Anda

Read more ...

Komentar GPlus untuk Template yang Gagal

Sebelumnya saya sudah berbagi dengan kawan cara meng-Aktifkan Komentar GPlus :q; tentunya bagi kawan yang sudah mempunyai Account G+ ditambah Template yang support dengan Blogspot, begitu juga dengan janji saya bagi kawan yang memakai Template Designer :r; atau yang gagal meng-Aktifkan Komentar GPlus.

Triks ini saya dapatkan pada master kita setelah sebelumnya saya mencari kesana kemari tidak ketemu yang akhirnya menemukan pada dte :z; yang caranya hampir sama dengan meng-Aktifkan Thread Comment sebelumnya 

Oke langsung saja ke cara meng-Aktifkan Komentar GPlus di Blog 

• Masuk Account Blogger dengan ID kawan
• Sebaiknya simpan Template kawan dulu 
• Pada Dasbor pilih Template - Edit HTML
• Untuk cepatnya, langsung saja menuju Widget - Blog1 lanjut jabarkan

• Cari  <b:includable id='comments' var='post'> 
• Copas Script berikut tepat diatasnya 

<b:includable id='g-comments' var='post'>
<div id='g-comments-outer'>
<div class='g-comments' expr:data-href='data:blog.canonicalUrl' data-width='600' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD'> <a href='#g-comments-outer' id='g-comments-loader'>Berikan Komentar</a>
</div> </div>
<!-- For slow connection -->
<script type='text/javascript'>
//<![CDATA[
(function() {
var btn = document.getElementById('g-comments-loader'), showGC = function() {
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0], old;
script.type = "text/javascript";
script.id = "g-comments-script";
script.src = "//apis.google.com/js/plusone.js"; if (document.getElementById('g-comments-script')) {
old = document.getElementById('g-comments-script'); old.parentNode.removeChild(old); } head.appendChild(script); };
btn.onclick = function() {
this.innerHTML = "Memuat...";
showGC(); return false; };
})();
//]]>
</script>
</b:includable>

Teks yang saya beri warna merah silahkan disesuaikan dengan Blog kawan 
Teks yang saya beri warna biru bisa kawan ganti dengan Page-Loading atau dihilangkan

• Selanjutnya cari  <b:includable id='main' var='top'> yang kodenya kurang lebih seperti berikut 

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Hapus atau Ganti dengan Kode berikut :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- b:include data='post' name='comment_picker'/ -->
<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- b:include data='post' name='comment_picker'/ -->
<b:include data='post' name='g-comments'/>
</b:if>

Atau seperti kode berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Hapus atau Ganti dengan Kode berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- b:include data='post' name='comments'/ -->
<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- b:include data='post' name='comments'/ -->
<b:include data='post' name='g-comments'/>
</b:if>

• Simpan Template kawan

Read more ...

Ramadhan Blogger Template

Demo Download

Bulan Ramadhan di sini?  mengapa tidak? mempublikasikan khusus tema 'Ramadhan Blogger Template' untuk setiap orang yang berpikir / blog-nya dia memiliki sesuatu yang sangat istimewa yang berisi materi dan hal-hal seperti yang benar-benar menginspirasi kehidupan seseorang untuk sebagian besar. Menjaga ini dalam pikiran kami membuat tema yang sama sekali baru dan dinamis yang halus Anda, memberikan pembaca kenyamanan sempurna memiliki font yang indah dengan gambar memesona. Saya harap kalian seperti ini Ramadhan template blogger yang cukup berbeda dari semua sebelumnya blogger template 'kami telah dipublikasikan pada Bloggertheme9. Agama Ramadhan blogger theme akan menarik pengguna dengan kombinasi warna terang dan footer area elegan.

http://www.bloggertheme9.com/2013/07/ramadan-blogger-template.html

Read more ...