Dari Anda Untuk Anda: July 2014

Saturday, July 26, 2014

Kloning Blog

Berawal dari mencoba mengetikkan keyword "samsury sites" di google search engine, ternyata saya menjumpai hal yang lucu skaligus aneh. Ternyata ada seorang blogger dari Thailand yang mencoba kloning template blog saya dengan membuat domain yang hampir sama dengan domain blog ini. Saya ga kepikir sampai disitu kok bisa dia punya pikiran meniru blog ini dengan menggunakan Source Code Viewer maupun Inspect Element HTML. Ada 2 blog punya saya yang dia cloning yaitu blog utama ini dan blog demo pagenya. Dan yang lebih lucunya lagi dia tidak mengubah semua link yang ada di blog saya jadi otomatis dong direct ke blog aslinya.

Domain yang dia gunakan adalah

http://samsury--sites.blogspot.com/
http://samsury-sites1.blogspot.com
Cuplikan dari domain http://samsury-sites.blogspot.com

dan

http://sammary-demo.blogspot.com/
Cuplikan dari domain http://samsury-demo.blogspot.com

Untuk blogger yang ini saya ucapkan terimakasih sudah terinspirasi dengan blog ini, dan saran saya lebih baik meminta ijin dulu jika memang ingin meniru template blog ini dengan mengirimkan pesan pada contact form. Karena tindakan seperti ini tidaklah jauh beda dari seorang pencuri konten.

Tuesday, July 22, 2014

Modifikasi Tampilan Halaman Error 404

Modifikasi tampilan Halaman Error 404 - Sebuah kesalahan 404 adalah kode status HTTP yang berarti bahwa halaman yang Anda mencoba untuk mencapai pada sebuah situs web tidak dapat ditemukan pada server mereka. Secara teknis, sebuah Error 404 adalah kesalahan client-side, yang bisa berarti bahwa kesalahan adalah kesalahan Anda, baik karena anda mengetik URL yang salah atau halaman telah dipindahkan atau dihapus dari situs web. Kemungkinan lain adalah jika sebuah situs web telah pindah halaman atau sumber daya tetapi melakukannya tanpa mengarahkan URL lama ke yang baru.

Saya tidak membahas panjang lebar tentang penyebab kesalahan Error 404 namun saya hanya akan memberikan tutorial blog untuk memodifikasi halaman error page dengan benar dengan menambahkan sedikit CSS sebagai efek tampilan dengan gaya Flat Ui style.

Sebagai contoh tampilannya seperti dibawah ini :

DEMO Bisa lihat pada blog ini

Secara umum tag kondisional untuk halaman error blog adalah seperti ini:

<body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<h1>Pesan error 404 yang ingin anda sampaikan</h1>
</div>
</b:if>
</body>

Kemudian kita akan membuat tampilan halaman ini lebih menarik dengan menambahkan kode CSS seperti dibawah ini :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
#error-not-found{background: #34495e;font-family:'BebasNeueRegular';z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999}
.eror-page{background:#34495e;position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found 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}
#error-not-found h2.frame-1{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-1 span{-webkit-animation:blurFadeIn 1s ease-in 2s backwards;-moz-animation:blurFadeIn 1s ease-in 2s backwards;-ms-animation:blurFadeIn 1s ease-in 2s backwards;animation:blurFadeIn 1s ease-in 2s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-1 span:nth-child(2){-webkit-animation-delay:2s;-moz-animation-delay:2s;-ms-animation-delay:2s;animation-delay:2s}
#error-not-found h2.frame-1 span:nth-child(3){-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
.sp-circle-link{position:absolute;left:50%;bottom:100px;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#2c3e50;color:#c0392b;border:1px solid #2c3e50;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 4s backwards;-moz-animation:fadeInRotate 1s linear 4s backwards;-ms-animation:fadeInRotate 1s linear 4s backwards;animation:fadeInRotate 1s linear 4s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);-o-transform:scale(0.8) rotate(0deg);-ms-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#16a085;color:#fff;border:1px solid #16a085}
@-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 fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-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 fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-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 fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}

Untuk memanggil kode CSS diatas agar tampil saat halaman error 404 kita buat tag kondisionalnya seperti ini :

<body>
....................bla bla bla
<b:if cond='data:blog.pageType == "error_page"'>
<div class='container'>
<div id='error-not-found'>
<div class='eror-page'>
<div class='sp-globe'/>
<h2 class='frame-1'> <span> Page Not</span> <span>Found</span></h2>
<a class='sp-circle-link' expr:href='data:blog.homepageUrl'>HOME</a>
</div>
</div>
</div>
</b:if>
</body>

Silakan anda berkreasi sesuai selera anda dan semoga bermanfaat...

Wednesday, July 16, 2014

Contoh Simple Tab Menggunakan JQuery UI

Contoh Simple Tab Menggunakan JQuery UI - Masih berkelanjutan dengan artikel sebelumnya Random post efek modal jquery ui yang lebih atraktif menggunakan efek mengagumkan dari jquery UI. Berbagai efek menarik yang dihasilkan bisa kita gunakan untuk kostumisasi blog agar tampil lebih indah dan unik dengan contoh efek efek jquery ui.

DEMO

Anda cukup install Jquery UI pluginnya dan terapkan pada HTML seperti dibawah ini :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
</div>
</body>
</html>

Markup HTML diatas hanyalah contoh semata dan untuk pengembangan silakan anda kresaikan sendiri agar tampilan lebih maksimal dan mengagumkan tentunya.

Friday, July 11, 2014

Vertikal Menu UI Awesome

Vertikal Menu UI Awesome - Berbagai konsep ui yang dapat kita aplikasikan dalam design blog, mungkin akan sedikit mempercantik tampilan blog itu sendiri dengan nuansa yang berbeda sesuai gaya flat ui yang sedang berkembang saat ini. Sebagai contoh vertikal Menu Ui Awesome ini yang memakai sedikit balutan warna flat ui yang lebih berani seperti flat menu ui efek flip css3 dan kombinasi menu metro ui dan font awesome serta simple flat ui navigasi menu

DEMO

Komposisi yang kita gunakan :

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=ABeeZee);

/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}

.nav-list {
list-style: none;
}

.nav-item {
position: relative;
perspective: 1000px;
margin-bottom: 1px;
}

.nav-item:hover {
cursor:pointer;
}

.nav-label,
.nav-icon {
line-height: 3.5rem;
color: #fff;
}

.nav-label {
display: inline-block;
position: absolute;
left: 3.5rem;
transform-origin: 0% 50%;
padding-left: 1rem;
opacity: 0;
visibility: hidden;
backface-visibility: hidden;
transform-style: preserve-3d;
font-family: ABeeZee;
}

.nav-item:hover .nav-label {
visibility: visible;
opacity:1;
width: 175px;
animation-name: swing;
animation-duration: .7s;
animation-timing-function: ease;
}

.nav-icon {
display: inline-block;
padding: 0 ;
width: 3.5rem;
text-align: center;
}

.yellow .nav-icon {
background: #A200FF;
}

.yellow .nav-label {
background: #9300e8;
}

.sun .nav-icon {
background: #1BA1E2;
}

.sun .nav-label{
background: #1a99d7;
}

.blood .nav-icon {
background: #F09609;
}

.blood .nav-label {
background: #df8b08;
}

.purple .nav-icon {
background: #FF0097;
}

.purple .nav-label {
background: #e70089;
}

.blue .nav-icon {
background: #339933;
}

.blue .nav-label {
background: #2c852c;
}

@keyframes swing {

0% {
transform: rotateY(-90deg);
}

30% {
transform: rotateY(35deg);
}

65% {
transform: rotateY(-10deg);
}

100% {
transform: rotateY(0deg);
}
}

HTML

<nav>
<ul class="nav-list">
<li class="nav-item yellow">
<span class="nav-icon entypo-home"></span>
<span class="nav-label">Home</span>
</li>
<li class="nav-item sun">
<span class="nav-icon entypo-megaphone"></span>
<span class="nav-label">Announcements</span>
</li>
<li class="nav-item blood">
<span class="nav-icon entypo-docs"></span>
<span class="nav-label">Documents</span>
</li>
<li class="nav-item purple">
<span class="nav-icon entypo-cog"></span>
<span class="nav-label">Settings</span>
</li>
<li class="nav-item blue">
<span class="nav-icon entypo-lifebuoy"></span>
<span class="nav-label">Support</span>
</li>
</ul>
</nav>

Silakan bermain main dan berkreasi sesuai selera anda..!!!