Cara membuat Splash Effects di blog dengan kod CSS
Assalamualaikum..
Dah 5 hari penatnya aku edit blog dengan pelbagai benda yang aku guna, dan bermacam-macam ayat yang aku guna untuk cari tutorial. Fuhh! Akhirnya, siap juga blog kesayanganku nie.. Hehe.
Orait! Aku malas nak cakap banyak-banyak, nanti korang bosan plak kan.. Kita balik kepada tajuk asal entri hari ini. Haa, hari ini aku nak ajar korang untuk buat Splash Effects di blog dengan kod CSS. Korang tau tak ape Splash Effects tuh? Okay-okay, jom kita tengok demonya kat sini --> http://demo-splash-effects.blogspot.com/
Jadi, dah tengok demonya? Apa lagi, jom kita start!
1. Login akaun blogger korang.
2. Pergi ke Template -> Klik butang Edit HTML -> Lastly klik butang Proceed plak.
3. Cari kod ]]></b:skin> dengan menggunakan kekunci CTRL + F. Sebelum nak cari kod tuh, korang mesti Expand Widget Templates dulu ya..
4. Bila dah jumpa, salin kod CSS kat bawah nie..
Dah 5 hari penatnya aku edit blog dengan pelbagai benda yang aku guna, dan bermacam-macam ayat yang aku guna untuk cari tutorial. Fuhh! Akhirnya, siap juga blog kesayanganku nie.. Hehe.
[+] Klik untuk dapatkan tampilan yang lebih jelas |
Jadi, dah tengok demonya? Apa lagi, jom kita start!
1. Login akaun blogger korang.
2. Pergi ke Template -> Klik butang Edit HTML -> Lastly klik butang Proceed plak.
3. Cari kod ]]></b:skin> dengan menggunakan kekunci CTRL + F. Sebelum nak cari kod tuh, korang mesti Expand Widget Templates dulu ya..
4. Bila dah jumpa, salin kod CSS kat bawah nie..
.sp-container {/* Posted By Qimie Mohamad - http://pengembara-awan.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 {/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* Posted By Qimie Mohamad - http://pengembara-awan.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 {/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* Posted By Qimie Mohamad - http://pengembara-awan.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 {/* Posted By Qimie Mohamad - http://pengembara-awan.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 {/* Posted By Qimie Mohamad - http://pengembara-awan.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) {/* Posted By Qimie Mohamad - http://pengembara-awan.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) {/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* Posted By Qimie Mohamad - http://pengembara-awan.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 {/* Posted By Qimie Mohamad - http://pengembara-awan.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;/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
color: #fff;/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
}
/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
@-webkit-keyframes tes{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
@-moz-keyframes tes{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@keyframes tes{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.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{/* Posted By Qimie Mohamad - http://pengembara-awan.blogspot.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Paste kod tersebut di atas kod ]]></b:skin>.
5. Lepastuh, korang salin kod HTML nie then letak kod nie betul-betul dekat bawah kod </head>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<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='#'>Pengembara Awan - Demo /Splash Effects</a>
<a class='sp-circle-link' href='#'>Open</a>
</div>
</div></b:if>
6. Akhir sekali, korang salin kod jQuery nie pulak then letak kod nie dekat atas kod </head> ataupun dekat atas kod </body>. Mana-mana pun boleh..
7. Preview dulu sebelum korang nak Save Template, dan kasi puas hati dulu, sama ada ia okay atau tak. Kalau dah okay, atau sesuai, barulah korang boleh Save Template.
<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;
$(".sp-circle-link").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".sp-container").stop().animate({top:'-2200px'}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".sp-container").stop().animate({top:'-2200px'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>
Susah jugak kan nak buat Splash Effects nie kan? Jadi, dengan tutorial yang aku ajar nie, korang bolehlah guna untuk cantikkan blog korang atau pun apa-apa lah kan.. So, harap ia berguna untuk korang. Jadi, Gud Luck ya!!
Assalamualaikum..
0 orang pengomen yang tercomel ! :
Welcome to my paradise. I hope you all supported my blog and enjoy with my posted!
Followers
Contact Form
Labels
- Aidilfitri 2013
- apa itu Phonebloks
- assign jobs
- badan berkecai
- Berita dan macam-macam...
- Blog Pengembara Awan
- Blog Pengembara Awan Aidilfitri
- buat duit online
- Budak kantoi onani
- cara nak buat long shadow
- daftar assign jobs
- Download
- downloads
- efek long shadow
- Facebook bakal disekat
- facebook graph search
- gambar private Facebook
- hujan meteor
- jquery
- Kemalangan maut 1 syawal
- kemalangan maut di temerloh
- long shadow
- main mercun
- Malaysia sekat Facebook
- menyayat hati
- mercun gergasi
- meteor 2013
- onani di cyber cafe
- onani di pagi raya
- pejuang islam
- perseid shower
- Phonebloks
- Salam Aidilfitri
- scrollbar menarik
- scrollbar percentage
- scrollbar percentage dengan jquery
- search engine
- Selamat Hari Raya
- siapa heyreddin barbarossa
- smartphone
- Template blog baru
- tengok gambar private
- Tips dan Triks Menarik
- Tutorial Blog
- Tutorial Photoshop
- Wajah baru
- wakil khalifah islam
Popular Posts
-
Assalamualaikum dan salam sejahtera.. Tadi, masa aku dok syok layan Facebook, tetiba ada satu video, yang terpampang di wall Facebook, di...
-
Assalamualaikum dan salam sejahtera. Sebelum tuh, aku nak minta maaflah sebab jarang-jarang update sepanjang penggal 2 minggu nie. Aku bu...
-
Assalamualaikum dan salam sejahtera. [ + ] Klik untuk dapatkan tampilan yang lebih jelas. Fuhh! Agak lama aku tak posted.. 2 mingg...
-
Assalamualaikum dan salam sejahtera semua.. Dalam kumpulan penggodam antarabangsa Anonymous telah melancarkan #OPIsrael, aku baru dapat b...
-
Assalamualaikum dan salam sejahtera.. Bila dah berbulan-bulan tak update, sekarang dah masuknya cuti akhir tahun. Jadi, pada masa nie lah...
-
Assalamualaikum dan salam sejahtera.. [+] Klik untuk dapatkan tampilan yang lebih jelas. Hari ini, aku berkesempatan jugak untuk pos...
-
Assalamualaikum dan salam sejahtera semua. Whoo.. Excited gila aku nak buat tutorial Photoshop buat kali yang pertama. Hehe.. Korang maca...
-
Assalamualaikum dan salam sejahtera. Maaf sangat kepada korang semua yg selalu sudi datang ke blog Pengembara Awan nie.. Maaf lah sebab l...
-
Assalamualaikum dan salam sejahtera.. Korang mesti selalu layari laman web Facebook nie kan? Dan kalau dah layari, mesti lah ada akau...
-
Assalamualaikum dan salam sejahtera semua. GIVEAWAY FOR FOLLOWERS! Apa khabar semua? Sihat tak? Hehe. Aku sihat-sihat jak.. Hmm, ini...
statistics
Google Plus
Facebook
Twitter
Share this Post
Ads 1
Ads 2
./ Qimie Mohamad @ Qimie
./ Islam
./ Orang Pahang
./ 14 Januari 2000
./ Masih Belajar
./ Have a nice day!
Ads 2
Contributors
Powered by Blogger.
Post a Comment