Popular Post

Popular Posts

Recent post

Archive for 2012




Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda.
pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3(Codrops)(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain

Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri.


Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti:
-tombol open tidak dapat di klik.

Kenapa tidak bisa diklik?

Ada kemungkinan Jquery tidak aktif karena:
-ada jquery lain yang sama.
-ada js lain yang bentrok dengan jquery curtain.
-widget" external yang menggunakan Js.

Saya sendiri sebenarnya masih bingung,karena beberapa blog yang menggunakan template Shinobu oshino yang menggunakan JSplash effect ada yang tombolnya bisa di klik dan ada yang tidak.


Semula saya pikir itu karena masalah versi browser ataupun koneksi internet karena pemanggilan Jquery blum di load oleh browser.tapi setelah saya cek sendiri ternyata yang jadi masalah adalah jquery dibawah ini:




https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js

Saya mengecek dengan developers tools goggle chrome dan ternyata di beberapa blog ada yang bisa dan ada yang tidak,jadi menurut saya coba kamu download jquery diatas,dan upload di hostingan kamu.



hmm,ok deh langsung saja yang mau coba~


buka blogger =>template=>edit HTML


lalu Copy paste CSS diatas kode ]]></b:skin>


Setelah itu copy paste HTML dibawah kode </head>

terakhir,copy paste JQUERY di atas kode </head>

Atau...


copy paste di atas kode </body>





Untuk mengganti Url blog pada splash screenya,kamu cukup mengganti url blog ini.
http://shinobu-oshino-blogger-template.blogspot.com
*buka blogger=>template=>edit HTML


CSS

.sp-container {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}

.sp-content {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {

background: #85373b;/* By Johanes Dj - http://Djogzs.blogspot.com*/
color: #fff;/* By Johanes Dj - http://Djogzs.blogspot.com*/
}
/* By Johanes Dj - http://Djogzs.blogspot.com*/
@-webkit-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Johanes Dj - http://Djogzs.blogspot.com*/

@-moz-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/

0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}





HTML



<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>Loading</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>Welcome </span>
<span>To </span>
<span>My blog</span>
</h2>
<a class='sp-link' href='#'>http://shinobu-oshino-blogger-template.blogspot.com</a>
<a class='sp-circle-link' href='#'>Open</a>
</div>
</div></b:if>






Jquery


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>


sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

Splash Effect !


Hi !
Hari ini saya akan berbicara tentang "MENAMBAH WIDGET MUSIK DI BLOG"
Mungkin ini bisa Membuat BLOG anda menjadi ramai . . .
Berikut Cara-Caranya . . .
Tetapi sebagai pertimbangan buat teman-teman sebelum menambah lagu ke blog:
1. Blog akan menjadi lebih berat, sehingga waktu loading atau membuka halaman lebih lambat
2. Robot google tidak suka dengan blog yang berat loadingnya, jadi jika tujuan anda untuk optimasi seo maka jangan tambah atau pasang lagu di blog anda.

Buat yang tertarik pasang lagu di blog bisa lakukan prosedur berikut:
1. Buka situs layanan widet mp3 player online , gunakan link berikut mp3 mixpod
Klik tombol Sign Up untuk mendaftar menjadi member di mixpod
Setelah mengisi form pendaftaran , gunakan tombol Login untuk masuk ke member area (jika tidak bisa login silahkan cek email, biasanya ada link dari mixpod.com untuk verifikasi member)



Saya menganggap anda sudah login ke meber area
Di menu Bar Pilih Create Playlist
Di bagian tabulasi Add Music , pada kotak search ketik nama artis yang akan dicari lagunya , Klik Search
Pada search result akan muncul lagu-lagu yang bisa dipilih /dimasukkan ke palylist
Klik tanda plus (+) untuk menambahkan lagu ke dalam playlist
Tambahkan lagu sesuai kebutuhan (dalam contoh ini saya menambahkan sekitar 30-an lagu ke playlist.


Di Preview player akan terlihat deretan lagu yang telah terpilih

2. Di bagian tabulasi Save Playlist
Pilih Genre musik , dan isi tag musik
Klik Tombol "Save and Get Code"


2. Copy kode html yang tersedia untuk platform Blogger

3. Logn ke account blogger anda
Pilih Dashboard -> tata letak -> elemen halaman
Pilih Tambah Gadget

memasang lagu di blog
4. Pilih html/java script

widget lagu untuk blog
5. Masukkan kode yang anda perleh dari website layanan lagu online ke kotak teks html/javascript
Klik Simpan
widget music
6. Buka blog anda, jika sukses maka akan muncul widget mp3 player di blog anda. Untuk memulai lagu anda bisa tekan tombol play seperti di winamp. Contohnya bisa dilihat di bawah ini






MusicPlaylistView Profile
Create a playlist at MixPod.com



Jika ingin memasang widget mp3 di atas ke blog teman-teman, bisa copy script di bawah ini

<embed src="http://assets.mixpod.com/swf/mp3/mixpod.swf?myid=87812059&path=2012/01/20" quality="high" wmode="window" bgcolor="222222" flashvars="mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" width="410" height="311" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:410px;height:311px;" /><br><a href="http://www.mixpod.com/playlist/87812059"><img src="http://assets.mixpod.com/images/btn2-tracks.gif" alt="Music" title="Get Music Tracks!" border="0"></a><a href="http://www.mixpod.com" target="_blank"><img src="http://assets.mixpod.com/images/btn2-create.gif" alt="Playlist" title="Create Your Free Playlist!" border=0></a><a href="http://www.mixpod.com"><img src="http://assets.mixpod.com/images/btn2-profile.gif" alt="View Profile" title="View all my playlists!" border="0"></a><br />Create a <a href="http://mixpod.com">playlist</a> at <a href="http://mixpod.com">MixPod.com</a>

Catatan:
Untuk mengubah ukuran widget mp3 player di atas agar sesuai dengan ukuran sidebar blog, ubah nilai 410 dan 311 .

Cara Menambah Widget Musik Di Blog

Selamat PAGI/SIANG/SORE/MALAM guys . . .  Hari ini saya akan memberikan Beberapa Widget Hewan peliharaan untuk blog kalian masing-masing !
Silahkankan "COPAS" script dibawah ini sesuai keinginan kalian !


Fish/Ikan


<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Hamster
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>

Tree Frog/Kodok
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/treefrog.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/treefrog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Dog/Anjing
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object>

Turtle/Kura-kura
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Saya hanya mengambil script hewan yang bisa diberi makan untuk selebihnya kalian bisa mengunjungi situs penyedianya

Untuk pemasangan ikuti langkah-langkah berikut
  1. Login  ke akun blogger kalian
  2. Pilih Rancangan >> Klik Elemen Laman >> Klik Tambah Widget/Gadget
  3. Kemudian pilih HTML/JavaScript
  4. Tentukan salah satu hewan peliharaan kalian, lalu copas code di bawah nama hewan ke kolom konten dan isi kolom judul dengan nama yang kalian inginkan. Kolom judul dikosongkan juga boleh.
  5. Terakhir klik Simpan/Save dan lihat

- Copyright © 2013 iFawwaz Blog - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -