Cara Buat Efek Splash Pada Blog (Tutorial)

-Preview-

buka blogger =>template=>edit HTML, lalu Copy paste CSS diatas kode ]]></b:skin>

.sp-container { 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 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1000; } .sp-container h2 { 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 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } .sp-container h2.frame-3 { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } .sp-container h2.frame-4 { font-size: 200px; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-5 { -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 { -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) { -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -ms-animation-delay: 10s; animation-delay: 10s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .sp-circle-link { 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 { 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; color: #fff; } @-webkit-keyframes tes{ 0%{ left:-2200px; } 100%{ left:0px; } } @-moz-keyframes tes{ 0%{ left:-2200px; } 100%{ left:0px; } } @keyframes tes{ 0%{ left:-2200px; } 100%{ left:0px; } } @-webkit-keyframes blurFadeInOut{ 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{ 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{ 0%{ opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut{ 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{ 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{ 0%{ opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -moz-transform: scale(1) rotate(0deg); } } @keyframes blurFadeInOut{ 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{ 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{ 0%{ opacity: 0; transform: scale(0) rotate(360deg); } 100%{ opacity: 1; transform: scale(1) rotate(0deg); } }

Setelah itu copy paste HTML dibawah kode </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='#'>http://dunialesmana.blogspot.com</a> <a class='sp-circle-link' href='#'>Open</a> </div> </div> </b:if>

 

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

<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>

  

Salam Sahabat,