^ WoNg 3 CONNECTION ^

Sunday, July 1, 2012

Kotak Komentar WP di Blogspot,Mau?

setelah sekian lama surving mencari2 kotak komentar yang keren,eh akhirnya nemu nich,dan langsung saya terapkan di blog saya.

silahkan koment untuk melihat demonya di bawah blog ini,asal jangan ngasih link hidup...ok....!!!

singkat kata singkat cerita,langsung aja begini tutornya....

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

/* Comments
----------------------------------------------- */
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(http://wong3connection.16mb.com/Blogwong3/kotakkomentar/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://wong3connection.16mb.com/Blogwong3/kotakkomentar/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

Langkah 3
Setelah itu taruh kode dibawah ini diatas kode </body>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://wong3connection.16mb.com/Blogwong3/kotakkomentar/comment%20(1).js' type='text/javascript'/>
<script src='http://wong3connection.16mb.com/Blogwong3/kotakkomentar/emoticon_wp2.js' type='text/javascript'/>
</b:if>

Langkah 4
Langkah ini merupakan langkah penerapan Emoticon, jika sobat tidak ingin memasang emoticon pada komentar sobat maka hiraukanlah langkah ini.
Cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>
dan letakkan kode berikut dibawahnya

Yang berwarna Merah merupakan lebar wadah emoticon, jadi sesuaikanlah dengan lebar blog sobat

Langkah 5
Lalu cari kode

<b:includable id='comments' var='post'>
kode yang harus di ganti
</b:includable>

Jadi diantara kode di atas ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti dengan kode dibawah ini

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMg-MMZnKJexcNP3HK_X8ngS6F3B8j7xKcCDcbn2QETbny5lOaDavZVLELNqZc7J92aWOazJa4gEa1zLyju1TNi72lKfx5wwbUBAVz7vlNGo_DiYEU3OfrEXoOy-7FkulFCRhy6E4ilaU/s1600/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

ingat yah letakkan tepat di tenganya seperti ini

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='http://wong3connection.16mb.com/Blogwong3/kotakkomentar/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>

cari tulisan __BlogID__ dan ganti tulisan tersebut dengan BlogID sobat,tanpa tanda "__"
Contoh Blog ID saya : 3277483951230554109

Langkah 6
Kemudian cari kode seperti dibawah ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Biasanya ada 4 kode yang serupa dengan kode di atas, maka dari itu ganti semua kode tersebut dengan kode ini

<b:include data='post' name='comments'/>

langkah Terakhir
Klik Simpan Template

Saran : Upload semua file JS ke hosting anda.

Box Dengan Efex Gelap Terang (Fade Effect) CSS3

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.

Kode CSS Box Terang Gelap

.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

xHTML

<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</div>

xHTML dengan tag p

<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</p>

Cara membuat Box dengan Efek Terang - Gelap
Login ke Blogger
Dasboard
Design (Rancangan)
Edit HTML
Cari kode ]]></b:skin>
Letakkan kode CSS di atas kode ]]></b:skin>
Klik Save Template
Gunakan xHTML di halaman posting atau di sidebar blog.

DEMO

Photo masa kecilku ketika main petak umpet kemudian tiba-tiba kebelet e'ok!

Simple jQuery Tooltip

Menggunakan tooltip disamping berguna untuk membuat tips dalam blog bisa diatur agar terlihat lebih maksimal, di sisi yang lain bermanfaat untuk membuat blog lebih keren serta terlihat profesional. Anda dapat menggunakan tooltip sederhana yang hanya menampilkan teks hingga yang lebih kompleks dengan kemampuan menampilkan teks, URL dan image. Tentu saja azas manfaat harus diperhitungkan. Menggunakan tooltip dengan kode css atau javascript terlalu berlebihan tentu tak akan tak ada untungnya jika penggunaanya tidak maksimal. Ya..., karena semakin banyak javascript atau kode lain digunakan maka beban loading juga akan terus bertambah.

Setelah memperbandingkan dan mempertimbangkan, membuat tooltip dengan jQuery adalah pilihan terbaik yang mungkin dilakukan. Melalui jQuery berbagai desain menarik lainnya (selain tooltip) dapat dengan mudah dibuat tanpa perlu kode atau script tambahan yang berderet-deret dengan beban yang berkilo-kilo. ya..., ini adalah satu nilai lebih jQuery yang hingga detik ini belum mampu ditandingi oleh javascript manapun.

Cara membuat Simple jQuery Tooltip

1.Login ke Blogger
2.Beberapa saat setelah login anda akan menjumpai Halaman Dasbor (Dasboard)
3.Pilih dan klik Rancangan (Design).
4.Pilih dan klik Edit HTML.
5.Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template), simpan file template di folder PC. Jika terjadi kerusakan tempate akibat beberapa penambahan atau pengurangan kode, gunakan Browse dan Upload yang ada didekatnya, maka template (blog) akan pulih kembali seperti sebelum perubahan dilakukan.
6.Cari kode

(gunakan Ctrl + F). Latakkan kode CSS di atasnya.
7.Cari kode
kemudian letakkan javascript di bawahnya.
8.Klik Simpan Template (Save Template).
Gunakan class="GRtipz" pada tag a untuk menampilkan tooltip. Lihat contohnya pada box xHTML.

JAVASRIP

XHTML

Catatan/Keterangan:

Untuk merubah ukuran font dan tebal font, lakukan perubahan nilai pada font-size:13px; dan font-weight:600;.
Nilai font-size: 10px, 11px, 12px, 13px atau 14px;
Nilai font-weight: normal, bold, bolder, 400, 500, 600, 700 atau 900
Anda ingin cara yang lebih praktis dan tinggal pasang? Kode yang sudah terupload di file hosting? Jika ini yang anda mau, silahkan gunakan yang ini!

CONTOH
^ WoNg 3 CONNECTION ^

Dengan javascript di atas, anda tak perlu lagi menggunakan kode CSS. Langsung saja tulis xHTML anda agar tooltip segera terlihat!
Jika dalam blog anda sudah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js maka anda tak perlu lagi menambah jQuery yang sama dari tutorial ini!

Flux Slider Css3 Dan Jquery Buat Blog

Flux slider adalah slider gabungan dari CSS3 Dan Jquery ini slider keren banget menurut saya karena efeknya itu beuh keren banget memang kalau Css3 dan Jquery bertemu semua jadi Luar binasa hahahaha ada Efek 3D nya juga loh slider Flux ini keren dah pokoknya tapi kalau browser anda tidak support Css3 maka akan ada teks peringatan bahwa browser anda tidak support css3.

1. Masukan script di bawah ini di atas kode </head>

2. Masukan css di bawah ini di atas kode </b:skin>

#slider {

padding:5px;

margin: 0 auto 15px;

}

#slider > .fluxslider {

margin: 0 auto !important;

border: 3px solid #999;

background: #C9C9C9;

padding: 0 0 10px 0;

max-width: 99% !important;

overflow: hidden

}

#slider .pagination {

list-style:none outside none;

padding:5px !important;

}

#slider .pagination li.current {

background-color: dimGray

}

#slider .pagination li {

cursor: pointer;

display: inline-block;

margin-left: 0;

background-color: silver;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

height: 8px;

text-indent: -10000px;

width: 8px;

-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)

}

#transitions {

overflow:hidden;

}

#transitions ul {

float:left;

list-style:none outside none;

padding:0;

width:33%;

}

#transitions ul#trans2D {

text-align:right;

}

#transitions ul li {

margin:0 10px;

}

/* Css Teks Warning jika browser anda tidak support css3*/

#warn {

font-weight:bold;

text-align:center;

}

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

</div>

CATATAN
Jika anda ingin menambahkan gambar usahakan gambarnya itu semuanya berukuran sama misalnya 400 x 200 Maka semua gambar harus berukuran seperti itu agar terlihat lebih rapi karena jika tidak maka slidernya akan terlihat berantakan, dan seperti yang saya bilang slider ini gabungan dari css3 dan jquery jadi jika slidernya diam yah berarti browser anda tidak support css3.

Cara Membuat Blockquote Dengan CSS3

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog sampeyan? Adakah manfaatnya?

Blockquote bukanlah "gadis yang jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag spesial yang sebenarnya amat pantas dipakai ini, ya? Oho ... atau barangkali tak begitu kenal dengan blockquote? Atau kalian merasa antipati terlebih dahulu? Ataukah sampeyan ketularan blogger lain yang jarang menggunakan blockquote? Heh... heh.... Coba rasakan betapa mudah dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting, lhoh! Sampeyan tak perlu membuat tag baru untuk melakukan itu. Cukup blockquote! Dan tampilannya? Hoooohoooo coba lihat saja yang ini!

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!

Kode CSS

blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in; 
}
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);
}

Cara Menyimpan Kode CSS

Login : Login kee Blogger.
Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
Tuliskan "Password (Sandi)".
KLIK "Login".
Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
Design/Rancangan : Cari dan klik link Edit HTML.
Cari kode ]]>. Letakkan dan simpan semua kode CSS tepat di atasnya.
KLIK SAVE Templates/Simpan Template.
KLIK link Posting.
KLIK Entri Baru/New Entry.

Gunakan blockquote untuk melakukan posting. Sampeyan bisa menggunakan contoh di bawah ini.

Buka hasil posting di halaman blog untuk melihat hasilnya.

Contoh bentuk kode untuk posting

Silahkan di copy untuk percobaan!

test

bloquet

Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!

The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover.

In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.

Leding images

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

tooltip

This is a link This is GRinlinetips inline teks GRinlinetips ini diperlihatkan disebelah kanan nama-link yang kita gunakan (This is a link)!
Select All

Loading

Welcome To My blog