tag:blogger.com,1999:blog-87834368950900911892024-02-27T06:43:15.412+00:00SAHABAT BLOGGER 77Berbagi Pengetahuan Seputar Tutorial Blog | Informasi Umum | Kehidupan SosialDevyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.comBlogger263125tag:blogger.com,1999:blog-8783436895090091189.post-73127533508919345262015-07-02T16:35:00.002+01:002015-07-02T16:56:35.775+01:00Content Box With Menu Flip Out Title<div style="text-align: justify;"><span style="font:bold 14px Verdana,sans-serif">Content Box With Menu Flip Out Title</span> - Tanpa saya jelaskan secara rinci, pastinya sahabat semua pecinta <b>SAHABAT BLOGGER 77</b> sudah mengenal apa itu content box dan fungsinya. Pekerjaannya sama seperti <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/01/membuat-format-tulisan-dengan-text-area.html" target="_blank" title="Membuat Format Tulisan Dengan Text Area"><strong>Membuat Format Tulisan Dengan Text Area</strong></a>. Box bisa kita fungsikan sebagai kotak persegi atau sebagai wadah untuk kita menuliskan beberapa content informasi. Tujuannya untuk memberikan keterangan bahwa isi content dalam box tersebut <b>PENTING</b> untuk diketahui, atau bisa juga kita gunakan untuk memberikan tanda pada beberapa tulisan, sehingga bentuk dan tampilannya banyak saya desain dengan berbagai model pilihan seperti ini:<br />
<br />
<div id='wrap'><button id="button" title="Open Collection"><span>Open box here</span></button><br />
<div id="dialog-back" class="hidden"></div><div id="dialog" class="hidden"><div id="dialog-close" title="Close"></div><h1>Content Box Collection</h1><span><br />
<ul><li><a href="http://sahabatblogger77.blogspot.com/2015/01/2-desain-tampilan-blockquote-info.html" title="2 Desain Tampilan Blockquote Info" target="_blank">2 Desain Tampilan Blockquote Info</a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/02/amplop-surat-design-model-untuk-teks.html" title="Amplop Surat Design Model Untuk Teks" target="_blank">Amplop Surat Design Model Untuk Teks</a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/01/konten-light-box-dengan-tombol-on-off.html" title="Konten Light Box Dengan Tombol On Off" target="_blank">Konten Light Box Dengan Tombol On Off</a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2014/10/membuat-pesan-informasi-dengan-blockquote.html" title="Membuat Pesan Informasi Dengan Blockquote" target="_blank">Membuat Pesan Informasi Dengan Blockquote</a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/03/membuat-formulir-informasi-untuk-teks.html" title="Membuat Formulir Informasi Untuk Teks" target="_blank">Membuat Formulir Informasi Untuk Teks</a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/03/border-list-animasi-dengan-keyframes-infinite.html" title="Border List Animasi Dengan Keyframes Infinite" target="_blank">Border List Animasi Dengan Keyframes Infinite</a></li>
</ul></span><br />
</div></div><br />
Dan masih banyak lagi yang selengkapnya bisa Anda cari dalam <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2013/12/daftar-menu-artikel-blog-sahabat-blogger.html" target="_blank" title="Daftar Menu Blog"><strong>Daftar Menu Blog</strong></a>. Untuk tampilan content box kali ini saya buat dengan gaya terbaru. <b>Content Box With Menu Flip Out Title</b>, dimana konsepnya saya desain menyerupai widget <span style="color:red;font:bold 14px Verdana,serif">RELATED</span> <b>Post</b> dengan thumbanail seperti gambar berikut:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-w2ddatLsedM/VZVVjrkUkzI/AAAAAAAACDc/m0NI6e3Sjjw/s1600/content-box.png" imageanchor="1"><img alt="Content Box Widget" src="https://1.bp.blogspot.com/-w2ddatLsedM/VZVVjrkUkzI/AAAAAAAACDc/m0NI6e3Sjjw/s1600/content-box.png" title="Content Box With Menu Flip Out Title" /></a></div><br />
<style>
#wrap {margin:0 auto;max-width:800px}
#button > *,#dialog > * {-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;-moz-transition:-webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;-ms-transition:-webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;-o-transition:-webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;transition:transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s}
.nocontent > * {opacity:0}
#button {position:relative;padding:.5em 1.3em;font:inherit;color:#fff;text-shadow:1px 2px 3px #111;text-transform:uppercase;font-weight:700;background:#DC143C;border-radius:2px;box-shadow:inset 0px 0px 10px #999;cursor:pointer;overflow:hidden;-webkit-animation:button-in 2s;-moz-animation:button-in 2s;-ms-animation:button-in 2s;-o-animation:button-in 2s;animation:button-in 2s}
#button.hidden {visibility:hidden}
#button.animated {-webkit-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-moz-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-ms-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-o-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;transition:transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s}
#button:focus {outline:none}
#button:before {content:'';background:#DC143C;position:absolute;top:50%;left:50%;width:10em;height:10em;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-animation:buttonb-in 2s;-moz-animation:buttonb-in 2s;-ms-animation:buttonb-in 2s;-o-animation:buttonb-in 2s;animation:buttonb-in 2s;z-index:-1;border-radius:50%}
#dialog-back {position:fixed;top:0;left:0;width:100%;height:100%}
#dialog-back.hidden {pointer-events:none}
#dialog {box-shadow:10px 10px 6px #999;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%;max-width:430px;height:100%;max-height:240px;background:#DC143C;box-sizing:border-box;border-radius:2px;color:#fff;padding:15px}
#dialog a {color:yellow;font-size:14px}
#dialog a:hover {color:#fff}
#dialog.hidden {visibility:hidden}
#dialog.notrs {-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;transform:none}
#dialog.animated {-webkit-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-moz-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-ms-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;-o-transition:-webkit-transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s;transition:transform 1s cubic-bezier(0.2, 0.3, 0, 1) 0s, opacity 1s cubic-bezier(0.2, 0.3, 0, 1) 0s}
#dialog #dialog-close {cursor:pointer;position:absolute;top:0;right:0;margin:5px;width:24px;height:24px;background:#FFFF00;border-radius:50%;box-shadow:inset 0px 0px 10px red}
#dialog #dialog-close:before,
#dialog #dialog-close:after {content:'';position:absolute;top:12px;left:12px;background:#000;width:12px;height:2px;-webkit-transform:translate(-50%, -50%) rotate(-45deg);-moz-transform:translate(-50%, -50%) rotate(-45deg);-o-transform:translate(-50%, -50%) rotate(-45deg);-ms-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg)}
#dialog #dialog-close:after {-webkit-transform:translate(-50%, -50%) rotate(45deg);-moz-transform:translate(-50%, -50%) rotate(45deg);-o-transform:translate(-50%, -50%) rotate(45deg);-ms-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg)}
</style><br />
<script>
jQuery.fn.onTransitionEnd = function(fn) {
this.on('webkitTransitionEnd oTransitionEnd transitionend', fn);
return this;}
jQuery.fn.offTransitionEnd = function(fn) {
this.off('webkitTransitionEnd oTransitionEnd transitionend', fn);
return this;}
var raf = function(i){setTimeout(i,1)};
$(document).ready(function(){
function anim(a,b){
$(a).addClass('nocontent').onTransitionEnd(anim0);
$(b).addClass('notrs').addClass('nocontent');
function anim0() {
$(a).offTransitionEnd(anim0);
var start = $(a)[0].getBoundingClientRect();
var end = $(b)[0].getBoundingClientRect();
var etop = end.top + (end.height / 2) - (start.height / 2);
var eleft = end.left + (end.width / 2) - (start.width / 2);
console.log(start,end);
$(b).removeClass('notrs').removeClass('hidden');
var trs = {
tx: start.left - eleft,
ty: start.top - etop,
sx: start.width / end.width,
sy: start.height / end.height
}
var trsx = "translate(" + trs.tx + "px," + trs.ty + "px)" +
" scale(" + trs.sx + "," + trs.sy + ")";
$(b).css({
transform: trsx
});
$(a).addClass('hidden');
raf(function(){
$(b).addClass('animated');
raf(function(){
$(b).css({
transform: ""
}).onTransitionEnd(end);
function end() {
$(b).removeClass('nocontent').removeClass('animated').offTransitionEnd(end);
}
});
});
}
}
$("#button").click(function(){anim("#button","#dialog");});
$("#dialog-close").click(function(){anim("#dialog","#button");});
});
</script><br />
<br />
Apa jadinya jika dalam content box kita sisipkan beberapa menu LABEL seperti itu, menarik bukan.? konsepnya mudah, disini saya menyiapkan 4 gambar dengan link menu yang nantinya akan kita letakkan disebelah kiri box content, jika ingin menambahkan menu lagi nanti bisa Anda modifikasi sendiri, kodenya seperti ini:<br />
<br />
<style>.ss1 {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid #DC143C;text-align:left}</style><br />
<div class="ss1">nav .home a {background:#e84c3d url(<span style="color: orange;">URL-Gambar</span>) no-repeat center center}<br />
nav .home a:hover:after {border-left:2px solid #d82a1a}<br />
nav .home a:after {background:#e84c3d;content:"<span style="color: #6fa8dc;">HOME</span>"}<br />
<br />
nav .bT a {background:#1dd1ae url(<span style="color: orange;">URL-Gambar</span>) no-repeat center center}<br />
nav .bT a:hover:after {border-left:2px solid #17a489}<br />
nav .bT a:after {background:#1dd1ae;content:"<span style="color: #6fa8dc;">BLOGGING TIPS</span>"}<br />
<br />
nav .mN a {background:#3598db url(<span style="color: orange;">URL-Gambar</span>) no-repeat center center}<br />
nav .mN a:hover:after {border-left:2px solid #217dbc}<br />
nav .mN a:after {background:#3598db;content:"<span style="color: #6fa8dc;">MENU NAVIGASI</span>"}<br />
<br />
nav .sT a {background:#f5c700 url(<span style="color: orange;">URL-Gambar</span>) no-repeat center center}<br />
nav .sT a:hover:after {border-left:2px solid #c29e00}<br />
nav .sT a:after {background:#f5c700;content:"<span style="color: #6fa8dc;">SEO TRICK</span>"}</div><br />
<br />
Yang perlu Anda lakukan untuk menyusun dan menempatkan menu itu agar sejajar dengan <b>BOX</b> adalah nilai posisi pada elemen <acronym style="color:#e06666; cursor:pointer;font:bold 13px Courier,Monospace" title="Kode Apa ini?">display:flex-box</acronym> (atur dan sesuaikan), lalu kita beri sedikit sentuhan hover pada menu dengan <acronym style="color:#e06666;cursor:pointer;font:bold 13px Courier,Monospace" title="Kode Apa ini?">flip out effect</acronym>, sedangkan untuk menampilkan title menu kita atur dengan CSS <span style="color:indigo;font:bold 13px Courier,Monospace">transform:rotateY(180deg) translateX(80px)</span> dengan nilai <span style="color:green;font:bold 13px Courier,Monospace">content:"nama menu"</span>. Dan hasilnya :<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/04/design-navigasi-ease-out-system.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
Sangat mudah bukan.!, bagaimana sahabat mau mencoba box informasi seperti tampilan diatas, cukup salin kode dibawah ini, lalu letakkan diarea postingan Anda, selengkapnya seperti ini:</div><br />
<div class="ss1"><style type="text/css"><br />
.text {<br />
padding:10px 5px 5px 100px;border:2px solid #666;<br />
border-left:0;margin-top:-18px;width:75%;height:313px;overflow:auto}<br />
nav {position:absolute;top:60px;left:-40px}<br />
nav ul {margin:0;padding:0;list-style:none}<br />
nav li {margin:0;padding:0;height:80px;width:80px}<br />
nav a {<br />
position:relative;z-index:100;color:#fff;font-size:20px;width:100%;<br />
height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;<br />
display:flex;-webkit-box-pack:center;-webkit-justify-content:center;<br />
-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;<br />
-webkit-align-items:center;-ms-flex-align:center;align-items:center;<br />
-webkit-perspective:1000px;perspective:1000px;<br />
-webkit-perspective-origin:center top;perspective-origin:center top}<br />
<br />
nav a:after {<br />
content:"";font-size:13px;display:-webkit-box;display:-webkit-flex;<br />
display:-ms-flexbox;display:flex;-webkit-box-pack:center;<br />
-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;<br />
-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;<br />
align-items:center;position:absolute;z-index:-1;left:0;text-align:center;<br />
top:0;height:100%;width:100%;<br />
-webkit-transform:rotateY(180deg) translateX(80px);<br />
transform:rotateY(180deg) translateX(80px);<br />
-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;<br />
transform-origin:100% 50%;-webkit-transition:-webkit-transform .5s ease-out;<br />
transition:transform .5s ease-out;-webkit-transform-style:preserve-3d;<br />
transform-style:preserve-3d;-webkit-backface-visibility:hidden;<br />
backface-visibility:hidden}<br />
<br />
nav a:hover:after {transform:rotateY(0) translateX(80px);text-shadow:1px 2px 3px #111}<br />
nav .home a {background:#e84c3d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphAhcaCW-l7X_9FjczUZKI_jQv82hU7PL389ttn7Q-dOlq_lPO0sygOl5aSz2kcpko-vUN8uibcF4ExdDMr9m_XxthDMFV6RN-T4DvIVo6hQuia0xA-v5dvU4bLs9VAjJOPos3dAA-FA/s80/sb77-image2.png) no-repeat center center}<br />
nav .home a:hover:after {border-left:2px solid #d82a1a}<br />
nav .home a:after {background:#e84c3d;content:"HOME"}<br />
<br />
nav .bT a {background:#1dd1ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7P867t8zXRJoXHEHA6v1qmHXJRZBG6Gv3t09Wy7YmtohiC4hVyTL6Fo44AOqKXFV0OKmhCKTMBte0L6NZ2V6axKPokfg8W_OtYZwI-ykR5IkK_SkSbCupM8Iv3fW5JmesFvhgeIzjSVU/s80/sb77-image3.png) no-repeat center center}<br />
nav .bT a:hover:after {border-left:2px solid #17a489}<br />
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}<br />
<br />
nav .mN a {background:#3598db url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3ci1FY7rZEsV_MCITAfnrTnVspFvKjRpSYLqyLJb6NsRxodSAAlk_IB8Hu11uXRGUP_qtdpTJMNRIKBvJEbksUCXl4MXV_NoDa9ltdIcMqr6IUTdaKQJknuC-E_HgwZBWLVoj_dQpIE/s80/sb77-image7.png) no-repeat center center}<br />
nav .mN a:hover:after {border-left:2px solid #217dbc}<br />
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}<br />
<br />
nav .sT a {background:#f5c700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYpOh6JcjGBTU5Te5rkaPH9MX4fZ12AsVpknvN9dgx_8gI9omPjLDC9Zp3UShJ-mfqaCOzshxO3bhRjopqlcziDnXMWqYhdUFcFTWlzB68BmjvO-NChV77_AOP-sr5dWHTdLOB_Rjdms/s80/sb77-image8.jpg) no-repeat center center}<br />
nav .sT a:hover:after {border-left:2px solid #c29e00}<br />
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}<br />
</style><br />
<div class="text"><br />
....<br />
<span style="color: yellow;">Tulis CONTENT Anda Disini</span><br />
....<br />
<nav><br />
<ul><br />
<li class='home'><a href='#'></a></li><br />
<li class='bT'><a href='#'></a></li><br />
<li class='mN'><a href='#'></a></li><br />
<li class='sT'><a href='#'></a></li><br />
</ul><br />
</nav><br />
</div></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com33tag:blogger.com,1999:blog-8783436895090091189.post-25925740657030031692015-06-23T15:04:00.000+01:002015-06-23T15:10:43.864+01:00Gambar Zoom Responsive Dengan CSS<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Gambar Zoom Responsive Dengan CSS</span> - Efek zoom (membesar) biasanya akan terlihat pecah atau blur saat gambar default di hover, karena dimensi format pada gambar diperkecil saat ditampilkan sebagai pelengkap tulisan dan akan membesar saat efek hover bekerja. <b>Gambar zoom</b> dengan format efek seperti itu akan terlihat jelek atau kurang menarik. Bisa saja kita buat aturannya seperti ini:<br />
<br />
<style>.cbox {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid #39f;text-align:left}
pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px}</style><br />
<div class="cbox"><span style="color:#ffd966">//memotong ukuran gambar saat ditampilkan dengan nilai</span><br />
img {<br />
position: relative;<br />
float: left;<br />
width: 100px; <span style="color:#ea9999">//batas lebar gambar</span><br />
max-height: 100px; <span style="color:#ea9999">//batas tinggi maksimal gambar</span><br />
cursor: pointer<br />
}<br />
<br />
<span style="color:#ffd966">//saat objek dihover</span><br />
hover {<br />
margin: 0;<br />
list-style: none;<br />
<span style="color:#999999">/* zoom effect */</span><br />
width: 300px;<br />
height: 308px<br />
}</div><br />
<br />
Yang hasilnya bisa Anda lihat di : <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/04/membuat-koleksi-gambar-hover-efek-zoom-right.html" target="_blank" title="Membuat Koleksi Gambar Hover Efek Zoom Right"><strong>Membuat Koleksi Gambar Hover Efek Zoom Right</strong></a>.<br />
Agar gambar awal terlihat sama dengan gambar saat di zoom, yang perlu Anda lakukan adalah menyusun elemen objek (gambar) agar dapat mengikuti dimensi layar komputer dimana efek ini di tampilkan (responsive). Cukup susun media screen layar responsive dengan format yang sama seperti <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/cara-mengatur-halaman-blog-agar-responsive.html" target="_blank" title="Cara Mengatur Halaman Blog Agar Responsive"><strong>Cara Mengatur Halaman Blog Agar Responsive</strong></a> dengan pola seperti ini:<br />
<br />
<div class="cbox">@media all and (max-width: 600px) {<br />
#i-zoom {flex-direction:column}<br />
#i-zoom figcaption {top:102%;left:0;width:30%}<br />
#i-zoom figure {max-width:100%}<br />
#i-zoom img {border:none;text-align:center}<br />
#i-zoom figure:nth-child(2) figcaption,<br />
#i-zoom figure:last-child figcaption {top:-11%;left:auto;right:0;width:25%}<br />
#i-zoom figure:last-child figcaption {top:-18%}<br />
}<br />
<br />
@media all and (max-width:400px) {<br />
#i-zoom figure:hover {margin-bottom:4rem}<br />
#i-zoom figcaption,#i-zoom figure:nth-child(2) figcaption,<br />
#i-zoom figure:last-child figcaption {width:100%;text-align:center}<br />
#i-zoom figure:nth-child(2) figcaption {top:-7%}<br />
#i-zoom figure:nth-child(3) figcaption {top:-9%}<br />
#i-zoom figure:nth-child(2):hover,<br />
#i-zoom figure:nth-child(3):hover {margin-top:4rem;margin-bottom:0}<br />
}</div><br />
<br />
Maka hasilnya akan terlihat lebih baik seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-kwRagcMrJ6w/VYlhmQvMMgI/AAAAAAAACDA/3MQQ9g2_RIo/s1600/zoom-pic.png"><img alt="Gambar zoom responsive" src="https://1.bp.blogspot.com/-kwRagcMrJ6w/VYlhmQvMMgI/AAAAAAAACDA/3MQQ9g2_RIo/s1600/zoom-pic.png" title="Gambar Zoom Responsive Dengan CSS" /></a></div><br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/gambar-zoom.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
Sangat mudah dan sederhana bukan.!?<br />
Bagaimana, apakah Anda mau mencoba.? dibawah ini semua bahan-bahan untuk membuat gambar zoom responsive sudah saya siapkan, tidak perlu ada yang diubah dan diperbaharui, cukup COPY kode CSS dibawah ini, lalu letakkan dalam formulir editor HTML posting Anda, kode lengkapnya seperti ini:<br />
<br />
<pre rel="CSS"><code>
<style type="text/css">
#i-zoom {
display:-webkit-box; display:-webkit-flex; display:-ms-flexbox;
display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between;
-ms-flex-pack:justify; justify-content:space-between;
max-width:1600px;margin:0 auto}
#i-zoom figure {
position:relative; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1;
flex:1; max-width:500px;-webkit-transition:1s;
-moz-transition:1s;transition:1s; margin:0}
#i-zoom img {
width:200px;max-height:200px;border:1px solid;object-fit:cover;
object-position:0% 0%;-webkit-transition:1s;-moz-transition:1s;
transition:1s;font-size:0;line-height:0}
#i-zoom figure:hover {-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}
#i-zoom figcaption {
position:absolute;top:43%; left:105%; opacity:0; width:50%;color:#ccc}
#i-zoom figure:hover img { width:100%; max-height:700px; object-fit:none}
#i-zoom figure:hover figcaption {
-webkit-animation:captionfade forwards 1s 1s;
-moz-animation:captionfade forwards 1s 1s;
animation:captionfade forwards 1s 1s}
#i-zoom figure:nth-child(2) {text-align:center}
#i-zoom figure:nth-child(2) figcaption {text-align:left}
#i-zoom figure:last-child {text-align:right}
#i-zoom figure:last-child figcaption {left:-55%}
@keyframes captionfade {from {opacity:0} to {opacity:1}}
@media all and (max-width: 600px) {
#i-zoom {
-webkit-box-orient:vertical;-webkit-box-direction:normal;
-webkit-flex-direction:column;-ms-flex-direction:column;
flex-direction:column}
#i-zoom figcaption {top:102%;left:0;width:30%}
#i-zoom figure {max-width:100%}
#i-zoom img {border:none;text-align:center}
#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {top:-11%;left:auto;right:0;width:25%}
#i-zoom figure:last-child figcaption {top:-18%}}
@media all and (max-width:400px) {
#i-zoom figure:hover {margin-bottom:4rem}
#i-zoom figcaption,#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {width:100%;text-align:center}
#i-zoom figure:nth-child(2) figcaption {top:-7%}
#i-zoom figure:nth-child(3) figcaption {top:-9%}
#i-zoom figure:nth-child(2):hover,
#i-zoom figure:nth-child(3):hover {margin-top:4rem;margin-bottom:0}}
</style></code></pre><br />
<br />
SELESAI..!! tinggal memanggil semua perintah elemen-elemen diatas dengan kode HTML seperti ini, namun sebelumnya ganti teks yang saya beri warna <span style="color:red">MERAH</span> dengan gambar Anda, HTML lengkapnya seperti ini:</div><br />
<span style="font:bold 12px/35px Verdana,sans-serif;border-bottom:2px solid red">Info </span><span style="font:bold 16px/35px Verdana,sans-serif;border-bottom:2px dotted red;color:red">TERBARU:</span><br />
<span style="color:red;font:bold 16px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/04/tips-mencegah-komentar-spam-masuk-ke-situs.html" target="_blank" title="Tips Mencegah Komentar Spam Masuk Ke Situs"><strong>Tips Mencegah Komentar Spam Masuk Ke Situs</strong></a><br />
<span style="color:red;font:bold 16px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/membuat-pesan-teks-melayang-saat-halaman-terbuka.html" target="_blank" title="Membuat Pesan Teks Melayang Saat Halaman Terbuka"><strong>Membuat Pesan Teks Melayang Saat Halaman Terbuka</strong></a><br />
<span style="color:red;font:bold 16px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/diary-notes-theme-sitemap-responsive.html" target="_blank" title="Diary Notes Theme Sitemap Responsive"><strong>Diary Notes Theme Sitemap Responsive</strong></a><br />
<span style="color:red;font:bold 16px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/01/daftar-domain-situs-penyedia-backlink-berkualitas.html" target="_blank" title="Daftar Domain Situs Penyedia Backlink Berkualitas | SEO"><strong>Daftar Domain Situs Penyedia Backlink Berkualitas | SEO</strong></a><br />
<br />
<br />
<pre rel="HTML"><code>
<div id="i-zoom">
<figure>
<img src="<span style="color: #e06666;">URL-Gambar.jpg</span>" alt="SB-77 Design">
<figcaption><span style="color: #6fa8dc;">Fhoto Diupload dari GOOGLE.</span>
<span style="color: #6fa8dc;">By. Sahabat Blogger 77</span></figcaption>
</figure>
</div></code></pre>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com28tag:blogger.com,1999:blog-8783436895090091189.post-559174474931525582015-06-21T16:10:00.002+01:002015-06-21T16:18:13.318+01:009 Koleksi Gambar Efek Hover<span style="font:bold 16px Verdana,sans-serif">9 Koleksi Gambar Efek Hover</span><br />
<div style="text-align:justify">Hello semua, gimana neh kabar sahabat semua pecinta <b>SAHABAT BLOGGER 77</b>, semoga senatiasa sehat dan berbahagia selalu. Kangen juga rasanya gak bersapa ria bersama kawan-kawan blogger, karena ya memang Devy juga beberapa minggu ini lagi OFF atau libur ngeblog dulu, hehe,,!!!, tetapi kali ini devy kembali mengajak sahabat semua untuk otak-atik kode-kodean lagi untuk <b>membuat gambar efek hover dengan 9 model</b> buat koleksi Anda.<br />
<br />
Agar menarik, tampilannya saya buat dalam sebuah gambar background yang sebenarnya hasil modifikasi all in dari <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/4-variasi-slide-teks-pada-gambar.html" target="_blank" title="4 Variasi Slide Teks Pada Gambar"><strong>4 Variasi Slide Teks Pada Gambar</strong></a> di artikel terdahulu, hanya tampilannya saya ubah untuk membuat gambar backgroundnya juga bergerak dengan sedikit sentuhan efek teks yang timbul, dan itu terjadi saat di Hover seperti ini:<br />
<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/06/background-hover-concept-collection.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-EI11l8ep5C4/VYbQ0U4eRcI/AAAAAAAACCk/5kQf6ico1mk/s1600/img-1.png"><img alt="Koleksi Gambar Efek Hover" src="https://1.bp.blogspot.com/-EI11l8ep5C4/VYbQ0U4eRcI/AAAAAAAACCk/5kQf6ico1mk/s1600/img-1.png" title="Membuat Efek Hover Pada Gambar" /></a></div><br />
<br />
<br />
<style>.boo {display: inline-block;position: relative;padding: 5px 10px 5px 5px;background: red;color: white;margin:0 15px;font: 10px Verdana, sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>Breaking NEWS : </div><a href="http://sahabatblogger77.blogspot.com/2014/10/bagaimana-menentukan-judul-artikel-yang-benar.html" target="_blank" title="Bagaimana Menentukan Judul Artikel Yang Benar?"><strong>Bagaimana Menentukan Judul Artikel Yang Benar?</strong></a><br />
<br />
<br />
<br />
<span style="color:darkred;font:bold 16px Verdana,sans-serif">9 Koleksi Gambar Efek Hover, diantaranya :</span><br />
<ol><li>Hover Border Inset</li>
<li>Partial Border Position</li>
<li>Sepia Background Line</li>
<li>Background Line Waiting Delay</li>
<li>Centered Text Transition Delay</li>
<li>Revealing Text Effect</li>
<li>Fade In Text Rotate</li>
<li>Vertical Revealing Text</li>
<li>Rotate Text And Image Hover</li>
</ol><br />
<br />
<br />
Bagaimana.? sudah menemukan model yang unik dan menarik untuk Anda jadikan sebagai koleksi, atau sudah menemukan imajinasi untuk memodifikasi beberapa efek diatas dan menggabungkannya dengan efek lainnya, pasti Anda sudah menyiapkannya dan saya sudah meramu kodenya secara komplit dan menyeluruh pada masing-masing tampilan. Kalau Efek diatas dengan Hover bagaimana kalau Anda mencoba juga dengan efek otomatis yang satu ini, Devy yakin pasti lebih menarik lagi dalam tutorial <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/05/mengganti-background-gambar-responsive-fullscreen.html" target="_blank" title="Mengganti Background Gambar Responsive Fullscreen"><strong>Mengganti Background Gambar Responsive Fullscreen</strong></a></div><br />
Selamat bersenang-senang guys..!! see you..!!Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com45tag:blogger.com,1999:blog-8783436895090091189.post-30797136106866812072015-06-13T05:46:00.001+01:002015-06-13T05:47:07.091+01:00Derita Sang Pemulung<span style="font:bold 16px Verdana,sans-serif">Derita Sang Pemulung (Ku Juga Manusia)</span><br />
<div style="text-align:justify">Terkadang terlintas rasa iba saat melihat mereka yang sangat jauh berbeda dengan apa yang kita miliki, tetapi terkadang pula karena alasan itu membuat sebagian manusia merasa sombong, merasa sudah memiliki segalanya, merasa lebih baik dari orang itu, bahkan masih banyak diantara kita yang berpikir bahwa pekerjaan menjadi seorang pemulung itu sangat menjijikkan.<br />
<br />
Kita pakai baju dan sepatu mewah, tetapi mereka menggunakan baju yang sobek dan tanpa alas kaki, kita duduk diatas empuknya sofa mobil, tetapi mereka berjalan kaki dan menarik gerobak bututnya, kita <b>membuang SAMPAH disembarang tempat</b>, dan merekalah yang membersihkannya. Akan tetapi masih banyak sikap diantara kita semua yang memandang rendah dan hina atas pekerjaan mereka. Apakah mereka yang sering berada ditempat kotor itu tidak pantas untuk dihargai? apakah mereka tidak berhak berbagi derita untuk menerima secuil kebahagiaan dari kita yang lebih punya?, sang pemulung juga manusia, sama seperti kita hamba Tuhan yang butuh Cinta bukan penghinaan.<br />
<br />
Tulisan ini saya kutip dari kehidupan mereka sehari-hari, dan pekerjaan itu bukanlah yang mereka mau, Tuhan memberikan tangan dan kaki yang sehat. Jadi akan jauh lebih baik saya (mereka) gunakan untuk bekerja sebagai pemulung dari pada menjadi seorang pengemis yang hanya mengharapkan belahan kasihan dari orang lain.<br />
<br />
<style>.quote p {padding:5px;font-family:Droid Serif;line-height:1.5}
.quote {text-align:center;font-size:20px;border-top:3px solid #6495ED;border-bottom:3px double #6495ED;position:relative;margin:0 25px;quotes: "\201C""\201D""\2018""\2019"}
.quote:after {color:red;font-family:serif;content:open-quote;font-size:100px;position:absolute;left:50%;background:#fff;bottom:calc(100% - 20px);height:35px;width: 55px;line-height:70px;text-align:center;text-shadow: 7px 14px 10px rgba(244, 204, 204,1);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}</style><br />
<div class="quote"><p>DERITA SANG PEMULUNG (ku juga manusia)<br />
<br />
Bertabur rasa gundah gulana<br />
Melangkah harus kearah mana<br />
T'lah hilang satu rasa dan asa<br />
Berganti menjadi sejuta prahara dan derita<br />
<br />
Tatapan jauh tak terlihat indah<br />
Kosong bagai genta tak terpecah<br />
Derita bagai sebuah anugerah<br />
Tertoreh pada jiwa yang kian melemah<br />
<br />
Apakah kehidupan bak fatamorgana?<br />
Janji kebahagiaan hanya buaian semata<br />
Berjuang, berkorban demi asa dan cita<br />
Tapi derita selalu mendera dijiwa<br />
<br />
Haruskah keterpurukan selalu mendera<br />
Meskipun gurat-gurat derita terlihat nyata<br />
Ku juga manusia, hamba TUHAN<br />
Yang juga butuh CINTA, bukan penghinaan<br />
<br />
Bila cindai indah dihiasi kabut misteri<br />
Mengapa senyum itu menjauh dari hati <br />
Ku hanya insan yang butuh dihargai<br />
Ingin kasih, bukan tuk' dicaci dan dijolimi<br />
<br />
Mungkin aku hina.....<br />
Mencari nafkah dilahan kotor<br />
Tapi ku punya hati mulia<br />
Tak' seperti mereka, bersih tapi jiwa Koruptor</p><div style="font:italic 10px Calibri;text-align:right;right:15px">Oleh: Devy Indriyani<br />
June 13, 2015</div></div><br />
<br />
Semoga tulisan dengan secarik syair diatas dapat menginspirasi sahabat semua pecinta <b>SAHABAT BLOGGER 77</b> untuk lebih bisa berbagi, memberi dan menyisihkan sedikit apa yang mereka butuhkan, dan sadarlah apa yang Anda buang hari ini dapat memberikan sejuta manfaat buat mereka yang membutuhkan. Salam sayang selalu..!!</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com14tag:blogger.com,1999:blog-8783436895090091189.post-39043995586150937732015-06-09T15:08:00.003+01:002015-06-09T15:14:42.489+01:00Item Menu Navigasi Dengan Efek Slide<span style="font:bold 16px Verdana,sans-serif;">Menu Navigasi Blog Efek Slide Teks</span><br />
<div style="text-align:justify"><b>Item Menu Navigasi Dengan Efek Slide</b> - Secara umum item menu navigasi blog dituliskan dalam bentuk teks link seperti: <b>Home, Menu(1), Menu(2), Menu(3), Menu(4)</b> dan seterusnya. Tampilan menu kali ini saya buat berbeda dengan menampilkan angka-angka dari 1, 2, 3 dan seterusnya sebagai pengganti teks menu, sedangkan teks keterangan <b>(deskripsi title menu)</b> saya sembunyikan dibalik angka tersebut, dan hanya akan tampil saat salah satu item di Hover dengan efek slide seperti ini:<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/menu-hover-item-show.html" rel="nofollow" target="_blank" title="Lihat Hasil Tampilan"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
<div class="separator" style="clear:both;text-align:center;"><a href="https://1.bp.blogspot.com/-tIIw0iPT-0k/VXbyytAGbrI/AAAAAAAACCA/MtNaaSbr89M/s1600/Menu+Slide.png"><img alt="Navigasi Menu Slide Teks" src="https://1.bp.blogspot.com/-tIIw0iPT-0k/VXbyytAGbrI/AAAAAAAACCA/MtNaaSbr89M/s1600/Menu+Slide.png" title="Menu Navigasi Blog Efek Slide Teks" /></a></div><br />
<br />
Tampilan dan model menu navigasi ini saya design dengan penggunaan CSS element <acronym style="color: #e06666; cursor: pointer; font: bold 13px Courier,Monospace;" title="Kode Apa ini?">transition:opacity</acronym>, sedangkan efek slide untuk menampilkan teks menu saya modifikasi dari tutorial <a href="http://sahabatblogger77.blogspot.com/2014/05/efek-according-pada-gambar-dengan-perintah-hover.html" target="_blank" title="Efek According Pada Gambar Dengan Perintah Hover"><strong>Efek According Pada Gambar Dengan Perintah Hover</strong></a>, hanya teks item menu saya ubah dengan menggunakan background-gambar seperti ini:<br />
<style>.br {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:8px double #fff;text-align:left}</style><br />
<div class="br">.item ul li a span {<br />
transition:opacity 1s;<br />
display:inline-block;<br />
overflow:hidden;<br />
opacity:0;<br />
text-align:left;<br />
width:130px}<br />
<br />
<span style="color:#999999;">//item menu dengan gambar...</span><br />
a.<span style="color: #6fa8dc;">menu1</span> {background:#FF8C00 url(<span style="color:orange;">URL-Gambar</span>) no-repeat right center}<br />
a.<span style="color: #6fa8dc;">menu2</span> {background:#39f url(<span style="color:orange;">URL-Gambar</span>) no-repeat right center}<br />
a.<span style="color: #6fa8dc;">menu3</span> {background:#8B008B url(<span style="color:orange;">URL-Gambar</span>) no-repeat right center}<br />
a.<span style="color: #6fa8dc;">menu4</span> {background:#FF1493 url(<span style="color:orange;">URL-Gambar</span>) no-repeat right center}</div><br />
<br />
Tampak sederhana, dan belum ada yang menggunakan menu navigasi seperti ini, dan Anda bisa mengganti background gambar menu dengan icon-logo, misal menu(1) HOME, diganti dengan icon logo home (rumah) akan terlihat lebih menarik lagi, Namun sebelumnya beberapa koleksi model menu navigasi dibawah ini bisa Anda pilih untuk melengkapi tampilan menu di blog Anda, pilihannya sebagai berikut:<br />
<br />
<br />
<span style="border-bottom:2px solid red;color:red;font:bold 15px Verdanda,sans-serif;padding-bottom:1.4px;">Model </span><span style="border-bottom:2px dotted red;padding-bottom:1.4px;">Menu Navigasi Blog :</span><br />
<br />
<span style="color: red; font: bold 16px/26px Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2014/06/cara-membuat-menu-navigasi-model-rolling-top.html" target="_blank" title="Tampilan Daftar Menu Terbaru Model Rolling Top"><strong>Tampilan Daftar Menu Terbaru Model Rolling Top</strong></a><br />
<span style="color: red; font: bold 16px/normal Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2014/10/membuat-menu-daftar-isi-blog-efek-transisi.html" target="_blank" title="Membuat Menu Daftar Isi Blog Efek Transisi"><strong>Membuat Menu Daftar Isi Blog Efek Transisi</strong></a><br />
<span style="color: red; font: bold 16px/26px Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/membuat-menu-blogger-dengan-target-gambar.html" target="_blank" title="Membuat Menu Blogger Dengan Target Gambar"><strong>Membuat Menu Blogger Dengan Target Gambar</strong></a><br />
<span style="color: red; font: bold 16px/normal Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2015/02/css-menu-navigasi-title-dengan-6-pilihan.html" target="_blank" title="CSS Menu Navigasi Title Dengan 6 Pilihan"><strong>CSS Menu Navigasi Title Dengan 6 Pilihan</strong></a><br />
<span style="color: red; font: bold 16px/26px Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2014/03/daftar-artikel-terbaru-dalam-menu-navigasi.html" target="_blank" title="Daftar Artikel Terbaru Dalam Menu Navigasi"><strong>Daftar Artikel Terbaru Dalam Menu Navigasi</strong></a><br />
<span style="color: red; font: bold 16px/normal Verdana;">➞</span> <a href="http://sahabatblogger77.blogspot.com/2014/10/css-flower-navigasi-efek-rotasi.html" target="_blank" title="CSS Flower Navigasi Efek Rotasi"><strong>CSS Flower Navigasi Efek Rotasi</strong></a><br />
<br />
<br />
<br />
<span style="color:darkblue;font:bold 17px/30px Verdana,sans-serif;">Penerapan Fungsi Elemen</span><br />
<b>1.1 CSS Elemen</b><br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
.item {display:inline-block;float:right}
.item ul {padding:0;margin:0;text-align:right}
.item ul li {display:inline;list-style-type:none}
.item ul li a {
transition:width 1s;-webkit-transition:width 1s;-moz-transition:width 1s;
-ms-transition:width 1s;-o-transition:width 1s;color:#fff;
display:inline-block;font-weight:bold;height:27px;overflow:hidden;
padding:10px 10px;width:25px;vertical-align:bottom;text-shadow:1px 2px 3px #111}
.item ul li a:hover {width:130px}
.item ul li a:hover span {opacity:1}
.item ul li a span {
transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;
-ms-transition:opacity 1s;-o-transition:opacity 1s;display:inline-block;
overflow:hidden;opacity:0;text-align:left;width:130px}
a.menu1 {background:#FF8C00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLqiHGz70FUIKC7PfgPraAuJNiki_Ph-Te7Ks-ZmnGFWOmuvS0g5bmf-QATsjdc_yqduic47rGVjL_sDFplxNFju1w1jA7a7F66KQ1Bvdv7rBbc_kIgPwIYqvzA6nx0F08cPyEhR0vBk/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_BOW3LIpvmcab0y3yAxgdZbuSd_fLAIyQEh0TunP402VSH76a8JbazaC0kOGpWwUe0EUR-1En2Kp0FIiQjxLQ6zZEEdrYoEAIsemuervDsIQ6WoZQtK5ekJERTfrDsYnBw9KZKruSc0/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRVST-8hYIZU8MBeGfgSAtwpRq5lFns6ifOthyMkQhIQBYPuhyphenhyphenjV5fGHOzvyCWmTihY6xVP03Jclx_cVfxn2fwvTNg_d2b0LmIfzYgfuyuxG-3i0uLcQiuC_QyiNTl6WYTQ-gWydWEAk/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAx_RSKlGwxkuC5kuwgsbAb07YCMKAnyLIkX5CcDxp69J9SmOl2_prGq1OeLFgtmEh_B07qW0ubS1Og0fFlaq86cW4G2Mx1bXG_aYtzIMEhZ4nQUZYYgv_OOBwelp-m6WeNIKYWpelMpY/s47/kode4.png) no-repeat right center}
</code></pre><br />
<b>2.1 HTML Markup</b><br />
<br />
Dalam kode ini Anda tinggal sesuaikan deskripsi teks menu yang tersembunyi, ganti teks yang berwarna <span style="color: red;">MERAH</span> dengan item menu yang Anda inginkan. HTML lengkapnya seperti ini:</div><br />
<pre rel="HTML"><code>
<div class="item">
<ul>
<li><a class="menu1" href="#"><span><span style="color: #e06666;">Tampilan</span> &raquo;</span></a></li>
<li><a class="menu2" href="#"><span><span style="color: #e06666;">Tampilan</span> &raquo;</span></a></li>
<li><a class="menu3" href="#"><span><span style="color: #e06666;">Tampilan</span> &raquo;</span></a></li>
<li><a class="menu4" href="#"><span><span style="color: #e06666;">Tampilan</span> &raquo;</span></a></li>
</ul>
</div></code></pre>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com21tag:blogger.com,1999:blog-8783436895090091189.post-47892433039479204372015-06-07T06:30:00.002+01:002015-06-07T06:34:11.967+01:00Hati Yang Tersakiti<span style="font:bold 18px Verdanda,sans-serif">Syair Cinta Di Bulan Juni</span><br />
<div style="text-align: justify;"><span style="font:bold 15px Verdanda,sans-serif">Hati Yang Tersakiti</span> - hmmm...!! sepertinya ini bulan penuh derita buat saya, tetapi derita tentang Cinta sih, kalau tentang kasih sayang, mama papa sangat sayang sama saya, dan sahabat semua pecinta <b>SAHABAT BLOGGER 77</b> juga pasti sayang sama Devy, iya gak sih, hehe..!!<br />
<br />
Soalnya bulan ini mau saya isi tulisan tentang Cinta di blog <b>SB-77 Design</b>, libur dulu dech membahas kode-kode HTML, takutnya gak nyambung karena hati lagi galau dan <b>meriang (merindukan kasih sayang)</b>. Semoga saja kegalauan ini menjadi yang pertama dan terakhir, dan kelak bisa mendapatkan seorang pangeran dengan onta putih, dan berharap mereka disana yang sering menyakiti cepat tersadar, kalau sesungguhnya beginilah perasaan seorang wanita jika hatinya tersakiti.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Ksnwz4xvG4Q/VXPOy26er_I/AAAAAAAACBk/HhTwmBkwG2w/s1600/love.png"><img alt="Love" src="https://1.bp.blogspot.com/-Ksnwz4xvG4Q/VXPOy26er_I/AAAAAAAACBk/HhTwmBkwG2w/s1600/love.png" title="Hati Yang Tersakiti" /></a></div><br />
<br />
<span style="color:darkred;font:bold 17px/35px Verdana,sans-serif">MY diary</span><br />
<span style="color:red;font:bold 16px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/02/puisi-sahabat-jadi-cinta.html" target="_blank" title="PUISI : Sahabat Jadi Cinta"><strong>PUISI : Sahabat Jadi Cinta</strong></a><br />
<span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/05/surat-untuk-sahabat.html" target="_blank" title="Surat Untuk Sahabat"><strong>Surat Untuk Sahabat</strong></a><br />
<br />
<br />
<style>@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
#love{margin:0 20px 0 20px}
.top{border-radius:0 0 10px 10px;border-top:4px solid red;font:900 24px 'Aladin',cursive;text-transform:uppercase;letter-spacing:2px}
.top,.bot{background-image:-webkit-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-moz-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-ms-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-o-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:linear-gradient(left, transparent 0%,blue 50%,transparent 100%);border-left:3px solid red;border-right:3px solid red;padding:10px;text-align:center;color:#fff;text-shadow:1px 2px 1px #111}
.bot{border-bottom:2px solid red;border-radius:10px 10px 0 0;text-align:right;padding-right:100px}
.content{background:#fff;border-bottom:2px solid #999;border-left:2px solid red;border-right:2px solid red;border-top:2px solid #ccc;margin:0 8px 0 8px;padding:15px 25px;text-align:left;font:normal 18px/normal 'Aladin',cursive}</style><br />
<div id="love"><div class="top">HATI YANG TERSAKITI</div><div class="content">Sungguh indah mawar itu mekar<br />
Walau berduri tetapi melambangkan Kesetiaan CINTA<br />
Ku tak' ingin helaian mawar itu gugur<br />
Seperti Cintaku padamu wahai pujangga<br />
<br />
Hari ini, esok dan sampai nanti....<br />
Mawar ini kan kujaga agar tumbuh abadi<br />
Seperti kau yang tak' pernah terganti<br />
Di Rindu...di senyum dan selamanya di hati<br />
<br />
Kini.....!!!!!!<br />
Ku hanya bisa menangisi semua ini<br />
Melihat kau melangkah pergi<br />
Kau tak' lagi hapus airmata ini....<br />
Walau Engkau tahu meninggalkan luka dihati<br />
<br />
Rinduku akan tawamu......<br />
Bahagiaku akan ceriamu..<br />
Semua t'lah berubah<br />
Menjadi duri-duri mengisi kekosongan hati<br />
<br />
Tak' ada lagi yang tersisa untukku<br />
Hanya kenangan-kenangan indah saat bersamamu<br />
Senyum indah yang dulu menyejukkan hati<br />
Kasih sayang tulus yang dulu kau beri<br />
Kini semuanya t'lah terasa jauh tuk' aku raih<br />
<br />
Walau bagimu Cintaku tak' berarti lagi<br />
Bawalah namaku kemanapun kau pergi<br />
Agar Engkau bisa selalu kenang........<br />
" Akulah Hati Yang T'lah Kau Sakiti "<br />
</div><div class="bot">By. Devy Indriyani</div></div><br />
<br />
<br />
Hey kamu, pria-pria ganteng disana, jangan pernah menyakiti hati seorang wanita tau, karena seorang wanita itu akan dengan mudah meneteskan airmata hanya karena 1 ucapan yang menggores hati. Wanita itu butuh dimanja dan disayang, seperti aku, hehe..!!<br />
Selamat berakhir pekan guys..!!</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com28tag:blogger.com,1999:blog-8783436895090091189.post-2141038151453798512015-06-06T08:47:00.001+01:002015-06-06T15:57:38.693+01:00Menata HTML Untuk Mempercepat Loading Blog<div style="text-align:center;font-weight:bold">Cara Termudah Membuat Loading Blog Semakin Cepat | Fast Speed</div><div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Menata HTML Untuk Mempercepat Loading Blog</span> - Pada sebagian orang yang jika dihadapkan dengan urusan kode-kodean seperti CSS, HTML dan JavaScript akan membuat kepala menjadi pusing kepalang, sehingga bentuk susunan stuktur HTML Template tidak pernah diperhatikan, bahkan tidak pernah terpikir untuk menata ulang susunan HTML kode yang ada dalam Template. Tetapi tahukah Anda pada baris dan kolom dalam kode HTML Template yang berantakan dapat menyebabkan loading blog menjadi lambat (loading berat), apakah Anda pernah mencoba untuk menata ulang susunan kode tersebut, atau membiarkan struktur kode tersebut saat Template itu Anda gunakan untuk membuat sebuah blog.?<br />
<br />
<style>.note {position:relative;width:auto;padding:1em 1.5em;margin:0 0 0 2.3em;color:#333;background:#d9d2e9;overflow:hidden;border-left:4px solid #674ea7}
.note:before {content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:white white #674ea7; #674ea7;background-color:#674ea7;-webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);display:block;width:0;}</style><br />
<div class="note">Ibarat sebuah buku yang memiliki lembar halaman, jika 1 buku terdiri dari 30 lembar halaman dan Anda membutuhkan waktu 30 menit untuk membaca 1 halaman, maka berapa waktu yang akan Anda butuhkan untuk membaca semua isi buku tersebut yang terdiri dari 30 halaman? (30 menit X 30 Lembar halaman = 900 menit).</div><br />
Waktu yang cukup lama bukan hanya membaca 1 buah buku dengan 30 halaman.!, sama seperti blog, yang terbentuk oleh susunan HTML markup bahasa dalam jabaran struktur kode, dan kode inilah yang akan dibaca oleh browser saat blog Anda terbuka. Semakin banyak Anda menempatkan atau menambahkan beberapa kode secara langsung dalam wilayah HTML, maka semakin lama pula waktu yang dibutuhkan browser untuk membaca semua kode-kode tersebut dalam Template blog Anda, sebelum akhirnya blog akan terbuka secara sempurna dan menyeluruh.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-U9SYl_viikU/VXKeKdnvFrI/AAAAAAAACBI/jxWBt1xVXYA/s1600/loadPage.png"><img alt="Load Page" src="https://1.bp.blogspot.com/-U9SYl_viikU/VXKeKdnvFrI/AAAAAAAACBI/jxWBt1xVXYA/s1600/loadPage.png" title="Cara Mempercepat Loading Blog" /></a></div><br />
<br />
<style>.boo {display:inline-block;position:relative;padding:5px 10px 5px 5px;background:red;color:white;margin:0 15px;font:10px Verdana,sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position:absolute;right:-.3em;width:.5em;height:50%;box-shadow:-.2em 0 0 white;background:inherit;content:''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>ARTIKEL TERKAIT :</div><br />
<span style="color:red;font:bold 18px/26px Verdana">►</span> <a href="http://sahabatblogger77.blogspot.com/2014/07/tata-letak-struktur-elemen-html-template-halaman-posting.html" target="_blank" title="Tata Letak Struktur Elemen HTML Template Halaman Posting"><strong>Tata Letak Struktur Elemen HTML Template Halaman Posting</strong></a><br />
<span style="color:red;font:bold 18px/normal Verdana">►</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/cara-memasang-tag-script-dengan-benar-di-blog.html" target="_blank" title="Cara Memasang Tag Script Dengan Benar Di Blog"><strong>Cara Memasang Tag Script Dengan Benar Di Blog</strong></a><br />
<span style="color:red;font:bold 18px/26px Verdana">►</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/cara-mengatur-halaman-blog-agar-responsive.html" target="_blank" title="Cara Mengatur Halaman Blog Agar Responsive"><strong>Cara Mengatur Halaman Blog Agar Responsive</strong></a><br />
<br />
<br />
Jadi mari kita lakukan apa yang harus kita tata agar blog dapat tampil sempurna dalam setiap peramban browser. INGAT..!! bukan hanya mempercantik tampilan blog saja yang membuat pengunjung betah bertamu di blog Anda, lebih daripada itu, kecepatan muat halaman (loading blog) sangatlah penting, karena 75% pengunjung akan kabur meninggalkan blog Anda jika mereka terlalu lama menunggu. Apa yang harus dilakukan..?<br />
<br />
<span style="color:darkred;font:bold 18px/35px Verdana,sans-serif">1. Letak Widget Pada Blog</span><br />
Kita ambil contoh Template secara umum, yang terkonsep dengan pembagian 2 kolom halaman : <b>Posting Page</b> untuk tempat Anda menuliskan informasi artikel dan <b>Sidebar Page</b> untuk menampilkan sejumlah widget.<br />
<br />
<b style="color:#e06666;line-height:32px">1.1 Sidebar Page</b><br />
Halaman ini merupakan tempat dimana banyak dimuat widget. Akan tetapi tujuan kita disini adalah bagaimana membuat blog agar cepat terbuka, jadi hindari menempatkan efek-efek widget dalam jumlah banyak dalam halaman ini, tampilkan apa yang menurut Anda diperlukan oleh pengunjung, bukan membuat mata pengunjung menjadi terganggu dengan banyaknya widget yang Anda tampilkan disana.<br />
<br />
Biasanya halaman sidebar masih terbagi lagi dalam beberapa kolom, jadi tampilkan saja sesuatu yang perlu, yang sekiranya bisa bermanfaat buat pembaca, seperti Popular Post, Arsip File, Label Category, selebihnya buang atau pindahkan di :<br />
<br />
<b style="color:#e06666;line-height:32px">1.2 Footer Page</b><br />
halaman yang sering kita sebut dengan "Catatan Kaki", karena letakknya berada paling bawah, jadi letakkan widget yang bisa mempengaruhi kecepatan muat halaman disini, kenapa..!! proses indeks oleh browser untuk membuka sebuah halaman, diawali dari atas Header page, halaman posting, sidebar (aside-page) dan terakhir halaman footer.<br />
<br />
Jadi, jika Anda ingin menampilkan widget dari pihak ke tiga, maka letakkan objek itu dalam halaman ini, tujuannya agar tidak mengganggu proses loading halaman posting saat browser malakukan pembacaan kode HTML, terlebih jika widget yang menggunakan perintah JavaScript.<br />
<br />
<br />
<span style="color:darkred;font:bold 18px/35px Verdana,sans-serif">2. Hapus Dan Sejajarkan Susunan Kode</span><br />
<b style="color:darkblue;line-height:32px">2.1 CSS Element</b><br />
Kode ini biasanya diapit oleh tag <acronym style="cursor:pointer;color:green;font:bold 13px Courier,Monospace" title="Kode Apa ini?"><b:skin>...</b:skin></acronym> dalam Template, semakin sedikit kode yang ada dalam area tag tersebut, maka semakin cepat pula loading blog, dan sebaliknya semakin banyak dan tersusun memanjang kebawah, maka semakin berat kecepatan muat halaman. Apa yang perlu kita lakukan.?<br />
<br />
<span style="color:red;font:bold italic 14px/30px Georgia">>> Menghapus</span><br />
Tanpa Anda sadari banyak kode yang tidak memberikan dampak apapun terhadap tampilan blog, sekalipun kode tersebut Anda hapus, jadi buat apa kode itu berada disana.! lebih baik dibuang bukan.!? periksa Template Anda:<br />
<ul><li>Cari semua kode yang diapit oleh tanda /*....*/, jika ada hapus saja kode itu.</li>
<li><b>Fungsi kode dan penghapusan</b>, kenali fungsi kodenya terlebih dahulu, lalu hapus jika tidak perlu. Selengkapnya lihat disini <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/02/belajar-mengubah-kode-template-agar-valid-html5.html" target="_blank" title="Belajar Mengubah Kode Template Agar Valid HTML5"><strong>Belajar Mengubah Kode Template Agar Valid HTML5</strong></a></li>
<li>Jarak nilai dan perintah kode, misal seperti ini:<br />
<style>.border {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:8px double #fff;text-align:left}</style><br />
<div class="border">.loading {<br />
width: 100px;<br />
}<br />
<br />
<span style="color: #999999;">//lihat ada jarak (spasi) antara kode width dengan nilai 100px,<br />
hapus jarak itu sehingga menjadi seperti ini:</span><br />
<br />
.loading {<br />
width:100px;<br />
}</div></li>
<li>Biasakan selalu menghapus tanda pemisah kode seperti ini <b>( ; )</b> diakhir kode.</li>
<li>Selanjutnya baca <a href="http://sahabatblogger77.blogspot.com/2014/01/tips-membuat-proses-loading-blog.html" target="_blank" title="Tips Membuat Proses Loading Blog Semakin Cepat"><strong>Tips Membuat Proses Loading Blog Semakin Cepat</strong></a> tentang penggunaan objek lain seperti background dan gambar.</li>
</ul><br />
<span style="color:red;font:bold italic 14px/30px Georgia">>> Sejajarkan</span><br />
Maksudnya disini adalah men-sebariskan semua susunan elemen CSS, jika susunan kode CSS dalam template Anda masih tersusun dengan struktur seperti ini:<br />
<br />
<div class="border">#outer-wrapper {<br />
width:1000px;<br />
background:whiteSmoke;<br />
margin:0 auto;<br />
padding:0;<br />
text-align:left;<br />
font:normal normal 12px Verdana,Geneva,sans-serif<br />
}<br />
<br />
#main-wrapper {<br />
width:66%;<br />
float:left;<br />
word-wrap:break-word;<br />
overflow:hidden<br />
}</div><br />
Tersusun dengan memanjang kebawah, maka hapus semua lekukan baris dan kolom kode menjadi sejajar dan sebaris, caranya lihat <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/04/cara-memperkecil-ukuran-file-css.html" target="_blank" title="Cara Memperkecil Ukuran File CSS"><strong>Cara Memperkecil Ukuran File CSS</strong></a><br />
<br />
<b style="color:darkblue;line-height:32px">2.2 HTML Markup</b><br />
Letak dan susunan kode ini tidak begitu berpengaruh, karena kebanyakan kode HTML tersusun karena perintah pemanggil, artinya HTML terbentuk karena adanya pembentukan dari CSS element. Yang perlu diperhatikan dalam strukturnya adalah letak, konsepnya tidak jauh berbeda dengan elemen CSS.<br />
<br />
<b style="color:darkblue;line-height:32px">2.3 JavaScript Perintah</b><br />
Script ini merupakan jalinan perintah-perintah kode yang dapat berdiri sendiri, yang artinya saat tanda berupa <b>( ; )</b> kita hapus dalam area script kode, maka script ini akan merubah fungsi. Dan script dalam template yang sangat berpengaruh terhadap muat halaman, semakin banyak menaruh kode script, semakin berat blog terbuka, bagaimana menanggapi hal ini?<br />
<ul><li><b>Kenali script yang Anda buat serta apa fungsinya</b>, dengan begitu Anda akan paham apakah script ini bisa diringkas atau tidak, perlu dihapus atau dinonaktifkan.</li>
<li><b>Lihat letak script dalam template</b> Anda, script selalu diapit oleh tag <acronym style="cursor:pointer;color:#e06666;font:bold 13px Courier,Monospace" title="Kode Apa ini?"><script>..</script></acronym>, dan diarea mana letak script tersebut, jika perintahnya untuk mengatur area dalam halaman body, maka satukan beberapa script dalam satu tag yang sama <span style="color:red">"jika itu memerintahkan wilayah yang sama posisi"</span>.</li>
<li><b>Hindari menggunakan script jQuery ganda</b>.</li>
<li>Pelajari disini <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/02/tahap-awal-belajar-tag-kondisional.html" target="_blank" title="Tahap Awal Belajar Tag Kondisional"><strong>Tahap Awal Belajar Tag Kondisional</strong></a> untuk mengapit perintah script Anda, dengan maksud apakah script itu ingin difungsikan atau dinonaktifkan jika tidak diperintahkan.</li>
<li><b>Kompres script</b> Anda jika itu mencakup banyak perintah, bisa dengan Google-drive, Google-code atau pastebin.</li>
</ul><br />
<br />
Lakukan konsep ini secara bertahap, jangan terlalu dipaksakan ya, ntar bisa pusing karena berhadapan dengan kode-kode script, hehe..!!! setelah ini rasakan kecepatan loading blog Anda. Selamat mencoba sahabat...*</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com36tag:blogger.com,1999:blog-8783436895090091189.post-3922449939637739412015-06-04T08:00:00.004+01:002015-06-04T08:03:37.916+01:00Lebih Sering Blogwalking Atau Berkomentar?<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Lebih Sering Blogwalking Atau Berkomentar?</span> - Mana yang lebih sering Anda lakukan?, karena ke-2 hal ini merupakan kegiatan yang sangat penting untuk membangun popularitas sebuah web atau blog yang Anda jalankan saat ini. Tulisan Anda dalam blog (Artikel) adalah status, dimana tujuan Anda sesungguhnya adalah untuk memberitahukan kepada orang banyak tentang apa yang sudah Anda publikasikan, memberitahukan bahwa Anda sedang meng-informasikan sesuatu berita yang sangat penting, namun mereka yang diberitahu tidak akan mau tahu jika Anda tidak pernah singgah di status mereka.<br />
<br />
Blogwalking merupakan acara jalan-jalan keblog tetangga, sahabat sampai mencari beberapa informasi penting, dan itu sering Anda lakukan tanpa ada sesuatu niat (pamrih) dari mereka sipemilik situs (Dengan tidak mengatakan "kunbal ya gan.!"). Jadi jika Anda berkomentar itu sudah pasti Anda blogwalking, namun berkunjung dan singgah diblog orang lain belum tentu Anda berkomentar, benar..?. Jadi mana yang harus kita lakukan seharusnya.<br />
<br />
<span style="color:darkred;font:bold 18px/35px Verdana,sans-serif">BLOGWALKING</span><br />
Merupakan kegiatan jalan-jalan atau berkunjung ke blog orang lain, baik mereka yang sudah kita kenal atau sekedar mengenal dalam <b>dunia MAYA</b>, dengan tujuan membaca beberapa alinea sampai merangkum semua informasinya lalu pergi lagi. Apakah cara ini yang sering Anda lakukan?, lalu hal apa yang akan Anda peroleh dengan cara demikian?<br />
<br />
<span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/02/menumbuhkan-ide-inspirasi-menulis-melalui-blogwalking.html" target="_blank" title="Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking"><strong>Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking</strong></a> akan dapat membantu Anda mengumpulkan bahan-bahan tulisan, saat dimana Anda kehabisan rangkaian kata untuk membuat sebuah cerita posting, kesempatan ini bisa Anda jadikan cerita untuk membuat postingan Anda berikutnya. Melihat sudah pasti tahu, namun dengan membaca sudah pasti lebih tahu dan paham, maka jadikan blogwalking bukan hanya sekedar ajang jalan-jalan ke blog orang lain, tetapi pahami bagaimana mereka menulis, baca apa yang mereka informasikan, dengan begitu Anda akan terbiasa menyusun kata dan merangkainya untuk tulisan Anda berikutnya.<br />
<br />
<style>.paper {border-top:30px solid #252525;margin-left:35px;text-align:justify;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFAF;background-image:-webkit-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-webkit-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-moz-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-moz-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-o-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-o-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-ms-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-ms-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),linear-gradient(#A4CE9A .1em, transparent .1em);-webkit-background-size:100% 23px;-moz-background-size:100% 23px;background-size:100% 23px;line-height:23px !important;padding:0 10px 1px 75px}
.paper span {margin: 0 0 23px 0;font:bold 20px/normal Verdana,serif}
.paper p {margin: 0 0 23px 0;padding-top:20px;}
</style><br />
<div class="paper"><span>Hy Guys..!!</span><br />
<p>Kebiasaan ini akan membuka imajinasi Anda, saat Anda melihat sesuatu yang langsung terperangkap dalam memori, maka bukan hal yang sulit lagi untuk menentukan tema apa yang akan Anda bahas untuk artikel blog Anda hari ini. Bukan hanya itu, dengan sering blogwalking akan lebih mudah menentukan <a href="http://sahabatblogger77.blogspot.com/2014/05/jumlah-kata-yang-ideal-untuk-membuat-artikel.html" target="_blank" title="Jumlah Kata Yang Ideal Untuk Membuat Artikel"><strong>Jumlah Kata Yang Ideal Untuk Membuat Artikel</strong></a>.</p></div><br />
<br />
<span style="color:darkred;font:bold 18px/35px Verdana,sans-serif">BERKOMENTAR</span><br />
Komentar merupakan kegiatan tanya jawab, kritik sampai acara perkenalan dengan penuh canda, dengan berkomentar bisa menghidupkan suasana blog yang sepi. Bayangkan saja saat Anda membuat postingan dan mempublikasikannya, namun sudah 2 minggu baru ada 1 pengunjung yang berkomentar, bagaimana perasaan Anda, senang bukan..!! itu berarti postingan Anda sudah Ada yang melihat (membuka) walaupun tidak membacanya. Dalam perhitungan 1 komentar berarti 1 pageView, bagaimana jika postingan Anda mendapat sampai 200 komentar, sudah pasti banyak yang mengenalnya bukan.!.<br />
Lakukan beberapa tips dengan cara <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/01/mengajak-pengunjung-agar-tertarik-untuk-berkomentar.html" target="_blank" title="Mengajak Pengunjung Agar Tertarik Untuk Berkomentar"><strong>Mengajak Pengunjung Agar Tertarik Untuk Berkomentar</strong></a> disetiap postingan blog Anda.<br />
<br />
Berkomentarlah secara baik dan sopan, karena Anda sebagai tamu, sekalipun tamu adalah <b>RAJA</b>, namun pemilik lebih berhak menentukan cara yang bagaimana yang sewajarnya bisa ditoleransi karena ada beberapa pesan peraturan, jadi bukan seenaknya Anda menuliskan teks komentar yang nantinya komentar Anda akan dihapus oleh admin (pekerjaan sia-sia bukan.!), coba perhatikan biasanya ada info tata cara berkomentar yang dituliskan sipemilik blog, gak ada salahnya kan jika hal itu kita patuhi.!?<br />
<br />
Traffik blog sumber utamanya adalah dari komentar, semakin sering Anda berkomentar di blog orang lain, maka semakin besar pula kesempatan buat blog Anda mendapat kunjungan balik (Backlink). Namun hargai karya orang lain dengan <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2013/10/memberi-komentar-secara-baik-dan-benar-di-blog.html" target="_blank" title="Memberi Komentar Secara Baik Dan Benar Di Blog"><strong>Memberi Komentar Secara Baik Dan Benar Di Blog</strong></a> mereka, dengan begitu lalu lintas kunjungan terlihat bersih tanpa adanya <b>unsur SPAM.</b><br />
<br />
Ke 2 kegiatan ini memang sangat penting, <b>Blogwalking dan Berkomentar,</b> namun mana yang harus kita dahulukan?. Saat dimana Anda kehabisan ide untuk membuat tulisan, cobalah blogwalking.!! cari blog-blog yang membahas informasi yang Anda butuhkan, luangkan waktu Anda sebentar untuk membaca, pahami, saya yakin Anda akan menemukan sejuta ide untuk membuat sebuah cerita yang akan Anda tuliskan dalam blog Anda. Dan jika itu terjadi jangan lupa berkomentar ya, karena sering berkomentar tidak kalah penting dengan blogwalking.<br />
<span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/02/manfaat-sering-berkomentar-di-blog-lain.html" target="_blank" title="Manfaat Sering Berkomentar Di Blog Lain"><strong>Manfaat Sering Berkomentar Di Blog Lain</strong></a> itu sangat banyak, salah satunya adalah saya akan lebih mengenal Anda jika Anda berkomentar di blog ini.</div><br />
Jadi mana yang harus Anda lakukan, Lebih Sering Blogwalking Atau Berkomentar?Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com51tag:blogger.com,1999:blog-8783436895090091189.post-51414627128189861102015-06-03T15:22:00.004+01:002015-06-03T15:40:09.226+01:00Cara Membuat Gambar Melengkung Dan Berputar<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Cara Membuat Gambar Melengkung Dan Berputar</span> - Sudah begitu banyak tutorial yang pernah saya tuliskan tentang cara membuat gambar di postingan dengan berbagai efek, dari gallery gambar, album image personal sampai tampilan gambar 3D yang semuanya bisa Anda pilah-pilih di <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/search/label/Efek%20Gambar" target="_blank" title="Label- Efek Gambar"><strong>Efek Gambar By. Sahabat Blogger 77</strong></a>. Namun untuk tampilan gambar kali ini saya buat berbeda dengan efek melengkung dan berputar. Unik, menarik dan desain terbaru dari saya untuk sahabat semua, seperti tampilan gambar berikut:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-bsN14kzY5GE/VW8KKjD2gQI/AAAAAAAACAI/lIm2NS-MaQk/s1600/image+Curve.png"><img alt="Curve image" src="https://1.bp.blogspot.com/-bsN14kzY5GE/VW8KKjD2gQI/AAAAAAAACAI/lIm2NS-MaQk/s1600/image+Curve.png" title="Gambar Melengkung Dan Berputar" /></a></div><br />
<br />
Saat melihat artikel tentang <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/membuat-carousel-gambar-3d-dengan-css-transform.html" target="_blank" title="Membuat Carousel Gambar 3D Dengan CSS Transform"><strong>Cara Membuat Carousel Gambar 3D Dengan CSS Transform</strong></a>, terinspirasi ingin membuat efek yang sama, namun saya akan coba mengubah keseluruhan tampilannya menjadi individual show (1 tampilan gambar), karena memang efek ini menggunakan elemen perintah yang sama yaitu <acronym style="cursor:pointer;color:#e06666;font:bold 13px Courier,Monospace" title="Kode Apa ini?">transform-rotate</acronym> untuk membuat gambar bergerak dan berputar, sedangkan untuk membuat tampilan gambarnya terlihat melengkung, kita hubungkan semua sisi gambar, lalu kita tarik sisi miringnya dengan jarak tertentu seperti ini:<br />
<style>.border {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:8px double #fff;text-align:left}</style><br />
<div class="border">.gambar {<br />
transform-style:preserve-3d;<br />
transform:<span style="color: #93c47d;">rotateX(35deg)</span><span style="color: #f6b26b;">rotateY(45deg)</span><span style="color: #d5a6bd;">rotateZ(15deg)</span><span style="color: #e06666;">translate3d(325px,-70px,50px)</span><br />
}</div><br />
<br />
Selanjutnya gambar kita pecah lagi menjadi beberapa bagian dengan ukuran 33px, lalu pecahan inilah yang akan kita bentuk menjadi gambar melengkung dengan jarak posisi pada background per selisih 33px, selisih kemiringan 7.5px, susunannya seperti ini:<br />
<br />
<div class="border">.curve div {<br />
position: absolute;<br />
background: #000 url(<span style="color: yellow;">URL-Gambar Anda</span>);<br />
}<br />
<br />
<span style="color:#999999">//pecahan gambar (background-position)</span><br />
.curve .<span style="color: yellow;">a</span> {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}<br />
.curve .<span style="color: yellow;">b</span> {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}<br />
.curve .<span style="color: yellow;">c</span> {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}<br />
....<br />
....<br />
.curve .<span style="color: yellow;">x</span> {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}</div><br />
<span style="color:darkred;font:bold italic 14px Georgia">Dan hasilnya :</span><br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/gambar-melengkung.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
Dibilang mudah, tidak juga tetapi dibilang susah, cukup mudah kok, hehe..!! hal yang tersulit untuk membuat gambar melengkung lalu berputar seperti ini hanya pada pembagian saat menentukan selisih pecahan gambar, karena dimensinya harus tepat agar tampilan gambar terlihat melengkung, bukan seperti efek-efek berikut:<br />
<br />
<span style="color:red;font:bold 16px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/4-variasi-slide-teks-pada-gambar.html" target="_blank" title="4 Variasi Slide Teks Pada Gambar"><strong>4 Variasi Slide Teks Pada Gambar</strong></a><br />
<span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/02/kumpulan-ragam-efek-pada-gambar.html" target="_blank" title="Kumpulan Ragam Efek Pada Gambar"><strong>Kumpulan Ragam Efek Pada Gambar</strong></a><br />
<span style="color:red;font:bold 16px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/10/tampilkan-foto-kecil-saat-gambar-utama-dihover.html" target="_blank" title="Tampilkan Foto Kecil Saat Gambar Utama Dihover"><strong>Tampilkan Foto Kecil Saat Gambar Utama Dihover</strong></a><br />
<span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/11/membuat-menu-blogger-dengan-target-gambar.html" target="_blank" title="Membuat Menu Blogger Dengan Target Gambar"><strong>Membuat Menu Blogger Dengan Target Gambar</strong></a><br />
<br />
<br />
<br />
Oh iya, buat Anda yang ingin menampilkan efek seperti ini pada gambar postingan, cukup salin kode-kode berikut, namun sebelumnya tambahkan beberapa kode untuk mendukung <span style="border-bottom:1.3px dotted red;padding-bottom:1.3px">vendor peramban</span> agar efek dapat bekerja pada browser yang Anda gunakan. Kode lengkapnya seperti ini:</div><br />
<br />
<span style="color:darkred;font:700 18px/normal Verdana,sans-serif">CSS Element</span><br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
<style type="text/css">
#container {
margin:40px 0 0 35%;width:550px;
-moz-perspective:900px;-webkit-perspective:900px;
-ms-perspective:900px;-o-perspective: 900px;perspective:900px}
#frame {
width:33px;-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
transform:rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px,-70px,50px)}
.curve {transform-style: preserve-3d;animation: curve 25s infinite linear}
.curve div {
position: absolute;background: #000 url(<span style="color: #ffd966;">URL-Gambar Anda</span>);
border: solid 2px yellow;border-width: thin 0;
height:320px;width:34px;opacity: 1}
.curve .a {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}
.curve .b {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}
.curve .c {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}
.curve .d {background-position:693px 0;transform:rotateY(22.5deg) translateZ(248px)}
.curve .e {background-position:660px 0;transform:rotateY(30deg) translateZ(248px)}
.curve .f {background-position:627px 0;transform:rotateY(37.5deg) translateZ(248px)}
.curve .g {background-position:594px 0;transform:rotateY(45deg) translateZ(248px)}
.curve .h {background-position:561px 0;transform:rotateY(52.5deg) translateZ(248px)}
.curve .i {background-position:528px 0;transform:rotateY(60deg) translateZ(248px)}
.curve .j {background-position:495px 0;transform:rotateY(67.5deg) translateZ(248px)}
.curve .k {background-position:462px 0;transform:rotateY(75deg) translateZ(248px)}
.curve .l {background-position:429px 0;transform:rotateY(82.5deg) translateZ(248px)}
.curve .m {background-position:396px 0;transform:rotateY(90deg) translateZ(248px)}
.curve .n {background-position:363px 0;transform:rotateY(97.5deg) translateZ(248px)}
.curve .o {background-position:330px 0;transform:rotateY(105deg) translateZ(248px)}
.curve .p {background-position:297px 0;transform:rotateY(112.5deg) translateZ(248px)}
.curve .q {background-position:264px 0;transform:rotateY(120deg) translateZ(248px)}
.curve .r {background-position:231px 0;transform:rotateY(127.5deg) translateZ(248px)}
.curve .s {background-position:198px 0;transform:rotateY(135deg) translateZ(248px)}
.curve .t {background-position:165px 0;transform:rotateY(142.5deg) translateZ(248px)}
.curve .u {background-position:132px 0;transform:rotateY(150deg) translateZ(248px)}
.curve .v {background-position:99px 0;transform:rotateY(157.5deg) translateZ(248px)}
.curve .w {background-position:66px 0;transform:rotateY(165deg) translateZ(248px)}
.curve .x {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}
@keyframes curve {
from {transform:rotateY(0)}
to {transform:rotateY(-360deg)}}
</style></code></pre><br />
<br />
<span style="color:darkred;font:700 18px/35px Verdana,sans-serif">HTML Markup</span><br />
<pre rel="HTML"><code>
<div id="container">
<div id="frame">
<div class="curve">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="x"></div>
</div>
</div>
</div></code></pre>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com16tag:blogger.com,1999:blog-8783436895090091189.post-16777619067011640542015-06-02T05:40:00.001+01:002015-06-02T06:06:42.556+01:0013 Model Tombol Dengan CSS<b>Collection Button Effect Pure CSS</b><br />
<div style="text-align:justify"><span style="font:bold 15px Verdana,sans-serif">13 Model Tombol Dengan CSS</span> - Karena ada beberapa hal yang tidak mungkin untuk ditinggalkan, sehingga update artikel terbaru di blog ini, baru bisa saya publikasikan buat teman-teman semua pecinta <b>SAHABAT BLOGGER 77</b> dengan tema <b>13 Model Tombol Dengan CSS</b>, diantaranya:<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/creative-buttons.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
<style>.balon-kata {border-top:2px solid red;background:#080;position:relative;padding:10px;color:white;font:normal 16px Calibri,Arial,Sans-Serif;width:355px;height:auto;border-radius:5px;margin-left:35px}.balon-kata.bottom:after {content:"";width:auto;overflow:auto;position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#080 transparent transparent #080;-webkit-transform:skew(-30deg, 0deg);-moz-transform:skew(-30deg, 0deg);-ms-transform:skew(-30deg, 0deg);-o-transform:skew(-30deg, 0deg);transform:skew(-30deg, 0deg);display:block;
}</style><br />
<div class="balon-kata bottom">Anda Tinggal <span style="color:darkyellow;font:bold 15px Verdana,sans-serif">KLIK</span> Tombol pilihan Anda disini..</div><br />
<ul style="font: bold 14px/20px Helvetia"><li><a href='#target1' title="Model - Slide In Bottom Border">Slide In Bottom Border</a></li>
<li><a href='#target2' title="Model - Slide In Top Border">Slide In Top Border</a></li>
<li><a href='#target3' title="Model - Rotate Effect Skew">Rotate Effect Skew</a></li>
<li><a href='#target4' title="Model - Background Swap">Background Swap</a></li>
<li><a href='#target5' title="Model - Pop Out Effect | Zoom">Pop Out Effect | Zoom</a></li>
<li><a href='#target6' title="Model - Quick Click">Quick Click</a></li>
<li><a href='#target7' title="Model - 3D On Hover">3D On Hover</a></li>
<li><a href='#target8' title="Model - Slide Down Background">Slide Down Background</a></li>
<li><a href='#target9' title="Model - Slide Up Background">Slide Up Background</a></li>
<li><a href='#target10' title="Model - Slide Right Background">Slide Right Background</a></li>
<li><a href='#target11' title="Model - Slide Left Background">Slide Left Background</a></li>
<li><a href='#target12' title="Model - Radiating Border">Radiating Border</a></li>
<li><a href='#target13' title="Model - Spinning Diamond">Spinning Diamond</a></li>
</ul><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-KY_PD7CYBzw/VW0raHnCgzI/AAAAAAAAB_o/6yljVsMZx_E/s1600/button.png"><img alt="button" src="https://1.bp.blogspot.com/-KY_PD7CYBzw/VW0raHnCgzI/AAAAAAAAB_o/6yljVsMZx_E/s1600/button.png" title="Collection Button Effect Pure CSS" /></a></div><br />
<br />
<style>.boo {display: inline-block;position: relative;padding: 5px 10px 5px 5px;background: red;color: white;margin:0 15px;font: 10px Verdana, sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>BACA JUGA</div><a href="http://sahabatblogger77.blogspot.com/2014/04/efek-zoom-gambar-mode-slide-teks.html" target="_blank" title="Efek Zoom Gambar Mode Slide Teks"><strong>Efek Zoom Gambar Mode Slide Teks</strong></a><br />
<br />
<br />
<span style="font:bold 18px/35px Verdana,sans-serif;color:darkred">Collection Button Effect Pure CSS</span><br />
Anda tinggal Copy kode tombol pilihan Anda, lalu letakkan dimana tombol ini akan Anda tampilkan dalam postingan, pilihannya:<br />
<div id="target1"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">1. Slide In Bottom Border</span><br />
Efek yang terjadi pada tombol ini yaitu pemberian garis bawah (bottom border) saat tombol di hover dengan model tampilan <acronym style="cursor:pointer;color:#e06666;font:bold 13px Courier,Monospace" title="Kode Apa ini?">slide border</acronym>. CSS lengkapnya seperti ini:<br />
<style>.bbr {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:8px double #fff;text-align:left}</style><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide In Bottom Border */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn1:hover:after {background-position:0 0}<br />
.btn1 {background:#b9ca4a;position:relative}<br />
.btn1:after {<br />
content: "";<br />
background:-webkit-linear-gradient(left, aqua 0%, #39f 50%, #222 50%, #222 100%);<br />
background:linear-gradient(to right, aqua 0%, aqua 50%, #222 50%, #222 100%);<br />
background-position: 100% 0;background-size: 200% 100%;<br />
width: 100%;height: 5px;position: absolute;top: 100%;left: 0;<br />
-webkit-transition: all 0.5s;<br />
-moz-transition: all 0.5s;<br />
-ms-transition: all 0.5s;<br />
-o-transition: all 0.5s;<br />
transition: all 0.5s}<br />
</style><br />
<div class="button btn1"><span style="color: #6fa8dc;">( 1 ) Slide in Bottom Border</span></div></div></div><div id="target2"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">2. Slide In Top Border</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide In Top Border */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn2 {background:#00FF7F;position:relative}<br />
.btn2:hover:before {background-position:0 0}<br />
.btn2:before {<br />
content: "";<br />
background: -webkit-linear-gradient(left, red 0%, red 50%, #222 50%, #222 100%);<br />
background: linear-gradient(to right, red 0%, red 50%, #222 50%, #222 100%);<br />
background-position: 100% 0;background-size: 200% 100%;<br />
width: 100%;height: 5px;position: absolute;top: 0;left: 0;<br />
-webkit-transition: all 0.5s;<br />
-moz-transition: all 0.5s;<br />
-ms-transition: all 0.5s;<br />
-o-transition: all 0.5s;<br />
transition: all 0.5s}<br />
</style><br />
<div class="button btn2"><span style="color: #6fa8dc;">( 2 ) Slide in Top Border</span></div></div></div><div id="target3"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">3. Rotate Effect Skew</span><br />
Model tombol yang ini yang menarik, saya membuat kemiringan dengan dimensi 10px, dan itu terjadi saat tombol berputar <span style="color:red;font:bold 16px/normal Verdana">»</span> <acronym style="cursor:pointer;color:magenta;font:bold 13px Courier,Monospace" title="Tombol akan berputar sebanyak 2X, sampai kembali ketempat semula (360 derajat)">360 deg</acronym>. CSS lengkapnya seperti ini:<br />
<br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Rotate Effect Skew */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn3 {<br />
background-color: #e78c45;<br />
position: relative;<br />
-webkit-transition: all 1.25s;<br />
-moz-transition: all 1.25s;<br />
-ms-transition: all 1.25s;<br />
-o-transition: all 1.25s;<br />
transition: all 1.25s;<br />
top:0}<br />
<br />
.btn3:hover {<br />
transform:rotate(370deg);<br />
-webkit-transform:rotate(370deg);<br />
-moz-transform:rotate(370deg);<br />
-ms-transform:rotate(370deg);<br />
-o-transform:rotate(370deg)}<br />
</style><br />
<div class="button btn3"><span style="color: #6fa8dc;">( 3 ) Rotate Effect Skew</span></div></div></div><div id="target4"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">4. Background Swap</span><br />
Membuat ragam warna background pada tombol, dan saya mengambil titik focus tengah dengan model skew (miring) menggunakan CSS background <acronym style="cursor:pointer;color:#e06666;font:bold 13px Courier,Monospace" title="Kode Apa ini?">linear-gradient</acronym>, efeknya background akan bertukar tempat (swap) saat tombol dihover dengan susunan kode CSS seperti ini:<br />
<br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Background Swap */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn4 {<br />
background:-webkit-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);<br />
background:-moz-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);<br />
background:-ms-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);<br />
background:-o-linear-gradient(135deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%);<br />
background:linear-gradient(-45deg, #1d896b 0%, #1d896b 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, #1d896b 66.66%)}<br />
<br />
.btn4:hover {<br />
background:-webkit-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);<br />
background:-moz-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);<br />
background:-ms-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);<br />
background:-o-linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%);<br />
background:linear-gradient(45deg, red 0%, red 33.33%, #4DD9B2 33.33%, #4DD9B2 66.66%, red 66.66%)}<br />
</style><br />
<div class="button btn4"><span style="color: #6fa8dc;">( 4 ) Background Swap</span></div></div></div><div id="target5"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">5. Pop Out Effect | Zoom</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Pop Out Effect | Zoom */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn5 {<br />
background:#6495ED;<br />
-webkit-transition: all 0.25s;<br />
-moz-transition: all 0.25s;<br />
-ms-transition: all 0.25s;<br />
-o-transition: all 0.25s;<br />
transition: all 0.25s;<br />
box-shadow: 1px 1px 2px #000}<br />
<br />
.btn5:hover {<br />
-webkit-transform:scale(1.5);<br />
-moz-transform:scale(1.5);<br />
-o-transform:scale(1.5);<br />
-ms-transform:scale(1.5);<br />
transform:scale(1.5)}<br />
</style><br />
<div class="button btn5"><span style="color: #6fa8dc;">( 5 ) Pop Out Effect | Zoom</span></div></div></div><div id="target6"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">6. Quick Click</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Quick Click */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn6:active {top:4px}<br />
.btn6 {background:#DC143C;box-shadow:0px 0px 15px #000;position:relative;top:0;color:#fff;text-shadow:1px 2px 1px #111}<br />
</style><br />
<div class="button btn6"><span style="color: #6fa8dc;">( 6 ) Quick Click</span></div></div></div><div id="target7"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">7. 3D On Hover</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* 3D On Hover */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn7:hover {box-shadow:none;top:5px;left:5px}<br />
.btn7 {<br />
top:0;left:0;position:relative;<br />
border-radius:5px;background: red;<br />
color:#fff;text-shadow:1px 2px 2px #111;<br />
box-shadow:2px 2px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc;<br />
transition:top 0.25s, left 0.25s, box-shadow 0.25s;<br />
-webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;<br />
-moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;<br />
-o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}<br />
</style><br />
<div class="button btn7"><span style="color: #6fa8dc;">( 7 ) 3D On Hover</span></div></div></div><div id="target8"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">8. Slide Down Background</span><br />
Efek slide sama dengan tampilan tombol yang pertama dan kedua, namun model tombol ini saya buat dengan background full (tombol akan berubah warna saat di HOVER dengan efek slide-down), perpindahan warna akan terjadi dari bawah keatas dengan sistem slide. Kode lengkapanya seperti ini:<br />
<br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide Down Background */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn8:hover {background-position:0 0}<br />
.btn8 {<br />
background:-webkit-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);<br />
background:-moz-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);<br />
background:-ms-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);<br />
background:-o-linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);<br />
background:linear-gradient(#4DD9B2 0%, #4DD9B2 50%, #FFDE00 50%);<br />
background-size:100% 200%;<br />
background-position:100% 100%;<br />
-webkit-transition:all 0.5s;<br />
-moz-transition:all 0.5s;<br />
-ms-transition:all 0.5s;<br />
-o-transition:all 0.5s;<br />
transition:all 0.5s}<br />
</style><br />
<div class="button btn8"><span style="color: #6fa8dc;">( 8 ) Slide Down Background</span></div></div></div><div id="target9"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">9. Slide Up Background</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide Up Background */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn9:hover {background-position:100% 100%}<br />
.btn9 {<br />
background:-webkit-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);<br />
background:-moz-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);<br />
background:-ms-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);<br />
background:-o-linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);<br />
background:linear-gradient(#b9ca4a 0%, #b9ca4a 50%, #7aa6da 50%);<br />
background-size:100% 200%;<br />
background-position:0 0;<br />
-webkit-transition:all 0.5s;<br />
-moz-transition:all 0.5s;<br />
-ms-transition:all 0.5s;<br />
-o-transition:all 0.5s;<br />
transition:all 0.5s}<br />
</style><br />
<div class="button btn9"><span style="color: #6fa8dc;">( 9 ) Slide Up Background</span></div></div></div><div id="target10"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">10. Slide Right Background</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide Right Background */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn10:hover {background-position:0 0}<br />
.btn10 {<br />
background:-webkit-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);<br />
background:-moz-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);<br />
background:-ms-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);<br />
background:-o-linear-gradient(left, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);<br />
background:linear-gradient(to right, #d54e53 0%, #d54e53 50%, #4DD9B2 50%);<br />
background-size:200% 100%;<br />
background-position:100% 0;<br />
-webkit-transition:all 0.5s;<br />
-moz-transition:all 0.5s;<br />
-ms-transition:all 0.5s;<br />
-o-transition:all 0.5s;<br />
transition:all 0.5s}<br />
</style><br />
<div class="button btn10"><span style="color: #6fa8dc;">( 10 ) Slide Right Background</span></div></div></div><div id="target11"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">11. Slide left Background</span><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Slide Left Background */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn11:hover {background-position:100% 0}<br />
.btn11 {<br />
background:-webkit-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);<br />
background:-moz-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);<br />
background:-ms-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);<br />
background:-o-linear-gradient(left, #c397d8 0%, #c397d8 50%, #FFDE00 50%);<br />
background:linear-gradient(to right, #c397d8 0%, #c397d8 50%, #FFDE00 50%);<br />
background-size:200% 100%;<br />
background-position:0 0;<br />
-webkit-transition:all 0.5s;<br />
-moz-transition:all 0.5s;<br />
-ms-transition:all 0.5s;<br />
-o-transition:all 0.5s;<br />
transition:all 0.5s}<br />
</style><br />
<div class="button btn11"><span style="color: #6fa8dc;">( 11 ) Slide Left Background</span></div></div></div><div id="target12"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">12. Radiating Border</span><br />
Memberi garis diluar tombol dengan jarak tertentu, dan itu akan terjadi saat tombol di hover, sedangkan kecepatan kemunculan garis saya atur dengan <acronym style="cursor:pointer;color:orange;font:bold 13px Courier,Monospace" title="Kode Apa ini?">transition ease-in-out</acronym>. Mau membuat model tombol ini, CSS lengkapnya seperti ini:<br />
<br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Radiating Border */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn12 {background:#e78c45;position:relative}<br />
.btn12:hover {background:#7FFF00}<br />
.btn12:hover:after {height:95px;width:390px;top:-12px;left:-12px}<br />
.btn12:after {<br />
content: "";height: 0;width: 0;position: absolute;top: 50%;left: 50%;<br />
border: 2px solid #7FFF00;z-index: -10;<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-moz-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out}<br />
</style><br />
<div class="button btn12"><span style="color: #6fa8dc;">( 12 ) Radiating Border</span></div></div></div><div id="target13"><br />
<br />
<span style="font:bold 14px/28px Verdana,sans-serif">13. Spinning Diamond (Arrow)</span><br />
Coba lihat disini <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/04/membuat-tombol-download-dengan-css-pseudo.html" target="_blank" title="Membuat Tombol Download Dengan CSS Pseudo"><strong>Membuat Tombol Download Dengan CSS Pseudo</strong></a>. Model hampir sama, namun efeknya saya modifikasi mirip tampilan tooltip teks dengan arrow, sedangkan efeknya saya buat berputar hanya pada tanda panahnya saja (spinning diamond), kodenya seperti ini:</div><br />
<div class="bbr"><style type='text/css'><br />
<span style="color: yellow;">/* Spinning Diamond (Arrow) */</span><br />
.button {width:350px;margin:0 auto;padding:5px 10px;cursor:pointer}<br />
.btn13 {<br />
background:#4DD9B2;<br />
position:relative;<br />
-webkit-transition:all 0.25s ease-in-out;<br />
-moz-transition:all 0.25s ease-in-out;<br />
-ms-transition:all 0.25s ease-in-out;<br />
-o-transition:all 0.25s ease-in-out;<br />
transition:all 0.25s ease-in-out}<br />
<br />
.btn13:after {<br />
content: "";background: #4DD9B2;height: 25px;width: 25px;<br />
position: absolute;top: 61px;left: 162px;<br />
-webkit-transform:rotate(45deg);<br />
-moz-transform:rotate(45deg);<br />
-o-transform:rotate(45deg);<br />
-ms-transform:rotate(45deg);<br />
transform:rotate(45deg);<br />
-webkit-transition:all 0.25s ease-in-out;<br />
-moz-transition:all 0.25s ease-in-out;<br />
-ms-transition:all 0.25s ease-in-out;<br />
-o-transition:all 0.25s ease-in-out;<br />
transition:all 0.25s ease-in-out}<br />
<br />
.btn13:hover {background:#b6efdf}<br />
.btn13:hover:after {<br />
-webkit-transform:rotate(135deg);<br />
-moz-transform:rotate(135deg);<br />
-o-transform:rotate(135deg);<br />
-ms-transform:rotate(135deg);<br />
transform:rotate(135deg);<br />
background:red}<br />
</style><br />
<div class="button btn13"><span style="color: #6fa8dc;">( 13 ) Spinning Diamond</span></div></div></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com10tag:blogger.com,1999:blog-8783436895090091189.post-16783219814791514182015-05-24T14:43:00.002+01:002015-05-24T14:52:26.042+01:00CSS Slideshow Tutorial<b>Image Gallery Slideshow With CSS Keyframes</b><br />
<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">CSS Slideshow Tutorial</span> - Tampilan saya sederhanakan dan dimodifikasi ulang dari postingan sebelumnya tentang <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/03/efek-slide-show-otomatis-pada-gambar.html" target="_blank" title="Efek Slide Show Otomatis Pada Gambar"><strong>Efek Slide Show Otomatis Pada Gambar</strong></a>, efek pergantian gambar slide menggunakan elemen CSS <acronym style="cursor:pointer;color:#39f;font:bold 13px Courier,Monospace" title="Kode Apa ini?">animation-delay</acronym> dengan skala per 6s (6detik).<br />
<br />
<span style="font:bold 18px/32px Verdana,sans-serif;color:darkred">Konsep Dasar Membuat Slideshow Effect</span><br />
<b>1.1 CSS Element</b><br />
<br />
Siapkan beberapa Gambar yang akan kita susun dalam album, yang nantinya akan ditampilkan secara bergantian satu gambar per 6detik dengan efek otomatis slide, susunannya seperti ini:<br />
<style>.br {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-bottom:4px double #fff;text-align:left}</style><br />
<div class="br"><code><br />
<span style="color: #ffe599;">/* tanpa animation-delay */</span><br />
.pic-1 {opacity:1;background:url(<span style="color: #e06666;">http://URL-Gambar</span>)}<br />
.pic-2 {<br />
<span style="color: #ffe599;">/* with animation-delay per (6detik) */</span><br />
animation-delay: 6s;<br />
background:url(<span style="color: #e06666;">http://URL-Gambar</span>)<br />
}<br />
<br />
<span style="color: #ffe599;">/* sampai gambar berikutnya, dengan selisih 6detik (delay:6s) */</span><br />
.pic-3 {....}<br />
.pic-4 {....}</code></div><br />
<br />
Selanjutnya tinggal menyusun bentuk pergantian gambar dengan slideshow perintah, namun jangan lupa untuk membuat pergantian gambarnya secara terus menerus, gambar akan berganti dengan selang waktu 6 detik sampai menampilkan gambar terakhir, dan akan kembali ke gambar pertama, begitu seterusnya (otomatis slide) menggunakan <acronym style="cursor:pointer;color:#e06666;font:bold 13px Courier,Monospace" title="Kode Apa ini?">animation:linear infinite</acronym> seperti ini:<br />
<br />
<div class="br"><code><br />
figure {<br />
position:absolute;<br />
width:100%;<br />
height:100%;<br />
opacity:0;<br />
animation:slideShow 24s linear infinite 0s<br />
}<br />
<br />
<span style="color: #ffe599;">/* Tahap akhir memanggil fungsinya dengan media keyframes (@keyframes) */</span><br />
@keyframes slideShow {<br />
0% {opacity:0;transform:scale(1)}<br />
4% {opacity:1}<br />
24% {opacity:1}<br />
28% {opacity:0;transform:scale(1.1)}<br />
100% {opacity: 0;transform:scale(1)}<br />
}</code></div><br />
<br />
<b>1.2 HTML Markup</b><br />
<br />
Selesai menyusun semua konsepnya dengan CSS, tinggal menampilkan hasil kerja Anda dengan pemanggil HTML berdasarkan atribut <b>class(.)</b> atau <b>id(#)</b> sesuai tahap penyusunan yang Anda deklerasikan seperti ini:<br />
<br />
<div class="br"><code><br />
<div class="pic-wrapper"><br />
<figure class="pic-1"></figure><br />
<figure class="pic-2"></figure><br />
<figure class="pic-3"></figure><br />
<figure class="pic-4"></figure><br />
</div></code></div><br />
<span style="color:darkred;font:bold italic 15px Georgia">Dan hasilnya :</span><br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/slideshow-effect-with-css-only.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
Bagaimana menurut sahabat semua pecinta <b>SAHABAT BLOGGER 77</b>, cara <b>membuat efek slideshow dengan CSS</b> seperti diatas cukup mudah bukan..!!. Yang terpenting adalah ukuran dan waktu pergantian gambar harus sesuai dengan gambar yang akan ditampilkan berikutnya.</div><br />
<span style="color:darkred;font:bold italic 15px Georgia">Susunan CSS lengkapnya seperti ini:</span><br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
.pic-wrapper {position:relative;height:250px;width:40%;margin:0 auto}
figure {
position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;
animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s}
.pic-1 {opacity:1;border:3px solid yellow;background:url(<span style="color: #ea9999;">http://URL-Gambar</span>)}
.pic-2 {
animation-delay: <span style="color: #6fa8dc;">6s</span>;-moz-animation-delay: 6s;-webkit-animation-delay: 6s;
border:3px solid lime;background:url(<span style="color: #ea9999;">http://URL-Gambar</span>)}
.pic-3 {
animation-delay: <span style="color: #6fa8dc;">12s</span>;-moz-animation-delay: 12s;-webkit-animation-delay: 12s;
border:3px solid aqua;background:url(<span style="color: #ea9999;">http://URL-Gambar</span>)}
.pic-4 {
animation-delay: <span style="color: #6fa8dc;">18s</span>;-moz-animation-delay: 18s;-webkit-animation-delay: 18s;
border:3px solid red;background: url(<span style="color: #ea9999;">http://URL-Gambar</span>)}
.pic-1,.pic-2,.pic-3,.pic-4 {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover}
@keyframes slideShow {
0% {opacity:0;transform:scale(1)}
4% {opacity:1}
24% {opacity:1}
28% {opacity:0;transform:scale(1.1)}
100% {opacity: 0;transform:scale(1)}}
<span style="color: #999999;">/* insert support peramban browser codes */</span>
@-webkit-keyframes slideShow {....}
@-moz-keyframes slideShow {....}
@-ms-keyframes slideShow {....}
@-o-keyframes slideShow {....}</code></pre><br />
<pre rel="HTML"><code>
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div></code></pre>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com24tag:blogger.com,1999:blog-8783436895090091189.post-13598432228823285742015-05-24T03:37:00.003+01:002015-05-24T05:20:13.023+01:00Text Shadow Animasi Pure CSS<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Text Shadow Animasi Pure CSS</span> - Efek animasi kali ini adalah bagaimana cara membuat <em>teks bergerak atau bergeser kekanan secara infinite (tidak terbatas)</em>, namun yang kita gerakkan hanya banyangan teks dengan jarak per 10px. Ibarat Anda berjalan yang sudah pasti meninggalkan jejak kaki disetiap langkah demi langkah, terkecuali Anda bisa terbang pasti tidak ada jejak kaki atau bekas pijakan kaki <acronym style="cursor:pointer;color:red;font:bold 13px Courier,Monospace" title="Sidik jari tangan atau sidik jari kaki? PIKIR sendiri ya..!!">(sidik jari)</acronym>, hehe..!!<br />
<br />
Gerakan ini sama seperti efek <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/12/animasi-teks-hitam-putih-dengan-marquee.html" target="_blank" title="Animasi Teks Hitam Putih Dengan Marquee"><strong>Animasi Teks Hitam Putih Dengan Marquee</strong></a>, hanya teks saya tumpuk dalam beberapa warna sebagai <b>banyangan (shadow)</b>, ada 7 teks yang bertumpuk dalam satu area, namun saya pisahkan dengan warna untuk membedakan teks.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-WXWr_9EggkE/VWE12JQA95I/AAAAAAAAB-o/mgN5sD_6o_A/s1600/text-syadow.png"><img alt="text shadow animasi" src="https://1.bp.blogspot.com/-WXWr_9EggkE/VWE12JQA95I/AAAAAAAAB-o/mgN5sD_6o_A/s1600/text-syadow.png" title="Text Shadow Animasi Pure CSS" /></a></div><br />
<br />
<style>.balon-kata {background:#080;position:relative;padding:5px 10px;color:white;font:normal 16px Calibri,Arial,Sans-Serif;width:335px;border-radius:5px;margin-left:35px}.balon-kata.bottom:after {content:"";width:auto;overflow:auto;position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#080 transparent transparent #080;-webkit-transform:skew(-30deg, 0deg);-moz-transform:skew(-30deg, 0deg);-ms-transform:skew(-30deg, 0deg);-o-transform:skew(-30deg, 0deg);transform:skew(-30deg, 0deg);display:block;
}</style><br />
<div class="balon-kata bottom">Collections of animated text effects for You</div><br />
<ul style="line-height:24px"><li><a href="http://sahabatblogger77.blogspot.com/2014/09/menampilkan-bayangan-teks-saat-hover.html" target="_blank" title="Menampilkan Bayangan Teks Saat Hover"><strong>Menampilkan Bayangan Teks Saat Hover</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/01/10-gaya-efek-css-animasi-pada-teks.html" target="_blank" title="10 Gaya Efek CSS Animasi Pada Teks"><strong>10 Gaya Efek CSS Animasi Pada Teks</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2014/09/membuat-animasi-teks-berputar-efek-3d.html" target="_blank" title="Membuat Animasi Teks Berputar Efek 3D"><strong>Membuat Animasi Teks Berputar Efek 3D</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/01/menggerakkan-bayangan-teks-dengan-mouse.html" target="_blank" title="Menggerakkan Bayangan Teks Dengan Mouse"><strong>Menggerakkan Bayangan Teks Dengan Mouse</strong></a></li>
</ul><br />
<br />
Membuat tampilan teks yang menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda, efek <b>Text Shadow Animasi Pure CSS</b> seperti ini bisa Anda jadikan alternatif suatu saat Anda ingin membuat hiasan judul blog dengan teks bergerak seperti ini:</div><br />
<br />
<br />
<style>a#button{top:0;left:0;position:relative;font:bold 20px/35px Lato,serif;border:solid 1px #333;border-radius:5px;background: red;color:#fff;text-shadow:1px 2px 2px #111;padding:10px 15px;box-shadow:2px 2px 0 #333,3px 3px 0 #333,4px 4px 0 #333,5px 5px 0 #333;transition:top 0.25s, left 0.25s, box-shadow 0.25s;-webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}
a#button:hover{box-shadow:none;top:5px;left:5px}</style><br />
<center><a href="http://demoshow77.blogspot.com/2015/05/text-shadow-animation.html" id="button" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow">DEMO SHOW</a></center><br />
<br />
<br />
Bagaimana, mau mencoba teks bergerak seperti ini? CSS lengkapnya seperti ini:<br />
<style>.bb1 {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid #39f;text-align:left}
</style><br />
<div class="bb1"><code><br />
<style><br />
.text {<br />
margin-top:-40px;<br />
color:#FFFF00;<br />
font:bold italic 80px sans-serif;<br />
text-transform:uppercase;<br />
letter-spacing:1.4px;<br />
-webkit-text-stroke:3px #00FF7F;<br />
animation:text-shadow 3.5s ease-out infinite;<br />
-webkit-animation:text-shadow 3.5s ease-out infinite;<br />
-moz-animation:text-shadow 3.5s ease-out infinite;<br />
-ms-animation:text-shadow 3.5s ease-out infinite;<br />
-o-animation:text-shadow 3.5s ease-out infinite}<br />
<br />
@-webkit-keyframes text-shadow {<br />
15% {margin-left:0;text-shadow:none}<br />
45%,55% {margin-left:1.25em;-webkit-text-stroke: 6px #FFF;<br />
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}<br />
<br />
@-moz-keyframes text-shadow {<br />
15% {margin-left:0;text-shadow:none}<br />
45%,55% {margin-left:1.25em;-moz-text-stroke: 6px #FFF;<br />
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}<br />
<br />
@keyframes text-shadow {<br />
15% {margin-left:0;text-shadow:none}<br />
45%,55% {margin-left:1.25em;text-stroke: 6px #FFF;<br />
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}<br />
</style><br />
<div class="text"><span style="color: #6fa8dc;">Sahabat Blogger 77</span></div></code></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com13tag:blogger.com,1999:blog-8783436895090091189.post-88080215369850574742015-05-23T04:42:00.002+01:002015-05-23T04:47:15.834+01:00Daftar Label Kategori Model Dropdown<div style="font-weight: bold; text-align: center;">File Category Labels Blog Model Select Item</div><div style="text-align:justify"><span style="font:bold 14px Verdana,sans-serif">Daftar Label Kategori Model Dropdown</span> - Dropdown merupakan efek untuk menampilkan item sub menu dalam diagram dengan gerakan menurun kebawah. Seperti daftar link menu navigasi blog pada umumnya, dimana jika selector <span style="color:#080;font:13px Courier,Monospace"><ul></span> digandakan lagi untuk membuat sub menu, maka saat element induk diHOVER akan menunjukkan beberapa pilihan item menu dengan efek dropdown seperti ini:<br />
<br />
<style>.tb1,.tb2,.tb3 {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;text-align:left}.tb1{border-left:5px solid red}.tb2{border-left:5px solid orange}.tb3{border-left:5px solid #39f}</style><br />
<div class="tb1"><div id="daftar label kategori"><br />
<ul="[class:atibut]"><br />
<li><a href="....">Daftar Label Kategori</a></li><br />
<li><a href="....">Daftar Label Kategori</a></li><br />
<span style="color: #ffd966;">//menggandakan diagram ul</span><br />
<ul class="model menu"><br />
<li>.....</li><br />
<li>.....</li><br />
</ul><br />
</ul><br />
</div></div><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-TvXKpnOECgM/VV_yFvIvzII/AAAAAAAAB94/S_QojvjoZJc/s1600/file+Labels.png"><img alt="Label blog" src="https://1.bp.blogspot.com/-TvXKpnOECgM/VV_yFvIvzII/AAAAAAAAB94/S_QojvjoZJc/s1600/file+Labels.png" title="File Category Labels Blog Model Select Item" /></a></div><br />
<br />
<br />
<br />
<style>.boo {display: inline-block;position: relative;padding: 5px 10px 5px 5px;background: red;color: white;margin:0 15px;font: 10px Verdana, sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>BACA JUGA</div><a href="http://sahabatblogger77.blogspot.com/2014/08/menghilangkan-daftar-artikel-pada-halaman-beranda.html" target="_blank" title="Menghilangkan Daftar Artikel Pada Halaman Beranda"><strong>Menghilangkan Daftar Artikel Pada Halaman Beranda</strong></a><br />
<br />
<br />
<br />
Disini yang kita butuhkan hanya satu item menu, yang nantinya akan kita buat menjadi model menu dropdown untuk menampilkan daftar label blog dengan JavaScript perintah (<span style="color:#e06666;font:13px Courier,Monospace">JavaScript Variable=[json.feed.category]</span>), seperti ini:<br />
<br />
<div class="tb2">document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=<span style="color: #6fa8dc;">showLabels</span>"><\/scr' + 'ipt>')</div><br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/p/cdatavar-homepage-httpsahabatblogger77.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
Karena modelnya seperti item menu, jadi Anda bisa menempatkan hasilnya dimana saja, atau bisa Anda gabungkan dalam selecktor <span style="color:#39f;font:13px Courier,Monospace"><li></span> pada menu navigasi blog Anda, daftar label kategori model dropdown seperti ini, sudah pernah saya gabungkan dalam satu tampilan seperti ini:<br />
<br />
<span style="color:red;font:bold 18px/26px Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/cara-membuat-site-map-terbaru-daftar-isi-blog.html" target="_blank" title="Cara Membuat Site Map Terbaru | Daftar Isi Blog"><strong>Cara Membuat Site Map Terbaru | Daftar Isi Blog</strong></a><br />
<span style="color:red;font:bold 18px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/03/mengubah-breadcrumb-menjadi-menu-navigasi.html" target="_blank" title="Mengubah Breadcrumb Menjadi Menu Navigasi"><strong>Mengubah Breadcrumb Menjadi Menu Navigasi</strong></a><br />
<br />
Bagaimana dengan Anda?, dimana akan Anda letakkan daftar file label ini, hmmm..letakkan sesuai selera ya guys hehe..!!, yang sekiranya enak untuk dipandang. Mau membuatnya, berikut kode lengkapnya:</div><br />
<div class="tb3"><style><br />
.file {color:#eee}<br />
.fileLabels {color:#fff;background:red}<br />
#wpLabels {background:red;width:27%;padding:3px}<br />
</style><br />
<div id="wpLabels"><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
<span style="color: #999999;">//(orange text) ganti dengan URL-Blog Anda..</span><br />
var homepage = "<span style="color: orange;">http://sahabatblogger77.blogspot.com</span>";<br />
function showLabels(json) {<br />
var label = json.feed.category;<br />
document.write('<select onchange="window.open(this.value);"><option selected disabled class="file">DAFTAR LABEL CATEGORY</option>');<br />
for (var i = 0; i < label.length; i++) {<br />
document.write('<option class="fileLabels" value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');<br />
}<br />
document.write('</select>');<br />
}<br />
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');<br />
//]]><br />
</script><br />
</div></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com14tag:blogger.com,1999:blog-8783436895090091189.post-20533355787417732802015-05-20T16:25:00.003+01:002015-05-20T16:40:52.757+01:00PUISI : Pengorbanan CINTA<div style="text-align: justify;"><span style="font:bold 17px Verdana,sans-serif">PUISI : Pengorbanan CINTA</span> - Banyak yang bilang kalau CINTA itu buta, banar gak sih..? buta dalam defenisi kasmaran mungkin bisa kita gambarkan seperti ini :<br />
<br />
<ul><li>Cinta itu buta, yang hadir tanpa kita rencanakan dan tidak pernah mengenal dan melihat kapan dan bagaimana kondisi kita saat itu.</li>
<li>Cinta itu buta, yang rela melakukan apa saja ( <b>Pengorbanan</b> ) hanya untuk membuat sidia bahagia dan senyum tertawa, tanpa melihat seberapa besar yang sudah kita berikan karenanya.</li>
<li>Cinta itu buta, sekalipun dengan mata tertutup kita bisa merasakan keindahannya.</li>
<li>Cinta itu buta, karena berbicara dari hati ke hati.</li>
<li>Cinta itu buta, <span style="color:red;font:bold 14px Verdana">B</span>ukan <span style="color:red;font:bold 14px Verdana">U</span>ntuk <span style="color:red;font:bold 14px Verdana">T</span>ampang <span style="color:red;font:bold 14px Verdana">A</span>ja.</li>
<li>Cinta itu buta, yang tidak pernah melihat kala air mata ini terjatuh karena terluka karenanya.</li>
<li>Cinta itu buta, saat ada kesempatan, ditempat gelap, pasti dech meraba..!! (hayoo.. nenek bilang itu berbahaya, tidak boleh ya, hehe..!!)</li>
</ul><br />
<br />
Tetapi Cinta itu sangat indah sekalipun itu bukan yang pertama, karena cinta bisa hadir dan pergi sekalipun kita tidak meminta dan mengusirnya. Namun pengorbanan Cinta yang sudah kita lakukan tidak selalu menghasilkan tawa bahagia, lewat coretan ini saya akan curahkan beberapa bait <b>PUISI : Pengorbanan CINTA.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-RCd7pN2FEc0/VVykI_TbzuI/AAAAAAAAB9c/wQRWWYd49rI/s1600/Tears+Of+Love.png"><img alt="Tears Of Love" src="https://1.bp.blogspot.com/-RCd7pN2FEc0/VVykI_TbzuI/AAAAAAAAB9c/wQRWWYd49rI/s1600/Tears+Of+Love.png" title="Pengorbanan CINTA" /></a></div><br />
<br />
<br />
<style>@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
#love{margin:0 20px 0 20px}
.top{border-radius:0 0 10px 10px;border-top:4px solid red;font:900 24px 'Aladin',cursive;text-transform:uppercase;letter-spacing:2px}
.top,.bot{background-image:-webkit-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-moz-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-ms-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:-o-linear-gradient(left, transparent 0%,blue 50%,transparent 100%);background-image:linear-gradient(left, transparent 0%,blue 50%,transparent 100%);border-left:3px solid red;border-right:3px solid red;padding:10px;text-align:center;color:#fff;text-shadow:1px 2px 1px #111}
.bot{border-bottom:2px solid red;border-radius:10px 10px 0 0;text-align:right;padding-right:100px}
.content{background:#fff;border-bottom:2px solid #999;border-left:2px solid red;border-right:2px solid red;border-top:2px solid #ccc;margin:0 8px 0 8px;padding:15px 25px;text-align:left;font:normal 18px/normal 'Aladin',cursive}</style><br />
<div id="love"><div class="top">PENGORBANAN CINTA</div><div class="content">Tiada tempat seindah surga<br />
Yang akan aku bingkiskan demi Cintaku <br />
Tiada sinar seindah mentari<br />
Yang akan aku curahkan demi sayangku<br />
<br />
Demi Cinta, kasih dan kerinduan<br />
Jangan.......jangan pernah lukai hatiku<br />
<br />
Saat kehadiranmu labuhkan Cinta dihati<br />
Buat rasa trauma Cintaku terkubur mati<br />
Mungkinkah kisah ini akan abadi<br />
Kala bunga t'lah gugur dimusim semi<br />
<br />
Ku tak akan <b>lelah menyayangimu</b><br />
Ku tak akan <b>lari saat membencimu</b><br />
Ku tak akan pernah hapus namamu dihatiku<br />
Walau luka karenamu jatuhkan air mataku<br />
<br />
Ku tahu Cintamu bukan untukku<br />
Sayangmu juga bukan untukku<br />
Tapi.....atas nama Cinta..!!<br />
Hari ini,,esok dan sampai kapanpun<br />
Ku akan setia menunggu kado Cintamu..<br />
</div><div class="bot">By. Devy Indriyani</div></div><br />
<br />
Cinta tidak harus memiliki, tetapi setidaknya dengan pengorbanan kita bisa tahu defenisi Cinta yang sesungguhnya. Semoga pesan Cinta ini bisa menjaga hubungan Anda dan sidia saat ini, dan terhindar dari <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/01/faktor-utama-penyebab-putus-cinta.html" target="_blank" title="Faktor Utama Penyebab Putus Cinta"><strong>8 Faktor Utama Penyebab Putus Cinta</strong></a>.</div><br />
<div style="text-align:center;">CINTA butuh kasih sayang, CINTA butuh pengertian, namun CINTA juga butuh Pengorbanan<br />
** I love You **</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com26tag:blogger.com,1999:blog-8783436895090091189.post-88064265830322880232015-05-17T06:05:00.001+01:002015-05-17T06:37:52.426+01:00Modifikasi Tab Content Dengan jQuery UI<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Modifikasi Tab Content Dengan jQuery UI</span> - Apa yang Anda pikirkan jika harus mengedit kode dengan jQuery UI, lalu apa yang akan Anda buat setelahnya?. Jika Anda tahu begitu banyak fitur-fitur element yang terkandung didalam script jQuery UI ini, maka banyak widget dengan berbagai efek dapat Anda hasilkan hanya dengan menggunakan jQuery ini. Pada <span style="color: red;">season#1 Widget.UI</span> sudah saya bahas Cara <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/03/menyeleksi-fitur-objek-dengan-jquery-ui.html" target="_blank" title="Menyeleksi Fitur Objek Dengan jQuery UI"><strong>Menyeleksi Fitur Objek Dengan jQuery UI</strong></a> untuk modifikasi widget blog, kesempatan kali ini saya akan berikan <b>3 model TAB Content</b> dengan berbagai efek desain seperti :<br />
<br />
<style>.balon-kata {border-right:4px solid lime;background:#080;position:relative;padding:10px;color:white;font:normal 16px Calibri,Arial,Sans-Serif;width:355px;height:auto;border-radius:5px;margin-left:35px}.balon-kata.bottom:after {content:"";width:auto;overflow:auto;position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#080 transparent transparent #080;-webkit-transform:skew(-30deg, 0deg);-moz-transform:skew(-30deg, 0deg);-ms-transform:skew(-30deg, 0deg);-o-transform:skew(-30deg, 0deg);transform:skew(-30deg, 0deg);display:block;
}</style><br />
<div class="balon-kata bottom">Anda Tinggal <span style="color:darkyellow;font:bold 15px Verdana,sans-serif">KLIK</span> menu TAB pilihan Anda disini..</div><br />
<ul style="font: bold 14px/20px Helvetia"><li><a href='#target1' title="Default Tabs">Default Tabs</a></li>
<li><a href='#target2' title="Open Tabs On MouseOver (HOVER)">Open Tabs On MouseOver (HOVER)</a></li>
<li><a href='#target3' title="Sort Table Title (DRAGGABLE)">Sort Table Title (DRAGGABLE)</a></li>
</ul><br />
<br />
Membuat Tab Content merupakan cara untuk merangkum berbagai jenis content yang berbeda untuk ditampilkan dalam satu tabel yang sama. <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/08/membuat-label-blogger-accordion-efek-tabulasi.html" target="_blank" title="Membuat Label Blogger Accordion Efek Tabulasi"><strong>Membuat Label Blogger Accordion Efek Tabulasi</strong></a> merupakan salah satu cara untuk mengumpulkan semua postingan Anda, untuk ditampilkan dan disusun pada halaman yang sama berdasarkan kategori masing-masing tag label seperti ini:<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2014/09/article-tab-effect.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<div id="target1"><br />
<br />
<span style="color:darkred;font:bold 20px Verdana,sans-serif">3 Model Tab Content Dengan jQuery UI</span><br />
<span style="font:bold 15px/35px Verdana,sans-serif">1. Default Tabs</span><br />
Tampilan yang simple dan sangat sederhana, namun pada link menu TAB saya tandai dengan auto-focus color saat Anda berada ditab content-1, content-2 dan seterusnya. Hal ini untuk memudahkan pembaca tahu kalau saat ini mereka sedang membaca informasi dalam content berapa, sehingga lebih mudah untuk melanjutkan pada tab selanjutnya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-xUBF0uY0qkg/VVgcJeYgPgI/AAAAAAAAB8s/Dy2_ZNrQmgA/s1600/Tab+Content+Default.png"><img alt="Tab content" src="https://1.bp.blogspot.com/-xUBF0uY0qkg/VVgcJeYgPgI/AAAAAAAAB8s/Dy2_ZNrQmgA/s1600/Tab+Content+Default.png" title="Default ContentTabs" /></a></div><br />
<style>.bt1,.bt2,.bt3 {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid #39f;text-align:left}</style><br />
<div class="bt1"><code><br />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"><br />
<script src="//code.jquery.com/jquery-1.10.2.js"></script><br />
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script><br />
<link rel='stylesheet' href='http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css'><br />
<script><br />
$(function() {<br />
$( "#tabs" ).tabs();<br />
});<br />
</script><br />
<style><br />
#tabs {border:2px solid red}<br />
.menuContent {background:#38f}<br />
.menuContent a {<br />
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}<br />
.menuContent a:hover,.menuContent a:focus {<br />
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}<br />
</style><br />
<div id="tabs"><br />
<ul class="menuContent"><br />
<li><a style="color:#fff" href="#tabs-1"><span style="color: #6fa8dc;">Content1</span></a></li><br />
<li><a style="color:#fff" href="#tabs-2"><span style="color: #6fa8dc;">Content2</span></a></li><br />
<li><a style="color:#fff" href="#tabs-3"><span style="color: #6fa8dc;">Content3</span></a></li><br />
</ul><br />
<div id="tabs-1"><span style="color: #f6b26b;">...Tulis Content (1) Disini...</span></div><br />
<div id="tabs-2"><span style="color: #f6b26b;">...Tulis Content (2) Disini...</span></div><br />
<div id="tabs-3"><span style="color: #f6b26b;">...Tulis Content (3) Disini...</span></div><br />
</div></code></div></div><div id="target2"><br />
<br />
<span style="font:bold 15px/35px Verdana,sans-serif">2. Open Tabs On MouseOver (HOVER)</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-e4zFQhC2Fl4/VVgcJcaHIeI/AAAAAAAAB8o/tgwIEwXnQJY/s1600/Tab+Content+Hover.png"><img alt="Tabs Content" src="https://1.bp.blogspot.com/-e4zFQhC2Fl4/VVgcJcaHIeI/AAAAAAAAB8o/tgwIEwXnQJY/s1600/Tab+Content+Hover.png" title="Open Tabs On MouseOver (HOVER)" /></a></div><br />
<br />
Untuk model ke-2 saya desain dengan sistem HOVER, jadi untuk membuka link pada tab selanjutnya Anda tidak perlu melakukan KLIK, cukup letakkan saja panah mouse Anda pada menu tab, maka Anda sudah bisa membaca isi content dalam menu tersebut, dan bukan hanya itu saja, masing-masing content tab saya bedakan dengan warna background yang berbeda. Bagaimana? mau pilih model yang ini gak.!!, kode lengkapnya seperti ini:<br />
<br />
<div class="bt2"><code><br />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"><br />
<script src="//code.jquery.com/jquery-1.10.2.js"></script><br />
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script><br />
<link rel="stylesheet" href="http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css"><br />
<script><br />
$(function() {<br />
$( "#tabs" ).tabs({<br />
event: "mouseover"<br />
});<br />
});<br />
</script><br />
<style><br />
#tabs {border:none}<br />
.menuContent {background:#38f}<br />
.menuContent a {<br />
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}<br />
.menuContent a:hover {<br />
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}<br />
</style><br />
<div id="tabs"><br />
<ul class="menuContent"><br />
<li><a style="color:#fff" href="#tabs-1"><span style="color: #6fa8dc;">Content1</span></a></li><br />
<li><a style="color:#fff" href="#tabs-2"><span style="color: #6fa8dc;">Content2</span></a></li><br />
<li><a style="color:#fff" href="#tabs-3"><span style="color: #6fa8dc;">Content3</span></a></li><br />
</ul><br />
<div id="tabs-1" style="background:#333;border-top:3px solid yellow;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (1) Disini...</span><br />
</div><br />
<div id="tabs-2" style="background:darkred;border-top:3px solid magenta;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (2) Disini...</span><br />
</div><br />
<div id="tabs-3" style="background:darkblue;border-top:3px solid lime;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (3) Disini...</span><br />
</div><br />
</div></code></div></div><div id="target3"><br />
<br />
<span style="font:bold 15px/35px Verdana,sans-serif">3. Sort Table Title (DRAGGABLE)</span><br />
Desain pada model ini saya modifikasi dengan efek DRAG, artinya menu link pada tiap-tiap tab bisa Anda pindahkan posisinya bergantian dengan menu yang lain. (Tempat dimana letak Tab-1 bisa diganti posisinya dengan Tab-2 atau Tab-3, tab-2 diganti dengan tab-3 dan seterusnya sesuai selera Anda).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Abwp8RlA0TA/VVgcJL8iRDI/AAAAAAAAB8k/SPaqFRwpDZ0/s1600/Tab+Content+Draggable.png"><img alt="Tabs Content" src="https://1.bp.blogspot.com/-Abwp8RlA0TA/VVgcJL8iRDI/AAAAAAAAB8k/SPaqFRwpDZ0/s1600/Tab+Content+Draggable.png" title="Sort Table Title ( DRAGGABLE )" /></a></div><br />
<div class="bt3"><code><br />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"><br />
<script src="//code.jquery.com/jquery-1.10.2.js"></script><br />
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script><br />
<link rel="stylesheet" href="http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css"><br />
<script><br />
$(function() {<br />
var tabs = $( "#tabs" ).tabs();<br />
tabs.find( ".ui-tabs-nav" ).sortable({<br />
axis: "x",<br />
stop: function() {<br />
tabs.tabs( "refresh" );}<br />
});<br />
});<br />
</script><br />
<style><br />
#tabs {border:none}<br />
.menuContent {background:#38f}<br />
.menuContent a {<br />
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}<br />
.menuContent a:hover,.menuContent a:focus {<br />
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}<br />
</style><br />
<div id="tabs"><br />
<ul class="menuContent"><br />
<li><a style="color:#fff" href="#tabs-1"><span style="color: #6fa8dc;">Content1</span></a></li><br />
<li><a style="color:#fff" href="#tabs-2"><span style="color: #6fa8dc;">Content2</span></a></li><br />
<li><a style="color:#fff" href="#tabs-3"><span style="color: #6fa8dc;">Content3</span></a></li><br />
</ul><br />
<div id="tabs-1" style="background:#333;border-top:3px solid yellow;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (1) Disini...</span><br />
</div><br />
<div id="tabs-2" style="background:darkred;border-top:3px solid magenta;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (2) Disini...</span><br />
</div><br />
<div id="tabs-3" style="background:darkblue;border-top:3px solid lime;color:#fff"><br />
<span style="color: #f6b26b;">...Tulis Content (3) Disini...</span><br />
</div><br />
</div></code></div></div><br />
<br />
Membuat tab content seperti ini akan sangat membantu bilamana suatu saat kita perlu menampilkan informasi yang berbeda dalam bahasan artikel, jadi kita bisa menampilkan content tersebut dengan bentuk desain tab (tabel tabulasi content). Lebih detail pembahasan kinerja tab content, selengkapnya baca <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/10/pengenalan-elemen-css-target.html" target="_blank" title="Pengenalan Elemen CSS Target"><strong>Pengenalan Elemen CSS Target</strong></a>.</div><br />
Terimakasih **Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com28tag:blogger.com,1999:blog-8783436895090091189.post-78956942660948631312015-05-14T14:38:00.003+01:002015-05-14T14:43:49.164+01:00Membuat Border Bergerak Di Sisi Gambar<div style="text-align: justify;"><span style="font:bold italic medium Georgia">Membuat Border Bergerak Di Sisi Gambar</span> - Elemen yang akan kita gunakan dalam efek kali ini adalah <span style="color:red;font:bold 14px Verdana,sans-serif">animation-clipMe</span>, sedangkan gerakan kita perintahkan dengan infinite-media untuk membuat border bergerak di sisi gambar seperti ini:<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/05/border-animasi-style.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-vVqRZQ41bUc/VVShnhXdzfI/AAAAAAAAB8A/IFdso1f4KR8/s1600/animation+border.png"><img alt="Animation Keyframes Infinite" src="https://1.bp.blogspot.com/-vVqRZQ41bUc/VVShnhXdzfI/AAAAAAAAB8A/IFdso1f4KR8/s1600/animation+border.png" title="Border Bergerak Di Sisi Gambar" /></a></div><br />
<br />
<br />
<style>.boo {display: inline-block;position: relative;padding: 5px 10px 5px 5px;background: red;color: white;margin:0 15px;font: 10px Verdana, sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>BACA JUGA</div><a href="http://sahabatblogger77.blogspot.com/2014/11/diary-notes-theme-sitemap-responsive.html" target="_blank" title="Diary Notes Theme Sitemap Responsive (DAFTAR ISI)"><strong>Diary Notes Theme Sitemap Responsive</strong></a><br />
<br />
<br />
<br />
Jika berhubungan dengan <span style="font:bold 15px Verdana">animation effect</span>, sudah pasti disana ada objek bergerak secara terus menerus tanpa ada perintah <span style="color:#e06666;font:bold 14px Courier,Monospace">mouse-hover</span> ataupun <span style="color:#e06666;font:bold 14px Courier,Monospace">pointer-click</span>. Gerakan ini disebut dengan <span style="border-bottom:1.3px solid red;padding-bottom:1.3px">keyframes-animation</span>, seperti <a href="http://sahabatblogger77.blogspot.com/2014/12/animasi-teks-hitam-putih-dengan-marquee.html" target="_blank" title="Animasi Teks Hitam Putih Dengan Marquee"><strong>Animasi Teks Hitam Putih Dengan Marquee</strong></a> merupakan salah satu contoh bentuk keyframes-infinite untuk membuat teks bergerak tanpa batas. Kali ini gambar dalam posting yang akan kita buat border bergerak dengan perintah yang sama.<br />
<br />
<span style="color:darkred;font:bold 16px/35px Verdana,sans-serif">Penerapan Efek Ke Blog</span><br />
Pada Halaman editor teks, pilih tab HTML (bukan yang COMPOSE) saat Anda akan membuat postingan terbaru, selanjutnya COPY semua kode dibawah ini, lalu PASTE dalam halaman. Kode lengkapnya seperti ini:</div><br />
<style>.border {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid #39f;text-align:left}</style><br />
<div class="border"><style type="text/css"><br />
.bb {<br />
width:200px;height:200px;margin:120px auto;<br />
<span style="color:#999999">/* ganti dengan URL-gambar anda */</span><br />
background:url("<span style="color: #f6b26b;">URL-Gambar Anda</span>") no-repeat center center;<br />
border:2px solid aqua;color:#69ca62;cursor:pointer;<br />
box-shadow:inset 0 0 0 3px rgba(105, 202, 98, 0.5)}<br />
<br />
.bb::before{animation-delay:-4s;-webkit-animation-delay:-4s;-moz-animation-delay:-4s}<br />
.bb:hover::after,.bb:hover::before {color:yellow}<br />
.bb,.bb::before,.bb::after {position:absolute;top:0;bottom:0;left:0;right:0}<br />
.bb::before,.bb::after {<br />
content: '';z-index: -1;margin: -5%;box-shadow: inset 0 0 0 3px;<br />
animation: clipMe 8s linear infinite;<br />
-webkit-animation: clipMe 8s linear infinite;<br />
-moz-animation: clipMe 8s linear infinite}<br />
<br />
@keyframes clipMe {<br />
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}<br />
25% {clip:rect(0px, 2px, 220.0px, 0px)}<br />
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}<br />
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}<br />
<br />
@-webkit-keyframes clipMe {<br />
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}<br />
25% {clip:rect(0px, 2px, 220.0px, 0px)}<br />
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}<br />
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}<br />
<br />
@-moz-keyframes clipMe {<br />
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}<br />
25% {clip:rect(0px, 2px, 220.0px, 0px)}<br />
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}<br />
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}<br />
</style><br />
<div class="bb"></div></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com30tag:blogger.com,1999:blog-8783436895090091189.post-77983117915567417192015-05-11T17:41:00.002+01:002015-05-11T17:49:19.316+01:00Surat Untuk Sahabat<span style="font:bold 17px Verdana,sans-serif">My Diary : SURAT UNTUK SAHABAT</span><br />
<div style="text-align: justify;">Terkadang sesaat kita butuh kesendirian, namun disaat itu pula seorang Sahabat akan selalu ada untuk mengisi kesunyian itu. Candanya adalah penawar rasa gundah, senyumnya merupakan sikap keperdulian, bahunya sering kita jadikan tempat bersandar saat kita kehilangan arah dan keputus asaan, dan hanya dialah sosok yang mau mendengar semua keluh kesah hidup kita, dan hanya seorang sahabat pula yang mampu mendatangkan keceriaan, sekalipun saat itu ia tidak merasakan kebahagian. Sehingga banyak yang merasakan <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/02/puisi-sahabat-jadi-cinta.html" target="_blank" title="PUISI: Sahabat Jadi Cinta"><strong>Sahabat Jadi Cinta</strong></a>, karena sering bertemu, bercanda dan saling melengkapi, karena Cinta hadir dari kebersamaan.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-aGGqcGsfwuA/VVDZEuxOF3I/AAAAAAAAB7g/gdpLpavNlyQ/s1600/sahabat.png"><img alt="Sahabat" src="https://1.bp.blogspot.com/-aGGqcGsfwuA/VVDZEuxOF3I/AAAAAAAAB7g/gdpLpavNlyQ/s1600/sahabat.png" title="Best Friend" /></a></div><br />
<br />
Disela-sela saya menulis, sering saya tuliskan kalau tutorial ini terspesial buat sahabat semua pecinta <b>SAHABAT BLOGGER 77</b>, karena saya sadar tanpa Anda (My Friends) <b>SB-77 Design Blog</b> ini tidak ada artinya, sekalipun tempat dimana kita sering bercanda gurau dikolom komentar hanya sebatas dunia maya, tetapi selama itu pula aku selalu tersenyum, tertawa dan selalu terhibur karena kehadiran sahabat semua di blog ini. Itulah sebabnya mengapa blog ini saya beri nama SAHABAT BLOGGER 77, karena saya sayang dan cinta sahabat semua, dan surat ini hanya untuk Anda sahabat terbaikku.<br />
<br />
<style>@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
.contact-info{text-align:center;padding:20px;background:rgba(255,255,255,0.8);border-radius:10px;color:#111;box-shadow:0px 0px 9px rgba(0,0,0,0.7),0px 4px 0px #00FF7F;margin:0 25px 0 25px}
.content{margin-top:20px;font-size:14px;text-align:left}
.bottom{line-height:10px;text-transform:uppercase;font-weight:bold;height:5px}
.bottom p::before,.bottom p::after{display:inline-block;content:"";width:10px;height:10px;border-radius:50%;margin:1px 20px;background:#FF0090;box-shadow:inset 0px 2px 4px rgba(0,0,0,0.4)}
.txt:before{margin:11px 0 0 -110px}
.txt:after{margin:11px 0 0 10px}
.txt{font:900 24px 'Aladin',cursive;text-transform:uppercase;letter-spacing:1.5px;text-align:center;color:#39f;text-shadow:1px 2px 1px #111}
.txt:before,.txt:after{content:" ";position:absolute;width:100px;height:4px;border-top:2px solid #FF0090;border-bottom:2px solid #FF0090}</style><br />
<div class="contact-info"><div class="txt">SURAT UNTUK SAHABAT</div><div class="content">Dear SAHABAT...!!!<br />
<br />
<br />
Aku tahu..!<br />
Mungkin aku hanya orang yang kesekian<br />
Dari banyak orang yang menyayangimu<br />
<br />
Tetapi,<br />
Aku ingin menjadi orang yang pertama<br />
Yang selalu ada disampingmu<br />
Saat engkau kehilangan arah dan keputus asaan<br />
<br />
<b>SAHABAT</b><br />
Jika waktuku tak' banyak untukmu..<br />
Aku ingin disetiap detak jantungku terdengar olehmu<br />
Pertanda aku masih ada untukmu<br />
<br />
<b>SAHABAT</b><br />
Jika lidah ini pernah menjadi penyanyat hatimu<br />
Aku hanya ingin MAAF dan senyum termanis darimu<br />
Jangan tangisi kepergianku....<br />
Tetapi kenanglah namaku dihatimu<br />
Sebagai bukti <b>"Aku pernah menjadi Sahabatmu"</b><br />
<br />
Sampai nanti...<br />
Sampai aku tidur terlelap di bawah timbunan tanah yang bertabur bunga..<br />
<br />
" I LOVE YOU FRIENDS "<br />
</div><hr/><div class="bottom"><p>Devy Indriyani</p></div></div><br />
<br />
Jika saat ini Anda mempunyai seorang sahabat, jagalah hubungan itu seperti cinta kepada kekasihmu, karena tidak mudah mencari dan bertemu seseorang yang mau bersahabat dengan kita. Tetapi, kalau belum ada sahabat, Devy mau kok jadi sahabat dekat kamu, hehe..!! Semoga <b>SURAT</b> ini bisa menginspirasi kita semua yang memiliki seorang sahabat. SMS/Telepon sahabat kita sekarang yuk..!! hehe..!!</div><br />
" I LOVE ALL MY FRIENDS"<br />
<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">S</span> - amudera<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">A</span> - kan<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">H</span> - ancur<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">A</span> - pa<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">B</span> - ila<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">A</span> - ku dan kamu<br />
<span style="color:darkred;font:bold italic 14px Verdana,sans-serif">T</span> - erpisahDevyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com29tag:blogger.com,1999:blog-8783436895090091189.post-40012076196313767432015-05-10T04:01:00.000+01:002015-05-10T14:22:12.829+01:00Permainan Menyusun Bata | Tetris Games<span style="font:bold 16px Verdana,sans-serif">Permainan Menyusun Bata | Tetris Games</span><br />
<div style="text-align: justify;">Tidak membutuhkan soal atau sebuah kode teka-teki untuk menyelesaikan permainan ini, cukup menyusun potongan bata satu persatu sampai membentuk dinding tembok tanpa celah untuk mendapatkan nilai sebanyak mungkin. Susunlah potongan bata yang akan muncul kelayar permainan menjadi sebaris untuk mendapatkan nilai, namun INGAT..!! jangan sampai bata yang Anda susun menjadi sebuah tembok yang tinggi, jika itu terjadi maka permainan akan selesai <b>(Game Over)</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-mxf6zVyf1Jg/VU68goU4_uI/AAAAAAAAB6s/j7Pw5owYDT4/s1600/Tetris+Games.png"><img alt="Tetris game picture" src="https://1.bp.blogspot.com/-mxf6zVyf1Jg/VU68goU4_uI/AAAAAAAAB6s/j7Pw5owYDT4/s1600/Tetris+Games.png" title="Tetris Games" /></a></div><br />
<br />
<br />
<style>.boo {display: inline-block;position: relative;padding: 5px 10px 5px 5px;background: red;color: white;margin:0 15px;font: 10px Verdana, sans-serif;text-shadow:1px 1px 2px #111}
.boo:before, .boo:after {position: absolute;right: -.3em;width: .5em; height: 50%;box-shadow: -.2em 0 0 white;background: inherit;content: ''}
.boo:before {top: 0;transform: skewX(30deg);-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg)}
.boo:after {bottom: 0;transform: skewX(-30deg);-moz-transform: skewX(-30deg);-webkit-transform: skewX(-30deg)}</style><br />
<div class='boo'>INFO TERKINI</div><a href="http://sahabatblogger77.blogspot.com/2015/01/konsep-membuat-efek-hover-dengan-css.html" target="_blank" title="Konsep Membuat Efek Hover Dengan CSS"><strong>Konsep Membuat Efek Hover Dengan CSS</strong></a><br />
<br />
<br />
<br />
Di permainan sebelumnya, lebih saya fokuskan pada <b>kecerdasan IQ</b> untuk mengukur daya ingat Anda dalam permainan <a href="http://sahabatblogger77.blogspot.com/2015/03/memory-game-picture-with-jquery.html" target="_blank" title="Memory Game Picture With jQuery"><strong>Memory Game Picture With jQuery</strong></a>, dan untuk permainan kali ini merupakan permainan menggunakan tehnik bagaimana cara Anda mendapatkan nilai yang setinggi-tingginya, karena setiap selisih angka 300 maka kecepatan level games akan bertambah. Nah..!! sudah siap bermain dengan <b>SAHABAT BLOGGER 77</b> untuk menjadi sang <b>JUARA di Tetris Games</b> kali ini, silahkan perhatikan bagaimana cara menjalankan permainan ini:<br />
<br />
<br />
<span style="color:darkred;font:bold 18px/32px Verdana,sans-serif">Cara Bermain Tetris Games</span><br />
Untuk menjalankan games ini, saya menggunakan tombol-tombol tuts di papan Keyboard Anda, seperti gambar berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-vHLKS87_ksI/VU7E-v559_I/AAAAAAAAB7E/IBaXXzEgQWk/s1600/tuts+Keyboard.png"><img alt="Papan tombol Komputer" src="https://1.bp.blogspot.com/-vHLKS87_ksI/VU7E-v559_I/AAAAAAAAB7E/IBaXXzEgQWk/s1600/tuts+Keyboard.png" title="Tuts Keyboard PC" /></a></div><br />
<br />
<br />
<b>1. Tanda Panah (Icon Arrow)</b><br />
<ul><li>Panah <span style="color:red;font:bold 18px Arial">→</span> Untuk menggeser potongan bata kearah Kanan</li>
<li>Panah <span style="color:red;font:bold 18px Arial">↑</span> Untuk merubah posisi potongan bata sebelum disusun</li>
<li>Panah <span style="color:red;font:bold 18px Arial">←</span> Untuk menggeser potongan bata kearah Kiri</li>
<li>Panah <span style="color:red;font:bold 18px Arial">↓</span> dan SPACE = Untuk mempercepat potongan bata turun</li>
</ul><br />
<b>2. Space Dan Enter</b><br />
Saya fungsikan untuk mengulang permainan ke-DUA bila mana permainan pertama Anda tidak selesai dengan maksimal (Game Over). <span style="border-bottom:1.3px dotted red;padding-bottom:1.3px">Cukup KLIK Space atau Enter</span> untuk mengulang dan memulai permainan kembali. Mau Coba..?<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/04/javascript-game-tetris.html" target="_blank" title="Buka Permainan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">PLAY GAME</span></a></center><br />
<br />
<br />
Ini permainan zaman Anda masih kanak-kanak kali ya, tetapi karena geme ini pernah di-Request oleh sahabat saya mas <b>Anza</b> dalam komentar <a href="http://sahabatblogger77.blogspot.com/2015/02/cara-membuat-game-ular-ularan-diblog.html?showComment=1429147411798#c4046361598657766611" target="_blank" title="Cara Membuat Game Ular-Ularan Diblog"><strong>Cara Membuat Game Ular-Ularan Diblog</strong></a> (maaf ya mas kalau baru hari ini bisa Devy terbitkan). Semoga beliau dan sahabat semua bisa terhibur dengan permainan tetris game kali ini, dan jadilah sang juara dengan mendapatkan nilai yang spektakuler, hehe..!!</div>..SELAMAT BERMAIN..Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com18tag:blogger.com,1999:blog-8783436895090091189.post-14149568216700894562015-05-08T17:34:00.001+01:002015-05-08T17:45:18.539+01:00Membuat Garis Berwarna Pada Teks<span style="font:bold 18px Verdana,sans-serif">Text With Border Color</span><br />
<div style="text-align: justify;"><span style="font:bold italic 15px Verdana,sans-serif">Membuat Garis Berwarna Pada Teks</span> - Dengan pemberian elemen <b>"Underline"</b> pada sebuah teks yang kita anggap penting, cukup menuliskan fungsinya seperti ini: <span style="color:red"><u></span><b>Membuat Garis Berwarna Pada Teks</b><span style="color:red"></u></span> maka teks sudah diberi garis bawah (<span style="color:indigo;font:normal 13px Courier,Monospace">text-decoration:underline</span>). Namun bukan itu yang akan kita terapkan dalam tutorial kali ini, seperti pembahasan terdahulu tentang <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2013/12/cara-membuat-border-judul-artikel-blog.html" target="_blank" title="Cara Membuat Border Judul Artikel Blog"><strong>Cara Membuat Border Pada Judul Artikel Blog</strong></a> adalah kegiatan untuk membuat title judul menjadi menarik dengan border-line, efek kali ini akan jauh lebih menarik dan keren untuk memberikan hiasan garis berwarna pada teks tulisan Anda seperti ini:<br />
<br />
<div style="font:bold 20px Verdana,sans-serif;color:darkred;text-align:center">DEMO SHOW</div><br />
<br />
<style type="text/css">
.text-line span {padding:10px;background:white}
.text-line.right {text-align:right}
.text-line.center {text-align:center}
.text-line {background-color:red;height:3px;vertical-align:middle;line-height:1px}
.txt {font:bold 18px Verdana,sans-serif}
</style><br />
<div class="txt"><div class="text-line"><span>SB-77 DESIGN</span></div><br />
<br />
<div class="text-line right"><span>SAHABAT BLOGGER 77</span></div><br />
<br />
<div class="text-line center"><span>DEVY INDRIYANI</span></div></div><br />
<br />
<br />
Memberi garis berwarna <b>disisi TEKS</b>, bukan <b>dibawah teks</b>. Sehingga teks yang menurut Anda penting seperti judul postingan, sub judul atau poin-poin penting saat Anda memberikan informasi tips akan terlihat lebih cantik dan menarik hanya dengan penggunaan CSS seperti ini:<br />
<br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
<style type="text/css">
.text-line span {padding:10px;background:#fff}
.text-line.right {text-align:right}
.text-line.center {text-align:center}
.text-line {background-color:red;height:3px;vertical-align:middle;line-height:1px}
p {font:bold 18px Verdana,sans-serif}
</style></code></pre><br />
<br />
Pada pengaturan CSS diatas, saya memberikan 3 model tampilan warna garis pada teks, Anda tinggal memilih style mana yang menurut Anda berkesan untuk dipasang dalam postingan blog Anda. HTML lengkapnya seperti ini:<br />
<br />
<pre rel="HTML"><code>
<p class="text-line"> <span style="color: #9fc5e8;"><!--letak garis disebelah kanan teks--></span>
<span>SAHABAT BLOGGER 77</span></p>
<p class="text-line right"> <span style="color: #9fc5e8;"><!--letak garis disebelah kiri teks--></span>
<span>SAHABAT BLOGGER 77</span></p>
<p class="text-line center"> <span style="color: #9fc5e8;"><!--letak garis disebelah kanan dan kiri teks--></span>
<span>DEVY INDRIYANI</span></p></code></pre><br />
<br />
Sederhana, mudah dan terlihat lebih menarik dibanding hanya membuat garis bawah pada teks yang kita inginkan. Sambil memikirkan teks yang akan Anda berikan garis berwarna seperti diatas, bagaimana kalau sambil menikmati <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/01/10-gaya-efek-css-animasi-pada-teks.html" target="_blank" title="10 Gaya Efek CSS Animasi Pada Teks"><strong>10 Gaya Efek CSS Animasi Pada Teks</strong></a> yang sudah admin rangkum terspesial untuk sahabat semua pecinta <b>SAHABAT BLOGGER 77</b>, saya harap semoga terhibur. Terimakasih dan happy blogging..!!</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com7tag:blogger.com,1999:blog-8783436895090091189.post-36649178119216359612015-05-07T14:39:00.000+01:002015-05-07T14:49:10.562+01:00Drop Down Menu Fixed Left Position<div style="text-align: center;font:bold 13px Verdana">Cara Terbaru Membuat Menu Navigasi Blog Dengan Drop-down Effect.</div><div style="text-align: justify;"><span style="font:bold 14px Verdana,sans-serif">Drop Down Menu Fixed Left Position</span> - <b>DROP</b> merupakan efek untuk menavigasi link menu secara individual, sedangkan <b>DOWN</b> adalah efek untuk menampilkan sub menu dengan tampilan menurun kebawah. <b>Membuat Menu Navigasi dengan dropdown design</b> biasanya dibentuk untuk memudahkan pengguna atau pengunjung untuk memilih beberapa opsi dari daftar menu yang tersedia, seperti <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2014/05/cara-membuat-diagram-menu-navigasi-bertingkat.html" target="_blank" title="Cara Membuat Diagram Menu Navigasi Bertingkat"><strong>Cara Membuat Diagram Menu Navigasi Bertingkat</strong></a> adalah salah satu cara untuk merangkum daftar menu penting yang didalamnya banyak menyisipkan <span style="color:darkgreen;font:bold 13px Courier,Monospace">sub-menu</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-HwMs6HRUSVM/VUtk6egaanI/AAAAAAAAB6Q/etcXJk2P_nE/s1600/Drop+Down+Menu.png"><img alt="Drop Down Menu Fixed" src="https://1.bp.blogspot.com/-HwMs6HRUSVM/VUtk6egaanI/AAAAAAAAB6Q/etcXJk2P_nE/s1600/Drop+Down+Menu.png" title="Drop Down Menu Fixed Left Position" /></a></div><br />
<br />
Identiknya letak posisi menu selalu disejajarkan dengan <b>halaman HEADER</b>, atau tampilan menu berada diatas judul posting, namun untuk menu navigasi kali ini saya desain dengan posisi <span style="color:indigo;font:bold 13px Courier,Monospace">FIXED (melayang)</span> disebelah kiri halaman (<span style="color:#e06666;font:normal 13px Courier,Monospace">Left-Position</span>). Lengkapnya seperti ini:<br />
<br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
<style type="text/css">
/* Drop Down Menu Fixed Left Position
Input().menu: ID-sesi ()[SB-77] class()[dd-dropdown]
released publish: May 07, 2015
visit: Devy Indriyani
source: http://sahabatblogger77.blogspot.com */
#menuSB-77{
width:280px;height:50px;position:fixed !important;top:20px;left:0;color:#fff;
background:#000;box-shadow: 0 0 10px #000;overflow:hidden;
-webkit-backface-visibility: hidden;backface-visibility: hidden;
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
transition-delay: 400ms}
#menuSB-77.shownav {width:280px;height: 100%;border-left:5px solid yellow}
nav{width: 50px;height: 50px;background: rgba(0,0,0,0.2)}
.dd-menu {
position: absolute;top: 0px;left: 11px;display: block;width: 28px;height: 50px;
cursor: pointer;z-index: 30;transition-delay: 600ms;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition-delay: 600ms;-moz-transition-delay: 600ms}
.dd-menu span {
position: absolute;top: 50%;left: 0;display: block;width: 100%;height: 3px;
margin-top: -2px;background-color: #fff;font-size: 0px;
-webkit-user-select: none;-moz-user-select: none;user-select: none;
-webkit-transition: background-color 0.5s;transition: background-color 0.5s;
-moz-transition: background-color 0.5s}
.dd-open .dd-menu span {background-color:transparent}
.dd-open .dd-menu {
left:88%;-webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63)}
.dd-menu span:before,
.dd-menu span:after {
position: absolute;left: 0;width: 100%;height: 100%;background: #fff;
content: '';-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63)}
.dd-menu span:before {
-webkit-transform: translateY(-250%);
-moz-transform: translateY(-250%);
transform: translateY(-250%)}
.dd-menu span:after {
-webkit-transform: translateY(250%);
-moz-transform: translateY(250%);
transform: translateY(250%)}
.dd-open .dd-menu span:before {
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg)}
.dd-open .dd-menu span:after {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg)}
.ddTM-close .dd-menu:before {
-webkit-animation: plusVertical 0.3s ease forwards;
-moz-animation: plusVertical 0.3s ease forwards;
animation: plusVertical 0.3s ease forwards}
.ddTM-close .dd-menu:after {
-webkit-animation: plusHorizontal 0.3s ease forwards;
-webkit-animation: plusHorizontal 0.3s ease forwards;
animation: plusHorizontal 0.3s ease forwards}
.menu {z-index: 10;position: absolute;top: 0px;width: 100%;height: 100%}
.menu.open {background:#000;height: 100%}
.menu ul {
position: absolute;visibility: hidden;list-style-type:none;top: -40%;left: 0;
width: 100%;padding: 0;opacity: 0;display: table-cell;vertical-align: middle;
-webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
-moz-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
transform: perspective(600px) rotateX(20deg) rotateY(-20deg)}
.menu ul li a {text-align:left;color:#fff;font:700 14px/24px Verdana,sans-serif}
.menu ul li a:hover {color:aqua;border-left:solid 2px yellow;padding-left:5px}
.menu.open ul {
top: 40px;left:0;visibility: visible;opacity: 1;margin-top: 0;
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
-moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
transition-delay: 400ms}
</style></code></pre><br />
Kita tambahkan sedikit fungsi JavaScript untuk membuat perintah Click event, namun pastikan Template Anda sudah dilengkapi dengan <span style="color:#39f;font:bold 13px Courier,Monospace">script-jQuery</span>, sehingga opsi pada sub-menu bisa kita tampilkan dan sembunyikan dengan tombol <b>Open/Close</b> dengan <span style="color:#e06666;font:bold 13px Courier,Monospace">toggle-slide</span> seperti ini:<br />
<br />
<pre rel="JavaScript"><code>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('.dd-menu').click(function(){
$('nav').toggleClass( "dd-open" );
$('.menu').toggleClass( "open" );
//$(id='menuSB-77','http://sahabatblogger77.blogspot.com');
$('#menuSB-77').toggleClass( "shownav" );
});
});
//]]>
</script></code></pre><br />
<span style="color:darkred;font:bold italic 15px Georgia">Dan hasilnya :</span><br />
<br />
<br />
<br />
<br />
<style>a.murub {color:#ccc;text-decoration:none;text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
a.murub:hover {color:#fff;text-shadow:0px 1px 0px #FF00FF,0px 0px 3px #FF00FF,0px 0px 5px #FF00FF,0px 0px 30px #FF00FF,0px 3px 50px #FF00FF;}</style><br />
<center><a class="murub" href="http://demoshow77.blogspot.com/2015/04/drop-down-menu-transition.html" target="_blank" title="Lihat Hasil Tampilan" rel="nofollow"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center><br />
<br />
<br />
<br />
Tahap akhir tinggal menyisipkan link menu sebanyak yang Anda mau pada HTML berikut, Anda cukup ganti teks yang sudah saya beri warna <span style="color: red;">MERAH</span> dengan URL-menu Laman Blog Anda, dan teks <span style="color:orange;background:#111;padding:3px">ORANGE</span> dengan title menu. Lengkapnya seperti ini:<br />
<br />
<pre rel="HTML"><code>
<div id="menuSB-77">
<nav class="ddTM">
<a href="#menuSB-77" class="dd-menu"><span>Menu</span></a>
<div class="menu">
<ul>
<li><a href="<span style="color: #ea9999;">http://sahabatblogger77.blogspot.com</span>"><span style="color: orange;">Menu 1</span></a></li>
<li><a href="<span style="color: #ea9999;">http://sahabatblogger77.blogspot.com</span>"><span style="color: orange;">Menu 2</span></a></li>
<li><a href="<span style="color: #ea9999;">http://sahabatblogger77.blogspot.com</span>"><span style="color: orange;">Menu 3</span></a></li>
<li><a href="<span style="color: #ea9999;">http://sahabatblogger77.blogspot.com</span>"><span style="color: orange;">Menu 4</span></a></li>
<li><span style="color: #999999;">..tambahkan lebih banyak menu lagi disini...</span></li>
....
....
</ul>
</div>
</nav>
</div></code></pre><br />
<br />
Mudah dan cukup beberapa saat <b>Drop Down Menu Fixed Left Position</b> pada blog sudah selesai dibuat, setelah ini mungkin sahabat semua pecinta <b>SAHABAT BLOGGER 77</b> ingin memilih bentuk menu navigasi lainnya disini:</div><br />
<span style="color:darkred;font:bold italic medium Georgia">Menu Navigasi Dalam Posting</span><br />
<ul><li><a href="http://sahabatblogger77.blogspot.com/2014/04/cara-mudah-membuat-menu-navigasi-pada-postingan.html" target="_blank" title="Cara Mudah Membuat Menu Navigasi Pada Postingan"><strong>Cara Mudah Membuat Menu Navigasi Pada Postingan</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.
com/2015/01/floating-menu-dropdown-dengan-transisi.html" target="_blank" title="Floating Menu Dropdown Dengan Transisi"><strong>Floating Menu Dropdown Dengan Transisi</strong></a></li>
</ul><br />
<span style="color:darkred;font:bold italic medium Georgia">Menu Navigasi Full Design</span><br />
<ul><li><a href="http://sahabatblogger77.blogspot.com/2014/11/membuat-menu-blogger-dengan-target-gambar.html" target="_blank" title="Membuat Menu Blogger Dengan Target Gambar"><strong>Membuat Menu Blogger Dengan Target Gambar</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2014/03/daftar-artikel-terbaru-dalam-menu-navigasi.html" target="_blank" title="Daftar Artikel Terbaru Dalam Menu Navigasi"><strong>Daftar Artikel Terbaru Dalam Menu Navigasi</strong></a></li>
<li><a href="http://sahabatblogger77.blogspot.com/2015/01/menu-lingkaran-dengan-submenu-efek-rotasi.html" target="_blank" title="Menu Lingkaran Dengan Submenu Efek Rotasi"><strong>Menu Lingkaran Dengan Submenu Efek Rotasi</strong></a></li>
</ul>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com21tag:blogger.com,1999:blog-8783436895090091189.post-40150363796236038122015-05-04T17:50:00.002+01:002015-05-05T13:18:07.959+01:00Tehnik Mengelola Situs Dengan 3 Pedoman<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Tehnik Mengelola Situs Dengan 3 Pedoman</span> - Beberapa hal yang perlu kita ikuti dan tindakan yang harus kita hindari saat mengelola situs blog agar selalu tampil profesional dan relevan berdasarkan peraturan dan tata cara <b>Google Webmaster</b> adalah dengan 3 pedoman, apa saja tehnik-tehnik itu.? mari sama-sama kita cari tahu tehnik seperti apa yang boleh kita terapkan dan tindakan seperti apa yang harus kita hindari dengan 3 poin penting, diantaranya:<br />
<span style="font:bold 14px/26px Verdana,sans-serif;color:darkred"><br />
1. Pedoman desain dan konten<br />
2. Pedoman teknis<br />
3. Pedoman kualitas</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-1DgdlNZfbho/VUebGZooroI/AAAAAAAAB50/8D18_jsleyw/s1600/sb-77+Image.png"><img alt="3 Pedoman Tehnik" src="https://1.bp.blogspot.com/-1DgdlNZfbho/VUebGZooroI/AAAAAAAAB50/8D18_jsleyw/s1600/sb-77+Image.png" title="Tehnik Mengelola Situs Dengan 3 Pedoman" /></a></div><br />
<br />
Mungkin dari beberapa rincian poin-poin diatas, ada beberapa diantaranya sudah Anda terapkan, Anda abaikan, bahkan secara tidak sadar situs Anda melanggar ketentuan satu atau beberapa pedoman diatas. Jadi, sebelum ada kata <b>"TERLAMBAT"</b> sanyangi situs Anda seperti layaknya rumah kedua buat Anda.<br />
<br />
Dengan mengikuti serta menerapkan pedoman diatas, Anda akan membantu Google menemukan, mengindeks, dan memberi nilai kepada situs Anda. Meskipun Anda memilih untuk tidak menerapkan saran apa pun yang termuat dalam pedoman itu, namun sebaiknya Anda benar-benar perhatikan bahwa beberapa situs yang diantaranya melakukan tehnik yang melanggar hukum berdasarkan pedoman Google Webmaster, akan mengakibatkan situs akan <b>TERHAPUS</b> dari indeks Google secara keseluruhan, dan situs tersebut tidak akan muncul lagi dalam hasil penelusuran google atau situs mitra Google.<br />
<br />
<style>.note {position:relative;width:auto;padding:1em 1.5em;margin:0 0 0 2.3em;color:#333;background:#d9d2e9;overflow:hidden;border-left:4px solid #674ea7;}
.note:before {content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:white white #674ea7; #674ea7;background-color:#674ea7;-webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);display:block;width:0;}</style><br />
<div class="note"><span style="color:darkred;font:italic 13px/26px Verdana">Saat dimana situs Anda sudah siap untuk ditampilkan:</span><br />
<ul><li>Kirimkan ke Google di <span style="color:red;font:bold 15px Verdana">➞</span> <a href="http://www.google.com/submityourcontent/" title="Sumbit Content" rel="nofollow" target="_blank">http://www.google.com/submityourcontent/</a>.</li>
<li>Kirimkan Peta situs secara berkala menggunakan Alat Webmaster Google, karena Google menggunakan Peta Situs Anda untuk mempelajari struktur situs dan meningkatkan cakupan laman web Anda, sehingga memungkinkan untuk cepat terdeteksi.</li>
</ul></div><br />
<br />
<span style="color:darkred;font:bold 16px Verdana,sans-serif">1. Pedoman desain dan konten</span><br />
<ul><li>Buat situs dengan pembahasan informasi yang jelas, serta tautan teks yang saling berhubungan dan mudah dijangkau (link bersambung) setidaknya dari satu tautan teks statis.</li>
<li>Dalam situs sudah pasti ada beberapa bagian penting, tawarkan bagian terpenting di situs Anda ke pengguna/pengunjung dengan tautan internal. Dan Jika situs memiliki jumlah tautan yang sangat besar, sebaiknya Anda membagi peta situs tersebut menjadi beberapa laman seperti ini:<br />
<span style="font:bold 15px Verdana">➞</span> <span style="color:#e06666;font:bold 13px Courier,Monospace">sitemap.xml</span><br />
<span style="font:bold 15px Verdana">➞</span> <span style="color:#e06666;font:bold 13px Courier,Monospace">atom.xml</span><br />
<span style="font:bold 15px Verdana">➞</span> <span style="color:#e06666;font:bold 13px Courier,Monospace">feeds/posts/default</span><br />
<span style="font:bold 15px Verdana">➞</span> dan masih banyak lagi.</li>
<li>Pastikan tautan dalam laman (internal link) yang Anda sisipkan selalu dalam jumlah yang masuk akal.</li>
<li>Buat situs yang berguna dan kaya informasi, serta tulis laman yang menggambarkan konten Anda dengan jelas dan tepat, jadi pertimbangkan untuk membuat konten pendek dan singkat.<br />
Selengkapnya baca - <a href="http://sahabatblogger77.blogspot.com/2014/05/jumlah-kata-yang-ideal-untuk-membuat-artikel.html" target="_blank" title="Jumlah Kata Yang Ideal Untuk Membuat Artikel"><strong>Jumlah Kata Yang Ideal Untuk Membuat Artikel</strong></a>.</li>
<li>Pikirkan kata-kata yang akan diketik pengguna untuk mencari laman Anda, dan pastikan bahwa situs Anda memuat kata-kata itu, dan saat itu terjadi, mereka (pengguna) akan menemukan halaman Anda pada urutan pertama google pencarian. Dalam hal ini adalah lebih kepada <a href="http://sahabatblogger77.blogspot.com/2014/10/bagaimana-menentukan-judul-artikel-yang-benar.html" target="_blank" title="Bagaimana Menentukan Judul Artikel Yang Benar?"><strong>Bagaimana Menentukan Judul Artikel Yang Benar?</strong></a>.</li>
<li>Cobalah gunakan teks, bukan gambar, untuk menampilkan nama, membuat konten artikel, atau tautan penting lainnya. Perayap Google (googlebot) tidak mengenali teks yang ada dalam gambar, namun jika Anda harus menyisipkan gambar untuk membuat konten yang tekstual, pertimbangkan untuk menggunakan atribut ALT untuk menyertakan beberapa kata teks deskriptif pada gambar tersebut.</li>
<li>Pastikan bahwa elemen <span style="color:#080;font:13px Courier,Monospace"><title></span> dan <span style="color:#080;font:13px Courier,Monospace">atribut ALT</span> bersifat deskriptif, akurat dan relevan.</li>
<li>Periksa tautan (link) yang putus dan perbaiki HTML.</li>
<li>Jika Anda memutuskan untuk menggunakan laman dinamis (misalnya, membuat URL yang memuat karakter "<b>?</b>", "<b>!</b>" dan "<b>|</b>" ), ingatlah bahwa tidak semua spider mesin telusur dapat merayapi laman dinamis seperti halnya laman statis. jadi karakter tersebut akan hilang atau tidak akan ditampilkan dalam bentuk URL, hal ini untuk membantu agar parameter dalam link tetap singkat dan jumlahnya tidak banyak.</li>
</ul><br />
<br />
<span style="color:darkred;font:bold 16px Verdana,sans-serif">2. Pedoman teknis</span><br />
<ul><li>Pedoman ini merupakan bagaimana cara Anda menempatkan file kode dalam Template, saat dimana Anda melakukan modifikasi tampilan. Jadi, untuk membantu Google sepenuhnya dapat memahami konteks pada situs Anda, izinkan semua aset file dalam situs Anda agar dapat dirayapi, seperti file CSS dan JavaScript.</li>
<li>Izinkan Googlebot penelusuran merayapi situs Anda tanpa ID sesi.</li>
<li>Pastikan server web Anda mendukung header <span style="color:#39f;font:13px Courier,Monospace">HTTP If-Modified-Since</span> <b>(http)</b> dan <b>(https)</b>. Ini karena Anda masuk menggunakan Google-akun, sehingga memungkinkan server web Anda dapat memberi tahu Google saat konten berubah atau Anda melakukan perbaikan setelah konten tersebut sudah dirayapi sebelumnya.</li>
<li>Jika situs Anda saat ini banyak terdapat iklan, pastikan hal itu tidak mempengaruhi peringkat situs Anda dalam <b>SERP</b>. Misalnya, tautan <b>DoubleClick</b> dan <b>iklan AdSense Google</b> agar diblokir untuk tidak dirayapi dengan <b>file robots.txt</b>.</li>
<li>Uji situs Anda untuk memastikan dapat ditampilkan dengan benar di browser lain, jika saat ini terlihat benar pada Chrome-browser, belum tentu baik pada browser moz-Mozilla. Kunjungi link ini <a href="http://sahabatblogger77.blogspot.com/2014/11/cara-mengatur-halaman-blog-agar-responsive.html" target="_blank" title="Cara Mengatur Halaman Blog Agar Responsive"><strong>Cara Mengatur Halaman Blog Agar Responsive</strong></a> untuk membantu tampilan situs Anda dapat tertata rapi pada peramban lain.</li>
<li>Pantau dan perhatikan kinerja situs Anda. Butuh berapa lama waktu yang dibutuhkan pengguna/pengunjung untuk membuka situs Anda, situs yang lelet (Loading Lambat) akan membuat pengunjung kabur dari situs Anda, dan situs cepat terbuka (Fast Loading) akan memberikan kepuasan pengunjung dan akan meningkatkan keseluruhan kualitas web (khususnya untuk pengguna dengan sambungan internet yang lambat).<br />
Lakukan dengan <a href="http://sahabatblogger77.blogspot.com/2015/04/cara-memperkecil-ukuran-file-css.html" target="_blank" title="Cara Memperkecil Ukuran File CSS"><strong>Cara Memperkecil Ukuran File CSS</strong></a> sebagai tahap awal mempercepat loading blog.</li>
</ul><br />
<br />
<span style="color:darkred;font:bold 16px/32px Verdana,sans-serif">3. Pedoman kualitas</span><br />
Tehnik-tehnik kegiatan dalam pedoman kualitas ini mencakup bentuk perilaku yang manipulatif, atau suatu tindakan yang menyesatkan demi untuk mempertahankan sebuah prinsip dasar dengan alibi akan memberikan manfaat buat pembaca, yang sebenarnya hanya untuk satu tujuan individu agar situs tersebut mendapat peringkat yang lebih baik, sehingga mencari celah yang bisa dimanfaatkan.<br />
<br />
Setidaknya pertimbangkan untuk melakukan tehnik tersebut, ingatlah..!! Google mengindeks, merayapi dan memberi nilai untuk sebuah situs dengan mesin deteksi (bot, spider, crawl). Namun Google juga melakukan tindakan manual untuk memeriksa situs yang berisi SPAM, jadi apa yang perlu dilakukan dan apa yang harus dihindari:<br />
<br />
<b>3.1 Prinsip dasar</b><br />
Hal terpenting adalah apakah Anda merasa nyaman menjelaskan apa yang sudah Anda tuliskan pada postingan, dan jika seandainya ada yang bertanya, <span style="border-bottom:1.3px dotted red;padding-bottom:1.3px">"Apakah Anda akan melakukan hal ini jika tidak ada mesin telusur?"</span>. Jadi :<br />
<ol><li>Buat laman yang utamanya untuk pengguna, dan jangan pernah pikirkan laman yang Anda buat hanya untuk ditampilkan pada mesin telusur.</li>
<li>Jangan menipu pengunjung, lihat <a href="http://sahabatblogger77.blogspot.com/2013/10/tips-menulis-artikel-blog-berkualitas-seo.html" target="_blank" title="Tips Menulis Artikel Blog Berkualitas SEO | Postingan"><strong>Tips Menulis Artikel Blog Berkualitas SEO | Postingan</strong></a></li>
<li>Pikirkan hal apa yang akan Anda tuliskan hari ini, jangan terlalu serius tetapi buatlah unik, berharga dan menarik.</li>
</ol><br />
<br />
<b>3.2 Pedoman spesifik</b><br />
Hindari teknik berikut:<br />
<ul><li>Konten yang dibuat secara otomatis</li>
<li>Berpartisipasi dalam skema tautan (tukaran link)</li>
<li>Posting yang berisi sedikit informasi atau tanpa konten asli</li>
<li>Pengalihan tersembunyi</li>
<li>Teks atau tautan tersembunyi</li>
<li>Konten salinan (Artikel COPAS "Copy Paste")</li>
<li>Memuat laman dengan kata kunci yang tidak relevan</li>
<li>Membuat laman dengan perilaku berbahaya, seperti pemasangan virus</li>
<li>Menyalahgunakan markup cuplikan kaya</li>
<li>Mengirim kueri otomatis ke Google</li>
</ul><br />
<br />
Kita tidak pernah tahu konten yang kita buat dan tuliskan termasuk jenis Spam atau tidak jika kita tidak memantaunya, akan tetapi sudah pasti kita akan tahu jenis spam yang sumbernya dari pengunjung. Beberapa <a href="http://sahabatblogger77.blogspot.com/2015/04/tips-mencegah-komentar-spam-masuk-ke-situs.html" target="_blank" title="Tips Mencegah Komentar Spam Masuk Ke Situs"><strong>Tips Mencegah Komentar Spam Masuk Ke Situs</strong></a> bisa Anda jadikan pedoman untuk mencegah dan membuang spam yang dibuat oleh pengunjung di situs Anda. Jika setelah ini Anda merasa situs Anda melanggar satu atau beberapa pedoman tehnik diatas, Google dapat melakukan tindakan manual terhadap situs, seperti menon-aktifkan beberapa laman untuk sementara hingga penghapusan situs secara permanen dari indeks Google (Hasil Penelusuran). Jadi pertimbangkan akan mengikuti pedoman yang ada atau menunggu hal buruk menimpa situs Anda, pilihannya ada ditangan Anda guys..!! Terimakasih.</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com39tag:blogger.com,1999:blog-8783436895090091189.post-36037196738010304962015-05-03T04:58:00.000+01:002015-05-03T05:05:53.864+01:00Membuat Gambar Transisi Dalam Postingan<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Membuat Gambar Transisi Dalam Postingan</span> - Transisi merupakan perpindahan suatu objek pertama untuk menggantikan posisi letak pada objek kedua. Dalam hal ini adalah gambar dalam posting yang akan kita jadikan sebagai objek, namun ini hanya sebuah efek untuk memperindah tulisan Anda, karena <a href="http://sahabatblogger77.blogspot.com/2015/05/ketentuan-cara-menerbitkan-gambar-yang-benar.html" target="_blank" title="Ketentuan Cara Menerbitkan Gambar Yang Benar"><strong>Ketentuan Cara Menerbitkan Gambar Yang Benar</strong></a> ada beberapa hal yang harus Anda perhatikan saat akan menyisipkan gambar tersebut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-cKU93mZoirI/VUWYc1o0FVI/AAAAAAAAB4w/PJHscKXbJyU/s1600/transition+image.png"><img alt="Transition Effect Hover Image" src="https://1.bp.blogspot.com/-cKU93mZoirI/VUWYc1o0FVI/AAAAAAAAB4w/PJHscKXbJyU/s1600/transition+image.png" title="Membuat Gambar Transisi Dalam Postingan" /></a></div><br />
<br />
Setelah membuat <a href="http://sahabatblogger77.blogspot.com/2015/04/cara-membuat-gambar-berjalan-dengan-css.html" target="_blank" title="Animasi Gambar Berjalan Ala SB-77"><strong>Animasi Gambar Berjalan Ala SB-77</strong></a>, kini <b>SAHABAT BLOGGER 77</b> kembali memberikan efek sederhana untuk membuat tulisan Anda terlihat lebih menarik dengan menyisipkan gambar transisi. Pekerjannya cukup mudah, disini Anda cukup menyiapkan 2 buah gambar yang akan kita tampilkan secara bergantian dengan perintah <b>HOVER</b> (transition effect). Letakkan <span style="color:#e06666;font:normal 13px Courier,Monospace">URL-Gambar</span> Anda pada pembentuk CSS dibawah ini:<br />
<style>pre {background-color:#333;font:normal 12px/14px Courier,Monospace;color:#ccc;padding:10px 15px;margin:0px 0px 10px;position:relative;border-left:10px solid #080;border-top:6px double #fff;overflow:auto;width:auto;}
pre[rel] {padding-top:39px;}
pre[rel]:before {content:attr(rel);font:bold 15px/22px Arial,Sans-Serif;color:white;background-color:#39f;padding:0px 10px;position:absolute;top:0px;right:0px;left:0px;padding:4px;}</style><br />
<pre rel="CSS"><code>
.img {
<span style="color: #999999;">/* tampilan gambar depan */</span>
background: url('<span style="color: orange;">URL-Gambar Anda</span>');
position: absolute;
width: 200px;height: 200px;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
border: solid 10px #f2f2f2;border-radius: 30%;
box-shadow: 0 0 5px #000 inset, 0 0 5px #000
}</code></pre><br />
Selanjutnya untuk posisi gambar kedua yang akan ditampilkan dengan perintah HOVER (saat panah Mouse melintasi objek/gambar). Agar perintahnya dapat bekerja dalam satu area, kita tambahkan elemen background-position, sehingga yang akan terjadi adalah gambar akan berubah saat panah mouse melintas diatasnya. Letakkan <span style="color:#e06666;font:normal 13px Courier,Monospace">URL-Gambar</span> kedua disini:<br />
<br />
<pre rel="CSS"><code>
.img:hover {
<span style="color: #999999;">/* tampilan gambar saat hover */</span>
background: url('<span style="color: orange;">URL-Gambar Anda</span>');
-webkit-transition-: 1s linear;
-moz-transition-: 1s linear;
-o-transition-: 1s linear;
-webkit-background-position: -600px -400px;
-moz-background-position: -600px -400px;
-o-background-position: -600px -400px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg)
}</code></pre><br />
<br />
SELESAI..!!, bentuk gambar sudah dibuat, sekarang kita satukan kedua elemen CSS diatas dalam satu wilayah fungsi, dan hasilnya akan terlihat indah seperti ini:<br />
<style>.content {margin:0 auto}
.clearfix:after {content:'.';height:0;font-size:0;line-height:0;display:block;clear:both;overflow:hidden;visibility:hidden}
.tabs-content {background:#333;font:normal 12px/16px Courier,Monospace;color:#ccc}
.tabs-menu {background:#0074a2;border-bottom:solid 4px #DC143C}
.tabs-menu ul {list-style:none}
.tabs-menu ul li {float:left}
.tabs-menu ul li a {display:block;padding:10px 20px;text-decoration:none;font:bold 15px/normal Arial;text-transform:uppercase;letter-spacing:0.08em;color:#fff;text-shadow:1px 2px 3px #111}
.tabs-menu ul li a.active-tab-menu {background:#DC143C;color:#fff;text-shadow:1px 2px 3px #111}
.tabs {display:none;padding:20px;height:440px}
.first-tab {display:block}
</style><br />
<script>
jQuery(function($){
$('.tabs-menu ul li a').click(function(){
var a = $(this);
var active_tab_class = 'active-tab-menu';
var the_tab = '.' + a.attr('data-tab');
$('.tabs-menu ul li a').removeClass(active_tab_class);
a.addClass(active_tab_class);
$('.tabs-content .tabs').css({
'display' : 'none'
});
$(the_tab).show();
return false;
});
});
</script><br />
<div class="content"><div class="tabs-content"><div class="tabs-menu clearfix"><ul><li><a class="active-tab-menu" href="#" data-tab="tab1">CSS</a></li>
<li><a href="#" data-tab="tab2">HTML</a></li>
<li><a href="#" data-tab="tab3">DEMO SHOW</a></li>
</ul></div><div class="tab1 tabs first-tab">.img {<br />
/* tampilan gambar depan */<br />
background: url(<span style="color:orange">'URL-Gambar Anda'</span>);<br />
position: absolute;<br />
width: 200px;height: 200px;<br />
-webkit-transition: background 1s ease;<br />
-moz-transition: background 1s ease;<br />
-o-transition: background 1s ease;<br />
border: solid 10px #f2f2f2;border-radius: 30%;<br />
box-shadow: 0 0 5px #000 inset, 0 0 5px #000<br />
}<br />
<br />
.img:hover {<br />
/* tampilan gambar saat hover */<br />
background: url(<span style="color:orange">'URL-Gambar Anda'</span>);<br />
-webkit-transition-: 1s linear;<br />
-moz-transition-: 1s linear;<br />
-o-transition-: 1s linear;<br />
-webkit-background-position: -600px -400px;<br />
-moz-background-position: -600px -400px;<br />
-o-background-position: -600px -400px;<br />
-webkit-transform: rotate(360deg);<br />
-moz-transform: rotate(360deg);<br />
-o-transform: rotate(360deg)<br />
}<br />
</div><div class="tab2 tabs"><div class="img"></div><br />
</div><div class="tab3 tabs"><style type="text/css">
.stage {margin:50px 0 0 33%}
.img {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAWqgtYfTuS7RXm9CaHV_zQInSisENcZz6A-R60aEGbHmteVW2Eu3uLIID9oHGBfv3TSEiHhPfz2sUB16xbYnOsWk5Eq5yIYWs4KyC_J9PWEldn3Hf1C6453tRNB0e8nBnzhA3bjXsr8/s180/sb-77+logo.png');position:absolute;width:200px;height:200px;-webkit-transition:background 1s ease;-moz-transition:background 1s ease;-o-transition:background 1s ease;border:solid 10px #f2f2f2;border-radius:30%;box-shadow:0 0 5px #000 inset, 0 0 5px #000}
.img:hover {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidxrI_c0NMZaAe998-CGWVYtO9clmD2xOe8oWq_ObCB4y96Y51xjn_JXB8atD9Aqd773DXwpNIBnEAKQa3Y5xyDXTvyGuM8vAtHFaS2hYrwy2KO2n5rdpKKpv4lwEOnfBSs-4Pla0ojo/s200/devi.png');-webkit-transition-:1s linear;-moz-transition-:1s linear;-o-transition-:1s linear;-webkit-background-position:-600px -400px;-moz-background-position:-600px -400px;-o-background-position:-600px -400px;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}
.text {color:#fff;font:bold 20px Verdana;text-align:center;margin-top:300px}
</style><br />
<div class="stage"><div class="img"></div></div><div class="text">HOVER ME.!</div></div></div></div><br />
<br />
<span style="color:darkred;font:bold 18px Verdana,sans-serif">Penerapan ke blog</span><br />
<ul><li>Pada tab DEMO SHOW, copy semua kode CSS lalu temukan kode <span style="color: red;">]]></b:skin></span> dalam Template Anda, setelah itu letakkan diatasnya atau sebelum kode tersebut.</li>
<li>Jika dalam halaman posting, cukup bungkus kode CSS diatas dengan tag seperti ini:<br />
<style>.border {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;text-align:left;border-left:5px solid red}</style><br />
<div class="border"><style type="text/css"><br />
....<br />
Letakkan kode CSS disini..<br />
...<br />
</style></div><br />
lalu letakkan dalam formulir posting <b>mode HTML</b> bukan yang Compose.</li>
<li>Selanjutnya tinggal menempatkan pemanggil HTML dibawah kode tag penutup </style></li>
</ul></div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com36tag:blogger.com,1999:blog-8783436895090091189.post-86548394066343975472015-05-02T03:54:00.002+01:002015-05-02T04:14:30.393+01:00Ketentuan Cara Menerbitkan Gambar Yang Benar<div style="text-align: justify;"><span style="font:bold 15px Verdana,sans-serif">Ketentuan Cara Menerbitkan Gambar Yang Benar</span> - Setiap kali Anda menuliskan informasi dalam artikel blog, saat itu pula disana Anda menyisipkan 1 gambar atau lebih untuk membantu memberikan keterangan kepada pembaca tentang tulisan Anda. Keberadaan gambar dalam postingan selain untuk pelengkap keterangan makna dari sebuah tulisan, gambar juga bisa kita jadikan sebagai target kata kunci yang paling akurat saat pengguna mencari gambar dalam hasil penelusuran, namun ada beberapa <b>Ketentuan Cara Menerbitkan Gambar Yang Benar, dan hal-hal yang perlu kita hindari saat menyisipkan gambar dalam postingan.</b><br />
<style>.note {position:relative;width:auto;padding:1em 1.5em;margin:0 0 0 2.3em;color:#333;background:#d9d2e9;overflow:hidden;border-left:4px solid #674ea7;}
.note:before {content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:white white #674ea7; #674ea7;background-color:#674ea7;-webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);display:block;width:0;}</style><br />
<div class="note">Anda dapat memberikan Google beberapa rincian tambahan tentang gambar Anda, dan menambahkan URL dari gambar yang mungkin tidak ditemukan dengan menambahkan informasi tersebut ke web sitemap (peta situs). Dengan begitu Anda dapat mencegah beberapa alasan <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/2015/04/penyebab-artikel-tidak-muncul-dalam-penelusuran.html" target="_blank" title="Penyebab Artikel Tidak Muncul Dalam Penelusuran"><strong>Penyebab Artikel Tidak Muncul Dalam Penelusuran</strong></a>, sehingga gambar dapat menggantikan kueri tersebut kepada pengguna.</div><br />
<br />
Tidak sedikit orang yang mencari informasi dalam bentuk gambar, karena pencarian gambar sama halnya dengan pencarian situs web. Dengan mengikuti paktek <b>Ketentuan Cara Menerbitkan Gambar Yang Benar</b> dalam setiap postingan, maka akan dapat meningkatkan bahwa gambar Anda akan selalu tampil dalam urutan posisi hasil pencarian dengan ketentuan dasar sebagai berikut :<br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">1. Jangan menyisipkan teks penting dalam gambar</span><br />
Hindari embedding teks penting dalam gambar seperti judul halaman dan item menu, karena tidak semua pengunjung dapat mengakses elemen penting tersebut.<br />
<br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">2. Buat gambar secara rinci dengan nama file yang informatif</span><br />
Seperti <a href="http://sahabatblogger77.blogspot.com/2014/08/membuat-label-blogger-accordion-efek-tabulasi.html" target="_blank" title="Membuat Label Blogger Accordion Efek Tabulasi"><strong>Membuat Label Blogger Accordion Efek Tabulasi</strong></a>. Memberikan nama file pada gambar yang subjektif dapat memberikan petunjuk pada Google, sehingga akan lebih mudah mengkategorikan gambar tersebut dalam level-level tertentu dalam hasil pencarian (file format).<br />
<br />
Contoh: <span style="color:#e06666;font:normal 13px Courier,Monospace">gambar-google-indeks.jpg</span> akan jauh lebih informatif dibanding membuat nama file gambar dengan subyek seperti : <b>IMG0077.jpg</b><br />
<br />
<style>.paper {border-top:30px solid #252525;margin-left:35px;text-align:justify;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFAF;background-image:-webkit-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-webkit-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-moz-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-moz-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-o-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-o-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-ms-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-ms-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),linear-gradient(#A4CE9A .1em, transparent .1em);-webkit-background-size:100% 23px;-moz-background-size:100% 23px;background-size:100% 23px;line-height:23px !important;padding:0 10px 1px 75px}
.paper span {margin: 0 0 23px 0;font:bold 20px/normal Verdana,serif}
.paper p {margin: 0 0 23px 0;padding-top:20px}</style><br />
<div class="paper"><span>HI.! Friends</span><br />
<p>Menggunakan nama file yang deskriptif pada saat Anda menyisipkan gambar dalam sebuah posting juga dapat berguna untuk kemudahan pengguna dalam menemukan informasi, karena saat Google tidak dapat menemukan teks yang cocok (Teks yang diketik pembaca) di halaman di mana gambar akan ditampilkan, maka Google akan menggunakan nama file itu sebagai potongan gambar dalam hasil pencarian.</p></div><br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">3. Gunakan atribut ALT</span><br />
Atribut <span style="color:green;font:bold 13px Verdana,serif">ALT</span> digunakan untuk menggambarkan isi dari file gambar. Artinya saat gambar dalam posting gagal dimuat karena beberapa faktor koneksi, maka teks dalam atribut <span style="color:indigo;font:normal 13px Courier,Monospace">alt="teks gambar"</span> akan berfungsi sebagai teks link untuk menggantikan gambar tersebut. Ini penting karena beberapa alasan :<br />
<ol><li>Memberikan kepada Google sebuah informasi yang berguna tentang penjelasan subyek gambar, file gambar serta untuk membantu menentukan gambar terbaik saat pengguna melakukan permintaan.</li>
<li>Beberapa faktor alasan seperti pembaca yang mungkin sedang mengalami koneksi bandwidth yang rendah (internet lambat), sehingga saat situs terbuka namun tidak dapat melihat gambar pada halaman web. Maka gambar akan digantikan dengan teks deskriptif yang tertulis pada ALT-atribut sebagai informasi penting kepada pengguna.</li>
</ol><br />
<style>.border {background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid blue;text-align:left}</style><br />
<div class="border"><span style="color:yellow">Tidak begitu baik:</span><br />
<Img src="gambar-google-indeks.jpg" <span style="color:#e06666">alt</span>=""/><br />
<br />
<span style="color:yellow">Lebih baik:</span><br />
<Img src="gambar-google-indeks.jpg" <span style="color:#e06666">alt</span>="Gambar"/><br />
<br />
<span style="color:yellow">Terbaik:</span><br />
<Img src="gambar-google-indeks.jpg" <span style="color:#e06666">alt</span>="Cara Menerbitkan Gambar"/></div><br />
<br />
<b>Harus dihindari cara menerbitkan gambar seperti ini :</b><br />
<br />
<div class="border"><Img src="gambar-google-indeks.jpg" <span style="color:#e06666">alt</span>="Ketentuan cara menerbitkan gambar yang benar pada postingan blog dengan beberapa hal"/></div><br />
Mengisi alt atribut dengan kata kunci (<span style="color:darkblue;font:normal 13px Courier,Monospace">" isian kata kunci "</span>) akan menghasilkan pengalaman pengguna yang negatif, dan dapat menyebabkan situs Anda <b>dianggap sebagai spam</b>. Sebaliknya, fokus untuk memberikan keterangan atau penjelasan tentang gambar apakah itu.?, sehingga informasi akan menjadi lebih lengkap dengan penyambungan konten dalam gambar teks <span style="color:#e06666;font:normal 13px Courier,Monospace">alt-atribut</span>.<br />
<br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">4. Jangkar teks</span><br />
Jangkar teks pekerjaannya sama dengan anchor teks, membuat beberapa teks dalam bentuk link eksternal pada tulisan akan mencerminkan bagaimana orang lain lebih mudah melihat halaman Anda. Namun <b>PENTING</b> untuk memastikan bahwa anchor teks yang Anda gunakan dalam situs Anda sendiri dapat berguna, deskriptif, dan relevan, serta hindari penggunaan link secara langsung dalam tautan gambar. Karena hal ini akan lebih meningkatkan lalu lintas ke situs Anda dan juga membantu pengguna memahami tujuan link. Sebagai contoh, Anda ingin link kesebuah informasi pagerank dengan membuat anchor teks yang benar seperti ini: <a href="http://sahabatblogger77.blogspot.com/2014/09/kenapa-alexa-rank-tak-kunjung-mengecil.html" target="_blank" title="Kenapa Alexa Rank Tak Kunjung Mengecil?"><strong>Kenapa Alexa Rank Tak Kunjung Mengecil?</strong></a> bukan <b>KLIK DI SINI</b>.<br />
<br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">5. Konten dan gambar berhubungan</span><br />
Mungkin hal seperti ini sering Anda jumpai pada beberapa situs, dimana informasi yang dibahas dalam konten tulisan tidak berhubungan dengan gambar yang terdapat dalam tulisan. Halaman gambar aktif, dan konten diseputar gambar (termasuk keterangan atau judul gambar) akan menyediakan mesin pencari dengan informasi penting tentang subyek gambar Anda. <span style="border-bottom:1.3px dotted red;padding-bottom:1.3px">Jadi - Saat Anda menerbitkan gambar Upin dan Ipin pada halaman posting tentang <b>Manfaat Wortel Buat Kesehatan Mata</b>, Anda akan mengirimkan pesan bingung untuk mesin pencari tentang subyek gambar Anda.</span><br />
Sebaiknya : <em>Buatlah gambar sesuai topik bahasan konten posting Anda.</em><br />
<br />
<br />
<span style="color:darkred;font:bold 14px/35px Verdana,sans-serif">6. Letak serta kualitas gambar</span><br />
Informasi konten dengan menampilkan gambar yang besar adalah cara terbaik untuk membangun lalu lintas yang besar ke situs Anda. Akan tetapi ketika menyisipkan gambar dalam konten artikel, berpikirlah secara bijak dan hati-hati dengan beberapa ketentuan sebagai berikut :<br />
<ol><li><b>Gambar yang berkualitas baik</b> akan lebih menarik pengunjung untuk bertamu di blog Anda dibanding gambar yang kurang jelas yang hanya akan membuat pengunjung akan kabur. Selain itu, besar kemungkinan webmaster lain akan link ke gambar dengan kualitas baik yang dapat meningkatkan kunjungan kesitus Anda. Gambar yang jelas dan tajam (segi warna) akan tampak lebih baik saat ditampilkan dalam versi thumbanail dihasil penelusuran, dan karena itu akan lebih mungkin untuk di KLIK oleh pengguna.</li>
<li>Tidak semua pengguna atau mereka yang berkunjung di blog Anda akan membaca keseluruhan isi konten dengan gulir (scroll) ke bawah halaman, jadi <b>pertimbangkan menempatkan gambar Anda pada letak yang benar dan akurat</b>, posisi yang memungkinkan mereka dapat segera melihat gambar Anda, namun tidak menghalangi mata mereka saat membaca konten Anda.</li>
<li><b>Tentukan lebar dan tinggi untuk semua gambar</b>. Menentukan dimensi gambar seperti <span style="color:red;font:bold 13px Courier,Monospace">width="200px" height="100px"</span> dapat membantu mempercepat loading halaman, atau ubah nilai format pada URL gambar pada dimensi s1600 menjadi s300, s420 misalnya.</li>
</ol><br />
<br />
Dengan pencarian gambar, seperti halnya pencarian situs web, tujuan Google adalah untuk memberikan dan menampilkan hasil yang terbaik dan paling relevan untuk semua pengguna. Setidaknya dengan mengikuti praktik terbaik yang tercantum dalam beberapa <b>Ketentuan Cara Menerbitkan Gambar Yang Benar</b>, akan meningkatkan kemungkinan bahwa gambar Anda akan dikembalikan dalam hasil pencarian dalam posisi yang memuaskan.</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com52tag:blogger.com,1999:blog-8783436895090091189.post-24436275567717413282015-04-26T09:08:00.001+01:002015-04-27T16:58:54.251+01:00Penyebab Artikel Tidak Muncul Dalam Penelusuran<div style="text-align: justify;"><span style="font:bold 14px Verdana,sans-serif">Penyebab Artikel Tidak Muncul Dalam Penelusuran</span> - Ini ibarat sebuah pertanyaan : <b>"Apakah situs Anda ada di Google indeks (Hasil Penelusuran), lalu dimana posisinya.?"</b> Semua itu adalah mutlak hak Google indeks untuk menempatkan sebuah situs diposisi yang semestinya, jadi jika saat ini artikel dalam situs Anda ada diurutan posisi 50, 77 atau bahkan 100, maka disanalah letak yang semestinya berdasarkan perhitungan algoritme Google data, karena kita hanya sebagai pengguna, setelah google malakukan perhitungan, perayapan dan menjelajah semua isi konten, Google akan menentukan apakah situs tersebut layak dan relevan untuk ditempatkan diposisi pertama hasil penelusuran atau tidak. Namun sebelum itu mari sama-sama kita cari tahu apa <b>Penyebab Artikel Tidak Muncul Dalam Hasil Penelusuran.</b><br />
<br />
Google mempunyai tujuan untuk memberikan hasil yang sangat relevan untuk setiap kueri yang Anda tuliskan dalam sebuah artikel. Setelah Google melakukan indeks, maka hasilnya akan ditampilkan dalam urutan posisi penelusuran, perhatikan <a href="http://sahabatblogger77.blogspot.com/2013/12/mengetahui-cara-kerja-google-merayapi-situs.html" target="_blank" title="Mengetahui Cara Kerja Google Merayapi Situs"><strong>Cara Kerja Google Merayapi Situs</strong></a>. Perkembangan Indeks penelusuran Google terus berkembang secara konstan, semua ini karena milyaran situs yang ditambahkan dan juga adanya perubahan konten di beberapa situs web. Setiap konten yang berubah, serta adanya pembaharuan dalam setiap algoritme peringkat dalam data indeks, dapat menyebabkan URL akan berpindah posisi di hasil penelusuran, bahkan akan terhapus walaupun kemungkinannya sangat kecil.<br />
<br />
Itu sebabnya terkadang saat artikel berada di posisi pertama penelusuran yang kemudian berpindah posisi di urutan bawah bisa terjadi, penyebabnya mungkin karena keterkaitan situs yang ditautkan kehalaman lain tidak baik, karenanya dengan <a href="http://sahabatblogger77.blogspot.com/2013/10/mendaftarkan-artikel-blog-agar-terindex-google.html" target="_blank" title="Mendaftarkan Artikel Blog Agar Terindex Google"><strong>Mendaftarkan Artikel Blog Agar Terindex Google</strong></a> perlu kita lakukan untuk memberitahu google saat artikel baru dibuat.<br />
<br />
Apabila artikel atau situs Anda tidak muncul dalam hasil penelusuran Google, atau semakin rendah tingkat kemunculannya, lakukan langkah-langkah berikut ini untuk mengidentifikasi dan memperbaiki kemungkinan <b>Penyebab Artikel Tidak Muncul Dalam Penelusuran:</b><br />
<ul style="font: bold 14px/20px Helvetia"><li><a href='#target1' title="KLIK Untuk Membaca Poin 1 ( SATU )">Cek apakah situs Anda sudah masuk dalam database Google indeks</a></li>
<li><a href='#target2' title="KLIK Untuk Membaca Poin 2 ( DUA )">Periksa apakah situs Anda telah dipengaruhi oleh tindakan spam manual</a></li>
<li><a href='#target3' title="KLIK Untuk Membaca Poin 3 ( TIGA )">Permudah Google untuk menemukan dan merayapi situs Anda</a></li>
<li><a href='#target4' title="KLIK Untuk Membaca Poin 4 ( EMPAT )">Pastikan bahwa Google dapat mengindeks situs Anda</a></li>
<li><a href='#target5' title="KLIK Untuk Membaca Poin 5 ( LIMA )">Pastikan konten Anda bermanfaat dan relevan</a></li>
</ul><div id="target1"><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,serif">Cek apakah situs Anda sudah masuk dalam database Google indeks</span><br />
<b>* Lakukan penelusuran site:</b><br />
Saat webmaster memeriksa dan memberitahu bahwa ada situs yang tidak masuk dalam hasil telusur, mungkin situs masih dalam tahap indeks sampai akhirnya akan ditampilkan dalam hasil penelusuran. Untuk mengetahui dengan cepat apakah situs Anda masih di indeks atau tidak, cukup lakukan pencarian situs dengan mengetikkan keseluruhan URL. Jika situs Anda ditampilkan, itu berarti situs tersebut telah masuk dalam indeks Google.<br />
<br />
Akan tetapi, jika situs Anda tidak ditampilkan atau tidak ada dalam data indeks Google, mungkin situs Anda telah dihapus karena melanggar Petunjuk dan Ketentuan Google Webmaster. Tinjau ulang dengan mengikuti petunjuk-petunjuk pada webmaster, setelah Anda melakukan perbaikan adanya masalah pada situs, kirimkan kembali pertimbangan untuk di indeks ulang.<br />
<br />
<b>* Verifikasi situs untuk nama domain</b><br />
Coba ketikkan dalam penelusuran Google dengan URL seperti ini: www.<span style="color:#e06666">[domainAnda]</span>.com. Jika situs Anda tidak muncul dalam hasil, atau jika peringkatnya buruk di hasil penelusuran, hal ini merupakan tanda bahwa situs Anda mungkin memiliki tindakan spam manual akibat pelanggaran terhadap Pedoman Webmaster. Sebelum itu terjadi <a href="http://sahabatblogger77.blogspot.com/2015/04/tips-mencegah-komentar-spam-masuk-ke-situs.html" target="_blank" title="Tips Mencegah Komentar Spam Masuk Ke Situs"><strong>Tips Mencegah Komentar Spam Masuk Ke Situs</strong></a> bisa Anda coba untuk merawat situs Anda dari hal-hal seperti ini.<br />
<br />
<b>* Beritahu setiap kali Anda membuat artikel baru</b><br />
Google tidak tahu jika Anda telah membuat artikel/konten baru apabila Anda tidak memberitahukan hal tersebut. Satu cara untuk mempercepat penemuan Google terhadap laman baru di situs Anda adalah dengan mengirimkan Peta Situs, sekalipun situs Anda sudah terdaftar dan telah masuk dalam data indeks Google.<br />
Peta Situs adalah cara terbaik untuk memberi tahu Google tentang laman yang Anda anggap paling penting, konten baru ataupun konten yang diperbaharui.</div><div id="target2"><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,serif">Periksa apakah situs Anda telah dipengaruhi oleh tindakan spam </span><br />
Saat Google bergantung pada sistem otomatis untuk merayap, mengindeks, dan melayani laman pada suatu situs, Google juga akan mengambil dan melakukan tindakan manual untuk mengoreksi kembali hasil indeks. Google akan sepenuhnya melindungi kualitas pada hasil penelusuran, jika situs Anda telah dipengaruhi oleh tindakan spam, maka Google akan mendemokasikannya serta manghapus situs tersebut dari semua hasil penelusuran. Tanda seperti ini akan diberitahukan melalui pesan dalam webmaster tool Google.<br />
</div><div id="target3"><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,serif">Permudah Google untuk menemukan dan merayapi situs Anda</span><br />
Merayap adalah cara Googlebot menemukan laman baru, laman yang diperbarui untuk ditambahkan ke Google indeks. Proses perayapan akan dimulai dengan daftar URL pada laman situs tersebut, yang dihasilkan dari proses perayapan pada laman sebelumnya, dan dihubungkan dengan penambahan data peta situs yang disediakan oleh webmaster. Saat mengunjungi setiap situs, Googlebot akan mendeteksi setiap tautan yang ada pada tiap laman dan menambahkannya ke dalam daftar untuk dirayapi, seperti situs baru, perubahan terhadap situs yang ada, link mati atau link rusak (brokenlink) akan dicatat dan digunakan untuk memperbarui Google indeks, jadi jangan pernah menyimpan atau membiarkan tautan buruk dalam situs Anda, segera hapus dan musnahkan bila ada.<br />
<ul><li>Periksa situs terhadap adanya Kesalahan perayapan di Alat Webmaster, ini akan memberikan detail tentang URL di situs Anda yang saat google malakukan perayapan tidak dapat di akses. Jika Anda menemukan beberapa keselahan perayapan segera perbaiki, karena Googlebot akan mencatat setiap perubahan pada situs saat melakukan perayapan ulang dan beritahu hal itu untuk memperbarui indeks Google.</li>
<li>Tata dan tinjau ulang struktur pada situs Anda dan pastikan dapat diakses dengan mudah, karena sebagian besar mesin telusur adalah berbasis teks. Jika Anda menggunakan JavaScript, HTML, gambar, untuk membuat tautan atau konten, Googlebot dan spider lainnya mungkin akan mengalami masalah saat merayapi situs Anda.</li>
<li>Selalu pertimbangkan untuk membuat dan mengirimkan peta situs setiap ada laman baru dalam situs Anda, sekalipun situs Anda telah diindeks.</li>
</ul></div><div id="target4"><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,serif">Pastikan bahwa Google dapat mengindeks situs Anda</span><br />
Googlebot memproses setiap laman yang dirayapi untuk menyusun indeks dalam jumlah sangat besar, semua berisi kata yang ditemukan serta lokasi bahasa pada kata-kata tersebut pada setiap laman. Bukan hanya itu, googlebot juga akan memproses konten informasi yang didalamnya disertakan tag dan atribut, seperti tag judul dan atribut alt. Google dapat memproses berbagai jenis konten, namun kesulitan merayapi dan mengindeks jenis file tanpa tag dan atribut. Jadi pastikan Anda sudah melakukan hal yang benar dan tepat agar Google lebih mudah mengindeks situs Anda dengan cara <a href="http://sahabatblogger77.blogspot.com/2014/01/pemasangan-title-tag-dan-atribut-pada-link-url.html" target="_blank" title="Pemasangan Title Tag Dan Atribut Pada Link URL"><strong>Pemasangan Title Tag Dan Atribut Pada Link URL</strong></a>.<br />
<br />
<style>.paper {border-top:30px solid #252525;margin-left:35px;text-align:justify;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFAF;background-image:-webkit-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-webkit-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-moz-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-moz-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-o-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-o-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:-ms-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),-ms-linear-gradient(#A4CE9A .1em, transparent .1em);background-image:linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),linear-gradient(#A4CE9A .1em, transparent .1em);-webkit-background-size:100% 23px;-moz-background-size:100% 23px;background-size:100% 23px;line-height:23px !important;padding:0 10px 1px 75px}
.paper span {margin: 0 0 23px 0;font:bold 20px/normal Verdana,serif}
.paper p {margin: 0 0 23px 0;padding-top:20px;}
</style><br />
<div class="paper"><span>SAHABAT BLOGGER 77</span><br />
<p>Mesin telusur Google dan yang lainnya umumnya adalah mesin telusur yang berbasis teks, ini berarti Googlebot tidak dapat membaca teks yang disertakan dalam gambar atau di sebagian besar file multimedia selain file Flash, serta laman yang tersembunyi dibalik JavaScript. Dengan memastikan bahwa konten Anda berbasis teks dan dapat dibaca akan membantu konten Anda dapat diakses pengguna/pengunjung dan Googlebot dengan lebih baik.<br />
Selengkapnya baca : <a href="http://sahabatblogger77.blogspot.com/2014/01/pentingnya-atribut-title-tag-untuk-optimasi-seo.html" target="_blank" title="Pentingnya Atribut | Title Tag Untuk Optimasi SEO"><strong>Pentingnya Atribut | Title Tag Untuk Optimasi SEO</strong></a></p></div></div><div id="target5"><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,serif">Pastikan konten Anda bermanfaat dan relevan</span><br />
Ini merupakan cara dimana Anda memberitahu secara mudah buat pengguna untuk mereka melakukan KLIK pada salah satu artikel di situs Anda dari penelusuran. Kolom pertama menunjukkan hasil penelusuran Google tentang apa yang paling sering muncul dari situs Anda. Laman tersebut juga mencantumkan jumlah tayangan, jumlah klik, dan CTR (Rasio Klik-Tayang) untuk setiap kueri. Informasi ini sangat berguna karena memberikan wawasan tentang apa yang ditelusuri pengguna (kueri kata kunci), jika posisi dimana situs Anda selalu berada dalam urutan pertama, dipastikan jumlah tayangan dan kueri yang sering diklik pengguna di situs Anda akan selalu meningkat. Dalam hal ini adalah tentang pemahaman <a href="http://sahabatblogger77.blogspot.com/2014/10/bagaimana-menentukan-judul-artikel-yang-benar.html" target="_blank" title="Bagaimana Menentukan Judul Artikel Yang Benar?"><strong>Bagaimana Menentukan Judul Artikel Yang Benar?</strong></a><br />
<br />
Menanggapi masalah ini, cobalah merevisi konten Anda untuk membuatnya lebih menarik dan relevan. Hindari penjejalan kata kunci, karena dapat menyebabkan peringkat situs Anda menurun, serta mempersulit pembaca. Selalu menganalisa <a href="http://sahabatblogger77.blogspot.com/2014/05/jumlah-kata-yang-ideal-untuk-membuat-artikel.html" target="_blank" title="Jumlah Kata Yang Ideal Untuk Membuat Artikel"><strong>Jumlah Kata Yang Ideal Untuk Membuat Artikel</strong></a>, dengan memahami cara pengguna melihat situs Anda, Anda dapat mengetahui cara terbaik untuk memikat pengunjung karena teks yang berguna serta deskriptif cenderung akan diklik oleh pengunjung.<br />
<br />
Konten atau artikel yang berisi <span style="color:red;font:bold 16px/normal Verdana">»</span> <a href="http://sahabatblogger77.blogspot.com/search/label/Efek%20Gambar" target="_blank" title="Efek Gambar Tutorial Desain"><strong>Efek Gambar</strong></a> yang hebat dapat menjadi cara terbaik untuk mendatangkan lalu lintas yang banyak kesitus Anda, karenanya saat mempublikasikan gambar dalam tulisan artikel, pikirkan dengan baik bagaimana Anda menciptakan dan mengubah gambar tersebut agar bisa menarik perhatian mereka.<br />
</div><br />
<style>.note {position:relative;width:auto;padding:1em 1.5em;margin:0 0 0 2.3em;color:#333;background:#d9d2e9;overflow:hidden;border-left:4px solid #674ea7}
.note:before {content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:white white #674ea7; #674ea7;background-color:#674ea7;-webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);display:block;width:0;}</style><br />
<div class="note"><span style="font:bold 14px/27px Georgia;color:red">Perlu Diketahui :</span><br />
Hampir tidak ada hal sedikitpun yang dapat dilakukan pesaing untuk mengganggu peringkat situs Anda atau menghapus situs Anda dari indeks Google, jadi Jika Anda saat ini mencemaskan tentang adanya situs lain yang menautkan ke situs Anda dalam bentuk salinan, sebaiknya hubungi webmaster dan melaporkan situs itu untuk di proses, karena Google tidak mengontrol konten laman dengan tindakan seperti itu, namun Google akan mengumpulkan dan mengelola laporan setiap informasi yang sebelumnya sudah dipublikasikan.</div><br />
<br />
Tidak ada yang mudah, namun semua itu akan terasa sangat mudah bila kita mau belajar dan menganalisa setiap kesalahan yang tersemat dalam situs, jadi jika Anda merasa Google melupakan situs Anda atau lama mengindeks laman Anda, itu tidak benar. Terkadang, fluktuasi ataupun keterlambatan hasil telusur disebabkan oleh perbedaan di pusat data Google. Ada banyak pusat data, dan dipengaruhi beberapa faktor (seperti lokasi geografis dan lalu lintas penelusuran) untuk menentukan tujuan kueri yang dikirimkan, semua tergantung pada pusat data yang menangani kueri Anda saat ini.</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com47tag:blogger.com,1999:blog-8783436895090091189.post-47231451146623851312015-04-23T19:01:00.000+01:002015-04-25T19:26:59.729+01:00Tips Mencegah Komentar Spam Masuk Ke Situs<div style="text-align: justify;"><span style="font:bold 16px Verdana,sans-serif">Tips Mencegah Komentar Spam Masuk Ke Situs</span> - Tidak ada yang bisa melarang seorang pembaca untuk masuk ke situs Anda dan menyisipkan komentar spam dalam bentuk teks, bahkan sekalipun Anda sudah menuliskan informasi singkat sebagai pemberitahuan kepada mereka (pengunjung blog) dengan <a href="http://sahabatblogger77.blogspot.com/2013/12/cara-membuat-pengaturan-pesan-untuk-berkomentar.html" target="_blank" title="Cara Membuat Pengaturan Pesan Untuk Berkomentar"><strong>Cara Membuat Pengaturan Pesan Untuk Berkomentar</strong></a>, tetapi pesan Anda tidak akan di hiraukan mereka, dan tetap saja mengotori situs Anda dengan tindakan jahat dengan sengaja Spammer. Jika hal semacam ini Anda biarkan, atau tidak berusaha untuk mencegah tindakan seperti itu, maka reputasi blog yang sudah Anda kelola sebaik mungkin akan cepat hancur hanya karena sebaris teks yang dituliskan pengunjung dalam bentuk komentar spam.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-yC54cFjqIc4/VTkuwIL1O-I/AAAAAAAAB4M/5NaNC0Pf6qc/s1600/spam+komentar.png"><img alt="Comment spam" src="https://1.bp.blogspot.com/-yC54cFjqIc4/VTkuwIL1O-I/AAAAAAAAB4M/5NaNC0Pf6qc/s1600/spam+komentar.png" title="Tips Mencegah Komentar Spam" /></a></div><br />
<br />
<br />
Komentar adalah cara yang terbaik bagi sesama blogger untuk membangun komunitas dan meningkatkan jumlah pembaca/pengunjung (trafik blog). Hanya masih banyak diantara mereka yang seringkali menyalahgunakan cara seperti ini dengan sengaja memberi komentar dalam bentuk Iklan Promosi, padahal <a href="http://sahabatblogger77.blogspot.com/2015/02/manfaat-sering-berkomentar-di-blog-lain.html" target="_blank" title="Manfaat Sering Berkomentar Di Blog Lain"><strong>Manfaat Sering Berkomentar Di Blog Lain</strong></a> itu akan sangat membantu untuk saling mengenal dan memberitahukan kepada orang banyak tentang situs Anda. Nah..!!! Jika Anda pernah menerima komentar (comment text) yang terlihat seperti iklan promosi atau tautan acak ke situs yang tidak memiliki hubungan, berarti Anda sedang menghadapi spam ulasan (sekalipun itu tidak berupa link AKTIF). Karena percuma jika Anda membalas komentar mereka dengan teks pemberitahuan untuk memperingati, atau menghapus komentar itu, dan yang pasti hal semacam itu akan masuk kembali diwaktu lain dan didalam artikel Anda yang lain.<br />
<br />
Ada sebuah istilah <em>"Semakin besar dan tinggi sebuah pohon, maka semakin besar pula hembusan angin untuk meniup pohon itu agar tumbang"</em> sama seperti situs blog, karena tindakan seperti ini sudah menyerang dan meresahkan situs blog <b>SAHABAT BLOGGER 77</b>, biarkanlah hal ini terjadi di situs ini aja, jadi saya akan berikan beberapa ide dan <b>tips untuk mengurangi atau mencegah komentar spam masuk ke situs web Anda dengan 6 tindakan :</b><br />
<br />
<span style="color:darkred;font:bold 15px/30px Verdana,sans-serif">1. Menggunakan alat anti-spam</span><br />
<b>1.1 CAPTCHA</b><br />
<br />
Ini merupakan sistem audio atau alat pengembang situs web untuk mendeteksi profil pengunjung yang akan menuliskan komentar ke blog Anda. Umumnya kita sebagai sipemberi komentar akan disajikan dengan gambar yang terdistorsi, dimana dalam gambar tersebut ada sebuah perintah untuk mengetikkan huruf atau angka, inilah yang disebut dengan CAPTCHA, atau sebuah alat yang bekerja secara otomatis untuk membedakan antara komputer dan manusia. Layanan reCAPTCHA gratis milik Google sangat mudah diterapkan pada situs Anda, karena data yang dikumpulkan dari layanan tersebut akan digunakan untuk meningkatkan proses pemindaian teks sebelum akhirnya komentar pengunjung akan diterbitkan.<br />
<br />
Cara ini cukup efektif untuk mencegah spam masuk ke situs Anda yang sengaja dibuat pengunjung. Proses ini juga dapat mengurangi jumlah pembaca iseng yang meninggalkan komentar di laman Anda dengan membuat profil pengguna palsu. Dan yang pasti cara ini akan mencegah mereka yang sengaja <a href="http://sahabatblogger77.blogspot.com/2013/11/mencari-backlink-melalui-kolom-komentar.html" target="_blank" title="Mencari Backlink Melalui Kolom Komentar"><strong>Mencari Backlink Melalui Kolom Komentar</strong></a>.<br />
<br />
<br />
<b>1.2 Aktifkan JavaScript Anti LINK AKTIF</b><br />
Sebuah teks tautan yang di buat menjadi hyperlink, maka akan dituliskan dalam bahasa tag HTML seperti ini:<br />
<style>.border{background:#333;color:#ccc;padding:10px 15px;font:normal 12px/14px Courier,Monospace;border-left:5px solid red;text-align:left}</style><br />
<div class="border"><a href="http://sahabatblogger77.blogspot.com/"><span style="color:#e06666">LINK</span></a></div><br />
Jika situs Anda belum mengkonfirmasi atau tidak mengaktifkan perintah javascript untuk menolak tautan, maka saat pengunjung menuliskan teks komentar dengan bentuk bahasa tag seperti diatas, maka LINK AKTIF akan tertulis disana.<br />
Caranya baca - <a href="http://sahabatblogger77.blogspot.com/2013/12/menghapus-link-dengan-mengaktifkan-deteksi-komentar-spam.html" target="_blank" title="Menghapus Link Dengan Mengaktifkan Deteksi Komentar Spam"><strong>Menghapus Link Dengan Mengaktifkan Deteksi Komentar Spam</strong></a><br />
<br />
<br />
<span style="color:darkred;font:bold 15px/35px Verdana,sans-serif">2. Moderasi Komentar</span><br />
Moderasi komentar merupakan penundaan komentar yang masuk, artinya tidak ada komentar yang akan muncul di situs Anda sampai Anda meninjau dan menyetujuinya secara manual. Tindakan seperti ini akan memberikan waktu yang banyak buat Anda untuk menyeleksi teks komentar mana yang nantinya akan Anda terbitkan, namun gunakan cara ini secara bijak, karena hal ini akan membuat pembaca merasa tidak dipercaya oleh Anda.<br />
<br />
<style>.note {position:relative;width:auto;padding:1em 1.5em;margin:0 0 0 2.3em;color:#333;background:#d9d2e9;overflow:hidden;border-left:4px solid #674ea7;}
.note:before {content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:white white #674ea7; #674ea7;background-color:#674ea7;-webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);box-shadow:0 15px 15px rgba(0,0,0,.3),-5px 5px 5px rgba(0,0,0,.2);display:block;width:0;}</style><br />
<div class="note"><span style="color:red;font:bold italic 15px/30px Georgia">INFO :</span><br />
Sebelum terkena masalah ini, blog ini menggunakan sistem auto approve on comment, tetapi untuk sementara blog SB-77 Design akan mengaktifkan moderasi Komentar, jadi saya selaku admin meminta maaf yang sebesar-besarnya atas ketidak nyamanan Anda berkomentar di blog ini. Masih dalam tahap pembersihan komentar dan link spam, jadi saya mohon maaf jika komentar Anda akan saya moderasi terlebih dahulu. Terimakasih..!!</div><br />
<br />
<span style="color:darkred;font:bold 15px/35px Verdana,sans-serif">3. Aktifkan Link Dengan Atribut "nofollow"</span><br />
Ini adalah tag mikro format dari Google, yang artinya : "Jenis tautan apapun yang menggunakan atribut rel="nofollow" tidak akan menghambat sebuah situs untuk menghitung PageRank atau menentukan keterkaitan laman Anda dengan kueri pengguna". Sebagai contoh misalnya, jika seorang spammer menuliskan sebuah teks dengan tautan seperti ini:<br />
<br />
<div class="border"><a href="http://www.URL.com">Teks Komentar</a></div><br />
maka secara otomatis tautan itu akan langsung dikonversi menjadi:<br />
<br />
<div class="border"><a href="http://www.URL.com" <span style="color:yellow">rel="nofollow"</span>>Teks Komentar</a></div><br />
<br />
Artinya, tautan atau link dengan pemberian atribut seperti itu tidak akan mempengaruhi situs Anda saat google melakukan penghitungan PageRank. Akan tetapi tautan/link seperti itu tidak akan mencegah spam, hanya membantu menghindarkan situs Anda dari masalah saat melewati PageRank, karena link tidak dikaitkan.<br />
Selengkapnya baca - <a href="http://sahabatblogger77.blogspot.com/2014/03/sedikit-pembahasan-tentang-atribut-nofollow.html" target="_blank" title="Sedikit Pembahasan Tentang Atribut Nofollow"><strong>Sedikit Pembahasan Tentang Atribut Nofollow</strong></a><br />
<br />
<br />
<span style="color:darkred;font:bold 15px/35px Verdana,sans-serif">4. Blok Beberapa Laman Dengan Robots.txt Atau Tag META</span><br />
Dengan file robot.txt Anda dapat memblokir akses Google ke beberapa laman disitus Anda. INGAT..!! gunakan file ini secara hati-hati, karena salah memberi batas akan berakibat situs blog Anda diabaikan oleh Google-crawl.<br />
<br />
Spam bukan bersumber dari komentar pengunjung saja, tetapi beberapa widget yang menampilkan tautan link didalamnya juga sumber spam, seperti buku tamu, recent comment, about profil komunitas dan masih banyak lagi. Arsipkan beberapa widget yang menurut Anda bisa mendatangkan tindakan spam, dengan begitu widget akan tetap aman dipasang karena hal ini akan menghalangi Google mengindeks laman Anda yang berada dalam berkas robot.txt<br />
<br />
<br />
<div class="note"><span style="color:red;font:bold italic 13px/25px Verdana,sans-serif">Pikir dua kali jika Anda ingin mengaktifkan bukutamu.</span><br />
Banyak spam yang pasti tidak memberikan kesan baik tentang situs Anda. Jika fitur seperti widget buka tamu tidak menambahkan banyak nilai pada pengguna atau widget yang bisa bermanfaat buat pengunjung situs Anda, bahkan Anda tidak punya banyak waktu untuk memonitor dan mengelola bukutamu itu secara teratur, pertimbangkan untuk mematikan fitur buku tamu seperti itu, atau jangan pernah terapkan disitus Anda. Sebagian besar perangkat lunak blogging, seperti Blogger khususnya, akan mengharapkan Anda untuk tidak menggunakan fitur tersebut jika untuk penempatan unsur individual.</div><br />
<br />
<span style="color:darkred;font:bold 15px/35px Verdana,sans-serif">5. Menghapus Profile Yang Mengandung Spam</span><br />
Biasanya hal ini bisa kita temukan saat mengKLIK sebuah tautan, namun tautan tersebut tidak tersedia. Dalam hal ini adalah profil palsu yang tertanam pada sebuah komentar yang tertaut kedalam domain yang sama, saat Anda menemukan satu saja profil yang berisi spam, segera HAPUS untuk selamanya (terlebih dalam komentar bertingkat).<br />
<br />
<br />
<span style="color:darkred;font:bold 15px/35px Verdana,sans-serif">6. Periksa Situs Anda Dari Laman Yang Mungkin Berisi Spam</span><br />
Tindakan ini adalah salah satu cara untuk memantau situs Anda saat akan menerbitkan konten baru yang menarik, singkatnya membuat sebuah lansiran konten dengan sebuah alat Google Alerts. Mungkin Anda tidak akan pernah menyadari, saat menulis sebuah artikel bisa saja disana tertulis beberap teks yang mengarah pada konten khusus dewasa, namun semua teks yang tertulis akan terdeteksi sebagai kata kunci saat Google melakukan perayapan ke situs Anda. Dengan alat ini, Anda bisa menolak untuk tidak muncul di situs Anda.<br />
Google Alerts juga dapat membantu mendeteksi laman yang diretas, jadi ini adalah sebuah tips yang bagus untuk memeriksa penggunaan kata kunci dari kosa kata volatil yang tidak diinginkan secara berkala.<br />
<br />
<br />
Mungkin informasi tips seperti ini tidak sepenuhnya saya pahami, karena secara individu lebih ke web-design. Namun hal ini saya alami dan hampir membuat situs ini hancur hanya karena komentar spam. Jadi sebelum hal yang sama terjadi di situs blog Anda, saya memberikan <b>6 Tips Mencegah Komentar Spam Masuk Ke Situs</b>, dan berharap semoga mereka yang suka spam cepat sadar dan taubat, hehe..!! semoga bermanfaat dan akhir kata saya ucapkan terimakasih.</div>Devyhttp://www.blogger.com/profile/18372528263675964092noreply@blogger.com42