tag:blogger.com,1999:blog-53858113484014270202024-03-13T22:50:02.048+07:00CSS Tutsplus DesignUnder 88 blogspot CSS Tutsplus Design dengan bantuan plugin jquery,javascript,html dan cara memodifikasi template bloggerAnonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.comBlogger120125tag:blogger.com,1999:blog-5385811348401427020.post-56366706169748071092012-10-10T13:57:00.001+07:002012-10-10T13:57:13.939+07:00Pengenalan JavaScript Apa itu JavaScript?<br />
<ol><li>JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.</li>
<li>JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.</li>
<li>JavaScript biasanya disisipkan langsung pada halaman HTML.</li>
<li>Client Side scripting.</li>
<li>Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.</li>
<li><b>JavaScript bersifat Case Sensitive</b>.</li>
</ol><b>Penggunaan JavaScript</b><br />
<ul><li>Menggunakan tag HTML <script></li>
</ul>Contoh<br />
<pre class="prettyprint lang-js linenums"><script type="text/javascript">
...
...
</script></pre><b>Penempatan JavaScript</b><br />
<ul><li>Ditempatkan pada tag <mark><head></mark></li>
<li>Ditempatkan pada tag <mark><body></mark></li>
<li>Ditempatkan pada tag <mark><head></mark> dan <mark><body></mark></li>
<li>Sebagai file external. </li>
</ul><br />
<b>Penggunaan JavaScript External</b><br />
File contoh1.js<br />
<pre class="prettyprint lang-js">document.write("<h2>Text ini ditulis dengan JavaScript</h2>");</pre>File contoh1.html<br />
<pre class="prettyprint lang-html linenums"><head>
<script type=“text/javascript”src=“contoh1.js”></script>
</head></pre>Variabel<br />
Aturan penulisan Variabel :<br />
<ul><li>Nama variabel bersifat <b>Case Sensitive</b></li>
<li>Harus dimulai dengan huruf atau karakter underscore.</li>
</ul>Deklarasi Variabel dengan statement var<br />
<ul><li>var nama;</li>
<li>var nama="denddy";</li>
</ul>Variabel yang tidak dideklarasikan<br />
<ul><li>nama="denddy";</li>
<li><mark>x=y+5;</mark></li>
</ul><div class="note">Catatan : Artikel ini masih berlanjut ke tahap Pengenalan Operator javascript.<br />
tungu artikelnya ya..!!!</div><hr class="sexy_line " />Post By : denzdii<br />
<style type="text/css">
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com28tag:blogger.com,1999:blog-5385811348401427020.post-46042768596665354932012-09-04T11:20:00.000+07:002012-09-04T11:20:15.705+07:00Pure CSS Corner Ribbon<div class="gambar2"><a class="lightbox" href="http://4.bp.blogspot.com/-7go-uRnj3QI/T7fCC5fTWYI/AAAAAAAABJk/-scl5lEVDMg/s1600/csstutorial.ribbon.png" imageanchor="1"><img alt="CSS3 Corener Ribbon" src="http://4.bp.blogspot.com/-7go-uRnj3QI/T7fCC5fTWYI/AAAAAAAABJk/-scl5lEVDMg/s1600/csstutorial.ribbon.png" /></a></div><a href="/2012/05/pure-css-corner-ribbon.html"><strong>under88</strong></a> - Kali ini saya akan mencoba menjelaskan cara membuat <a href="/2012/05/pure-css-corner-ribbon.html" target="blank"><strong>CSS Corner Ribbon</strong></a> yang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan <b>CSS3</b> sebagai basicnya tanpa menggunakan Image(gambar). lihat demo...<br />
<p><a class="demo single" href="http://jsbin.com/denzdii/44" target="blank"><span>View Page Demo</span></a></p><h3 class="post-title" style="margin: 0; padding: 0;"><b>HTML</b></h3>Banyak penyimpanan markup yang bisa di lakukan<br />
<pre class="prettyprint lang-html"><div class="wrapper">
<div class="ribbon-wrapper-green">
<div class="ribbon-green">UNDER</div>
</div>
</div></pre><br />
<h5><b>CSS Wrapper</b></h5>Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.<br />
<pre class="prettyprint lang-css">.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}</pre>Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti <mark>.post</mark> , <mark>.content-wrapper</mark> , <mark>#main-wrapper</mark> dan lain-lain . Yang perlu di perhatikan adalan <mark>position: relative;</mark>. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. <i>tingkat lanjut tulis komentar</i>.<br />
<h5><strong>CSS Corner-Ribbon Style</strong></h5><pre class="prettyprint lang-css">.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}</pre><b>ket :</b> tanpa harus ada perubahan .. kecuali <b>background</b> ,<b>border</b> dan <b>box shadow</b> yang bisa di kreasikan dengan tampilan yang anda inginkan. <i>tingkat lanjut tulis komentar</i> . <br />
<p><a class="demo single" href="http://jsbin.com/denzdii/44" target="blank"><span>Lihat Demo</span></a></p><a href="http://css-tricks.com/snippets/css/corner-ribbon/" target="_blank" rel="nofollow"><strong>reference</strong></a><br />
Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com43tag:blogger.com,1999:blog-5385811348401427020.post-83006147296658941642012-09-04T11:15:00.000+07:002012-09-04T11:15:16.989+07:00Penggunaan Link CSS Sprite Gambar<strong>CSS Sprite Pada Gambar</strong> biasa di gunakan untuk membuat menu,item,list,button dan lainnya dengan background sebuah gambar. untuk mengatur link css sprite kita harus selalu mengunakan markup akhir <mark>a:</mark>,agar link pada text anchor tetap aktive..<br />
<pre class="prettyprint lang-css">a {
display: block;
background: url(sprite.png) no-repeat;
height: 25px;
width: 150px;
}
a:hover {
background-position: 0 -25px;
}</pre><b>display: block;</b> gunakan block agar gambar pada text bisa membungkus keseluruhan. atur tinggi dan lebar sesuaikan gambar,agar berfungsi di semua browser termasuk mobile layout.<br />
<pre class="prettyprint lang-css">a:hover {
background-position: 0 -25px;
}</pre><mark>a:hover</mark> guna meroll background sprite gambar menjadi berbeda dengan hanya mengatur <b>background-position:</b><br />
Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com10tag:blogger.com,1999:blog-5385811348401427020.post-73752918322686467072012-09-02T01:19:00.000+07:002012-09-02T01:22:20.238+07:00Pure CSS3 Mac Toolbar<div class="gambar2"><a class="lightbox" href="http://3.bp.blogspot.com/-ri-nccrGMsE/UEJK5ItBPAI/AAAAAAAAB_k/fSODmVlOFAk/s1600/mac-toolbar-pure-css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="mac toolbar pure css" border="0" src="http://3.bp.blogspot.com/-ri-nccrGMsE/UEJK5ItBPAI/AAAAAAAAB_k/fSODmVlOFAk/s1600/mac-toolbar-pure-css.jpg" title="mac toolbar pure css" original="http://3.bp.blogspot.com/-ri-nccrGMsE/UEJK5ItBPAI/AAAAAAAAB_k/fSODmVlOFAk/s1600/mac-toolbar-pure-css.jpg"/></a></div><strong>Button menu pada toolbar dengan tema windows MAC pure dari CSS3.</strong><br />
* Karena tutorial ini tidak memiliki tujuan praktis untuk membuat kelengkapan caranya, saya hanya berupaya memenuhi dan target jadwal yang sudah di tentukan.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-html" rel="HTML"><div class="toolbar">
<div class="nav">
<a class="close" href="#">&nbsp;</a>
<a class="minimize" href="#">&nbsp;</a>
<a class="expand" href="#">&nbsp;</a>
</div>
Mac Toolbar in Pure CSS
</div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-css" rel="CSS">.toolbar {
overflow:hidden;
background:#CFCFCF;
background-color:#cfcfcf;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
position:relative;
overflow:hidden;
font:14px/26px 'lucinda grande',Helvetica,Arial;
text-align:center;
padding:1px 0 0 68px;
height:26px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.toolbar,
.toolbar* {
color:#111;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.nav {
position:absolute;
top:6px;
left:12px;
}
.nav a {
position:relative;
overflow:hidden;
display:block;
float:left;
width:14px;
margin-right:7px;
font:bold 14px/14px 'Helvetica','Arial';
text-align:center;
color:#FFF;
-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.nav a.close {
background-color:#f12519;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#f12519),to(#ff8684));
background-image:-webkit-linear-gradient(top,#f12519,#ff8684);
background-image:-moz-linear-gradient(top,#f12519,#ff8684);
background-image:-ms-linear-gradient(top,#f12519,#ff8684);
background-image:-o-linear-gradient(top,#f12519,#ff8684);
background-image:linear-gradient(top,#f12519,#ff8684);
color:#630f0a;
}
.nav a.minimize {
background-color:#e59130;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e59130),to(#ffdf4b));
background-image:-webkit-linear-gradient(top,#e59130,#ffdf4b);
background-image:-moz-linear-gradient(top,#e59130,#ffdf4b);
background-image:-ms-linear-gradient(top,#e59130,#ffdf4b);
background-image:-o-linear-gradient(top,#e59130,#ffdf4b);
background-image:linear-gradient(top,#e59130,#ffdf4b);
color:#742a08;
}
.nav a.expand {
background-color:#a1e268;
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#a1e268),to(#a1e268));
background-image:-webkit-linear-gradient(top,#a1e268,#a1e268);
background-image:-moz-linear-gradient(top,#a1e268,#a1e268);
background-image:-ms-linear-gradient(top,#a1e268,#a1e268);
background-image:-o-linear-gradient(top,#a1e268,#a1e268);
background-image:linear-gradient(top,#a1e268,#a1e268);
color:#093b00;
}
.nav a:before {
content:'';
width:6px;
height:3px;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
position:absolute;
left:50%;
top:1px;
margin-left:-3px;
}
.nav a:after {
content:'';
line-height:2px;
width:12px;
height:12px;
position:absolute;
left:50%;
margin-left:-6px;
bottom:-4px;
opacity:0.55;
background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
}
.nav a.close:after {
font:bold 11px/0 Verdana;
}
.nav:hover a.close:after {
content:'x';
}
.nav:hover a.minimize:after {
content:'-';
}
.nav:hover a.expand:after {
content:'+';
}
a.close:active {
background:#c84840;
}
a.minimize:active {
background:#bb7e39;
}
a.expand:active {
background:#5b9d2a;
}
</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><strong>DEMO Mac Toolbar</strong><br />
<div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/XwhN5/embedded/result/"></div><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
Original Artikel : <a href="http://calebogden.com/mac-toolbar-css/" rel="nofollow" target="_blank"><strong>calebogden.com/mac-toolbar-css/</strong></a><br />
<style type="text/css">
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com6tag:blogger.com,1999:blog-5385811348401427020.post-62572297188618238842012-08-31T17:24:00.000+07:002012-08-31T17:24:14.185+07:004 Template Responsive Blogger 2012Sebelum memulai <strong>tutorial Web Design</strong>, kali ini saya akan membagikan 4 template responsive yang mungkin akan anda sukai. <strong>template responsive</strong> ini akan berguna untuk semua layar baik dari <u><i>PC, Tablet, Mobile dan media screen</i></u> dari berbagai ukuran. meskipun baru-baru ini blogger sudah mengaktifkan fitur baru dengan <a href="http://buzz.blogger.com/2012/08/dynamic-mobile-reading-experience.html" rel="nofollow" target="_blank"><strong>Template dinamis</strong></a> untuk mobile. tapi tidak salahnya anda bisa menggunakan template yang saya bagikan agar stylenya tidak terbatas, atau bisa di kembangkan lagi dengan kreasi dan inspirasi anda. silahkan download dan lihat demonya sebelum di gunakan.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gallery-icon"><table class="social-tb"><tbody>
<tr> <td valign="top" width="50%"><br />
<div class="iconset"><div class="s-preview"><a class="lightbox" rel="group1" href="http://lh6.ggpht.com/-AE1Ctj0iECk/T85IbzP8__I/AAAAAAAAEUU/QChsFu1IOuo/Innovative%252520Blogger%252520Template%25255B3%25255D.png?imgmax=800" imageanchor="1" rel="nofollow"><img alt="Innovative template blogger" src="http://lh6.ggpht.com/-AE1Ctj0iECk/T85IbzP8__I/AAAAAAAAEUU/QChsFu1IOuo/Innovative%252520Blogger%252520Template%25255B3%25255D.png?imgmax=800" /></a></div><div class="s-text"><div class="s-text-first"><div class="s-text-first-left"><b>Innovative</b></div><div class="s-text-first-right"><a href="http://btemplates.com/" rel="nofollow" target="_blank">Btemplates</a></div><div class="clear"></div></div><div class="s-text-second"><div class="s-text-second-left"><a href="http://innovative-template.blogspot.com/" rel="nofollow" target="_blank">View Demo</a></div><div class="s-text-second-right"><b><a href="https://dl.dropbox.com/u/35086018/B-Templates/Innovative-Blogger-Template.zip" rel="nofollow" target="_blank">Download</a></b></div></div></div></div></td> <td valign="top" width="50%"><br />
<div class="iconset"><div class="s-preview"><a class="lightbox" rel="group1" href="http://2.bp.blogspot.com/-EgiKWBY5zFU/T_4_VINPSWI/AAAAAAAABvA/t8bJl6mv3C0/s1600/download-template-responsive.png" imageanchor="1" rel="nofollow"><img alt="Responsive template blogger" src="http://2.bp.blogspot.com/-EgiKWBY5zFU/T_4_VINPSWI/AAAAAAAABvA/t8bJl6mv3C0/s1600/download-template-responsive.png" /></a></div><div class="s-text"><div class="s-text-first"><div class="s-text-first-left"><b>Responsive</b></div><div class="s-text-first-right"><a href="/2012/07/gratis-template-responsive-blogger.html" target="_blank">CSS Tutsplus</a></div><div class="clear"></div></div><div class="s-text-second"><div class="s-text-second-left"><a href="http://csstempate01.blogspot.com/" rel="nofollow" target="_blank">View Demo</a></div><div class="s-text-second-right"><b><a href="http://css3-tutsplus.googlecode.com/files/css-R-%28under-88.blogspot.com%29.rar" target="_blank">Download</a></b></div></div></div></div></td> </tr>
<tr> <td valign="top" width="50%"><br />
<div class="iconset"><div class="s-preview"><a class="lightbox" rel="group1" href="http://4.bp.blogspot.com/-4pD3r8C2S3A/UCl2yicdR_I/AAAAAAAADio/ycnpntB8Jtc/s640/incipient-preview-1.png" imageanchor="1" rel="nofollow"><img alt="Incipient template blogger" src="http://4.bp.blogspot.com/-4pD3r8C2S3A/UCl2yicdR_I/AAAAAAAADio/ycnpntB8Jtc/s640/incipient-preview-1.png" /></a></div><div class="s-text"><div class="s-text-first"><div class="s-text-first-left"><b>Incipient</b></div><div class="s-text-first-right"><a href="http://www.bloggerbuster.com/2012/08/free-responsive-blogger-template.html" rel="nofollow" target="_blank">bloggerbuster</a></div><div class="clear"></div></div><div class="s-text-second"><div class="s-text-second-left"><a href="http://incipient-template.blogspot.com/" rel="nofollow" target="_blank">View Demo</a></div><div class="s-text-second-right"><b><a href="http://dl.dropbox.com/u/75188418/incipient-template.zip" rel="nofollow">Download</a></b></div></div></div></div></td><td valign="top" width="50%"><br />
<div class="iconset"><div class="s-preview"><a class="lightbox" rel="group1" href="http://4.bp.blogspot.com/-iAur9hmqC1g/T3X_4RAfmII/AAAAAAAACtI/9m2bFgCFXGM/s1600/free-responsive-template.jpg" imageanchor="1" rel="nofollow"><img alt="Responsival template blogger" src="http://4.bp.blogspot.com/-iAur9hmqC1g/T3X_4RAfmII/AAAAAAAACtI/9m2bFgCFXGM/s1600/free-responsive-template.jpg" /></a></div><div class="s-text"><div class="s-text-first"><div class="s-text-first-left"><b>Responsival</b></div><div class="s-text-first-right"><a href="http://www.fiveforblogger.com/2012/03/responsival-responsive-blogger-template.html" rel="nofollow" target="_blank">fiveforblogger</a></div><div class="clear"></div></div><div class="s-text-second"><div class="s-text-second-left"><a href="http://responsival-demo.blogspot.com/" rel="nofollow" target="_blank">View Demo</a></div><div class="s-text-second-right"><b><a href="https://sites.google.com/site/fowziey/config/pagetemplates/responsival-theme/Responsival%20Theme.zip" rel="nofollow">Download</a></b></div></div></div></div></td></tr>
</tbody></table></div><hr class="sexy_line " />Post By : denzdii <style type="text/css">
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
/* untuk template gallery */
.gallery-icon img {border: 3px solid #CCC;margin:0 auto;width:300px;height: 193px}
.gallery-icon img:hover {border-color: #009EB8;}
.gallery-icon img{width:290px;margin:0 auto;}
.s-text-second-left,.s-text-first-left{float:left}
.s-text-second-right,.s-text-first-right{float:right}
.iconset .s-text{overflow: hidden;background-color: #fff;border:1px solid #ccc;font-size:11px}
.s-text-second-right,.s-text-second-left,.s-text-first-left,.s-text-first-right{margin:0 5px}
.s-text-first,.s-text-second{float:right;width:100%}
.iconset{display:inline-block;margin:0;padding:0}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com25tag:blogger.com,1999:blog-5385811348401427020.post-64514848230677824152012-08-30T00:03:00.000+07:002012-08-30T00:03:00.544+07:00Penggunaan @font-face Dengan Google Web Font<strong>Cara Untuk mengganti dan menggunakan font blog</strong> tidaklah sulit karena banyak web yang memberikan font-font menarik yang bisa kita gunakan sesuka hati. nah kali saya akan memberikan tutorial cara mengganti font dengan <a href="http://www.google.com/webfonts/" rel="nofollow" target="_blank"><strong>Google Web Fonts</strong></a>. karena banyak pertanyaan seperti berikut.<br />
<ol><li>Bagaimana cara mengganti font dengan google web fonts ?.</li>
<li>Bagaimana Mengambil hanya <a href="/p/cari-artikel.html?q=font-face" target="_blank"><strong>@font-face</strong></a> dari <b>Google Web Fonts</b> ?.</li>
<li>Apa bedanya menggunakan script,url style,dan <a href="/p/cari-artikel.html?q=font-face" target="_blank"><strong>@font-face</strong></a> ?.</li>
</ol>berikut tutorialnya.<br />
1. Masuk dulu di <a href="http://www.google.com/webfonts/" rel="nofollow" target="_blank"><strong>Google Web Fonts</strong></a>.<br />
2 Setelah masuk pilih font yang di inginkan.<br />
sebagai contoh kita akan pilih font <a href="/p/cari-artikel.html?q=arbutus" rel="nofollow" target="_blank"><strong>Arbutus</strong></a>. seperti gambar berikut, klik <b>add to collection</b>. anda juga bisa memilihi banyak font yang di inginkan.<br />
<div class="gambar"><a class="lightbox" href="http://4.bp.blogspot.com/-5nW2oqX5Niw/UD46Pw_5YOI/AAAAAAAAB_E/av-H0wCuHJ0/s1600/add-google-web-font.jpg"><img alt="add google web font" border="0" class="g-dalam" src="http://4.bp.blogspot.com/-5nW2oqX5Niw/UD46Pw_5YOI/AAAAAAAAB_E/av-H0wCuHJ0/s1600/add-google-web-font.jpg" title="add google web font" /></a></div>3. jika sudah pilih font. kemudian pada bagian menu di bawah terdapat 3 pilihan choose,review dan use. langsung klik saja use. seperti pada gambar berikut : <br />
<div class="gambar"><a class="lightbox" href="http://3.bp.blogspot.com/-jdpAA7KreIg/UD46RNNkbpI/AAAAAAAAB_M/RG-XBe5nUi0/s1600/use-google-web-font.jpg"><img alt="use google web font" border="0" class="g-dalam" src="http://3.bp.blogspot.com/-jdpAA7KreIg/UD46RNNkbpI/AAAAAAAAB_M/RG-XBe5nUi0/s1600/use-google-web-font.jpg" title="use google web font" /></a></div>4. Setelah itu kita akan di hadapkan dengan berbagai pilihan style font seperti normal,<b>bold</b>,<i>italic</i>,<b><i>bold italic</i></b> dan lainnya tergantung dukungan font tersebut.<br />
5. Di bawahnya ada pilihan kode untuk memasukan pada template.<br />
<ul><li><b>Standar</b> : biasanya pilihan ini berupa url link css.</li>
<li><b>@import</b> : pilihan ini jarang di gunakan untuk template blogger.</li>
<li><b>javascript</b> : pilihan font dalam bentuk javascript.</li>
</ul>6. Nah pilihan terakhir adalah mengambil <a href="/p/cari-artikel.html?q=font-face" target="_blank"><strong>@font-face</strong></a> meskipun disana tidak di sediakan pilihan tersebut. tapi kita bisa mengambilnya dengan melihat isi URL link font. contoh pilihan standar :<br />
<pre class="prettyprint lang-js"><link href='<u>http://fonts.googleapis.com/css?family=Arbutus</u>' rel='stylesheet' type='text/css'></pre>ambil link url saja seperti ini <mark>http://fonts.googleapis.com/css?family=Arbutus</mark>, lalu buka link tersebut pada adress bar browser anda maka akan terbuka <a href="/p/cari-artikel.html?q=font-face" target="_blank"><strong>@font-face</strong></a> seperti ini.<br />
<pre class="prettyprint lang-css">@font-face {
font-family: 'Arbutus';
font-style: normal;
font-weight: 400;
src: local('Arbutus'), url(http://themes.googleusercontent.com/static/fonts/arbutus/v2/ZIN1_iT2tfyR9znPvk0NwA.woff) format('woff');
}
</pre>7. Terakhir kita bisa menyimpan <a href="/p/cari-artikel.html?q=font-face" target="_blank"><strong>@font-face</strong></a> pada blog dan menyimpanya pada bagian skin css template atau di atas <code>]]></skin></code><br />
mudah bukan <a href="/2012/08/cara-menggunakan-google-web-font.html"><strong>cara pasang @font-face Google Web Fonts di blog</strong></a>, semoga artikel ini bermanfaat buat anda yang masih belajar membuat blog terutama pengguna blogger. terima kasih atas perhatiannya.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <style type="text/css">
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com54tag:blogger.com,1999:blog-5385811348401427020.post-39221265634367572522012-08-29T22:19:00.001+07:002012-08-29T22:19:41.586+07:00Display Switch Grid And List<div class="gambar2"><a class="lightbox" href="http://4.bp.blogspot.com/-jmbgcrQGPoM/UDzzO85tOuI/AAAAAAAAB-g/Z4CrxMKz2Ss/s1600/jquery-display-grid-and-lis.jpg" rel="group1"><img alt="Display Grid And List" src="http://4.bp.blogspot.com/-jmbgcrQGPoM/UDzzO85tOuI/AAAAAAAAB-g/Z4CrxMKz2Ss/s1600/jquery-display-grid-and-lis.jpg" title="Membuat Post Display Grid Dan List" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="/2012/08/membuat-post-display-grid-dan-list.html"><strong>Cara Membuat Post Display Grid Dan List</strong></a> jarang orang yang membuat tutorial ini karena saya sendiri suka sulit untuk menemukannya di google. kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di maksud dengan <a href="/2012/08/membuat-post-display-grid-dan-list.html"><strong>grid dan list</strong></a>. penggunaan ini untuk menambahkan style pada <strong>readmore otomatis dengan javascript plus tumbnail</strong>. tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten <b>gallery, template blog, iklan, pemasaran produk, info movies, download software</b> dan lainnya.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo single" href="http://css-tutsplus.blogspot.com/" target="_blank">Demo Switch</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gambar"><a class="lightbox" href="http://1.bp.blogspot.com/-p3w1jBzhtkk/UDzzRZq_ESI/AAAAAAAAB-o/GQUR7x2msHY/s1600/switch-grid-list.jpg" rel="group1"><img class="g-dalam" alt="Switch Display Grid And List" border="0" src="http://1.bp.blogspot.com/-p3w1jBzhtkk/UDzzRZq_ESI/AAAAAAAAB-o/GQUR7x2msHY/s1600/switch-grid-list.jpg" title="Membuat Post Display Grid Dan List" /></a></div><b>GRID</b>: Posisi default saat membuka blog maka yang akan active adalah pada display grid.<br />
<b>LIST</b> : untuk melihat artikel dengan keternagan serta gambar kita hanya cukup mengklik tombol list.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gambar"><a class="lightbox" href="http://3.bp.blogspot.com/-v8uJNjWw6Qc/UDzzK6PV1kI/AAAAAAAAB-Y/jewuvt1qVtM/s1600/contoh-switch-grid-list.jpg" rel="group1"><img class="g-dalam" alt="Contoh Display Grid Dan List" src="http://3.bp.blogspot.com/-v8uJNjWw6Qc/UDzzK6PV1kI/AAAAAAAAB-Y/jewuvt1qVtM/s1600/contoh-switch-grid-list.jpg" title="Membuat Post Display Grid Dan List" /></a></div><b>Artikel Grid</b> : Jika pengunjung buka blog kita maka pada halaman depan blog secara default yang akan tampil adalah grid dengan artikel gambar. ini akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar.<br />
<b>Artikel List</b> : pengunjung akan sangat terbantu dengan list ini agar pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada gambar di atas.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Cara Memasang Display Grid Dan List Pada Template</h5>1. masuk bagian <b>edit template</b>. centang bagian <input id="expand-widget" kind="click" type="checkbox" /> <b>Expand Widget Templates</b> .<br />
2. Pasang HTML : cari kode seperti ini <code><b:section class='main' id='main' showaddelement='yes'></code> . ket : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.<br />
<pre class="prettyprint lang-html linenums"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
<div class='switch-left'>
<a name="nolima" href="#"><u><span style='color: #CC0000;'>Recent</span> Post</u></a>
</div>
<div class='switch-right'>
<a class='bar_view' href='#'>Grid</a>
<a class='dat_view' href='#'>List</a>
</div>
</div>
</b:if></b:if></pre>keterangan : perhatikan yang di garis bawahi (<a href="#nolima">no.5</a>). ganti sesuai yang anda inginkan.<br />
2. Sisipkan class="bar" : cari kode <code><div class='post hentry uncustomized-post-template'></code> atau <code><div class='post hentry'></code> jika sulit menemukannya gunakan <b>ctrl+F</b> untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan <b>bar</b> pada atribut <b>class</b> maka hasilnya akan seperti ini.<br />
<pre class="prettyprint lang-html"><div class='post <u>bar</u> hentry uncustomized-post-template'></pre>atau<br />
<pre class="prettyprint lang-html"><div class='post <u>bar</u> hentry'></pre>3. Pasang <b>Javascript</b> dan <b>jQuery</b>. cari kode <code></head></code>.<br />
dan simpan kode berikut di atasnya.<br />
<pre class="prettyprint lang-js"><u><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/></u>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/**
* jQuery switch
*
* active class active pada switch grid atau list
* update by denddy gustiana
* http://under-88.blogspot.com/
* https://plus.google.com/109783772548428705949
*
*/
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
//]]>
</script></pre><div class="note">Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah <code>]]></b:skin></code> .<br />
<pre class="prettyprint lang-css"><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
font-family:'PT Sans Narrow';
font-style:normal;
font-weight:400;
src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
border-bottom:5px solid #CC0000;
height:35px;
color:#444;
margin:0 10px;
padding:5px 9px;
text-transform:uppercase;
}
.switch-left {
width:360px;
float:left;
margin:0 auto;
padding-top:5px;
font:20px PT Sans Narrow;
text-shadow:1px 1px 0 #000;
color:#AAA;
}
.switch-right {
width:120px;
float:right;
margin:0 auto;
padding-top:10px;
}
.switch a {
border:1px solid #999;
font:11px Arial;
padding:3px 8px 3px 25px;
text-transform:none;
color:#aaa;
}
a.bar_view {
background:url(http://2.bp.blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
background:url(http://1.bp.blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
background-color:#aaa;
border:1px solid #999;
color:#111;
cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
background-color:rgba(0,0,0,0.3);
border:1px solid #000;
box-shadow:0 0 0 1px #333;
-moz-box-shadow:0 0 0 1px #333;
-webkit-box-shadow:0 0 0 1px #333;
-o-box-shadow:0 0 0 1px #333;
display:inline;
float:left;
height:160px;
list-style:none;
margin:10px 0 0 9px;
overflow:hidden;
padding:2px 3px 5px;
position:relative;
text-align:center;
width:160px;
}
.bar h3 {
height:30px;
border:0 none;
line-height:8px;
margin:0 5px 5px;
padding:2px;
text-shadow:1px 1px 0 #000;
}
.bar h3 a {
font:14px PT Sans Narrow;
text-align:center;
line-height:16px;
}
.bar h3 a:hover {
color:#c1541a;
}
.bar .post-body {
background:none;
height:245px;
overflow:hidden;
width:167px;
padding:0;
margin:0 0 .3cm;
}
.bar img {
float:left;
height:110px;
margin:0 18px;
width:110px;
}
</style>
</b:if></b:if></pre><div class="note">CSS yang saya gunakan sama seperti pada DEMO jika warna kurang cocok dengan template anda silahkan ganti sesuai kreasi anda dan di harapkan anda harus teliti membuat CSS karena itu maslah yang sering terjadi yang hasilnya kurang rapi</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>5. Simpan template anda dan lihat hasilnya.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Mengatasi kesalahan</h5>Kebanyakan kesalahan biasanya pada bagian CSS karena pada template anda mungkin sudah banyak yang mengedit dengan berbagai style terutama pada bagian post dan gambar post yang hasilnya tidak rapi. serta readmore yang kurang benar cara pemasangannya. jika anda mengalami kesulitan dalam penempatan dan pengaturan css silahkan diskusikan untuk menemukan solusinya. dan jangan lupa tulis URL blog anda yang akan di pasang tutorial di atas. agar saya bisa mereview dan melihat kesalahan untuk mengatasinya.<br />
semoga bermanfaat dan mohon maaf jika banyak kekurangan.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denddy <style type="text/css">
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com48tag:blogger.com,1999:blog-5385811348401427020.post-91452262272768387232012-08-28T23:00:00.000+07:002012-08-28T23:00:41.699+07:00Membuat Efek Loading Halaman Blog<div class="gambar2"><a class="lightbox" href="http://1.bp.blogspot.com/-Jvpzyo8IFyo/UA2ig1BwZJI/AAAAAAAABx8/PRyZbkv-ARA/s1600/loading-halaman-saat-memuat.jpg" imageanchor="1"><img alt="membuat loading halaman blog" src="http://1.bp.blogspot.com/-Jvpzyo8IFyo/UA2ig1BwZJI/AAAAAAAABx8/PRyZbkv-ARA/s1600/loading-halaman-saat-memuat.jpg" title="membuat loading halaman blog" /></a></div><strong>Cara membuat efek loading halaman blog ketika memuat halaman</strong> - memodifikasi blog dengan salah satu efek ini mungkin akan sangat bermanfaat dan bahkan bisa membuat loading sedikit lebih cepat dari sebelumnya.efek ini hampir sama dengan <a href="http://under-88.blogspot.com/2012/06/css-loading-halaman-blog-dengan.html"><strong>efek animation dengan @keyframes</strong></a> . nah apa sih yang di maksud dengan <strong>loading halaman blog</strong>? seperti pada blog ini jika anda membuaka salah satu link pada blog ini maka loading akan muncul ketika memuat halaman. untuk jelasnya lagi anda coba pasang pada blog anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><strong>CARA MEMASANG PADA TEMPLATE BLOG</strong><br />
1. Simpan <b>jquery</b> di atas code <code></head></code> :<br />
<div class="note">Jika pada template anda sudah menggunkan jquery yang sama maka code ini tidak perlu di masukan kembali. dan usahakan versi jquery mengunakan jquery v1.7.1 ganti versi yang lama</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-js"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>2. Simpan <b>CSS</b> di Atas <code>]]</skin></code> :<br />
<pre class="prettyprint lang-css">/* LOADING */
#muat-halaman {
position: fixed;
top: 0;
left: 0;
background-color: #000;
z-index: 9999;
text-align: center;
width: 100%;
height: 100%;
padding-top: 200px;
font-size: 25px;
color: #fff;
display: none;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>3. Simpan <b>HTML</b> di Atas <code></body></code> :<br />
<pre class="prettyprint lang-js"><div id='muat-halaman'>
<span style='font-size:70px;font-weight:bold;'>Please Wait ..</span><br/>
To Open!<br/>The Page Is Being Loaded<br/><a href='http://www.under-88.blogspot.com' style='position:absolute;bottom:0;right:0;font-size:8px;color:#fff!important'>link</a></div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#muat-halaman').fadeIn(800).delay(8000).fadeOut(1200);
});
$('#muat-halaman').click(function() {
$(this).hide();
});
});
//]]>
</script></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>4. Terakhir simpan template anda dan lihat hasilnya dengan mengklik salah satu <b>link internal</b> blog anda dan jangan gunakan atribut <code>target="_blank"</code>.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com4tag:blogger.com,1999:blog-5385811348401427020.post-15967663652083206402012-08-18T02:37:00.001+07:002012-08-18T02:37:46.301+07:00Hover Image Dengan CSS3 Transition<strong>Pure effect image hover with css3</strong>. seperti artikel saya terdahulu mengenai <a href="/2012/05/css-galeri-gambar-dengan-efek-blur.html" target="_blank"><strong>efek hover image dengan css3</strong></a> . namun kali ini kita akan memberikan efek berbeda dengan <strong>transition cubic bezier</strong>. cara kerjanya hampir sama denganb efek menggunakan <strong>easing jquery bounce</strong>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><center><b>DEMO (<i>Arahkan Mouse Pada Gambar</i>)</b></center><div class="main"><div class="view effect"><a class="lightbox" rel="group1" href="http://3.bp.blogspot.com/-Z6sWsROwtA0/UC6Jjxb6RNI/AAAAAAAAB9k/4IBUj-VPIW4/s1600/dinda-ayu-nastoi.jpg"><img alt="css3-image-hover" title="" width="300" height="200" src="http://3.bp.blogspot.com/-Z6sWsROwtA0/UC6Jjxb6RNI/AAAAAAAAB9k/4IBUj-VPIW4/s1600/dinda-ayu-nastoi.jpg" /></a><div class="mask"></div></div></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="http://jsfiddle.net/denzdii/2uFGb/" class="demo single" rel="nofollow" target="_blank">Coba Sendiri</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5><strong>Tutorial Efek Hover Gambar Dengan CSS3</strong></h5>HTML Markup yang di gunakan dengan beberapa property. harus ada pembungkus sebagai induk dari gambar-gambar di dalamnya. seperti HTML berikut ini.<br />
<pre class="prettyprint lang-html linenums"><div class="main">
<div class="view effect">
<a href="#"><img src="image.jpg" /></a>
<div class="mask"></div>
</div>
</div></pre>keterangan :<br />
<code><div class="view effect"></code> . ini property untuk meyeleksi atribut <code><img></code>. dan efek hover akan kita buat kembali dengan HTML <code><div class="mask"></div></code>. tanpa itu pun kita bisa membuat efek animasi. namun itu akan menyempitkan dan terbatas. secara luas CSS banyak animasi jika HTML sudah di tentukan.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>CSS</h5>penggunan css tidak terlalu banyak. hanya efek transition cubic bezier, opacity (transparent) dan border.<br />
<pre class="prettyprint lang-css">.main {
position:relative;
width:650px;
margin:0 auto;
padding:5px 10px;
}
/* seleksi gambar dengan mengatur berbagai.
ukuran,border,opacity,dan lain sebagainya */
.view {
width:300px;
height:200px;
margin:10px;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:0 0 5px #aaa;
cursor:default;
}
.view .mask {
width:300px;
height:200px;
position:absolute;
overflow:hidden;
top:0;
left:0;
}
.view img {
display:block;
position:relative;
}
/* hasilkan efek animasi
dengan memulai sesuatu pseudo element
dan berbagai efek trasition lainnya */
.effect img {
opacity:0.2;
-moz-transition:all 0.3s ease-in;
}
.effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}
.effect:hover .mask {
border:0 double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.effect:hover img {
opacity:1;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Keterangan efek :<br />
pada awalnya gambar akan di buat tranparant dengan css opacity.<br />
pengunaan <code>-moz-transition:all 0.3s ease-in;</code> untuk mozilla yang akan menentukan keseluruhan efek di hasilkan secara halus (smooth).<br />
<pre class="prettyprint lang-css">.effect img {
opacity:0.2;
-moz-transition:all 0.3s ease-in;
}</pre>Tentukan animasi pada property <code><div class="mask"></div></code> dengan css berikut. karena inilah peran penting untuk membuat animasi yang berbeda. penggunaan bisa anda lihat di bawah. saya kurang tahu apa browser Chrome bisa mendukung <strong>transition cubic-bezier</strong> atau tidak, saya belum mencobanya.<br />
<pre class="prettyprint lang-css">.effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}</pre>selection <code>:hover</code> langkah akhir jika semua css animasi sudah di buat sebelumnya. dan menampilkan gambar yang tadinya di buat <code>opacity:0.2;</code> menjadi <code>opacity:1;</code> atau bisa anda tambahkan animasi lainnya pada posisi <code>:hover</code>.<br />
<pre class="prettyprint lang-css">.effect:hover .mask {
border:0 double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.effect:hover img {
opacity:1;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Semoga artikel ini bisa bermanfaat untuk mengenal lebih jauh tentang efek hover pada gambar. terima kasih atas kunjungannya.<br />
<b>pranala luar.</b><br />
<a href="http://www.htmldrive.net/items/show/1216/Pure-CSS3-images-Hover-Effects" target="_blank" rel="nofollow"><strong>Pure CSS3 Images Hover</strong></a><br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
<style type="text/css">
.view{width:300px;height:200px;margin:0 auto;border:5px solid #fff;overflow:hidden;position:relative;text-align:center;box-shadow:0 0 5px #aaa;cursor:default}
.view .mask {width:300px;height:200px;position:absolute;overflow:hidden;top:0;left:0}
.view img{display:block;position:relative}
.main{position:relative;width:650px;margin:0 auto;padding:5px 10px}
.effect img{opacity:0.2;-moz-transition:all 0.3s ease-in}
.effect .mask{cursor:pointer;opacity:1;visibility:visible;border:100px solid rgba(0,0,0,0.7);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620)}
.effect:hover .mask{border:0 double rgba(0,0,0,0.7);opacity:0;visibility:hidden}
.effect:hover img{opacity:1;}
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com8tag:blogger.com,1999:blog-5385811348401427020.post-58597760245212537472012-08-18T00:02:00.000+07:002012-08-20T18:25:42.657+07:00HTML5 Canvas World MapShare kali ini saya tidak memberikan tutorial lengkap. <strong><a href="/2012/08/html5-canvas-word-map.html">HTML5 canvas peta dunia</a> (<i>world map</i>)</strong> hanya untuk menghiasi blog saja.<br />
berikut HTML,CSS dan javascript yang di gunakan.<br />
<center><b>DEMO</b></center><center><div id="container"></div></center>HTML Markup yang di gunakan pakai <code>id="container"</code> .<br />
<pre class="prettyprint lang-html"><div id="container"></div></pre>rubah tampilan jika anda kurang menyukai warna dan CSS nya.<br />
<pre class="prettyprint lang-css" rel="CSS">canvas {
border: 1px solid #9C9898;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url('https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/map-background.png');
display: inline-block;
overflow: hidden;
height: 262px;
width: 580px;
background-position: 1px 1px;
}</pre>gunakan semua javascript di bawah ini tanpa mengurangi satu code pun .<br />
<pre class="prettyprint lang-js linenums"><script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/kinetic-v3.10.4.js"></script>
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/worldMap.js"></script></pre>Atur lebar dan tinggi pada script sesuai keinginan. jika pada template ada <code>id="container"</code> yang sama maka anda bisa ganti pada script di bawah ini.<br />
<pre class="prettyprint lang-js" rel="Javascript"><script type='text/javascript'>
//<![CDATA[
window.onload = function() {
var stage = new Kinetic.Stage({
container: '<mark>container</mark>',
width: 578,
height: 260
});
var mapLayer = new Kinetic.Layer({
y: 20,
scale: 0.6
});
for(var key in worldMap.shapes) {
var path = new Kinetic.Path({
data: worldMap.shapes[key],
fill: '#ccc',
stroke: '#555',
strokeWidth: 1
});
path.on('mouseover', function() {
this.setFill('red');
mapLayer.draw();
});
path.on('mouseout', function() {
this.setFill('#ccc');
mapLayer.draw();
});
mapLayer.add(path);
}
stage.add(mapLayer);
};
//]]>
</script></pre><script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/kinetic-v3.10.4.js"></script><br />
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/worldMap.js"></script><br />
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('k.l=3(){2 a=4 5.m({7:\'7\',n:o,p:q});2 b=4 5.r({y:s,t:0.6});u(2 c v 8.9){2 d=4 5.w({x:8.9[c],z:\'#e\',A:\'#B\',C:1});d.f(\'D\',3(){g.h(\'E\');b.i()});d.f(\'F\',3(){g.h(\'#e\');b.i()});b.j(d)}a.j(b)};',42,42,'||var|function|new|Kinetic||container|worldMap|shapes|||||ccc|on|this|setFill|draw|add|window|onload|Stage|width|578|height|260|Layer|20|scale|for|in|Path|data||fill|stroke|555|strokeWidth|mouseover|red|mouseout'.split('|'),0,{}))
</script><br />
<hr class="sexy_line " />Post By : denzdii<br />
Reference : <a href="http://www.html5canvastutorials.com/labs/html5-canvas-world-map-svg-path-with-kineticjs/" rel="nofollow" target="_blank"><strong>HTML5 Canvas</strong></a><br />
<style type="text/css">
canvas{position:relative !important;border:1px solid #9C9898}#tango{position:absolute;top:10px;left:10px;padding:10px}#container{background-image:url('https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/map-background.png');display:inline-block;overflow:hidden;height:262px;width:580px;background-position:1px 1px;border:1px solid #ccc}.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9));background:-moz-linear-gradient(left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com1tag:blogger.com,1999:blog-5385811348401427020.post-68453994896763475362012-08-17T20:54:00.001+07:002012-08-17T20:54:45.081+07:00Membuat Daftar Komentar Teraktif Di Blog<div class="gambar2"><a href="http://1.bp.blogspot.com/-TCBMyCUeJfo/UBLT126JH7I/AAAAAAAABz0/9nGGHx-aJrI/s1600/daftar-member-aktif.jpg" imageanchor="1"><img alt="Cara Membuat Daftar Member Aktif Blogger" width="600" height="200" border="0" src="http://1.bp.blogspot.com/-TCBMyCUeJfo/UBLT126JH7I/AAAAAAAABz0/9nGGHx-aJrI/s1600/daftar-member-aktif.jpg" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><strong>Cara Membuat Daftar Member Yang Aktif Pada Blog</strong> kali ini meneruskan artikel saya dulu yang hanya memberikan <a href="/2012/07/Javascript-Member-Aktif-di-Blog-DTE.html"><strong>javascript member aktif</strong></a>. dan kali ini berlanjut ke cara memasangnya pada <strong>blogger</strong> dengan langkah-langkah mudah tanpa harus mengedit <b>CSS</b> lagi. tapi jika tampilannya masih kurang silahkan anda edit sendiri <b>CSS</b> nya sesuai style anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo single" href="https://css3-tutsplus.googlecode.com/svn/trunk/member-aktif/member-aktif.html" target="_blank" rel="nofollow"><b>Lihat Demo</b></a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Cara Memasang Pada Blog</h5>1. Masuk ke <b>Page/laman</b> blog atau bisa juga pada <b>new entry/buat artikel baru</b>.<br />
2. Kemudian masukan semua code di bawah ini pada <b>page/laman</b> atau <b>post terbaru</b> anda.<br />
<pre class="prettyprint lang-js"><link type='text/css' rel='stylesheet' href='https://css3-tutsplus.googlecode.com/svn/trunk/member-aktif.css' />
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://under-88.blogspot.com',
maxTopCommenters = 77,
minComments = 1,
numDays = 0,
excludeMe = true,
excludeUsers = ["Anonymous", "Under 88", "Denddy Gustiana"],
maxUserNameLength = 42,
txtTopLine = '[image] [user]',
txtNoTopCommenters = 'No top commentators at this time.',
txtAnonymous = '',
sizeAvatar = 80,
cropAvatar = true,
urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png',
urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
urlMyProfile = '',
urlMyAvatar = '';
//]]>
</script>
<script src='http://css3-tutsplus.googlecode.com/files/member-aktifv2.js' type='text/javascript'></script></pre>3. <b>Preview</b> atau <b>pratinjau</b> sebelum <b>dipublikasikan</b> jika sudah muncul maka langsumg <b>publikasikan</b>.<br />
<div class="note"><b>NB</b> : kegagalan tidak muncul adalah karena kesalahan saat menuliskan nama pada <b>excludeUsers</b>. dan belum adanya yang berkomentar pada blog.</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Keterangan dan setting pada script</h5>lihat beberapa property jascript dan penggunaanya agar anda bisa menyesuaikan jumlah dan style pada poto.<br />
<table class="reference"><tbody>
<tr><th align="left" width="30%">Property</th><th align="left" width="70%">Keterangan</th></tr>
<tr><td>var homepage</td><td>Ganti url dengan url blog kamu</td></tr>
<tr><td>maxTopCommenters</td><td>Tentukan jumlah maksimal yang di tampilkan</td></tr>
<tr><td>minComments</td><td>Tentukan minimal member yang di tampilkan</td></tr>
<tr><td>excludeMe</td><td>True jika ingin menampilkan author member ganti false jika tidak</td></tr>
<tr><td>excludeUsers</td><td>Ganti nama dengan Nama Profile Blogger atau Goole+ kecuali "Anonymous"</td></tr>
<tr><td>maxUserNameLength</td><td>Batasi Jumlah Nama User</td></tr>
<tr><td>sizeAvatar</td><td>Ukuran Gambar tiap profile</td></tr>
<tr><td>cropAvatar</td><td>Crop Gambar jika ukuran melebihi ukuran yang di tentukan</td></tr>
<tr><td>urlNoAvatar</td><td>Tentukan gambar lain jika profile tidak memiliki poto</td></tr>
</tbody></table>Mudah bukan. jika Ada kesalahan silahkan tinggalkan komentar anda. dan mulailah berdiskusi sesuai Topik Artikel jangan lakukan promosi blog di tempat yang bukan tempatnya.. Terima kasih.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="Membuat Daftar Komentar Teraktif Di Blog by Denddy Gustiana is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License" rel="license"><img src="http://1.bp.blogspot.com/-9d6AEmQScWc/T_2UIIjOXNI/AAAAAAAADh4/vaom0ojdUQA/s1600/cc-licence-80x15.png" style="border-width:0;display:inline-block;vertical-align:middle;" alt="Creative Commons License"></a></div>Post By : denzdii <br />
<style type="text/css">
table.reference{background-color:#ffffff;border:1px solid #c3c3c3;border-collapse:collapse;width:100%}
table.reference th{background-color:#009EB8;color:#fff;border:1px solid #c3c3c3;padding:3px;vertical-align:top;text-align:left}
table.reference td{border:1px solid #c3c3c3;padding:3px;vertical-align:top}
table.reference td.example_code{vertical-align:bottom}
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com33tag:blogger.com,1999:blog-5385811348401427020.post-59504373799262197832012-08-17T20:54:00.000+07:002012-08-17T20:54:14.181+07:00Javascript Member Aktif Blog DTE<div class="gambar2"><img alt="membuat member aktif di blogger" border="0" width="600" height="200" src="http://3.bp.blogspot.com/-l1jVUQ1N1wQ/UBG311TzLrI/AAAAAAAABzg/xyMXBBrW5c0/s1600/interaksi-aktifasi-member.jpg" /></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Banyak sekali teman blog saya yang bertanya <strong>bagaimana membuat member aktif</strong> yang mempunyai <b>kotribusi</b>,<b>Respon</b>,<b>interaktif</b> atau <b>komentar</b> terbanyak dalam waktu tertentu seperti pada blognya <b>Taufik Nurohman</b> (<b>DTE :]</b>). namun saya tidak bisa memberikan tutorial lengkap untuk menjaga keamanan dan kenyamanan blog <b>DTE :]</b> tersebut. saya hanya memberikan javascript yang di gunakan. untuk cara memasangnya hanya tinggal simpan di Halaman Statis. Untuk CSS nya silahkan anda berkreasi sendiri.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo" href="/p/interaktif-member.html" target="_blank">Demo Blog</a> <a class="download" href="http://hompimpaalaihumgambreng.blogspot.com/p/daftar-member-aktif.html" rel="nofollow" target="_blank">Demo DTE :]</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>berikut javascript yang di gunakan untuk membuat Member Yang selalu aktif memberikan respon komentar yang baik.<br />
<pre class="prettyprint lang-js" rel="Javascript Yang diGunakan"><script type="text/javascript">
//<![CDATA[
var homepage = 'http://under-88.blogspot.com',
maxTopCommenters = 77,
minComments = 1,
numDays = 0,
excludeMe = true,
excludeUsers = ["Anonymous", "Under 88", "Denddy Gustiana"],
maxUserNameLength = 42,
txtTopLine = '[image] [user]',
txtNoTopCommenters = 'No top commentators at this time.',
txtAnonymous = '',
sizeAvatar = 80,
cropAvatar = true,
urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png',
urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
urlMyProfile = '',
urlMyAvatar = '';
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
return -1
}
}
function replaceTopCmtVars(text, item, position) {
if (!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
avaimg = author.gd$image.src
} else {
var parseurl = document.createElement('a');
if (authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
}
}
if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
var newsize = "s" + sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
if (cropAvatar) newsize += "-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
var authorName = author.name.$t;
if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
var authorcode = authorName;
if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[count]', item.count);
return text
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day = 1000 * 60 * 60 * 24;
var today = new Date();
if (urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break
}
}
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
if (numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
if (days > numDays) break
}
var authorUri = "";
if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
var authorName = entry.author[0].name.$t;
if (excludeUsers.indexOf(authorName) != -1) continue;
var hash = entry.author[0].name.$t + "-" + authorUri;
if (topcommenters[hash]) topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter
}
}
if (json.feed.entry.length > 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
return
}
var tuplear = [];
for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function (a, b) {
if (b[1].count - a[1].count) return b[1].count - a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
});
var realcount = 0;
for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
var item = tuplear[i][1];
if (item.count < minComments) break;
document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
realcount++
}
if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script></pre><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
Update : <a href="http://under-88.blogspot.com/2012/07/membuat-daftar-member-teraktif-di-blog.html"><strong>Pasang Member Aktif Di blog</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com10tag:blogger.com,1999:blog-5385811348401427020.post-82919908332768484042012-08-15T23:28:00.001+07:002012-08-15T23:28:23.678+07:00Mega Menu Vertikal Dengan jQueryMembuat <strong>menu vertikal</strong> pasti anda sudah tahu. vertikal berarti baris ke bawah. nah kali ini saya akan coba share <strong>menu vertikal</strong> tersebut dengan slide sederhana. namun saya akan memberikan kesan menarik dengan slide <strong>mega menu</strong> dan style <strong>CSS</strong>. <strong>jquery</strong> yang akan kita gunakan sangatlah sederhana. karena hanya <strong>slidetoggle()</strong> sebagai efek animasinya. <br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gambar" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://3.bp.blogspot.com/-DJXuGNR77uI/UCq28o2hf9I/AAAAAAAAB9I/yIOiU8gHZQg/s1600/mega_menu_vertikal_slide.png"><img alt="menu vertikal jquery" class="g-dalam" src="http://3.bp.blogspot.com/-DJXuGNR77uI/UCq28o2hf9I/AAAAAAAAB9I/yIOiU8gHZQg/s1600/mega_menu_vertikal_slide.png" title="menu vertikal jquery" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo" href="http://css3-tutsplus.googlecode.com/svn/trunk/sliding_menu_v2/sliding_menu_v2.html" rel="" target="_blank">Lihat Demo</a><a class="download" href="http://css3-tutsplus.googlecode.com/files/sliding_menu_v2.rar" rel="" target="_blank">Download</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5><strong>Tutorial Vertikal Slide Menu Dengan Jquery</strong></h5>pada gambar di bawah menerangkan <strong>slide mega menu</strong> tersebut sangat banyak penyimpanan link dan tak terbatas. sebagai kesimpulan pada menu hampir sama dengan cara membuat <a href="/2012/05/cara-membuat-menu-navigation-part2.html"><strong>menu navigasi</strong></a> lainnya. kata lain <code>ul</code> dan <code>li</code> jadi peran utama dan penambahan <code>id class</code>. Cara kerja menu ini dengan mengklik pada gambar menu dan akan muncul menu kebawah seperti halnya dropdown. saya tambahkan juga footer sebagai deskripsi atau tentang anda. jika tertarik segeralah pasang mega menu ini pada blog anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gambar"><a class="lightbox" href="http://1.bp.blogspot.com/-mwlWf_Wx3D8/UCq25xWEyQI/AAAAAAAAB84/3iO82zG6hEo/s1600/mega_menu_vertikal_info.png" rel="goup1"><img alt="menu vertikal jquery" class="g-dalam" src="http://1.bp.blogspot.com/-mwlWf_Wx3D8/UCq25xWEyQI/AAAAAAAAB84/3iO82zG6hEo/s1600/mega_menu_vertikal_info.png" title="menu vertikal jquery" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>1. <strong>HTML menu</strong> tidak jauh seperti menu-menu lainnya.<br />
<pre class="prettyprint lang-html" rel="HTML"><div id="button">
<img alt="menu" title="menu" src="images/button.png" width="184" height="32" class="menu_ct" />
<ul class="ct_menu">
<li><ul class="menu1">
<h3>Tutorial</h3>
<li><a href="#">CSS </a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
</ul></li>
<li><ul class="menu2">
<h3>Reference</h3>
<li><a href="#">Trick CSS</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">CSS Tutorial</a></li>
<li><a href="#">Blogger Tool</a></li>
</ul></li>
<li><ul class="menu3">
<h3>Contact Me</h3>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Twitter</a></li>
</ul></li>
<li><ul class="menu4">
<h3>More »</h3>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Wordpress</a></li>
</ul></li>
<div class="foot-menu">
<div class="image"><img class="ct-about" src="images/about-me.jpg" alt="ana silvana"/></div>
<div class="about">Tentang Saya</div>
<p>Tak selamanya hidup itu indah, namun keindahaan akan tiba jika kita tidak pernah mengeluh sebesar apapun masalah.
</div>
</ul>
</div><!-- end button--></pre>Penjelasan <b>HTML</b> :<br />
perhatikan !!<br />
<pre class="prettyprint"><img src="images/button.png" width="184" height="32" class="menu_ct" /></pre><div class="separator"><a class="lightbox" href="http://3.bp.blogspot.com/-cQ9VquW2BE4/UCq26iKgKEI/AAAAAAAAB9A/cOQsBsWMB9U/s1600/mega_menu_vertikal_logo.jpg" rel="goup1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" alt="menu vertikal jquery" src="http://3.bp.blogspot.com/-cQ9VquW2BE4/UCq26iKgKEI/AAAAAAAAB9A/cOQsBsWMB9U/s1600/mega_menu_vertikal_logo.jpg" title="menu vertikal jquery" /></a></div>Ini sebagai kepala menu. dan saya menggunakan gambar untuk mempersingkat penggunaan CSS. anda bisa mengganti gambar tersebut sesuai keinginan anda pada Photoshop. saya sudah sediakan PSD nya pada link download. kreasikan keahlian anda di photoshop.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>2. Untuk menambahkan menu lainnya anda bisa menambahkan HTML berikut dan tambahakan di awal atau akhir. yang penting jangan keluar dari menu induknya seperti ini .<br />
<pre class="prettyprint lang-html linenums"><ul class="ct_menu">
---- mega menu untuk menambahkan di sini --
</ul></pre><pre class="prettyprint lang-html" rel="Tambahkan HTML ini"><li><ul class="menu1">
<h3>Tutorial</h3>
<li><a href="#">CSS </a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>3. <strong>jQuery Slide Sederhana</strong><br />
saya gunakan slide ini sederhana mungkin.. anda bisa menambahkan animasi lainnya dengan easing jquery. namun tutorial ini tidak terfocus kepada penggunaan jquery. saya fokuskan untuk gaya CSS yang di gunakan untuk mempercantik.<br />
<ol><b>Pranala Luar</b>
<li><a href="http://api.jquery.com/slideToggle/" rel="nofollow" target="_blank">jQuery SlideToggle()</a></li>
<li><a href="http://jqueryui.com/demos/toggle/" rel="nofollow" target="_blank">easing jquery.ui</a></li>
</ol>Update terbaru dari versi compress jQuery. <a href="http://code.jquery.com/jquery-1.8.0.min.js" rel="nofollow" target="_blank"><strong>download jquery v1.8.0</strong></a><br />
<pre class="prettyprint"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script></pre><div class="note">Perlu di ingatkan kembali. jika sudah memasang jquery versi sebelumnya anda bisa mengabaikan pasang jquery ini atau mengganti versi sebelumnya.</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-js" rel="jQuery dengan slide sederhana"><script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$('img.menu_ct').click(function () {
$('ul.ct_menu').slideToggle('medium');
});
});
//]]>
</script></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><table class="reference"><tbody>
<tr><th align="left" width="30%">Property</th><th align="left" width="70%">Keterangan</th></tr>
<tr><td><code>$('img.menu_ct')</code></td><td>Tentukan class induk pada <b>img,a,button,div</b> dan lainnya.</td></tr>
<tr><td><code>$('ul.ct_menu')</code></td><td>gunakan class ini sebagai elemen slide yang di tampilkan.</td></tr>
</tbody></table><strong>DEMO slide sederhana dengan jQuery</strong> dengan property button seperti di bawah ini.<br />
<div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/22guE/embedded/result,js,html,css/"></div>Basic membuat mega menu awalnya seperti itu. tanpa ada penambahan dekripsi lainnya.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>4.<strong>CSS Mega Menu.</strong><br />
beberapa style saya tidak banyak merubah style yang menarik. ini hanya kresi saya.. anda bisa menmbahkan fitur lain dengan <a href="/2012/06/belajar-mengenal-pseudo-element.html"><strong>pseudo</strong></a> dan <a href="/2012/06/belajar-mengenal-css-transition.html"><strong>efek animasi css</strong></a> lainnya.<br />
<pre class="prettyprint lang-css" rel="CSS Mega Menu Slide">#button {
height:32px;
width:184px;
margin:auto;
}
ul,li {
list-style:none;
margin:0;
padding:0;
}
.menu_ct {
border:1px solid #1c1c1c;
}
.ct_menu {
background:url("http://1.bp.blogspot.com/-RSjqmiYfs6k/T6nyMju4vWI/AAAAAAAABAE/lWOXgG1LKs0/s1600/pattern.png")#302F2F;
border:1px solid #1C1C1C;
display:none;
width:450px;
}
.ct_menu h3 {
color:skyblue;
border-bottom:1px solid #222;
margin:5px 0;
padding:5px 0;
box-shadow:0 1px 0 #444;
-webkit-box-shadow:0 1px 0 #444;
-moz-box-shadow:0 1px 0 #444;
}
.ct_menu li {
display:inline;
}
.ct_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:5px 0;
display:inline-block;
}
.ct_menu li a:hover {
padding:5px 0;
font-weight:bold;
color:#067393;
}
/*Mega Menu*/
/*foot menu*/
.foot-menu {
overflow:hidden;
position:relative;
background:#444;
padding:10px;
color:#ccc;
font-family:arial,helvetica,sans-serif,serif;
border-top:1px solid #555;
box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
-moz-box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
-webkit-box-shadow:0 -1px 0 #000,0 -1px 5px #333 inset;
}
.foot-menu img.ct {
position:absolute;
bottom:2px;
right:2px;
}
.about {
font:bold italic 14px arial;
}
.foot-menu p,.about {
float:right;
width:80%;
}
.ct-about {
float:left;
border:2px solid #ccc;
box-shadow:0 0 2px #000;
-moz-box-shadow:0 0 2px #000;
-webkit-box-shadow:0 0 2px #000;
margin:0 10px 0 0;
padding:0;
}
/*Mega Menu*/
ul.ct_menu li ul li {
width:100%;
display:block;
}
ul.ct_menu li ul {
display:inline-block;
overflow:hidden;
width:210px;
margin:0 5px;
}
</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Akhir dari semua source code yang terlihat jika di pasang pada template anda.<br />
perhatikan dengan teliti jika ingin memasangnya pada blog anda.<br />
karena tutorial ini bukan menjelaskan cara memasangnya melainkan menjelaskan cara membuatnya.<br />
<pre class="prettyprint lang-xml" rel="keseluruhan HTML jika di pasang di blog"><!DOCTYPE html>
<html>
<head>
<title>CSS Tutsplus | Sliding Menu</title>
<script type="text/javascript" src="js/custom-easing.js"></script>
<script src='/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<!-- html untuk membentuk mega menu-->
<div id="button">
<img src="images/button.png" width="184" height="32" class="menu_ct" />
<ul class="ct_menu">
<li><ul class="menu1">
<h3>Tutorial</h3>
<li><a href="#">CSS </a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
</ul></li>
<li><ul class="menu2">
<h3>Reference</h3>
<li><a href="#">Trick CSS</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">CSS Tutorial</a></li>
<li><a href="#">Blogger Tool</a></li>
</ul></li>
<li><ul class="menu3">
<h3>Contact Me</h3>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Twitter</a></li>
</ul></li>
<li><ul class="menu4">
<h3>More »</h3>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Wordpress</a></li>
</ul></li>
<!-- untuk membuat deskripsi dan menmbahkan foto lain sebagainya-->
<div class="foot-menu">
<div class="image"><img class="ct-about" src="images/about-me.jpg" alt="ana silvana"/></div>
<div class="about">Tentang Saya</div>
<p>Tak selamanya hidup itu indah, namun keindahaan akan tiba jika kita tidak pernah mengeluh sebesar apapun masalah.</p>
</div>
</ul>
</div><!-- end button-->
<!-- jquery slide sederhana-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$('img.menu_ct').click(function () {
$('ul.ct_menu').slideToggle('medium');
});
});
//]]>
</script>
</body>
</html>
</pre><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><a rel="license" title="Mega Menu Vertikal Dengan jQuery by Ana Silvana is licensed under a Creative Commons Atribusi-TanpaTurunan 3.0 Tanpa Adaptasi License" href="http://creativecommons.org/licenses/by-nd/3.0/deed.id"><img alt="Creative Commons License" style="border-width: 0px; display: inline-block; vertical-align: middle;" src="http://i.creativecommons.org/l/by-nd/3.0/80x15.png"></a></div>Post By : Ana Silvana<style type="text/css">
table.reference{background-color:#ffffff;border:1px solid #c3c3c3;border-collapse:collapse;width:100%}
table.reference th{background-color:#009EB8;color:#fff;border:1px solid #c3c3c3;padding:3px;vertical-align:top;text-align:left}
table.reference td{border:1px solid #c3c3c3;padding:3px;vertical-align:top}
table.reference td.example_code{vertical-align:bottom}
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/17070884277433839725noreply@blogger.com6tag:blogger.com,1999:blog-5385811348401427020.post-86919547974279697532012-08-12T02:57:00.000+07:002012-08-12T19:59:47.064+07:00Menu Fixed Dengan CSS3 Dan jQuery<div class="gambar2"><a class="lightbox" href="http://1.bp.blogspot.com/-FDPu4drFv1w/UCaq-UOSIaI/AAAAAAAAB5o/WRRC8y5VTbo/s1600/menu-fixed-wirh-css3-and-jq.jpg"><img alt="Fixed Menu Dengan CSS3 Dan Jquery" border="0" src="http://1.bp.blogspot.com/-FDPu4drFv1w/UCaq-UOSIaI/AAAAAAAAB5o/WRRC8y5VTbo/s1600/menu-fixed-wirh-css3-and-jq.jpg" title="Fixed Menu Dengan CSS3 Dan Jquery" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><strong>Membuat fixed pada menu dengan CSS dan jquery</strong> saat di scroll ke bawah kali ini saya akan share dengan sedikit tutorial saja dari <strong>1stwebdesigner</strong>. cara kerja dari tutorial ini adalah bagaimana menu yang awalnya di set di dalam header namun saat di scroll ke bawah menu tersebut akan diam di atas sampai akhir dan kembali ke semula jika mouse di kembalikan ke atas.<br />
Untuk cara memasang pada blog hampir sama dengan tutorial saya pada <a href="/2012/08/dropdown-menu-with-effect-ease-bounce.html"><strong>menu navigation dengan efek easing</strong></a>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo" href="http://jsfiddle.net/denzdii/UJHkh/show/" rel="nofollow" target="_blank">Lihat Demo</a><a class="download" href="http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/" rel="nofollow" target="_blank">Web Tutorial</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><center><div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://www.screenr.com/embed/shm"></div></center><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint" rel="HTML"><div id="navi">
<div id="menu" class="default">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</div><!-- close menu -->
</div><!-- close navi --></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint" rel="CSS">#navi {
margin-top: 50px;
}
#menu {
background: #333;
text-align: center;
margin: 0 auto;
padding: 0;
}
#content {
width: 750px;
margin: 0 auto;
margin-bottom: 25px;
padding: 30px 0;
text-align: left;
}
ul {
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}
ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
ul li a:hover {
background: #01458e;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width: 850px;
box-shadow: 0 0 2px #fff;
-webkit-box-shadow: 0 0 2px #fff;
-moz-box-shadow: 0 0 2px #fff;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
border-bottom:1px solid #fff;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-js" rel="Javascript/jQuery"><script type="text/javascript">
//<![CDATA[
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
}else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
//]]>
</script></pre><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com5tag:blogger.com,1999:blog-5385811348401427020.post-16886812885121088632012-08-10T23:49:00.001+07:002012-08-13T23:39:28.520+07:00CSS3 Count Label Blogger<a href="/p/cari-artikel.html?q=css+transition"><strong>Effect css transition</strong></a> pada label widget blogger saya akan gunakan beberapa properti elemen seperti pseudo <code>:before</code> untuk css count label. dengan style css pada count label yang tampilannya begitu saja kali ini kita akan rubah dengan lebih menarik. dengan sedikit animasi css hover. tutorialnya hampir sama dengan <a href="/2012/06/cara-membuat-css3-tool-tips.html"><strong>membuat css3 tooltips</strong></a>. <br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="separator" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://4.bp.blogspot.com/-h8hrBYeZrVs/UCUnyXOT2BI/AAAAAAAAB4Q/z_U0ChSJK24/s1600/label-widget-1.jpg" imageanchor="1" rel="group1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3);" src="http://4.bp.blogspot.com/-h8hrBYeZrVs/UCUnyXOT2BI/AAAAAAAAB4Q/z_U0ChSJK24/s1600/label-widget-1.jpg" title="CSS3 Count Label Blogger" alt="CSS3 Count Label Blogger"/></a></div>Gambar di samping menunjukan saat pernargetan hover yang akan memunculkan <b>count</b>(<i>jumlah artikel pada label</i>) dengan <b>efek transition cubic-bezier</b>. saya tidak ragu untuk menggunakan efek berbeda karena browser sekarang sudah banyak perkembangan dengan beberapa pendukung efek animasi.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>pada dasarnya widget label blogger hampir sama seperti halnya pada widget <a href="/p/cari-artikel.html?q=Cara+Membuat+Menu+Navigation">menu navigation</a> dengan menggunakan properti <code>ul</code> dan <code>li</code>.<br />
berikut deretan HTML label dengan count label.<br />
<pre class="prettyprint lang-html" rel="Contoh HTML"><ul>
<li><a href="#">CSS</a><span>120 artikel</span></li>
<li><a href="#">Javascript</a><span>150 artikel</span></li>
<li><a href="#">HTML</a><span>200 artikel</span></li>
<li><a href="#">Jquery</a><span>80 artikel</span></li>
<li><a href="#">Tutorial</a><span>100 artikel</span></li>
</ul></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Namun jika kita menggunakan deretan tersebut pada widget tidak akan menghasilkan label secara otomatis. pada blogger sendiri widget sudah di sediakan dan kita bisa mengatur count label atau tanpa count label.<br />
Terus seperti apa hasilnya jika tutorial tersebut jika di pasang pada blogger. lihat demonya di bawah.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Demo</b> - Arahkan/targetkan mouse pada salah satu link label di bawah<br />
<div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/sa4eT/embedded/result/"></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>CARA MEMASANG STYLE PADA WIDGET BLOGGER</h5>Pastikan anda sudah memasang widget blogger.caranya : <br />
<div class="separator" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://4.bp.blogspot.com/-CA5vAV11JiA/UCUvH5540LI/AAAAAAAAB4k/cRer1Wzyuig/s1600/pasang-label-cara1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="CSS3 Count Label Blogger" style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" src="http://4.bp.blogspot.com/-CA5vAV11JiA/UCUvH5540LI/AAAAAAAAB4k/cRer1Wzyuig/s1600/pasang-label-cara1.jpg" title="CSS3 Count Label Blogger" /></a></div>Masuk dasbor kemudian pilih tata letal atau layout.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="separator" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://2.bp.blogspot.com/-swDTuCOkzNA/UCUvJEMpBuI/AAAAAAAAB4s/WQBEsDQUAUI/s1600/pasang-label-cara2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="CSS3 Count Label Blogger" style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" src="http://2.bp.blogspot.com/-swDTuCOkzNA/UCUvJEMpBuI/AAAAAAAAB4s/WQBEsDQUAUI/s1600/pasang-label-cara2.jpg" title="CSS3 Count Label Blogger" /></a></div>Tambah Gadegt pada bagian sidebar atau footer anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="separator" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://2.bp.blogspot.com/-Nsoo_N-FN5s/UCUvJ0MvPyI/AAAAAAAAB40/Ieb3QP-u6TI/s1600/pasang-label-cara3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="CSS3 Count Label Blogger" style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" src="http://2.bp.blogspot.com/-Nsoo_N-FN5s/UCUvJ0MvPyI/AAAAAAAAB40/Ieb3QP-u6TI/s1600/pasang-label-cara3.jpg" title="CSS3 Count Label Blogger" /></a></div>Setelah setelah itu anda akan di pelihatkan dengan beberapa widget pilih widget label blogger dan tambahkan<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="separator" style="clear: both; text-align: center;"><a class="lightbox" rel="goup1" href="http://2.bp.blogspot.com/-ZXwsbaqnf2U/UCUvK4cNP2I/AAAAAAAAB48/Uaolto262wA/s1600/pasang-label-cara4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="CSS3 Count Label Blogger" style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" src="http://2.bp.blogspot.com/-ZXwsbaqnf2U/UCUvK4cNP2I/AAAAAAAAB48/Uaolto262wA/s1600/pasang-label-cara4.jpg" title="CSS3 Count Label Blogger" /></a></div>Pengaturan pada widget label. centang pada text <b>Tampilkan Jumlah Entri Per Label</b><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="note">Cara di atas jika pada template anda belum memasang widget Label Blogger</div>Kemudian simpan.<br />
2. Masuk ke edit template atau edit HTML dan centang <b>Expand Template Widget</b>.<br />
3. Cari id widget Label atau temukan barisan code mirip seperti ini .<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-html" rel="standar HTML Widget Blogger"><b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Perhatikan :</b><br />
lihat pada bagian ini <br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-html"><b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
hapus semua pada bagian ini.
</b:includable>
</b:widget></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="note">Tiap template <code>id='Label1'</code> akan berbeda cari yang kira-kira mirip seperti itu</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>4.Jika sudah di hapus lalu masukan code ini pada bagian yang di hapus tadi:<br />
<pre class="prettyprint lang-html" rel="pengganti HTML label"><b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>5. Lalu Masukan CSS berikut caranya cari code <code>]]</skin></code>. letakan css di atasnya.<br />
<pre class="prettyprint lang-css">.sidebar ul li {
background:transparent url(http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/s1600/icon-new-window.png) no-repeat left center;
list-style-type:none;
margin:0 0 5px;
padding-left:20px;
transition:padding 0.26s ease;
-moz-transition:padding 0.26s ease;
-webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
padding-left:23px;
}
.sidebar ul li:hover span.label-count {
opacity:0.5;
margin-left:10px;
}
span.label-count {
background:#000;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
color:#FFF;
height:auto;
margin-left:50px;
opacity:0;
position:relative;
text-align:center;
width:auto;
padding:2px 8px;
transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
}
span.label-count:before {
content:"";
width:0;
height:0;
position:absolute;
right:100%;
top:0;
border-width:10px;
border-style:solid;
border-color:transparent black transparent transparent;
}</pre>Terakhir Simpan template anda dan lihat hasilnya .<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Faktor kesalahan</b><br />
CSS diatas saya menggunakan class dengan <code>class='sidebar'</code> . mungkin pada template anda akan berbeda. jika anda memasangnya pada bagian <b>footer</b>. css yang perlu di rubah pada css bagian yang di garis bawahi berikut ini.<br />
<pre class="prettyprint lang-css"><u>.sidebar</u> ul li {
background:transparent url(http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/s1600/icon-new-window.png) no-repeat left center;
list-style-type:none;
margin:0 0 5px;
padding-left:20px;
transition:padding 0.26s ease;
-moz-transition:padding 0.26s ease;
-webkit-transition:padding 0.26s ease;
}
<u>.sidebar</u> ul li:hover {
padding-left:23px;
}
<u>.sidebar</u> ul li:hover span.label-count {
opacity:0.5;
margin-left:10px;
}</pre><div class="note">Banyak terjadi kesalahan adalah karena perbedaan <b>id</b> atau <b>class</b> pada CSS. jadi perhatikan dulu widget Label di taruh di sebelah mana .<br />
Jika anda mengalami kesulitan. silahkan ajukan pertanyaan dengan benar dan jelas. agar jawabannya pun jelas</div>mulailah berdiskusi.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
Transition : <a href="/2012/06/belajar-mengenal-css-transition.html"><strong>CSS Effect Transtition</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com14tag:blogger.com,1999:blog-5385811348401427020.post-41586131553199634072012-08-09T22:55:00.002+07:002012-08-09T22:56:36.453+07:00CSS Button Dengan Efek Transition Hover<div class="gambar2" style="clear: both; text-align: center;"><a class="lightbox" href="http://2.bp.blogspot.com/-42BWi8mfwwI/UCPSXat35_I/AAAAAAAAB3w/b7Y6W63SwA4/s1600/css-custom-button-hover.jpg" imageanchor="1"><img src="http://2.bp.blogspot.com/-42BWi8mfwwI/UCPSXat35_I/AAAAAAAAB3w/b7Y6W63SwA4/s1600/css-custom-button-hover.jpg" alt="CSS Button Dengan Efek Transition Hover" title="CSS Button Dengan Efek Transition Hover" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><strong>Custom Button dengan effect hover css transition animation</strong> kali ini kami share dengan beberapa teknik dasar dari <a href="/2012/06/belajar-mengenal-css-transition.html"><strong>css transition</strong></a> dan teknik ini bagus untuk semua browser pendukung. kegunaanya adalah membuat sebuah <b>tombol download</b> dan <b>tombol demo</b> dengan menarik. biasanya tombol button hanya di asumsikan dengan beberapa teknik <b>warna</b>,<b>border</b>,<b>shadow</b>,dan <b>hover</b>, namun kali ini kita akan gunakan <b>image sprite</b> dengan <a href="/2012/06/belajar-mengenal-css-transition.html"><strong>animation transiion</strong></a>.<br />
jika kalian suka silahkan pasang pada blog anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo single" target="_blank" rel="nofollow" href="http://jsfiddle.net/silvana/3A7th/1/show/">Lihat Demo</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Pertama Pasang CSS dulu pada template anda dengan mencari code <code>]]</skin></code> dan Simpan CSS di atasnya.<br />
jika sudah simpan template anda.<br />
<pre class="prettyprint lang-css" rel="CSS">body {
background: url("https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png") repeat scroll 0 0 #EBEBEB;
padding: 20px;
word-wrap: break-word;
}
#button .icon {
background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width: 80px;
line-height:80px;
margin:10px auto 0;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}
#button a span {
display:none;
}
#button:hover a span {
display:inline;
}
#button a span {
font-size:1.4em;
}
#button:hover .icon {
width:420px;
}
#button .demo {
background-position:0 -80px;
}
#button .info {
background-position:0 -160px;
}
#button .download {
background-position:0 0;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Pemanggilan CSS ke HTML.<br />
buat sebuah postingan dan sisipkan code <b>HTML</b> berikut sesuai kegunaannya.<br />
pergantian <b>class</b> dengan <b>demo</b>,<b>download</b> dan <b>info</b>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Untuk DEMO</b><br />
<pre class="prettyprint lang-html"><div id="button">
<a href="#" class="icon demo"><span>Lihat Demo</span></a>
</div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Untuk Download</b><br />
<pre class="prettyprint lang-html"><div id="button">
<a href="#" class="icon download"><span>Lihat Demo</span></a>
</div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Untuk Informasi</b><br />
<pre class="prettyprint lang-html"><div id="button">
<a href="#" class="icon info"><span>Lihat Demo</span></a>
</div></pre><hr class="sexy_line " />Post By : Ana Silvana<br />
Button Generator : <a href="/2012/06/3-tool-css-generator-terbaik.html" target="_blank"><strong>3 Tool CSS</strong></a><style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/17070884277433839725noreply@blogger.com32tag:blogger.com,1999:blog-5385811348401427020.post-20753475980902585142012-08-09T05:01:00.000+07:002012-08-09T05:16:45.659+07:00CSS Border Terlihat Seperti Jahitan<strong>CSS Border</strong> ini bisa anda lihat pada bagian sidebar blog kami. yang terlihat seperti sebuah jahitan "<strong>stitched</strong>" . baca selengkapnya tentang <a href="/2012/06/cara-membuat-tentang-css-border.html"><strong>css border</strong></a>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-css" rel="CSS yang di Gunakan">p {
padding: 5px 10px;
margin: 10px;
background: #eee;
color: #333;
font-size: 21px;
line-height: 1.3em;
border: 2px dashed #aaa;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #eee, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #eee, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #eee, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: 1px 1px 0 #fff;
}</pre><pre class="prettyprint lang-css" rel="HTML"><p>
CONTOH
</p>
</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><center><b>DEMO</b></center><div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/eU8mh/embedded/result,html,css/"></div><hr class="sexy_line " />Post By : Ana Silviana<br />
URL : <a href="http://kitmacallister.com/2011/css3-stitched-elements/" target="_blank" rel="nofollow"><strong>Reference</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/17070884277433839725noreply@blogger.com5tag:blogger.com,1999:blog-5385811348401427020.post-83889760452834892132012-08-06T23:52:00.000+07:002012-08-07T00:01:04.317+07:00Promosi pasang iklan gratis blog tutorial<div class="gambar2"><a class="lightbox" rel="group1" href="http://1.bp.blogspot.com/-EovquE2l6vI/UB_mKKqkfAI/AAAAAAAAB28/KqtDbiY_kds/s1600/free-advertise-for-blogger.jpg"><img alt="free advertise for web blogger design" src="http://1.bp.blogspot.com/-EovquE2l6vI/UB_mKKqkfAI/AAAAAAAAB28/KqtDbiY_kds/s1600/free-advertise-for-blogger.jpg" title="free advertise for web blogger design" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Haii sobat blogger.. berita baru nich dari blog kami. sekarang sedang <strong>promosi iklan gratis</strong> untuk di pasang pada blog <strong>under-88(css-tutsplus)</strong>. karena beberapa hari lagi pemilik <strong>blog</strong> ini akan bertambah dengan author wanita bernama <strong>Silviana</strong> (<strong>Ana</strong>).<br />
<div class="separator"><a class="lightbox" rel="group1" href="http://1.bp.blogspot.com/-LuGTHrg0TIY/UB_vrN2hQiI/AAAAAAAAB3Y/JElgxO0hKWs/s1600/ana-silviana.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img src="http://1.bp.blogspot.com/-LuGTHrg0TIY/UB_vrN2hQiI/AAAAAAAAB3Y/JElgxO0hKWs/s1600/ana-silviana.jpg" style="border: 3px solid #fafafa !important; box-shadow: inset 0 1px 2px #e9e9e9,0 3px 3px rgba(0,0,0,0.3); height: auto; width: 100%;" alt="Ana Silviana" title="Ana Silviana"/></a></div>Menurut saya dia juga ahli dalam <strong>bidang web design</strong>. dan dengan itu blog ini semakin hari akan menjadi <strong>blog profesional</strong> dengan beberapa penggantian domain dan hosting. secara keseluruhan blog ini akan pindah rumah dari <strong>blogger</strong> menjadi <strong>wordpress</strong>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>nah sebelum semua itu berjalan maka blog ini akan memberikan pemasangan iklan gratis dalam bentuk gambar(<b>gif,jpg,flash,png</b>). jika sobat ingin memasang banner iklan blog sobat. silahkan baca petunjuk dan peraturan nya di bawah.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><ol style="text-align: left;"><li>Blog anda harus mempunyai konten berikut : <strong>web design</strong>,<strong>web resource</strong>,<strong>blog template</strong>,<strong>blog tutorial</strong>,<strong>webtools</strong>, dan lain sebagainya.</li>
<li>Banner yang akan di pasang berukuran 125x125 pada sidebar.</li>
<li>Banner gambar mendukung format <b>jpg,png,gif</b> dan <b>flash</b>.</li>
<li>link iklan tidak akan menggunakan <strong>nofollow</strong> semua iklan akan <b>dofollow</b>. </li>
<li>Banner tidak mengandung unsur <strong>pornografi</strong> dan <b>sara</b> (<i>dilarang mengcopy banner dari blog lain</i>). </li>
<li><strong>Waktu pemasangan iklan gratis</strong> tidak tentu dan akan berbayar jika blog ini sudah berganti domain sampai waktu yang tidak di tentukan. </li>
<li>Informasi lain akan di update dalam waktu lainnya.</li>
</ol><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Dari beberapa syarat di atas sewaktu-waktu akan berubah.<br />
Iklan gratis ini hanya berlaku untuk <b>6 Blog</b> saja. jadi tunggu apalagi.segeralah buat <strong>banner blog</strong> anda dengan ukuran yang sudah di tentukan. dan buat semenarik mungkin. agar pengunjung pun tidak akan ragu untuk mengunjungi blog anda.<br />
<strong>CARA PEMASANGAN IKLAN DI BLOG</strong> Hubungi kontak saya di bawah dan follow web social yang anda perlukan.<br />
sekian dan terima kasih.<br />
<hr class="sexy_line " /><ul id="social"><li data-alt="Me On Twitter"><a class="icon twitter" href="http://twitter.com/denzdii" rel="nofollow">Me On Twitter</a></li>
<li data-alt="Ikuti kami di Facebook"><a class="icon facebook" href="https://www.facebook.com/denzdii" rel="nofollow">Me On Facebook</a></li>
</ul><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license" title="Membuat Daftar Komentar Teraktif Di Blog by Denddy Gustiana is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License"><img alt="Creative Commons License" src="http://1.bp.blogspot.com/-9d6AEmQScWc/T_2UIIjOXNI/AAAAAAAADh4/vaom0ojdUQA/s1600/cc-licence-80x15.png" style="border-width: 0; display: inline-block; vertical-align: middle;" /></a></div><style type="text/css">
#social{width:200px;list-style:none;margin:0;padding:0}#social .icon{-webkit-transition:width 0.25s ease-in-out 0s,background-color 0.25s ease-in-out 0s;-moz-transition:width 0.25s ease-in-out 0s,background-color 0.25s ease-in-out 0s;-ms-transition:width 0.25s ease-in-out 0s,background-color 0.25s ease-in-out 0s;-o-transition:width 0.25s ease-in-out 0s,background-color 0.25s ease-in-out 0s;background:url("https://lh5.googleusercontent.com/-oJJuTABnZG4/TyvWKerI_-I/AAAAAAAAF_g/9tFEfxqNLa4/d/iconizers.png") no-repeat scroll 3px 0 rgba(217,30,118,0.42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;-webkit-box-shadow:rgba(0,0,0,.28) 0 1px 3px;-moz-box-shadow:rgba(0,0,0,.28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0,.28) 0 1px 3px;-o-box-shadow:rgba(0,0,0,.28) 0 1px 3px;box-shadow:rgba(0,0,0,.28) 0 1px 3px;color:#141414;display:block;float:none;height:40px;line-height:40px;margin:5px 0 0;position:relative;text-align:left;text-indent:50px;text-shadow:0 1px 0 #fff;white-space:nowrap;width:41px;z-index:5}.js #social .icon{width:40px}#social .icon{color:#666;text-decoration:none}#social .facebook{background-color:rgba(65,131,196,0.42);background-position:3px 0}#social .twitter{background-color:rgba(45,118,185,0.42);background-position:3px -40px}#social li:hover .icon{text-shadow:none;color:#fff;width:190px}#social li:hover .icon{background-color:#D91E76}#social li:hover .facebook{background-color:#2D76B9}#social li:hover .twitter{background-color:#4183C4}#social li:hover .gplus{background-color:#4D90FE}#social li:hover .rss{background-color:#FF6D00}.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9));background:-moz-linear-gradient(left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com30tag:blogger.com,1999:blog-5385811348401427020.post-49586883513366623332012-08-05T03:29:00.000+07:002012-08-09T05:28:58.802+07:00Valid HTML5 untuk template blogger part.1<div class="gambar2"><a class="lightbox" href="http://1.bp.blogspot.com/--grbB-H6PdI/UB2DJUimWGI/AAAAAAAAB2k/GdmpSHeV96o/s1600/template-blogger-valid-html.jpg"><img alt="template-blogger-valid-html5" src="http://1.bp.blogspot.com/--grbB-H6PdI/UB2DJUimWGI/AAAAAAAAB2k/GdmpSHeV96o/s1600/template-blogger-valid-html.jpg" title="Validator html5" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Banyak template blogger yang tidak valid dengan markup <a href="/p/cari-artikel.html?q=html5"><b>HTML5</b></a>. itu di sebabkan dengan beberapa faktor. dan tahukah anda beberapa orang mengatakan kalau template blog kita valid. maka akan berpengaruh terhadap <b>SEO</b>. apa benar..?? saya kurang tahu karena bukan ahli <b>SEO</b>. itu bukan tugas saya terhadap mesin google. naha kita hanya akan belajar mengurangi eror template yang ingin valid dengan <a href="/p/cari-artikel.html?q=html5"><b>HTML5</b></a>. sebelumnya kita ketahui dulu seberapa besar eror template anda. silahkan check dulu.<br />
<div class="note"><b>NB </b>: Template Blogger yang valid hanya pada halaman homepage atau halaman depan blog. dan tutorial ini hanya untuk mengurangi sebagian belum sepenuhnya jika template anda terlalu banyak yang eror.</div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a class="demo" href="http://validator.w3.org/check?uri=http%3A%2F%2Funder-88.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0" target="_blank">Demo Valid</a> <a class="download" href="http://validator.w3.org/" rel="nofollow" target="_blank">Check Valid</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Faktor penyebab.</b><br />
<ol><li>meta tag yang berlebihan yang tidak semua metag di terima <b>HTML5</b></li>
<li>Widget standar blogger (terutama follower).</li>
<li>Posting yang tampil di homepage.dengan snippet.</li>
<li>Gambar post atau home page.</li>
<li>Pemasangan CSS kurang tepat.</li>
<li>Dll</li>
</ol>untuk mengurangi beberapa eror.<br />
pastikan dulu template anda sudah menggunakan Doctype HTML5. caranya...<br />
pada bagian atas template anda lihat barisan code yang mirip seperti ini.<br />
<pre class="prettyprint lang-html"><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head></pre>Ganti dengan code ini .<br />
<pre class="prettyprint lang-html"><!DOCTYPE html>
<html>
<head></pre>Dan jika ada kesalahan pada tag head feed. maka cari code<br />
<pre class="prettyprint lang-html"><b:include data='blog' name='all-head-content'/></pre>dana ganti dengan code di bawah :<br />
<pre class="prettyprint lang-html"><meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='<u style="color: #cc0000;">http://under-88.blogspot.com</u>/feeds/posts/default' rel='alternate' title='<u style="color: #cc0000;">CSS Tutsplus Design</u> - Atom' type='application/atom+xml'/>
<link href='<u style="color: #cc0000;">http://under-88.blogspot.com</u><span style="color: #cc0000;">/</span>feeds/posts/default?alt=rss' rel='alternate' title='<u style="color: #cc0000;">CSS Tutsplus Design</u> - RSS' type='application/rss+xml'/>
<link href='http://www.blogger.com/rsd.g?blogID=<u style="color: #cc0000;">MASUKAN_ID_BLOG</u>' rel='EditURI' title='RSD' type='application/rsd+xml'/>
<link href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<link href='<u style="color: #cc0000;">http://www.blogger.com/profile/11256212643663337235</u>' rel='me'/>
<!-- deskripsi dan keyword -->
<meta content='Description Blog Anda' name='description'/>
<meta content='Keywords Blog Anda' name='Keywords'/></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="note">Ganti semua code yang di garis bawahi dengan settingan blog anda</div>di atas saya tidak menyertakan tag <code>rel="publisher"</code>. karena mendeteksi tidak valid alias eror.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>Tips kedua.</b><br />
Valid html yang sulit kita sadari adalah penempatan CSS yang kurang baik.<br />
seharusnya CSS di simpan dalam satu baris dan tidak boleh berada dalam property <code><div></code> . semua css harus benar-benar berada dalam stylesheet sebaris.<br />
contoh pada template anda simpan css di atas <code>]]</skin></code> atau di bawahnya.<br />
jika berada di bawahnya gunakan pembungkus CSS seperti ini.<br />
<pre class="prettyprint lang-html"><style type='text/css'>
-- isi code css di sini --
</style></pre><b>Tips ketiga</b><br />
Widget sidebar dengan <b>widget Followers</b>. saya kurang tahu bagaimana mengatasi eror pada widget ini agar valid html5. kalian bisa carinya di google.<br />
karena itu pula saya menghilangkan <b>widget follower</b> dan menggantinya dengan <b>text link anchor</b> saja karena kegunaanya sama saja. dan saya sendiri tidak terlalu tertarik dengan banyaknya <b>follower</b>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>mungkin saat ini saya hanya bisa menuliskan sebagainnya. karena agar valid sempurna kita harus belajar dari awal. dan terlalu panjang untuk saya jelaskan semuanya.<br />
nanti kita akan bahas pada artikel kedua (part2).<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : Denddy<br />
Pranala Luar : <a href="http://validator.w3.org/" rel="nofollow" target="_blank"><strong>Validator.W3C</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com24tag:blogger.com,1999:blog-5385811348401427020.post-31522346190665233912012-08-05T02:06:00.000+07:002012-08-05T02:06:51.409+07:00Load animasi loop dengan css3<div class="gambar2"><a class="lightbox" href="http://4.bp.blogspot.com/-7AFTA_K47pk/UB1t9xs2BmI/AAAAAAAAB2Q/iZm2m7O_PZc/s1600/loading-effect-animation-wi.jpg"><img alt="css3 loading animation effect" src="http://4.bp.blogspot.com/-7AFTA_K47pk/UB1t9xs2BmI/AAAAAAAAB2Q/iZm2m7O_PZc/s1600/loading-effect-animation-wi.jpg" title="css3 loading animation effect" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>efek loading animasi ini terinspirasi dari <a href="http://www.alessioatzeni.com/blog/css3-loading-animation-loop/" rel="nofollow" target="_blank"><strong>css3-loading-animation-loop</strong></a>. dan beberapa animasi lainnya bisa anda lihat di sana. efek ini bisa kita gunakan dengan beberapa kegunaan pada blog di antaranya membuat <a href="/2012/07/Membuat-Efek-Loading-Halaman-Blog.html"><strong>loading halaman</strong></a>,<b>load widget</b>,<b>load iframe</b> dan lain sebagainya.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><b>HTML</b><br />
<pre class="prettyprint lang-html"><div class="loader"></div>
<div class="loader2"></div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><pre class="prettyprint lang-css" rel="CSS Untuk Membuat Animasi">.loader {
background-color: rgba(0,0,0,0);
border:5px solid rgba(225, 0, 56, 0.8);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff3300;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(225, 0, 56, 0.8);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff3300;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><center><b>Lihat Demo</b></center><div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/juhhp/embedded/result,html,css/"></div><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : Denddy Gustiana<br />
reference : <a href="http://www.alessioatzeni.com/blog/css3-loading-animation-loop/" rel="nofollow" target="_blank"><strong>www.alessioatzeni.com</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com10tag:blogger.com,1999:blog-5385811348401427020.post-84872938462171681182012-08-04T21:47:00.000+07:002012-08-04T21:47:35.300+07:00menu dropdown dengan effect ease bounce<div class="gambar2"><a class="lightbox" href="http://1.bp.blogspot.com/-tNE1fPHd63k/UB0uubGDg7I/AAAAAAAAB18/HbaMW37DJeQ/s1600/dropdownmenu-with-efect-jqu.jpg"><img alt="Drop Down Menu With Effect Ease Bounce" src="http://1.bp.blogspot.com/-tNE1fPHd63k/UB0uubGDg7I/AAAAAAAAB18/HbaMW37DJeQ/s1600/dropdownmenu-with-efect-jqu.jpg" title="Drop Down Menu With Effect Ease Bounce"/></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="/search/label/Menu%20Navigation?max-results=6"><strong>Menu navigation</strong></a> sering sekali saya bahas dan kali ini menu kita akan menggunakan <a href="/search/label/Animation?max-results=6">efect animation</a> dengan <strong>jquery ui</strong> dengan efect <strong>easeOutbounce</strong>. jika anda suka silahkan ganti menu navigation anda dengan menu di bawah ini.<br />
jika belum mengerti dengan membuat menu navigation silahkan kunjungi artikel <a href="/2012/05/cara-membuat-menu-navigation-part1.html"><strong>dasar membuat menu navigation blog</strong></a>.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>1. Jika anda sudah mempunyai menu pada template. maka ganti dengan <b>HTML</b> di bwah ini.<br />
2. jika belum ada menu silahkan simpan <b>HTML</b> di di bawah <b>header</b> atau di atas <b>main-wrapper</b> . ingat nama <b>ID</b> tiap template berbeda.<br />
<pre class="prettyprint lang-html" rel="HTML"><nav id='denzdii'>
<ul>
<li class='depan'><a href='/'>Beranda</a></li>
<li><a href='#'>Title 2</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 3</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 4</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>3. Simpan CSS di atas <code>]]></skin></code>.<br />
<pre class="prettyprint lang-css" rel="CSS Menu">#denzdii {
background:#156AA6;
overflow:hidden;
}
#denzdii ul {
float:left;
height:30px;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
#denzdii li {
float:left;
text-shadow:1px 1px 2px #0066B3;
padding:0;
}
#denzdii li a {
background:#156AA6;
color:#eee;
display:block;
font-weight:400;
line-height:30px;
border-left:1px solid #4B88B3;
border-right:1px solid #043457;
text-align:center;
text-decoration:none;
margin:0;
padding:0 25px;
}
#denzdii li.depan a {
border-left:none;
}
#denzdii li ul {
background:#156AA6;
height:auto;
border:0;
position:absolute;
width:225px;
z-index:80;
box-shadow:0 1px 5px #034257;
display:none;
margin:0;
padding:0;
}
#denzdii li li {
display:block;
float:none;
width:225px;
border-top:1px solid #4B88B3;
border-bottom:1px solid #043457;
margin:0;
padding:0;
}
#denzdii li:hover li a {
background:#156AA6;
}
#denzdii li ul a {
display:block;
height:30px;
font-size:12px;
font-style:normal;
text-align:left;
margin:0;
padding:0 10px 0 15px;
}
#denzdii li a:hover,#denzdii li:hover > a {
color:#fff;
}
#denzdii li:hover ul.hidden {
display:block;
}
</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>4. Simpan script di atas <code></head></code>.<br />
<pre class="prettyprint lang-js linenums" rel="Jquery Dan Javascript"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#denzdii li ul').removeClass('hidden');
$('#denzdii li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script></pre><br />
<div class="note">Catatan : jika jquery pada no.1 dan 2 sudah ada pada template anda, maka jangan di masukan lagi. cukup satu saja. dan ingat lihat type nya jangan URL nya.</div><br />
Terakhir simpan template dan lihat hasilnya...<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>DEMO</h5><div allowfullscreen="allowfullscreen" class="jsfiddle-demo loader" data-src="http://jsfiddle.net/denzdii/Fy8z5/show/"></div><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com15tag:blogger.com,1999:blog-5385811348401427020.post-46703653630867924812012-08-02T18:51:00.000+07:002012-08-02T20:43:09.990+07:00Akhirnya google pagerank update agustus 2012<div class="gambar2"><a class="lightbox" href="http://4.bp.blogspot.com/-AkzUB4NmrRk/UBpk7u1RIHI/AAAAAAAAB1k/1xRqxzMtQfw/s1600/pagerank-update.jpg"><img alt="upadate google pagerank sudah update" src="http://4.bp.blogspot.com/-AkzUB4NmrRk/UBpk7u1RIHI/AAAAAAAAB1k/1xRqxzMtQfw/s1600/pagerank-update.jpg" title="akhirnya google pagerank update" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="/"><strong>Akhirnya google pagerank mulai update</strong></a> lagi setelah lama menunggu dan saya mulai frustasi karena banyak kabar pagerank google telah mati dan sulit untuk mendapatkan pagerank dari google terutama bagi para pembuat blog baru seperti blog ini.. yang sudah berusia 3bln..<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>ada cara jitu mendapatkan pagerank dengan cepat. seperti yang pernah saya bahas pada artikel <a href="/2012/04/cara-meningkatkan-pagerank-blog-di.html"><strong>meningkatkan pagerank blog di google</strong></a>. dan kali ini saya hanya menambahkan tips sederhana.. yaitu dengan mengaktifkan <b>google panda</b> dan mengaktifkan <b>license blog</b> unuk menghindari duplikat artikel dari blog lain yang mencuri kualitas blog.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Dan ternyata setelah saya mengaktifkan fitur tersebut. hari ini <b>agustus/02/2012</b> blog <a href="/2012/08/akhirnya-google-pagerank-update.html"><strong>under88</strong></a> mendapatkan pagerank meskipun hanya 1. namun itu sudah membangkitkan kembali semangat ngeblog saya. yang baru di mulai 3bln lalu. setelah sebelumnya vakum 1 thn akibat menjadi pengangguran.. hehehe,,<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>gak penting banget ya saya tulis artikel ini.. tapi ini untuk membangkitkan sobat blogger juga yang kesulitan mendapatkan pagerank.<br />
intinya jangan pernah putus asa. buat <a href="/2012/04/membuat-artikel-blog-berkualitas.html"><strong>artikel yang menarik dan berkualitas</strong></a>. banyak <b>follower</b> tidak menjamin naiknya blog. justri kita musti hati-hati dengan banyak pengunjung yang hanya menjadi plagiat.<br />
semoga informasi di atas bisa bermanfaat buat para blogger pemula.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com12tag:blogger.com,1999:blog-5385811348401427020.post-30802376509500298582012-08-02T00:08:00.001+07:002012-08-02T00:46:52.309+07:00Multi Kolom Text Dengan CSS3artikel <strong>CSS3 Modul Multi Kolom</strong> ini terinspirasi dari dari <b>www.red-team-design.com</b> , yang menjelaskan beberapa penggunaan CSS3 untuk multi kolom pengganti <code>table</code> dan property float pada <code><div></code>. <strong>Multi-kolom modul</strong> saat ini hanya didukung di browser <b>Mozilla</b> dan <b>Webkit</b> (<i>Safari dan Chrome</i>), ini berarti bahwa tidak ada dukungan untuk browser seperti <b>IE</b> dan <b>Opera</b>. namun itu bukan masalah serius selama kita memahamai peningkatan progresif pada browser tersebut.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><div class="gambar2" style="clear: both; text-align: center;"><a class="lightbox" href="http://3.bp.blogspot.com/-T-fafm51bPk/UBlhf8cG5mI/AAAAAAAAB0o/I5jo5_vCvNQ/s1600/text-multi-kolom-dengan-css.jpg" imageanchor="1"><img alt="multi kolom text dengan css" border="0" src="http://3.bp.blogspot.com/-T-fafm51bPk/UBlhf8cG5mI/AAAAAAAAB0o/I5jo5_vCvNQ/s1600/text-multi-kolom-dengan-css.jpg" title="multi kolom [CSS Tutsplus]" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="http://jsfiddle.net/denzdii/PYm9x/show/" class="demo single" target="_blank" rel="nofollow">Lihat Demo</a><br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>CSS3 Column count</h5><pre class="prettyprint lang-css">#colom-count {
-moz-column-count:3;
-webkit-column-count:3;
-moz-column-gap:30px;
-webkit-column-gap:30px;
text-align:justify;
}</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>CSS3 Column width</h5><pre class="prettyprint lang-css">#column-width {
-moz-column-width:200px;
-webkit-column-width:200px;
-moz-column-gap:30px;
-webkit-column-gap:30px;
text-align:justify;
}
</pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>CSS3 Column rules</h5><pre class="prettyprint lang-css">#column-rules-bordered {
-moz-column-width:200px;
-webkit-column-width:200px;
-moz-column-gap:30px;
-webkit-column-gap:30px;
-moz-column-rule:2px solid #9c9c9c;
-webkit-column-rule:2px solid #9c9c9c;
text-align:justify;
}
</pre><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
Sumber : <a href="http://www.red-team-design.com/multi-column-text-using-css3"><strong>multi column text using css3</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com6tag:blogger.com,1999:blog-5385811348401427020.post-85096613186862921552012-08-01T22:11:00.000+07:002012-08-02T00:51:45.695+07:00Menampilkan Gambar Recipe Snippet di Google<strong>Integrasi Vocabulary Recipe Pada Blogger</strong> atau <strong>Menampilkan Gambar Artikel Pada Hasil pencarian Google</strong> . kita akan mencoba beriteraksi tentang richsnippet google dengan memasang sebuah gambar agar tampil pada pencarian google. biasanya tampilan gambar yang muncul adalah gambar profil namun kali ini kita akan menampilakan gambar artikel. dengan menggunakan vocabulary recipe yang biasa di pakai untuk resep masakan dan sebagainya. kita bisa pasang itu untuk semua artikel yang memiliki gambar.<br />
<div class="gambar2"><a class="lightbox" rel="lightbox" href="http://2.bp.blogspot.com/-DgijY6Xj1KQ/UBF6HHC7w3I/AAAAAAAAByk/OJ-QTrlOU3Y/s1600/cara-menampilkan-gambar-art.jpg"><img alt="cara menampilkan gambar di hasil pencarian google" border="0" src="http://2.bp.blogspot.com/-DgijY6Xj1KQ/UBF6HHC7w3I/AAAAAAAAByk/OJ-QTrlOU3Y/s1600/cara-menampilkan-gambar-art.jpg" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Cara ini hampir sama dengan memsang rating bintang di blogger dan tampil di hasil pencarian google. hanya beda pada vocabullary type. yang kita gunakan adalah <br />
<pre class="prettyprint"><div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
----------------------
</div></div></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>dan jika semua pemasangan maka hasil test pada <b>Rich snippets</b> - <b>Recipes</b> . akan seperti gambar di bawah :<br />
<div class="gambar2"><a class="lightbox" rel="lightbox" href="http://1.bp.blogspot.com/-3Ho1tWEZzoQ/UBF6I5pz3DI/AAAAAAAABys/dVGgf36cy0M/s1600/sample-vocabulary-richsnippet.png"><img alt="Integrasi Vocabulary Recipe Pada Blogger" border="0" src="http://1.bp.blogspot.com/-3Ho1tWEZzoQ/UBF6I5pz3DI/AAAAAAAABys/dVGgf36cy0M/s1600/sample-vocabulary-richsnippet.png" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Intergrasi Cara Memasang Vocabulary Pada Blogger</h5>1. <b>edit template</b><br />
2. cari code <code><body></code> dan masukan code ini simpan tepat di bawahnya.<br />
<pre class="prettyprint"><div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'></pre>3. cari code <code></body></code>. dan simpan code penutupnya ini simpan tepat di atasnya :<br />
<pre class="prettyprint"></div></div></pre>4. ingat sebelum edit template expand dulu template anda atau checklist checkbox yang sebelah kiri. kemudian cari kode yang mirip seperti ini .<br />
<pre class="prettyprint"><h3 class='post-title entry-title'></pre><div class="note">NB : Tiap template akan berbeda maka cari saja kode tepat seperti code <code>class='post-title</code>.</div>setelah ketemu maka letakan code ini tepat di atasnya<br />
<pre class="prettyprint"><span itemprop='itemreviewed'><span itemprop='description'></pre>5. cari code penutup post title seperti ini <code></h3></code> atau <code></h2></code> . dan letakan code ini tepat di bawahnya.<br />
<pre class="prettyprint"></span></span></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>Hasil keseluruhan jika benar maka hasilnya akan seperti ini.<br />
<pre class="prettyprint"><span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
</pre>6. Simpan template anda.<br />
<div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>7. Sekarang lakukan dalam postingan terbaru anda yang artikel tersebut terdapat sebuah gambar. dan harus menyisipkan <b>microdata</b> berikut contohnya.<br />
pada link gambar sisipkan tag code <code>itemprop="photo"</code> .<br />
dan hasilnya akan seperti ini .<br />
<pre class="prettyprint"><img itemprop="photo" src="http://url-link-gambar/gambar/jpg" /></pre>8.Dan sisipkan juga item ini di bawah postingan anda.<br />
<pre class="prettyprint"><span itemprop="review" itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
Rating Artikel : <span itemprop="rating">5</span>
Jumlah Voting : <span itemprop="count">88</span> Orang
</span></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div>9. Pulbikasikan artikel anda dan check hasilnya di <a href="http://www.google.com/webmasters/tools/richsnippets"><strong>google rich snippets</strong></a> dengan memasukan link artikel terbaru yang baru saja anda buat.<br />
jika berhasil seharusnya gambar artikel terbaru anda akan muncul di sebelah kanan seperti pada gambar kedua di atas.<br />
<hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii <br />
Pranala luar : <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=173379&topic=1088474&ctx=topic"><strong>Rich snippets - Recipes</strong></a><br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com8tag:blogger.com,1999:blog-5385811348401427020.post-17341587896203618772012-07-31T20:13:00.000+07:002012-08-02T00:47:32.634+07:00Auto Block Pada Textarea<div class="gambar2"><a class="lightbox" href="http://3.bp.blogspot.com/-4uRxOIm0WiI/T7VCM1qY-2I/AAAAAAAABHs/plYWtP2sLuk/s1600/text-area.png" imageanchor="1"><img alt="cara membuat text area pada postingan blogspot" src="http://3.bp.blogspot.com/-4uRxOIm0WiI/T7VCM1qY-2I/AAAAAAAABHs/plYWtP2sLuk/s1600/text-area.png" /></a></div><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><a href="/2012/05/auto-block-pada-textarea.html" target="_blank"><strong>Under88</strong></a> - Hai sobat kali ini saya akan memberikan tips sederhana cara <b>Auto Block pada Textarea</b> .. manfaat auto block adalah mempercepat <strong>copy</strong> pada area tertentu yang biasanya kita lakukan secara manual dengan menekan klik kiri pada mouse dan menggesernya. namun kali ini akan lebih cepat dengan hanya mengklik satu kali maka <strong>text</strong> atau <b>code</b> pada area tertentu akan ter <a href="/2012/05/auto-block-pada-textarea.html"><strong>block otomatis</strong></a>.<br />
lihat script di bawah, script tersebut adalah bahannya.<br />
<br />
<pre class="prettyprint lang-js"><textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly">
Basic Membaut Auto Text Area
</textarea></pre><div style="border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; clear: both; display: block; margin: 10px auto; width: 100%;"></div><h5>Panduan Srcipt :</h5><pre class="prettyprint lang-js">onclick="this.focus();this.select()"</pre>maksud dalam code <span style="background-color: #cccccc;">onclick</span> - kerja hanya pada saat klik berjalan.<br />
<pre class="prettyprint lang-js">readonly="readonly"</pre>maksud dalam code <span style="background-color: #cccccc;">readonly</span> - text Area tertentu . (<i>"hem.. jelasinnya gimana ya..!! sulit cari kata yang tepat</i>")<br />
<span style="background-color: #cccccc;"><textarea></span><span style="background-color: #cccccc;"> </span>.... <span style="background-color: #cccccc;"> </span><span style="background-color: #cccccc;"></textarea></span> bagian ini text pada area tertentu akan otomatis block.<br />
<b>Contoh</b> : Coba anda klik tulisan pada area kotak . <br />
<div allowfullscreen="allowfullscreen" data-src="http://jsfiddle.net/denzdii/DvaqK/502/embedded/result,html,css/" class="jsfiddle-demo loader"></div><hr class="sexy_line " /><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="license by under 88 blogspot.com" border="0" src="http://3.bp.blogspot.com/-TIfSCcJLczY/T_2o63bPfUI/AAAAAAAABus/zh5N3p0NHRY/s1600/license-artikel-blogger.png" title="dont copy paste article" /></div>Post By : denzdii<br />
<style>
.sexy_line{height:1px;border:none;background:#cccccc;width:100%;background:-webkit-gradient(
linear,0 0,100% 0,from(rgba(50,50,50,0.01)),to(rgba(80,80,80,0.01)),color-stop(.5,#c9c9c9)
);background:-moz-linear-gradient(
left,rgba(0,0,0,0.001) 0%,rgba(201,201,201,1) 50%,rgba(0,0,0,0.001) 100%
);background:-ms-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:-o-linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);background:linear-gradient(left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.75) 50%,hsla(0,0%,0%,0) 100%);box-shadow:-5px 7px 13px 1px #dad2d2;-moz-box-shadow:-5px 7px 13px 1px #dad2d2;-webkit-box-shadow:-5px 7px 13px 1px #dad2d2;}
</style>Anonymoushttp://www.blogger.com/profile/11256212643663337235noreply@blogger.com2