Cara Membuat Iklan Seperti Google Adsense

Cara Membuat Iklan Seperti Google Adsense – tentu anda sering menjumpai blog yang menggunakan iklan pada blognya yang mirip seperti google adsense. Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti google adsense di blog bisa dilakukan dengan sangat mudah. Jika blog anda sudah pernah di daftarkan ke google adsense namun belum juga di approve maka sebagai gantinya ini bisa menjadi solusi yang efektif apabila anda ingin memasang iklan pada sidebar maupun bagian lainnya pada blog anda. Sangat mudah bukan, tanpa perlu mendaftarkan blog ke google adsense dahulu namun bisa memasang iklan di blog yang mirip seperti google adsense tanpa harus menunggu di approve terlebih dahulu. Inilah letak kreatif blogger dimana perjuangannya untuk mendaftarkan blog ke google adsense namun selalu gagal. Walaupun demikian masih juga memaksa untuk memasang iklan yang seperti google adsense walau tanpa mendapat bayaran dan hanya sekedar tiruan belaka. Oleh sebab itu saya sarankan jika ingin memasang iklan di blog tidak harus menggunakan google adsense jika terlalu lama menunggu approve, namun berikut adalah tutorial Cara Membuat Iklan Seperti Google Adsense.

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<div style="font: 11px verdana; border: 1px solid blue; color: black; background-color:white; padding: 10px; width:250px; height:280px;">
<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="#" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;">
<strong> Faceblog Evolutions </strong></a><br/>
Tutorial Blog | SEO | HTML | CSS | jQuery <br/>
<a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;">
http://mas-andes.blogspot.com </a><br/><br/>

<small style="float:right; color:blue;"><strong><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" style="color:blue;">
Ads by </a>Faceblog Evolutions</strong></small>
</div>

3. Kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut.

Jika ingin membuat iklan tersebut bisa melayang disisi kanan blog maka gunakan kode dibawah ini:

<style type="text/css">
#melayang{
position:fixed;
top:10px;
z-index:+1000;
}
html #melayang{position:relative;}
.melayangcontent{
float:right;
border:2px solid #52e052;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var melayang = document.getElementById("melayang");
var w = melayang.offsetWidth;
melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
melayang.opened = !melayang.opened;
}
function moveGB(x0, xf){
var melayang = document.getElementById("melayang");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
melayang.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="melayang">
<div class="melayangtab" onclick="showHideGB()"> </div>
<div class="melayangcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>

PASTE KODE YANG TADI TARUH DISINI

<script type="text/javascript">
var melayang = document.getElementById("melayang");
melayang.style.center = (30-melayang.offsetWidth).toString() + "px";
</script></center></div></div>

Trik Optimasi Meta Tag SEO Valid HTML5

Trik Optimasi Meta Tag SEO Valid HTML5 – dalam sebuah web atau blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO dari sebuah web atau blog itu sendiri agar lebih ramah search engine. Meta tag sendiri terdapat banyak macam dan bervariasi yang tentunya setiap blog juga berbeda-beda. Untuk melakukan optimasi SEO tentunya tidak hanya dilakukan dengan satu cara, melainkan banyak trik yang perlu dilakukan untuk membuat sebuah blog agar lebih SEO Friendly untuk mendekati search engine agar bisa memprioritaskan blog kita pada halaman utamanya. Untuk memulai hal itu maka sedikit trik sederhana ini mungkin bisa sedikit membantu tentang cara optimasi sebuah template blog dengan menggunakan meta tag yang lebih SEO dan khususnya valid HTML5. Hal ini juga tentunya untuk sedikit mengurangi kesalahan eror yang terdapat pada template blog yang anda gunakan jika di cek pada W3C Validator dan masih terdapat kesalahan eror pada meta tag. Untuk mengurangi kesalahan eror tersebut setidaknya bisa meminimalisir banyaknya eror yang sudah ada dari sebelumnya, maka kode yang terdapat dibawah paling tidak bisa memberi anda menjadi sedikit lebih lega dan bisa mengatasi timbulnya eror yang terjadi pada meta tag. Walopun keberadaan meta tag sekarang mungkin kurang disenangi oleh search engine, namun meta tag sendiri masih bisa digunakan untuk fungsi lain yang salah satunya yaitu untuk memberikan informasi dari sebuah web atau blog itu sendiri kepada pengunjung elektronik untuk berbagai tujuan. Oleh sebab itu jika diantara ada yang masih menggunakan menggunakan meta tag dan belum valid akan HTML5 sekiranya akan membuat sedikit perubahan mengenai penampilan meta tag pada templte blog yang anda gunakan, maka berikut adalah tata cara sederhana tentang Trik Optimasi Meta Tag SEO Valid HTML5 untuk memaksimalkan potensi SEO blog yang anda kelola.

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<meta charset='utf-8'/>
<link href='http://nama-blog.blogspot.com' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='DESKRIPSI BLOG ANDA' name='description'/>
<meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/>
<meta content='KODE VERIFIKASI BING' name='msvalidate.01'/>
<meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA AUTHOR' name='author'/>
<meta content='all' name='Slurp'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://nama-blog.blogspot.com' rel='openid.delegate'/>

3. Kemudian klik Template >> Edit HTML lalu paste kode tersebut diantara kode:

<head>

Disini letak kode diatas

<b:skin><![CDATA[

4. Sehingga tampilan kode secara lengkap akan menjadi seperti dibawah ini:

<head>
<meta charset='utf-8'/>
<link href='http://nama-blog.blogspot.com' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='DESKRIPSI BLOG ANDA' name='description'/>
<meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/>
<meta content='KODE VERIFIKASI BING' name='msvalidate.01'/>
<meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA AUTHOR' name='author'/>
<meta content='all' name='Slurp'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://nama-blog.blogspot.com' rel='openid.delegate'/>
<b:skin><![CDATA[

Bahwa dengan menggunakan Trik Optimasi Meta Tag SEO Valid HTML5 ini bukan berarti jaminan untuk blog anda akan selalu berada di page one serp google maupun search engine populer lainnya. Melainkan ini hanya salah satu upaya untuk lebih mementingkan optimasi SEO dan membuat meta tag pada template blog yang sekarang anda gunakan agar valid HTML5.

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi – tentu sudah tidak asing lagi masalah ini dikalangan blogger yang terbiasa berkomentar menggunakan OpenID. Walaupun masalah sepele namun terkadang hal ini terasa menyebalkan saat akan berkomentar pada sebuah blog yang berpagerank tinggi dan ingin menggunakan OpenID namun pada akhirnya muncul pesan peringatan OpenID anda tidak dapat di verifikasi. Sangat disayangkan tentunya jika anda sedang menjumpai blog dofollow berpagerank tinggi dan anda ingin menanam backlink disana dengan meninggalkan komentar namun pada form komentar yang tersedia tidak menyediakan komentar menggunakan Name/URL, biasanya langkah yang sebagai penggantinya adalah menggunakan OpenID namun apadaya jika menggunakan OpenID yang anda gunakan ternyata tidak dapat di verifikasi. Untuk mengatasi hal tersebut maka dengan trik ini anda bisa mengatasi hal itu dengan mudah dan tidak perlu lagi khawatir akan masalah sepele ini akan muncul pada saat anda akan berkomentar di blog orang lain. Caranya sangat sederhana, hanya dengan menambahkan sedikit kode pada template blog yang anda gunakan maka langsung kelar sudah masalah yang sedang anda alami dalam hal berkomentar menggunakan OpenID blog yang anda gunakan. Hal ini juga pernah saya alami, dan dari hari ke hari lama-lama ternyata juga membuat rasa penasaran bagaimana bisa hal ini bisa terus-terusan terjadi pada saat akan meninggalkan komentar namun selalu pesan peringat kredensial selalu muncul. Oleh sebab itu jika hal serupa juga anda alami maka tidak perlu khawatir lagi akan hal ini, dan bisa anda buang jauh rasa kesal yang melanda sampai saat ini karena hal ini bisa di atasi dengan mudah dan singkat. Supaya lebih efektif maka berikut adalah Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi supaya dapat berfungsi kembali.

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://mas-andes.blogspot.com' rel='openid.delegate'/>

Keterangan:
Ganti 'http://mas-andes.blogspot.com' dengan URL blog anda.

3. Selanjutnya klik Template >> Edit HTML lalu paste kode tersebut dibawah kode <head> atau bisa juga paste diatas kode <b:skin> kemudian Simpan Template.

Maka setelah anda simpan, pada saat anda akan berkomentar menggunakan OpenID sekarang sudah bisa berfungsi kembali dan bisa kembali berkomentar mengguankan OpenID tanpa muncul pesan peringatan Kredensial OpenID Anda Tidak Dapat di Verifikasi.

Membuat Widget Animasi Recent Comment di Blog

Membuat Widget Animasi Recent Comment di Blog – tentu sudah tidak asing mengenai widget ini di blog. Widget yang digunakan oleh mayoritas blogger untuk menampilkan komentar terakhir pada halaman blognya. Widget recent comment dengan thumbnail ini sangat cocok tentunya untuk melengkapi sidebar atau bisa juga di footer blog dengan dilengkapi efek animasi hover dan sangat serasi untuk mempercantik desain blog. Untuk memasang widget recent comment sangat mudah tentunya, tinggal copy kode yang terdapat dibawah lalu paste pada HTML widget yang tersedia. Sebagaimana mestinya tergantung dari selera yang di inginkan, banyaknya komentar yang ingin ditampilkan pada widget recent comment bisa di atur dengan mudah sehingga bisa seminimal mungkin agar tidak memakan banyak ruang. Untuk melihat hasilnya terlebih dahulu bisa dilihat pada demo yang terdapat dibawah. Sedangkan untuk menerapkan kedalam blog, berikut adalah tutorial cara Membuat Widget Animasi Recent Comment di Blog.

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<style type="text/css">
ul.btt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btt_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.btt_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;}
.btt_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.btt_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btt_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.btt_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5LBA6yyV5uHZY1aqtkTv0HrHbhrO9aF5AnmTMT0ruVio-pTnV6ZZjx0tBZv_2pRLcczu3WkU9fz1rs18EzwciylF1K81PgljTBPP5lo0RZTSgEZW0qidoEx2MkWqpX3ZF2x5VW3x5R7G0/s320/avatar.png",
 hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=10" type="text/javascript"></script>

Keterangan:
Ganti numComments  = 5 untuk mengatur jumlah komentar yang ingin ditampilkan.

3. Klik Tata Letak >> HTML/Javascript selanjutnya paste kode disitu lalu klik Simpan.

DEMO:

jQuery Fold Image Hover With CSS3

jQuery Flod Image Hover With CSS3 - fold image hover merupakan sebuah efek pada gambar yang nantinya jika gambar tersebut tersentuh oleh mouse atau hover maka akan memiliki efek fold atau melipat sehingga membentuk 3D. Pada tutorial ini terdapat 5 style hover yang nantinya dapat kita masukan untuk membentuk efek pada gambar yang terdapat didalam posting blog dan bisa kita tampilkan langsung tanpa perlu edit HTML maupun menambahkan kode pada template blog. Sebenarnya langkah ini jauh lebih mudah daripada terlebih dahulu kita memasukan kode kedalam template blog, namun kelemahannya jika kita cek di validatorW3 ternyata langkah tersebut bisa digunakan namun tidak valid HTML5 yang pada akhirnya menambah jumlah eror yang terdapat didalam URL blog yang kita kelola dan setiap akan menerapkan efek ini maka harus memasukan seluruh kode lengkap antara jQuery, CSS dan HTML kedalam postingan. Sedangkan jika kode CSSnya terlebih dahulu kita masukan kedalam template blog nantinya kode HTML yang akan kita masukan kedalam template blog agar bisa valid HTML5 dapat kita ubah atau sesuaikan namun langkah ini mungkin kurang disenangi karena sedikit akan memperlambat loading blog jika banyak kode yang nantinya kita masukan kedalam template blog. Begitulah penjelasan singkatnya mengenai flod image hover, jadi untuk mempersingkat langkah penerapannya kita gunakan yang mudah saja. Maka berikut adalah tutorial jQuery Fold Image Hover With CSS3 dan cara penerapannya kedalam blog.

1. Login ke akun blogger.
2. Copy kode dibawah ini, lalu paste kedalam area posting mode HTML.

EFEK 1

<style>
.efek1{
position: relative;
overflow: hidden;   
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px #52e052;
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;   
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;   
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;       
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}

.view-back span:first-child {    padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 { background-position: -60px 0px; }
.view .s3 {    background-position: -120px 0px; }
.view .s4 {    background-position: -180px 0px; }
.view .s5 {    background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {    opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view:hover .s2{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}
.view .s1 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
</style>

<div id="grid" class="efek1">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-21_zps7451f736.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-23_zps441a2254.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-27_zps50ae6694.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-28_zpsab0e98d4.jpg" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">   
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

DEMO

EFEK 2

<style>
.efek2{
position: relative;
overflow: hidden;   
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;   
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;   
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;       
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {    padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 {    background-position: -60px 0px; }
.view .s3 {    background-position: -120px 0px; }
.view .s4 {    background-position: -180px 0px; }
.view .s5 {    background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {    opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.view:hover .s1{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-o-transition-delay: 200ms;
-ms-transition-delay: 200ms;
transition-delay: 200ms;

-webkit-transform: rotate3d(0,1,0,-3deg);
-moz-transform: rotate3d(0,1,0,-3deg);
-o-transform: rotate3d(0,1,0,-3deg);
-ms-transform: rotate3d(0,1,0,-3deg);
transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-o-transition-delay: 150ms;
-ms-transition-delay: 150ms;
transition-delay: 150ms;   
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
-ms-transition-delay: 100ms;
transition-delay: 100ms;   
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4{
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-o-transition-delay: 50ms;
-ms-transition-delay: 50ms;
transition-delay: 50ms;   
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5{
-webkit-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-moz-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-o-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
-ms-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view div.view-back{
background: #0a0a0a;
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
</style>

<div id="grid" class="efek2">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-31_zps1c9d6589.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-34_zps00974356.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-36_zps56a53b44.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-38_zpse46e3443.jpg" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">   
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

DEMO

EFEK 3

<style>
.efek3{
position: relative;
overflow: hidden;   
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;   
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;   
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;       
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {    padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 {    background-position: -60px 0px; }
.view .s3 {    background-position: -120px 0px; }
.view .s4 {    background-position: -180px 0px; }
.view .s5 {    background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {    opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.view:hover .s1{
-webkit-transform: rotate3d(0,1,0,-55deg);
-moz-transform: rotate3d(0,1,0,-55deg);
-o-transform: rotate3d(0,1,0,-55deg);
-ms-transform: rotate3d(0,1,0,-55deg);
transform: rotate3d(0,1,0,-55deg);
}
.view:hover .s2,
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,20deg);
}
.view:hover .s3{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,30deg);
}
.view:hover .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,40deg);
}
.view .s1 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
}
</style>

<div id="grid" class="efek3">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-42_zpsdafa0f2c.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-59_zpseca64494.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-61_zpsdb575ed9.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-72_zps38b1ec95.jpg" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">   
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

DEMO

EFEK 4

<style>
.efek4{
position: relative;
overflow: hidden;   
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
}
.view .slice{
width: 60px;
height: 100%;
z-index: 100;   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;   
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;   
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;       
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {    padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(60px,0,0);
-moz-transform: translate3d(60px,0,0);
-o-transform: translate3d(60px,0,0);
-ms-transform: translate3d(60px,0,0);
transform: translate3d(60px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 {    background-position: -60px 0px; }
.view .s3 {    background-position: -120px 0px; }
.view .s4 {    background-position: -180px 0px; }
.view .s5 {    background-position: -240px 0px; }
.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {    opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view {
-webkit-perspective: 1050px;
-moz-perspective: 1050px;
-o-perspective: 1050px;
-ms-perspective: 1050px;
perspective: 1050px;
}
.view div {
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view:hover .s3{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-55deg);
}
.view:hover .s4{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,110deg);
}
.view:hover .s5{
-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
transform: translate3d(59px,0,0) rotate3d(0,1,0,-110deg);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view div.view-back{
background: #0a0a0a;
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
</style>

<div id="grid" class="efek4">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-97_zps3b3a4e9a.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-105_zps8ce46fb2.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-127_zps7e47399f.jpg" />
</div>
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Cewek/Women-131_zps131e9aa8.jpg" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">   
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

DEMO

EFEK 5

<style>
.efek5 {
width: 390px;
height: 558px;
overflow: visible;
}
.view {
width: 390px;
height: 558px;
margin: 0px;
float: left;
position: relative;
border: 8px solid #52e052;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.view .slice{
width: 196px;
height: 100%;
z-index: 100;   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;   
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;   
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;       
}
.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
z-index: 0;
background: #0a0a0a;
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {    padding-top: 20px; }
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;
}
.view .s3 {
-webkit-transform: translate3d(196px,0,0);
-moz-transform: translate3d(196px,0,0);
-o-transform: translate3d(196px,0,0);
-ms-transform: translate3d(196px,0,0);
transform: translate3d(196px,0,0);
}
.view .s1 {    background-position: 0px 0px; }
.view .s2 {    background-position: -196px 0px; }
.view .overlay {
width: 196px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {    opacity: 1; }
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view:hover .s2{
-webkit-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
-moz-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
-o-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
-ms-transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
transform: translate3d(195px,0,0) rotate3d(0,1,0,-45deg);
}
.view .s1 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
</style>

<div id="grid" class="efek5">
<div class="view">
<div class="view-back">
<a href="http://mas-andes.blogspot.com">&rarr;</a>
</div>
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/kellylin_zps6a730880.jpg" />
</div>
</div>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/modernizr.custom.69142.js"></script>
<script type="text/javascript">   
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js'],
nope: 'http://faceblog-evolutions.googlecode.com/files/fallback.css',
callback : function( url, result, key ) {
if( url === 'http://faceblog-evolutions.googlecode.com/files/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>

DEMO

Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halman yang di inginkan.
Ganti setiap URL gambar yang terdapat di markup HTML dengan gambar lain yang di inginkan.

3. Jika semua sudah sesuai, maka selanjutnya bisa klik Publikasikan.

Tambahan:
Agar bekerja secara maksimal dalam menerapkan langkah-langkah diatas saya rekomendasikan untuk download file dibawah ini terlebih dahulu.

Download

Intruksi:
Extract file hasil download.
Kemudian double klik.
Lalu keraskan volume speaker PC anda.
Enjoy *Salam Assololey

Membuat Sidebar Blog Dengan Efek Ribbon

Membuat Sidebar Blog Dengan Efek Ribbon – untuk menanggapi request dari dari mas Mubasir Alamsah maka pada tutorial ini saya kembali membahas tentang efek ribbon untuk sidebar blog. Efek ribbon pada tutorial ini berbentuk seperti yang dia cantumkan pada URL gambar yang terdapat di form komentar pada artikel yang berjudul membuat background dan border shadow pada sidebar blog dan membuat efek ribbon pada sidebar blog. Untuk menepati janji karena akan saya jelaskan didalam halaman posting, maka pada tutorial inilah saya uraikan untuk membuat efek ribbon tersebut. Bilamana ada yang suka memodifikasi maupun mendesain template blog mungkin efek ribbon ini juga bisa digunakan untuk melengkapi desain pada sidebar blognya. Untuk penerapan kode masih sama seperti pada tutorial yang sebelumnya. Untuk mengingat kembali agar tidak susah maka sekarang saya sertakan kembali penerapan atau cara memasangnya kedalam blog. Berikut adalah tutorial untuk cara Membuat Sidebar Blog Dengan Efek Ribbon.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini.

.main-inner .sidebar .widget h2 {
width:290px;
position: relative;
color: #fff;
padding: 10px 5px;
margin: 0;
left:-20px;
z-index: 100;
box-shadow: 0px 0px 3px #52e052;
background: #52e052;
font-size: 160%;
text-align: center;
text-shadow: #fff 0 -1px 1px;
font-weight: bold;
}
.main-inner .sidebar .widget h2:before {
content: ' ';
position: absolute;
left: 280px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #00cc00 transparent transparent #00cc00;
}
.main-inner .sidebar .widget h2:after {
content: ' ';
position: absolute;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #00cc00 #00cc00 transparent transparent;
}
.main-inner .sidebar .widget-content {
width:250px;
padding: 60px 5px 5px 5px;
margin-top:-60px;
position: relative;
box-shadow: 0px 0px 3px #999;
background: #000;
color: #fff;
font-size: 90%;
}
.main-inner .widget #ArchiveList {
margin: 0px;
}
.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

Keterangan:
Untuk warna bisa sesuaikan sendiri sesuka mungkin yang pas dengan warna template blog anda sehingga bisa serasi dan tercipta hasil yang maksimal.

3. Klik Template >> Edit HTML lalu paste diatas/sebelum kode ]]></b:skin> selanjutnya klik Simpan Template.

Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, agar lebih mudah maka bisa juga dilakukan dengan cara lain yaitu klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog.
Maka nantinya kode CSS diatas akan muncul secara otomatis terletak diatas/sebelum kode ]]></b:skin> yang terdapat di Edit HTML template blog.

Membuat Sidebar Ribbon Pada Blog

Membuat Sidebar Ribbon Pada Blog – ini merupakan versi kedua atau kelanjutan dari tutorial yang sebelumnya mengenai cara membuat efek ribbon pada sidebar blog. Sengaja tidak saya sertakan dalam satu halaman posting dengan tutorial sebelumnya, karena selain untuk menumbuhkan artikel posting dan menambah variasi widget juga tentunya untuk meningkatkan internal linking. Jika pada tutorial tersebut terdapat pita yang ada disisi kiri title widget maka pada sidebar ribbon ini tidak menggunakan pita, namun terdapat sudut lengkung yang berada disisi kanan title widget seperti yang terlihat pada gambar diatas. Untuk yang masih menggunakan template default blogger dan ingin menambahkan efek ribbon pada sidebar blognya bisa menggunakan cara ini untuk melengkapi blognya. Bagaimana langkahnya membuat sidebar ribbon pada blog? Maka berikut adalah tutorial cara penerapan dan Membuat Sidebar Ribbon Pada Blog.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini.

.main-inner .sidebar .widget h2 {
position: relative;
border-radius: 0px 50px 0px 0px;
color: #999;
padding: 10px 5px;
margin: 0;
left:-20px;
z-index: 100;
box-shadow: 0px 0px 3px #999;
background: #000;
font-size: 160%;
text-align: center;
text-shadow: #999 0 -1px 1px;
font-weight: bold;
}
.main-inner .sidebar .widget h2:after {
content: ' ';
position: absolute;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #444 #444 transparent transparent;
}
.main-inner .sidebar .widget-content {
padding: 60px 5px 5px 5px;
margin-top:-60px;
position: relative;
box-shadow: 0px 0px 3px #999;
background: #f1f1f1;
color: #000;
font-size: 90%;
}
.main-inner .widget #ArchiveList {
margin: 0px;
}
.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

3. Klik Template >> Edit HTML lalu paste diatas/sebelum kode ]]></b:skin> selanjutnya klik Simpan Template.

Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog. Selesai sudah dan sangat simple tentunya untuk Membuat Sidebar Ribbon Pada Blog, selanjutnya bisa dilihat hasilnya.

Membuat Efek Ribbon Pada Sidebar Blog

Membuat Efek Ribbon Pada Sidebar Blog – alhamdulillah setelah beberapa hari diberi nikmat untuk terbaring di tempat tidur akhirnya sekarang bisa jumpa kembali dan berblogging ria sekaligus menyapa sahabat dari dunia nyata maupun maya.
Oke langsung saja lanjut ke pokok bahasan. Jika pada tutorial sebelumnya sudah pernah membahas mengenai tentang bagaimana untuk membuat background dan border shadow pada sidebar blog maka pada tutorial ini bisa menjadi lanjutan dari tutorial tersebut untuk membuat efek yang berbeda khususnya pada judul widget yang terdapat di sidebar blog. Pada efek ribbon ini nantinya hanya terdapat istilahnya satu lipatan pita pada judul widget yang terdapat di sebelah kiri judul widget sidebar blog. Sengaja saya pasang satu pita karena mungkin jika menggunakan dua pita akan lebih memakan lebar sidebar dan efek tersebut nanti bisa kita bahas pada tutorial selanjutnya tanpa menggunakan pita agar lebih ringkas dan elegant. Untuk menerapkan efek ini kedalam blog, maka berikut adalah tutorial cara Membuat Efek Ribbon Pada Sidebar Blog.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

.main-inner .sidebar .widget h2 {
position: relative;
font-size: 1.5em;
font-weight: bold;
padding: 6px 20px 6px 71px;
margin: 0px 0px 5px -20px;
color: #555;
background-color: #999;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;
text-align:right;
}
.main-inner .sidebar .widget h2:before,
.main-inner .sidebar .widget h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
}
.main-inner .sidebar .widget h2:before {
width: 20px;
left: -20px;
top: 12px;
border-width: 20px 10px;
border-style: solid;
border-color: #999 #999 #999 transparent;
}
.main-inner .sidebar .widget h2:after {
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
.main-inner .sidebar .widget-content {
margin-top: -55px;
padding-top: 55px;
text-align: justify;
text-decoration: none;
border: 1px solid #999;
background: #f2f2f2;
box-shadow: 1px 1px 6px 1px #999;
}
.main-inner .widget #ArchiveList {
margin: 0px;
}
.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

Untuk warna background, font, dll silahkan bisa anda sesuaikan sendiri yang cocok dengan warna tema dari blog anda.

jQuery Slider Pink Style di Blog With CSS3

jQuery Slider Pink Style di Blog With CSS3 – ini merupakan tutorial kesekian kalinya untuk cara membuat slider di blog. Pada tutorial ini tentu sudah bisa dilihat dari judulnya, slider yang akan kita bahas untuk dipasang di blog atau lebih tepatnya pada widget blog nantinya akan berwarna pink. Namun biarpun begitu jika nanti mungkin anda ingin merubah menggunakan warna lain sebenarnya juga masih bisa, hanya dengan mengganti background gambar dengan mendesain gambar sendiri dan menggunakan warna yang anda inginkan. Untuk ukuran anda bisa mengatur sendiri untuk menyesuaikan dengan blog anda dan sebagai sample anda bisa mengambil dari tutorial ini sebagai contoh. Dengan membuat desain gambar sendiri maka nantinya slider yang akan anda pasang bisa menjadi lebih cocok dan serasi apabila di terapkan kedalam blog anda dan bisa contras dengan seluruh warna dari blog anda. Untuk melihat slider yang akan kita bahas pada tutorial ini anda bisa melihat demonya terlebih dahulu pada tombol button yang terdapat dibawah. Untuk menerapkan slider ini kedalam blog maka berikut adalah jQuery Slider Pink Style di Blog With CSS3 dan tutorial cara penerapannya kedalam widget blog.

DEMO

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<style>
#wrslider { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8Ixt5qHij1LP49RSSYbYzoixYwSF4F_IahQOUjoopIH-drJjpRSSTdIxCaS_sS712d70gE5K74GbEok-ZONAc9FtryJD9LaBBxTY7aDzEF7u3WkySVL8FL4oasUlKLtGO9pj9xbpn0qy/w960-h227-no/Faceblog+Evolutions+%25281%2529.jpg); height: 227px; overflow: hidden; position: relative; }
#mover { width: 2880px; position: relative; }
.slide { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }
.slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img { position: absolute; top: 20px; left: 400px; }
#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/startstop-slider.js"></script>

<div id="wrslider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Judul 1</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPiyRlDe5yj7e4TsFelYUd89bSSot0HDx4DiOhiWNJHdgh4zglHxbfbnHGI9gZFe0-uq66oWi7bPToFk92jSG-DrqVA62Hv4KQhm99zFrRuEModDPvAdu9Sey3KPcPrfYokxJnhhQPQCF/w434-h161-no/Faceblog+Evolutions+%25281%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 2</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdylkG6Ph72zlri5v47Oc8MBYMkeylsvNA3vDVMrexfxmfuFmMjyXkxoBCOr5aNKQthGme6l86mvyrLbpmSz3yvqcivb4UhqltUTKoQfbI5jonF2cx25aWZviGKTKzRIq38y3N4AHYRGI/w434-h161-no/Faceblog+Evolutions+%25282%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 3</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicyP2x0qdCk7YAL8EYMgAZ86A1Vb3S2YIngxqrBCK5lmx2ie-h02Yp8Hs9l1Lw3MJ_4ntMuNLvpadbESNxa3mQCu-6qGON5-Q-6blf6hQnUAhK9Sk41eQREJZwKMcJK-E6VoQNME8UYFZe/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>
</div>
</div>

Keterangan:
Ganti “http://mas-andes.blogspot.com” dengan URL halaman yang di inginkan.
Ganti judul, deskripsi maupun gambar dengan yang di inginkan.
Untuk ukuran lebar dan tinggi slider bisa anda atur sendiri dengan ukuran yang sesuai tamplate blog anda.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Tambahan: jika ingin menambahkan lebih banyak lagi yang ingin dimasukan kedalam slider maka anda tinggal menambahkan atau cukup dengan copy kode berikut ini:

<div class="slide">
<h1>Judul</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicyP2x0qdCk7YAL8EYMgAZ86A1Vb3S2YIngxqrBCK5lmx2ie-h02Yp8Hs9l1Lw3MJ_4ntMuNLvpadbESNxa3mQCu-6qGON5-Q-6blf6hQnUAhK9Sk41eQREJZwKMcJK-E6VoQNME8UYFZe/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>

Kemudian taruh diatas / sebelum kode </div> yang berwarna merah.

Membuat Efek Remote Linking Pada Gambar di Blog

Membuat Efek Remote Linking Pada Gambar di Blog – sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, dengan adanya hal ini link yang di inginkan dapat di custom agar pada link tersebut memiliki efek tersendiri yang nantinya akan nampak terlihat berbeda dari link-link lainnya yang ada. Efek Remote Linking Pada Gambar di Blog ini akan memungkinkan hover yang berbeda saat pada link tersebut tersorot oleh mouse. Secara langsung link dapat di atur sesuai dengan keinginan apabila pada link tersebut ingin kita jadikan sebagai remote yang nantinya apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halamannya. Pemasangannyapun juga sangat mudah dan tidak perlu edit HMTL sehingga anda tidak usah memasukkan kode kedalam template blog. Agar lebih jelasnya, berikut adalah tutorial untuk Membuat Efek Remote Linking Pada Gambar di Blog:

1. Login ke akun blogger.
2. Lalu copy kode berikut ini.

<style>
.remote{ position: relative; }
.remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
.remote a img{ width:125px; height:125px;}
.remote a:hover{ background: #ffefcd; }
.remote a .name{ font: 18px Georgia, Serif; }
.remote a:hover .name{ color: #900; font-weight: bold; }
.remote a:hover img{ border: 5px solid #52e052; margin: -4px; }
.remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; }
#img1 .photo{ top: 0; left: 0; }
#img2 .photo{ top: 0; left: 134px; }
#img3 .photo{ top: 134px; left: 0; }
#img4 .photo{ top: 134px; left: 134px; }
</style>

<div class="remote">
<a href="http://mas-andes.blogspot.com" id="img1">
<span class="name">Photo 1</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8RWGsD9Hac3s7KnkCeb4WZM3-drzYGQudTg9vyIAqF-Fp6fvbG3Zxk12l1c2DM9_q1_BE08LFbp9E2FQsMrs4XTgndJD62W02VGQA0Gs8xwpzs8s7qyUDlD9N4zqrxqbgvcarEtGkgEl/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img2">
<span class="name">Photo 2</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcH-aFN6a6sBNsyJDQMGW0-Rg_N3yRSDrm5tuCvuuWWrzdj4HEgwPYBAwFMrM6o5vl8p5HN1jr0K1BV0GyHY2mvkSxrP_kf42lv2BHb-d2IEsWhYbe1s5QccrMdcrJus2q6FUO8ROq90eK/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img3">
<span class="name">Photo 3</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3bagQ8t97KjLeWxLx3LIbVD-B_5fe9G06-VKD1dYdZIYyaGNDS-5UNj2QAcchJ8wQgiEJM9Ye8RYtd9qqSA5W3QDTrzxuH_0dPV5lp8igNBNUnJnMiwUWbM8XZ_UUeUhFvmnGlqGWbQI/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img4">
<span class="name">Photo 4</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDYWlE2bDqa_IoJJV8sgp942BZokMlM6FoORh3yVWvAbYYXNdnCmotxgvjrU7eRTYAd1A4hWwqSNd876Xfe2yZuHTXDnxeNFcGRzMgfewrk3mJDEEquxFpi9UAFnaj6ys2djV03YbkDFe/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
</span></a>
</div>

Keterangan:

Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL photo dengan gambar yang di inginkan.

3. Selanjutnya paste kedalam kolom posting mode HTML, kemudian bisa langsung klik Publikasikan.

DEMO:

Photo 1
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 2
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 3
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 4
Silahkan ganti dengan deksripsi teks yang di inginkan.