Effect Zoom Gambar MouseOver

Assalamualaikum Wr. Wb.

Jumpa Lagi pada kesempatan yang berbahgia ini Mantab's Blog sendiri akan berbagi masalah Tutorial Blog untuk sobat semua kali ini saya sendiri memposting masalah Cara Membuat Effect Gambar Membesar Saat Disentuh Mouse , effect zommer ini memang adalh cara mempercantik dan memperindah blog sangat banyak sekali tips atau cara karena dengan ada tutorial yang demikian blog kita akan terlihat indah atau bagus, emang sich tutorial ini sangat banyak di internet terutama blogger, Efect zommer ini adalah satu tips agar gambar di blog membesar pada saat di sorot mouse, jika gambar ukuran small maka dengan ada efect zoom ini gambar akan membesar pasti keren lo ... seperti blog saya sendiri yang telah saya pasang

Nah, Penasaran Kan ,Oke langsung pada pembahasan atau cara ...

1. Login ke akun blogger sobat.
2. Pilih Template
3. Pilih Edit HTML >> Lanjutkan >> Kasih centang "Expand Template Widget".
4. Cari kode ]]></b:skin> untuk mempermudah gunakan F3 atau Ctrl F.
5. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); } 

Demikian yang bisa saya share dan sobat bisa  lihat hasilnya.Semoga postingan saya kali ini tentang Cara Membuat Effect Gambar Membesar Saat Disentuh Mouse dapat bermanfaat.

Sumber : http://djal-destar.blogspot.com/2013/03/cara-membuat-effect-gambar-membesar.html

More√

Memberi Effect Bergerak pada Tulisan dan Gambar di Blog

Yap , Assalamualaikum Wr. Wb.

Maaf baru update karena banyak kesibukan dan mood yang kurang dalam mengerjakan blog ini :D

Kali ini singkat saja yaak , saya mau memberi sedikit script untuk tulisan dan gambar agar bergerak :3
Contoh tulisan awalnya seperti ini ...

Lalu bisa di tambahkan script di bawah ini ~___~ :

<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()  { $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Ntar jadinya yaa kayak seperti ini deh :3

Bingung jelasinny , kalo gambar emang sulit di bedain :D
Kalau mau liat Live Preview aja langsung yaak :3 di http://rijalul.id-fb.com 

Sekian tutor singkat dari saya , apabila kurang jelas bisa contact info saja yaak :D
Wassalamualaikum Wr. Wb.

More√

Pasang Music di Blog

Music Player yang satu ini dapat ditampilkan pada blog tanpa mengganggu tampilan blog secara keseluruhan. Hanya dengan menampilkan Musik Player ini akan menggangu tampilan judul blog. Maksudnya, walaupun telah diatur judul blog akan berganti dengan judul postingan, jika dipasang Music Player ini yang tampil hanya judul/title blog.
Kelemahan lainnya, music Player ini tidak dapat menerima seluruh alamat/url MP3, terutama dari hosting gratisan seperti Ziddu.com maupun 4shared.com.
Sementara ini, admin menggunakan file mp3 yang disimpan pada Google site yang ternyata dapat berfungsi dengan baik.
Bagi anda yang ingin menampilkan Music Player dari SCM MusicPlayer dan tidak memiliki URL/alamat MP3 yang dapat diterima oleh SCM Music Player, terlebih dahulu anda harus menyimpan file MP3 ke Google Site. Caranya buka UPLOAD FILE JS DI GOOGLE SITES

Setelah memiliki file MP3 yang disimpan pada Google Site, ikuti tips berikut ini :

1. Buka Situs SCM Music Player
2. Pada halaman awal anda dapat memilih skin/tampilan dari Music Player.
   
   
   
   
   
   Klik tombol Next setelah memilih skin.


3. Halaman selanjutnya anda diminta untuk memasukkan judul lagu berta URL/alamat lagu pada format yang tersedia. Url bisa melalui pada saat kita mendownload lagu , ataupun bisa melewati YOUTUBE. 
   
   
   
   
   
   Anda dapat memasukkan lagu dengan jumlah sesuai koleksi file MP3 yang anda miliki (tidak dibatasi)
   Klik tombol Next setelah anda selesai memasukkan judul dan URL lagu yang ingin ditampilkan.


4. Pada langkah ketiga, anda dapat mengatur penampilan Music Player sesuai keinginan.
   
   1. Auto Start, pilih yes agar begitu blog dibuka musik akan langsung bermain.
   2. Shuffle Playback boleh anda pilih yes atau no
   3. Default Volume, pilih volume berapa yang anda inginkan.
   4. Placement of Player Bar, anda pilih sesuai letak yang diinginkan untuk menampilkan . Sebaiknya pilih bottom agar tidak terlalu menggangu tampilan blog.
   5. Show Playlist by Devault : pilih no. Jika anda memilih yes akan mengganggu tampilan blog.
   6. Setelah selesai dengan pengaturan diatas, klik tombol Done.
      


5. Langkah terakhir, silahkan anda copy script untuk menampilkan Musik Player, kemudian masukkan pada blog anda.
   

CARA MEMASUKKAN MUSIC PLAYER DARI SCM KEDALAM BLOG

1. Masuk Dasbor blog anda.
2. Pilih Rancangan - Elemen Halaman.
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukkan script yang anda copy tadi pada kolom yang tersedia
6. Simpan.

Read more: http://epg-studio.blogspot.com/2012/04/pasang-musik-dari-scm-music-player.html#ixzz2O5I23wPB

More√

Thread Comment CSS Keren

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tutorial kali ini, insyaAllah saya akan kembali membagikan kode CSS untuk dua modifikasi threaded comment blogger. Modifikasi berikut terhitung sebagai versi ke-3 dan ke-4 threaded comment yang pernah saya posting diblog ini, karena sebelumnya saya sudah pernah membagikan dua modifikasi yang berbeda.

Saya sematkan kata menarik dan keren pada modifikasi threaded comment kali ini bukan tak beralasan, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan berlaku bagi anda pecinta warna. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS border.

Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:

Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini

CARA MENAMBAHKAN KODE CSS MODIFIKASI THREADED COMMENT

• Setelah login ke akun blogger anda
• Pada dasbor klik Template --> edit HTML
• Klikk Ctrl+F dan cari kode ]]></b:skin>
• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

KODE CSS THREADED COMMENT MENARIK VERSI 3

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

KODE CSS THREADED COMMENT KEREN VERSI 4

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Untuk demo bisa lihat pada blog personal saya disini. Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Sumber : http://www.tipstrikblogging.com/2013/02/dua-modifikasi-threaded-comments-yang.html

More√