Showing posts with label Css. Show all posts

4.30.2013

Cara Membuat Kotak Komentar Blog Keren

04:04:00 By Unknown 0 komentar
Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya



  • Login ke akun blogger dan masuk ke Edit HTML
  • Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga
  • Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 

/* CSS Komentar */ #form-wrapper {margin-top:20px;} #comments{overflow:hidden;} .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34); border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;} #comments h4{display:block;padding:5px;line-height:30px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;} #comments h4,.comments .user a{font-size:14px} #comments h4{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid; border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0} h4#comment-post-message {display:none} #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;} .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px} .comments .comments-content .comment:first-child {padding-top: 0px;} .comments .thread-toggle { display: none;} .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;} .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;} .comment-thread{color:rgb(230, 230, 230); font-size:13px;} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);} .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px; max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px} .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative; transition: all 1s ease-out 0s;} .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .comment-thread {margin: 20px 0px;} .comments .comments-content .icon.blog-author{display:block; width:0; height:0; border:13px solid transparent; border-right-color:rgba(255, 0, 0, 0.1); position:absolute; right:-1px; bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; } .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40); font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black; text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);} .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;} .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);} .comments .comments-content .loadmore {margin-top:0px;} .comment .continue{display:none} #comment-editor{width:103%!important;} .comment-form{width:100%;max-width:100%;margin-top:20px;}
Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

 Selamat mencoba dan semoga bermanfaat.. Description: Cara Membuat Kotak Komentar Blog Keren Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Membuat Kotak Komentar Blog Keren

4.25.2013

Membuat buku tamu Panel Slide Vertikal jquery

16:19:00 By Unknown 0 komentar
Membuat buku tamu Panel Slide Vertikal jquery, dengan ini akan memudahkan kita untuk saling sapa dengan para bloger lainya. Memang kita di susahkan dengan berbagai macam cara yang unik untuk menampilkan buku tamu itu sendiri. Nah, sekarang ini gue akan buat artikel tentang cara membuat Buku Tamu Slide Vertikal Dengan Jquery yang akan tampil jika  diKlik.

Contoh hasil bisa Anda lihat seperti disamping ini :

Caranya membuatnya sebagai berikut :
Login di blogger Anda
    * Masuk ke Dasbor
    * Pilih Tata Letak / Rancangan Dan Edit HTML
    * Klik "Expand Template Widget"
    * Jangan lupa untuk memback-up template anda terlebih dahulu :

1. Cari code : ]]></skin>
Sisipkan code berikut di Atas-nya : 
   
.panel2{
position:fixed;
top:20px;right:0;
background:#000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border:1px solid #940000;
width:350px;height:350;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;display:none;
padding:10px 60px 10px 30px}

.panel2 p{
color:#ffffff;
margin:0 15px 0 0;
padding:0}

.panel2 a,.panel2  a:visited{
color:#940000;
text-decoration:none;
border-bottom:1px solid  #9FC54E;
margin:0;padding:0}

.panel2 a:hover,.panel2  a:visited:hover{
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
margin:0;padding:0}
     
a.trigger2{
position:fixed;
text-decoration:none;
top:50px;right:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana,helvetica, arial,sans-serif;color:#fff;
font-weight:700;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq04v-t4UR6nHR9beVgZxZJ2NUR0j0RsZIzb5BmythZh24V7KDLOJmYDLK_sF2AbdfDt1YyRRCZ0B-30ZD0ukR4jYAA_z6GR7zcu_StMdLbEc7jAIA3hIOjQkhh1bJ4fR9_IRRCqJUD4/)85% 55% no-repeat;
border:2px solid #940000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
display:block;padding:10px 35px 10px 10px}
     
a.trigger2:hover{
position:fixed;
text-decoration:none;
top:50px;right:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana,helvetica, arial,sans-serif;color:#fff;
font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-F4mxbbkeJsz6XhO1OQo07i8aL0a4jkeQJfyDirOdcunJX5IK6cxabnLhEo1Vg7Smdo7qeGHtLjWpASPgC93kJOCPkiZR47EOjVupredvv4ZKesRI77DWUgd0MT59SaBY6CkP0BawAz0/) 85% 55% no-repeat;
border2px solid #940000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
display:block;padding:10px 40px 10px 10px}

a.active.trigger2{
background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-F4mxbbkeJsz6XhO1OQo07i8aL0a4jkeQJfyDirOdcunJX5IK6cxabnLhEo1Vg7Smdo7qeGHtLjWpASPgC93kJOCPkiZR47EOjVupredvv4ZKesRI77DWUgd0MT59SaBY6CkP0BawAz0/)85% 55% no-repeat}
.columns2{clear:both;width:330px;line-height:22px;padding:0 0 0 20px}

a:focus{outline:none}
.panel2  img{
background-color:#262626;
border:1px solid #333;
float:left;margin:3px 3px 6px 8px;
padding:5px}

.panel2 h3{
border-bottom:1px solid silver;
margin-bottom:5px;
padding-bottom:3px;
text-align:left;
clear:both;color:#FFF;
font-size:12px;
font-weight:700}
2. Cari code : </head>
Sisipkan code berikut di Atas nya :
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script  type='text/javascript'>
$(document).ready(function(){
$(&quot;.triger2&quot;).click(function(){
$(&quot;.panel2&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return  false;
});
});
</script>

3.  Selanjutnya cari code :  </body>
 Dan masukan code berikut di Atas-nya juga :
<div  class='panel2'>
<h3>Buku  Tamu</h3>
<=  Isikan dengan Buku Tamu Anda =>
</div>
<a  class='triger' href='#'>SHOUT</a>
. Warna yang di block hijau, bisa anda ganti Alamat Buku Tamu ( shout box ) milik anda.
. Selamat mencoba, dan semoga berhasil . . . Description: Membuat buku tamu Panel Slide Vertikal jquery Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat buku tamu Panel Slide Vertikal jquery

Menu Sidebar Melayang

15:44:00 By Unknown 0 komentar
Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery, untuk Conoth bisa di lihat tampilan scrensot blog Postingan ini.

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>



/* Starts Menu Sideabr Jquery melayang by mazzpuji.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvRCDmW7V6PEP5a7bWxStK7zMkMnFNJv0SmdOYbZDKmjRv8m1IeqS60zDviC5WOJdGqiktisaxM9_M1Tysrde-6ozfCMOWjF7KuCLknXVcFoxRDdi5RfLrUfcbyjrpYQG7BoyX3mszoY/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_i4f1gS8Zm8klyCkV6RvgzQ7J7xan-21bYSHLWUeN9_NFVUbME125POp8hUOSbeaQRck-g_lQNakO5DE2WzmbWGR6jeiULwqz5b9WaxZL7qDMRPIWIa1sJ4k3b9R94vwJw-EDdrgKkqE/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcd3iGEbI7l0TwiYMK4h8jSWnLqLiwAavjnz2Y0uhIXLR5ITMOkYDT7_bAtmmdztlDSTb_2CKorOT6R9jkfpVDR1jwU7NHD4hEOD5uSPes-KDxSo6aDrO5tYPs1QCI6wvZr4btrUyckc/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hSDwdwX2lvRhqv8UU_VNLbwRN1heTghKlMp29dmnk_UgHt1PC43d-zIqb-1gHpNNxlR1VZNWpWv16mFJmE2cNaQgcy9SIeZP2Vv1FHk1P72Hb-9WTZsTdT27NvAzriSVdiP48OwH_Uw/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FGSXuHMWJVc0dbdPAxR6oDnKKISV3VAHYmWTU0FVoNbE9MwSWlR5KnRi59wG1JD9LH78A4K8ETj-CmO0jqxDCIj1xTFpWgdKa4HWJbP8UA-sPdnvK6yTQUaB0893x7gLO9wW_vjiU2I/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDISwv6qgc1ir8SqOGJds01c0j0E0H6klaGowZ4wsbqXjI38LB9Hoe_p2ts0yMinYl_ImE4lO6oJg2UXO_VNXqbp4Eqef-pSVlvUFYYTJ4TDLIhbwihV8A8x3qY5Zx2dovdU5oo_Dm6I/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7xtX4jCtecmYEr0pIZMCtERhvF2wX7cCu-_KTt69FbxB_isyDoRfyUSAdKI2n_CN6MEZ1e_KNCxtUTx7C5tM5lzq2UNZrvu9C7FrxqA5FfWenlUISQVt8t4Ol3-JbubJQ5BPLRUi4CA/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYK9myjRt1eZnj3xEtjlKJeY4KT3gdbI8A8Fqx2ylCQX3TZQ_2_z38xZJEdEDRNKvsUm-Xc4Nf9Gj5Pb9VjC9-UgalX_UkJIwKeBeaJAK3vJjeI5fT-yTMCjepRDLSqQfnpNr-bXA8fig/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnaEXP4MiAnRP1yZgvoy-zmB8An6v2AUpmlTxEs4jRQiDTAImYJhG9ArCGpv4nxyfRMIoPOlpE6I5fR-LEjmH6HwUvLvpqzp1MOWymtOhAKuNtOpJ3z89NATdjAAfvPGOpkvrvhc4RxR0/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by tutorialbelajarblogger.blogspot.com End*/

3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);
}
);
});
</script>

4. Klik Simpan Template

5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:

<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='mazzpuji.blogspot.com' title='Home'></a></li>
<li class='about'><a href='mazzpuji.blogspot.com' target='_blank' title='About us'></a></li>
<li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://fb.com/oktri.darmadi' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/oktri.darmadi' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/xgen' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>
#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)Description: Menu Sidebar Melayang Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menu Sidebar Melayang

Menu Social Button Melayang

15:37:00 By Unknown 0 komentar

Sekedar Berbagi Informasi karena ada teman yang bertanya bagaimana membuat social Button di sebelah kanan pada blog! 
Langsung masuk aja ke tutorial cara membuat social button Melayang, 
  • Buka Template > Edit HTML > Expan Template Widget
  • Cari kode ]]></:bskin>
  • Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>
/* social button http://tutorialbelajarblogger.blogspot.com*/
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzLBktM_aO3t9A2iJqspL1rFumLEA6MuJchkn6Nt_IwhotX7zK496XtIx2Y4JnLFfanoRZ3w6dtXLfU8Yoml79NhaqQBDn7OILWBk9wW3oFNcin_0kVORd0oBoS1eFC2cUoW2gD9xNz0/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-moz-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-webkit-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
Langkah terakhir, pasang Script dibawah ini diatas tag </body>
<div class='staticbar'>
<div class='login'>
<div id='rt-login-button'>
<a class='loginbtn buttontext' href='http://blogger.com' rel='nofollow' target='_blank' title='Login Blogger'>
<span class='desc'>Blogger Login</span></a>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-twitter-btn' rel='nofollow' title='Twitter Belajar Blog'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-facebook-btn' rel='nofollow' title='FacebookTutorial Blog'>
<span> Facebook Fanspage</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Tutorial Blog'>
<span>Circle Me On Google Plus</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-rss-btn' rel='nofollow' target='_blank' title='RSS Belajar Blog'>
<span>Subscribe to RSS Feed</span></a>
</div></div></div>
Selamat Mencoba .. . Happy BloggerDescription: Menu Social Button Melayang Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menu Social Button Melayang

4.24.2013

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

16:35:00 By Unknown , 1 komentar
Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode </head>
5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>
 <style>#mazzpuji img{float:right;
background:#2b2b2b;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
border:2px solid #2b2b2b;
box-shadow:1px 1px 20px #000;
-moz-box-shadow:1px 1px 20px #000;
-webkit-box-shadow:1px 1px 20px #000;
margin:0px;
-o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,
-o-transform 1.5s ease-out 1s,opacity 2s ease-in;
-moz-transition:margin 1.5s ease-in 2s,
-moz-transform 1.5s ease-out 1s,opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s,
-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in}
#mazzpuji img:hover{
opacity:0.6;
-o-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-moz-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-webkit-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-o-transition:margin-left 0.5s ease-in 0.4s,margin-top 0.5s,
-o-transform 0.5s ease-out 1.4s,opacity 3s ease-in 4s;
-moz-transition:margin 1.5s ease-in 0.4s,
-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
-webkit-transition:margin 1.5s ease-in 2.4s,
-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
box-shadow:1px 1px 15px #33F;
-moz-box-shadow:1px 1px 15px #33F;
-webkit-box-shadow:1px 1px 15px #33F;
}</style>
6. dan sobat klik save / simpan template.
Langkah selanjutnya untuk penenpatan gambar dalam postingan.
1. Sobat harus menambahkan kode  <div id="mazzpuji"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:
<div id="mazzpuji">
<a href="http://http://mazzpuji.blogspot.com/2013/04/cara-membuat-gambar-berputar-dan.html/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAz-qZ-2A1ZbwYcOFr-eSwvkPG0ROIiBmyr_2lsmmHv2dF8KWXyiQnrD5mrlHnRRgITpSaXjfr864Dpvj1XH98hLRqHvwZEfIN-hvVufd_JSswB4Jo6nkJ7d16nTxL6806nMZ2ojikMP_/s200/naruto+dont+copy.png" /></a></div>

keterangan:
  1. kode berwarna merah adala kode pembuka dan penutup
  2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
  3. Setelah semuanya selesai klik publikasikan. 
Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".
Semoga bermanfaat Sobat.
Description: Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Widget Slide Panel With CSS & jQuery Effect

16:02:00 By Unknown , 0 komentar
Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :
<style type="text/css">
/*
Visit: http://mazzpuji.blogspot.com/
*/
#paneloktri {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('.tombolpanel').click(function() {
          $('#panel').slideToggle('slow');
          $('.tombolpanel span.in').toggle();
     });
});
</script>
<div id="paneloktri">
<div id="panel">

... ISI KONTEN DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Open Panel</span>
<span class="in" style="display:none;">Close Panel</span>
</div>
</div>

 5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.Description: Widget Slide Panel With CSS & jQuery Effect Rating: 4.5 Reviewer: Unknown - ItemReviewed: Widget Slide Panel With CSS & jQuery Effect

4.17.2013

BackGround Transparan Dan Animasi Di Profile

16:20:00 By Unknown 0 komentar
"Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3 Transition". He ... he ... nih .... doicomunity berlagak pintar. Nulis pakai bahasa Inggris, he ....! Benar nggak, ya, teks di atas?! He ... eh ... biar saja,dah. Kata orang gila: "Orang yang takut berbuat maka tak akan pernah bisa! Orang yang takut berbuat salah, maka berarti orang tersebut tak pernah mau mencoba dan melakukan." He ... he ... itu cuma kata orang gila. Jadi bagi yang waras dan sehat jangan pernah ikutan. 'ntar jadi ikutan gila!

Menampilkan sebuah background image dengan efek transparansi disertai animasi di widget Profile blogger-blogspot pasti akan jadi sesuatu yang menarik untuk di buat. Sesuatu yang baru dan sepertinya belum pernah ada dan di coba. Hayo .... siapa yang berani mencoba (biar ikutan gila!)? Sampeyan bisa melihat tampilan baru widget profile dengan backckground-image yang menggunakan efek transparansi dan animasi CSS3 Dengan Gaya Baru.
Cara membuat Background Image dengan Efek Transparansi dan Animasi di Profil Blogger

  • Login ke blogger.
  • Setelah halaman dasbor terbuka, silahkan, KLIK link "Design/Rancangan". Tunggu beberapa saat hingga halaman baru terbuka.
  • Lanjutkan dengan KLIK link "Edit/HTML".
  • Setelah sampeyan melihat kode html di template blog, cari kode CSS yang seperti di bawah ini :
/* Profile
--------------------------------- */
.profile-datablock {
margin-top: 3px;
margin-$endSide: 0;
margin-bottom: 5px;
margin-$startSide: 0;
line-height: 140%;
}
.profile-textblock {
margin-$startSide: 0;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 10px;
margin-bottom: 5px;
margin-$startSide: 0;
border:4px solid #e8b;
}
Tentu saja kode di atas mungkin tidak sama dengan kode CSS di template sampeyan. Yang terpenting, yang perlu dihapus dan diganti dengan kode CSS yang baru adalah semua kode CSS yang berupa syntax dengan bentuk seperti ini :
.profile {
.....
.... dst
}
Jika sampeyan menemukan kode yang di awali dengan .profile { ...., maka silahkan hapus saja. Jika ragu untuk melakukannya, sampeyan bisa buat sebuah blog baru untuk melakukan percobaan. Gunakan saja ID yang sudah ada untuk membuat blog percobaan melalui halaman dasbor. Di sini ada link "Buat blog". KLIK untuk membuat blog baru sebagai tempat melakukan segala eksperimen desain!
Ganti kode-kode CSS di atas dengan Kode CSS berikut ini.
#Profile .widget-content {
position: relative;
margin: 20px auto;
width: 200px;
height: 245px;
padding: 5px;
background: #666666;
background: -moz-linear-gradient(top, #111, #eee);
background: -webkit-gradient(linear, left top, right bottom, from(#111), to(#eee));
text-align: center;
border: 2px solid #888;
text-shadow: 1px 1px 1px #000;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
#Profile .widget-content img.profile-img {
display: block;
float: none;
margin: 10px auto;
opacity: 1.0;
-o-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-webkit-transition: 2s ease-out;
}
#Profile .widget-content span {
position: absolute;
top: 15px;
left: 0px;
width: 210px;
height: 265px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Lu_wfy3YrbrjEMzyCe-hxUqWT4PRPPg5A1GMguB7_y143RSZdmTxYC4qDZHcn4Pm29TzvYvigRL7KuXwwxXE6di5jLm5NwFRglvQMnldQV_Dbhno2o-ymcDilE0JEkTrtCdcHM8ja8/s400/Pemandangan-3.jpg) center center no-repeat;
opacity: 0.4;
-o-transition: all 0.7s ease-in 1s;
-moz-transition: all 0.7s ease-in 1s;
-webkit-transition: all 0.7s ease-in 1s;
}
#Profile .widget-content:hover span {
opacity: 1.0;
height: 1px; /* original code by: doicomunity.blogspot.com */
border-bottom: 6px solid #888;
-o-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
-moz-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
-webkit-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
}
#Profile .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
#Profile .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
#Profile .widget-content a.profile-link {color: #99CCFF; font-size: 14px;}
#Profile .widget-content a.profile-link:hover {color: red;}
    KLIK"SAVE/Simpan Template", kemudian buka blog untuk melihat hasil perubahan pada profil sampeyan.
Description: BackGround Transparan Dan Animasi Di Profile Rating: 4.5 Reviewer: Unknown - ItemReviewed: BackGround Transparan Dan Animasi Di Profile

4.16.2013

Cara Membuat Energi Saving

23:52:00 By Unknown 0 komentar
Untuk Anda Yang Memerlukan Energi Saving
Silahkan Ikutti Langkah Langkah Dibawan Ini :

Cara Menggunakan Kode Energy Saving Mode dengan CSS3
Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi).
Setelah semua tertulis dengan benar, klik "Login".
Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
Design/Rancangan : Cari dan klik "Edit HTML".
Edit HTML : Amankan template terlebih dahulu (back-up templates).
        KLIK Download Template Lengkap.
        Simpan file Template di folder PC.
        Kembali ke halaman "Edit HTML".
Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya!
Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!
Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.
SAVE Templates/Simpan Template : KLIK SAVE Templates.
Buka blog untuk melihat hasilnya!

Kode CSS Energi Saving


* SAVING*/
*, body .saving{
margin:0;
padding:0;
}
body .saving {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 3px solid transparent;
    height: 100%;
    left: 0;
    opacity: 0.98;
    position: fixed;
    top: 0;
    transition: all 3s ease-in-out 10s;
    width: 100%;
    z-index: 999999;
}
body:hover .saving {
    background: none repeat scroll 0 0 #0A7F01;
    border-bottom: 5px solid #333333;
    height: 0.001%;
    opacity: 0;
    transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
}
body .saving p.esm1 {
    background: none repeat scroll 0 0 transparent;
    border: 30px solid transparent;
    border-radius: 20px 20px 20px 20px;
    color: #FF0000;
    font-family: "Serif",Times New Roman;
    font-size: 100px;
    font-weight: bold;
    line-height: 20px;
    margin: 200px 0 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-shadow: 0 0 2px #CCCCCC, 0 -5px 4px #FFFF33, 2px -6px 6px #FFDD33, -2px -8px 9px #FF4400, 2px -10px 10px #FF1100;
    transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;
    width: 92%;
}
body:hover .saving p.esm1 {
    background: none repeat scroll 0 0 #AAAAAA;
    border: 20px solid #888888;
    border-radius: 170px 170px 170px 170px;
    color: red;
    font-size: 10px;
    margin: 340px 0 0 300px;
    padding: 25px;
    transform: translate(600px, -500px) rotate(360deg) scale(0.2);
    transition: font 1.1s ease 0.1s, width 1.3s ease 0.4s, margin-left 0.8s ease 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in 0s;
    width: 25%;
}
.saving p span.esm2 {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #333333;
    border-radius: 0 0 0 0;
    color: #0000FF;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: normal;
    margin: -10px auto;
    opacity: 0.5;
    padding: 2px 8px;
    text-align: center;
    text-shadow: none;
    transition: all 1s ease-out 0s;
    width: 300px;
}
.saving:hover p span.esm2 {
    font-size: 10px;
    padding: 0;
    width: 200px;
}
.saving p span.esm3 {
    background: -moz-linear-gradient(center top , #666666, #111111) repeat scroll 0 0 transparent;
    border: 1px solid #333333;
    border-radius: 4px 4px 4px 4px;
    color: #CCCCCC;
    display: block;
    font-family: "Tahoma",Arial,Helvetica;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    margin: 10px auto;
    opacity: 0.6;
    padding: 2px 10px;
    text-shadow: 1px 1px 1px #000000;
    width: 250px;
}
.saving .by_Doi-Comunity {
    bottom: 30px;
    color: #015828;
    font-size: 12px;
    font-weight: normal;
    height: 20px;
    left: 0;
    margin-left: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.saving .by_Doi-Comunity span.esm4 {
    color: #AAAAAA;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
}
/* END SAVING*/

Kode xHTML Energy Saving

<div class='saving'><p class='esm1'>Dervira Comunity<br/><span class='esm2'>Energy Saving Mode Using CSS3</span><br/><br/><span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p><div class='by_DoiComunity'>Copyright * Feb 2012 * <span class='esm4'>DerviraComunity.blogspot.com</span> - All rights reserved</div></div>
Description: Cara Membuat Energi Saving Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Membuat Energi Saving
Subscribe to: Posts (Atom)