tag:blogger.com,1999:blog-80072681709581193002024-02-03T01:48:05.582+07:00Blog Alvin WarasiAlvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.comBlogger119125tag:blogger.com,1999:blog-8007268170958119300.post-1481209238928966212014-08-10T11:35:00.001+07:002014-08-10T12:04:20.779+07:00Membuat Sliding Social Buttons Widget<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-HKaeuq8tBS8/U-bvDfFNa-I/AAAAAAAABAM/ZFHmNTJ3Axc/s1600/Sliding+Social+Button.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="Sliding Social Buttons Widget" src="http://3.bp.blogspot.com/-HKaeuq8tBS8/U-bvDfFNa-I/AAAAAAAABAM/ZFHmNTJ3Axc/s1600/Sliding+Social+Button.PNG" height="320" title="Sliding Social Buttons Widget" width="281" /></a></div><br />
Sliding Social Buttons Widget | Hai, pada artikel yang akan saya share kali ini adalah sebuah tutorial sosial media dengan efek Slider, widget ini memiliki Efek hover pada setiap social medianya dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial medianya.<br />
<h4>Lihat Demonya :</h4><embed width="600" height="400" src="http://jsfiddle.net/alvinwarasi/dehL3bxe/show" /><br />
<br />
Widget ini memiliki warna yang cerah dan sangat elegan, kalau memang Anda ingin mempraktekannya widget ini tutorialnya seperti ini :<br />
<br />
<pre><code>.abt-box {
display: inline-block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto 15px auto;
padding: 16px;
background-color: rgba(238, 238, 238, 0.1);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.abt-social {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.abt-social a {
text-decoration: none !important;
}
.abt-social ul {
font-family: Arial, San-Serif;
margin: 0;
padding: 0;
list-style: none;
}
.abt-social ul li {
display: inline;
margin: 0;
padding: 0;
text-indent: 0
}
.abt-social ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.twitter {
border-left: 65px solid rgba(64, 153, 255, 1);
color: rgba(64, 153, 255, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover {
background: rgba(64, 153, 255, 1);
border-left: 0px solid rgba(64, 153, 255, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.gplus {
border-left: 65px solid rgba(219, 74, 57, 1);
color: rgba(219, 74, 57, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover {
background: rgba(219, 74, 57, 1);
border-left: 0px solid rgba(219, 74, 57, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.pinterest {
border-left: 65px solid rgba(174, 45, 39, 1);
color: rgba(174, 45, 39, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover {
background: rgba(174, 45, 39, 1);
border-left: 0px solid rgba(174, 45, 39, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.rss {
border-left: 65px solid rgba(255, 102, 0, 1);
color: rgba(255, 102, 0, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover {
background: rgba(255, 102, 0, 1);
border-left: 0px solid rgba(255, 102, 0, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}</code></pre><br />
<pre><code><div class="abt-social">
<ul>
<li><a class="abt-box facebook" href="#"><p>+15K</p>Facebook </a></li>
<li><a class="abt-box twitter" href="#"><p>+15K</p>Twitter</a></li>
<li><a class="abt-box gplus" href="#"><p>+15K&nbsp;</p>Google+</a></li>
<li><a class="abt-box pinterest" href="#"><p>+15&nbsp;</p>Pinterest</a></li>
<li><a class="abt-box rss" href="#"><p>+15K</p>RSS</a></li>
</ul>
</div></code></pre><br />
<div class="anarchyta announce">Note: Ganti tanda <b>#</b> dengan url sosial media anda, ganti juga angka <b>+15K</b> dengan jumlah yang anda inginkan.</div><br />
Demikian artikel ini semoga artikel ini bermanfaat dan mudah untuk di terapkan sama Anda, Silahkan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...<br />
<br />
Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-61748255424058828592014-08-09T20:02:00.000+07:002014-08-09T20:06:28.319+07:00Subculture Responsive Blogger Template Valid HTML5 dan CSS3<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-FjEPrgq6DwU/U-YU8kLHXQI/AAAAAAAAA_8/iFsLmcPQYSM/s1600/subculture+responsive.png" style="margin-left: 1em; margin-right: 1em;"><img alt="subculture" src="http://3.bp.blogspot.com/-FjEPrgq6DwU/U-YU8kLHXQI/AAAAAAAAA_8/iFsLmcPQYSM/s1600/subculture+responsive.png" height="220" title="subculture" width="400" /></a></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://the-warasi.blogspot.com/p/template-demo.html?url=http://the-subculture.blogspot.com/&download=http://sh.st/rjeJ7" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="download" href="http://sh.st/rjeJ7" rel="nofollow" target="_blank">Download</a></li>
</ul>
</div>
<h4>
Featured</h4>
<ul>
<li>Responsive Design <i class="icon-double-angle-right"></i><a href="http://www.responsinator.com/?url=http%3A%2F%2Fthe-subculture.blogspot.com%2F" rel="nofollow" target="_blank"> Check</a></li>
<li>Valid HTML 5 Homepage <i class="icon-double-angle-right"></i><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fthe-subculture.blogspot.com%2F2014%2F03%2Fsubculture-responsive-blogger-template.html" rel="nofollow" target="_blank"> Check</a></li>
<li>Valid HTML 5 Posting</li>
<li>Valid CSS 3</li>
<li>SEO Score 100%</li>
<li>Threadead Cooments</li>
<li>Recent Comments Notif</li>
<li>Fast Loading</li>
<li>Etc...</li>
</ul>
<h3 class="ono-wae">
CUSTOM</h3>
Setelah template Anda upload jangan lupa untuk edit pada bagian Recent Comments dan ganti dengan URL Anda..<br />
<br />
<pre><code>var originalTitle = document.title;
var dian_config = {
home_page: "http://the-warasi.blogspot.com/",
max_result: 18,
t_w: 40,
t_h: 40,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_dian: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function (a) {
.....................</code></pre>
<br />
Untuk membuat Blog tetap Valid HTML 5 dan SEO 100% setelah Anda menambahkan Widget hapus kode ini pada <i class="icon-double-angle-right"></i> Edit HTML.<br />
<br />
<pre><code><b:include name='quickedit'/></code></pre>
<br />
Mungkin cukup itu saja untuk menjaga Blog agar tetap Valid HTML 5 dan SEO 100%.<br />
<br />
Selanjutnya silahkan Anda edit sendiri..<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-51021498974971142742014-08-08T21:42:00.001+07:002014-08-08T21:42:22.073+07:00Buzz To Responsive Blogger Template<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-3CeW6TLjvLI/U-TZuKcbgBI/AAAAAAAAA_s/4KRidGQFiC8/s1600/buzz+Template.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Buzz To Responsive Blogger Template" src="http://3.bp.blogspot.com/-3CeW6TLjvLI/U-TZuKcbgBI/AAAAAAAAA_s/4KRidGQFiC8/s1600/buzz+Template.png" height="175" title="Buzz To Responsive Blogger Template" width="400" /></a></div>
<br />
<b>Buzz To Responsive Blogger Template</b> - Selamat malam sahabat Alvin Warasi.. Semoga khabar kita semua baik-baik aja... Malam ini saya mau share template gratis buat sahabat blogger nih dari teman saya <b>Firmansyah</b>.. Gak mau banyak bicara malam ini kepada sahabat bloggerku, langsung saja simak fiturnya, kalau minat download silahkan sikat langsung..<br />
<h4>
Blogger Template</h4>
<ul>
<li>Designer : Mas Sugeng.</li>
<li>Designer : +Sutarni Toto(Firmansyah Nuralif Rohman)</li>
<li>Demo URL : <a href="http://buzz-to.blogspot.com/" rel="nofollow" target="_blank">http://buzz-to.blogspot.com</a></li>
<li>Download URL : <a href="http://www.mediafire.com/?4o52ihecvb99x2y" rel="nofollow" target="_blank">http://www.mediafire.com/?4o52ihecvb99x2y</a></li>
</ul>
<h4>
Featured Template</h4>
<ul>
<li>Meta Tag, Title Tag SEO FRIENDLY</li>
<li>Tag PRE (Post And Comment)</li>
<li>Blockquote</li>
<li>Responsive</li>
<li>Banner Ads Responsive</li>
<li>Jquery Callback "Recent Post"</li>
<li>Post Button</li>
<li>Comment Hack V.3 (CSS, SCRIPT by +Kang Ismet)</li>
<li>Author Rich Snnipet OKE</li>
<li>DLL</li>
</ul>
<div class="note">
Dimohon tidak menghapus credit LINK, Panduan Penggunaan Sudah ada dalam file rarnya, Pass : punyafirman <br />
<br />
Blogger yg profesional itu menghargai karya orang dengan tidak menghapus kredits di dalamnya..</div>
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-203633714689483102014-08-06T21:08:00.000+07:002014-08-06T21:17:20.338+07:00Menampilkan Pesan Pada Jam Tertentu<a href="http://1.bp.blogspot.com/-W_XHkqQvMPU/U7rWLkUXA1I/AAAAAAAABU8/8KkxSfNqPtw/s1600/time.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Menampilkan Pesan Pada Jam Tertentu" src="http://1.bp.blogspot.com/-W_XHkqQvMPU/U7rWLkUXA1I/AAAAAAAABU8/8KkxSfNqPtw/s120-c/time.png" title="Menampilkan Pesan Pada Jam Tertentu" /></a>Pernah terpikirkan untuk menampilkan pesan pada jam tertentu (Time Message) pada blog kita? tentu saja ya, Ada kalanya ketika sedang tidak online kita ingin memberikan pesan kepada pengunjung mengenai keadaan / mengingatkan waktu saat ini misalkan, "<i>Selama Pagi, Selamat beraktifitas!</i>" atau "<i>Jangan Lupa ya sekarang pukul 12.00 jadi acara kumpul Blogger akan dimulai"</i> atau sebagai alarm plus pesan pengingat berguna. DEMO-nya seperti dibawah ini :<br />
<br />
<br />
<div class="success ono-wae"><script type="text/javascript">
//<![CDATA[
var now = new Date();
var hours = now.getHours();
// Jam 4 Sore - 6 Sore
if (hours >= 16 && hours <= 18){
document.write("<marquee>Selamat menantikan berbuka Puasa</marquee>");
// Jam 7 Malam - 9 Malam
} else if (hours >= 19 && hours <= 21){
document.write("<marquee>Selamat Malam Sahabat Blog Alvin Warasi</marquee>");
// Jam 10 Malam - 2 Dini Hari
} else if (hours >= 22 || hours <= 2){
document.write("<marquee>Kok belum tidur? udah malam bro..</marquee>");
// Jam 2 Dini Hari - 4 Dini Hari
} else if (hours >= 2 && hours <= 4){
document.write("<marquee>Ayo sahabat kita Senam Pagi</marquee>");
// Jam 5 Pagi - 8 Pagi
} else if (hours >= 5 && hours <= 8){
document.write("<marquee>Selamat pagi Sahabat Blog Alvin Warasi</marquee>");
// Jam 9 Pagi - 3 Sore
} else if (hours >= 9 && hours <= 15){
document.write("<marquee>Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT.</marquee>");
}
//]]>
</script><br />
</div>Menampilkan pesan pada jam tertentu atau <b>Time Message</b> tentu saja sangat membantu, disisi lain pengunjung juga akan mengetahui informasi apa yang ingin kita sampaikan pada jam berikutnya tanpa harus online sekedar menulis pesan. Selain menambah nilai plus berupa pesan singkat, blog kita juga tentu saja terlihat berbeda. Ok ikuti terus tutorial ini untuk cara pemasangan kodenya:<br />
<br />
Nah, jika Anda tertarik untuk menerapkannya di blog Anda. Silahkan ikuti langkah berikut ini.<br />
<br />
<ul><li>Pada dashboard Klik Tatak Letak <i class="icon-double-angle-right"></i> Add a Gadget <i class="icon-double-angle-right"></i> HTML/JavaScript.</li>
<li>Kemudian Copy paste kode berikut ini dan untuk judul dikosongkan saja:</li>
</ul><pre class="line-number" data-codetype="JavaScript"><code><script type='text/javascript'>
var now = new Date();
var hours = now.getHours();
// Jam 4 Sore - 6 Sore
if (hours >= 16 && hours <= 18){
document.write("<u>Selamat menantikan berbuka Puasa</u>");
// Jam 7 Malam - 9 Malam
} else if (hours >= 19 && hours <= 21){
document.write("<u>Selamat menjalankan Sholat Tarawih</u>");
// Jam 10 Malam - 2 Dini Hari
} else if (hours >= 22 || hours <= 2){
document.write("<u>Kok belum tidur? udah malam bro..</u>");
// Jam 2 Dini Hari - 4 Dini Hari
} else if (hours >= 2 && hours <= 4){
document.write("<u>Sahur! Sahur! Sahur!</u>");
// Jam 5 Pagi - 8 Pagi
} else if (hours >= 5 && hours <= 8){
document.write("<u>Selamat pagi, semoga puasanya Lancar..</u>");
// Jam 9 Pagi - 3 Sore
} else if (hours >= 9 && hours <= 15){
document.write("<u>Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT.</u>");
}
</script></code></pre><br />
Tinggal ditambah dan dimodifikasi ya untuk jam yang lain, kalau masih ada yang kurang Anda paham bisa tanya lagi untuk yang saya garis bahawi adalah pesannya.. Untuk mencobanya tanpa menunggu waktu tertentu bisa dengan merubah jam yang ada di Laptop atau PC Anda..<br />
<br />
Selamat mencoba.. Semoga berhasil...<br />
<br />
<br />
Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-48987950184734323022014-08-04T21:37:00.001+07:002014-08-04T21:37:31.672+07:00Leta vCard TemplateHallo sobat <a href="http://the-warasi.blogspot.com/" rel="nofollow" target="_blank">BAW</a>, apa khabar kalian,..? sudah lama saya tidak posting, kali ini saya share <a href="http://the-warasi.blogspot.com/search/label/Template" rel="nofollow" target="_blank">Template vCard</a> yang saya beri nama Leta vCard BAW. Template ini dibuat oleh master Web Johny DOE template ini asal-nya berbentuk situs atau web kemudian saya redesign untuk blogger pada tanggal 2 Augustus 2014. Dalam template ini Anda tidak bisa posting karena template ini hanya untuk tampilan home saja.<br />
Anda bisa menampilkan profil, karir, dan kontak Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-MGrzYfMYfGc/U9-Q7d731KI/AAAAAAAAA_c/TiRIWjlu93Q/s1600/Leta+vCard+BAW.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Leta vCard BAW" src="http://1.bp.blogspot.com/-MGrzYfMYfGc/U9-Q7d731KI/AAAAAAAAA_c/TiRIWjlu93Q/s1600/Leta+vCard+BAW.jpg" height="300" title="Leta vCard BAW" width="400" /></a></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://the-warasi.blogspot.com/p/template-demo.html?url=http://alvinwar.blogspot.com&download=https://sites.google.com/site/vanzdy/download-template/Leta_vCard.rar" rel="nofollow" target="_blank">Demo</a></li>
<li><a class="download" href="https://sites.google.com/site/vanzdy/download-template/Leta_vCard.rar" rel="nofollow" target="_blank">Download</a></li>
</ul>
</div>
<h4>
Features :</h4>
<ul>
<li>Responsive HTML5&CSS3</li>
<li>Unique page layouts</li>
<li>jQuery enhanced</li>
<li>Working PHP contact form with validation and complete animation</li>
<li>2 layout filtered Portfolio</li>
<li>3D CSS Transitions and fallback css for non-supported browsers</li>
<li>Cross Browser support : Template is good optimized for Chrome, Safari, Firefox, Opera 14, Explorer 10, Some css animations do not work well in browsers Opera and IE 9.</li>
<li>Premium resources : Isotope plugin, FancyBox 2.</li>
<li>Included social icon : picasa, dribble, twitter, facebook, google+, pinterest, instagram, vimeo, disqus, wordpress, tumblr, youtube, rss feed, flickr, linkedin, skype, deviant art, vk (international).</li>
<li>All files are commented.</li>
<li>Documentation.</li>
<li>Layered PSD File.</li>
</ul>
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com6tag:blogger.com,1999:blog-8007268170958119300.post-34292382559822015742014-07-29T20:36:00.000+07:002014-07-29T22:18:58.089+07:00Animasi hover sederhana pada gambarDalam artikel ini saya ingin memperkenalkan beberapa <a href="http://the-warasi.blogspot.com/search/label/CSS" rel="nofollow" target="_blank">CSS3</a> gaya yang memungkinkan untuk menampilkan kode menggunakan efek Animasi. Seperti misalnya kita akan mengambil produk, yang dapat Anda tampilkan dalam modul HTML kustom joomla. Seperti produk Anda dapat link ke sebuah artikel, ekstensi, atau dimana pun yang Anda inginkan. Mari kita lihat contoh di bawah ini.<br />
<div class="jm-mainpage clearfix">
<div class="jm-mainpage-box span6">
<h5>
DEMO 1</h5>
<div class="jm-item first">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Pizza Ristorante" src="http://4.bp.blogspot.com/-maYehkdr9Pg/U9AnMOOguJI/AAAAAAAACWE/Hu6grazRIoA/s1600/cofee.jpg" /><span class="jm-item-overlay"></span><br />
<div class="jm-item-button">
<a href="https://www.blogger.com/profile/00860274590645884813">View</a></div>
</div>
<div class="jm-item-title">
Cofee Capucino</div>
</div>
</div>
</div>
<div class="jm-mainpage-box span6">
<h5>
DEMO 2</h5>
<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cofee Capucino" src="http://3.bp.blogspot.com/-nHyrfRKPb-8/U9AnMRqM8dI/AAAAAAAACWI/BbEh3OVy54s/s1600/cofee2.jpg" /><br />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.<br />
1. Lorem<br />
2. Ipsum<br />
3. Dolor<br />
<div class="jm-item-button">
<a href="https://www.blogger.com/profile/00860274590645884813">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cofee Capucino</div>
</div>
</div>
</div>
</div>
<h4>
Simak langkah<sup>2 </sup>dibawah ini:</h4>
1. Login ke akun <b style="color: orange;">blogger</b> Anda.<br />
2. Klik <b>Template</b> <i class="icon-double-angle-right"></i> <b>Edit HTML</b>.<br />
3. Kemudian tekan <b>CTRL+F</b> cari kode <code>]]></b:skin></code> atau <code></style></code><br />
4. Lalu tambahkan script <code>css</code> berikut ini tepat diatas kode <code>]]></b:skin></code> atau <code></style></code><br />
<br />
<pre>jm-item {
padding: 10px;
display: inline-block;
text-align: left;
}
.jm-item-wrapper {
position: relative;
padding: 7px;
background: #E8D7B6;
}
.jm-item-image {
position: relative;
overflow: hidden;
}
.jm-item-image img {
display: block;
}
.jm-item-title {
position: absolute;
left: -10px;
bottom: 17px;
background: #FF6B0E;
color: #FFFFFF;
font-size: 1.4em;
line-height: 1.5em;
font-weight: normal;
padding: 7px 9px 6px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.jm-item-overlay {
background: #000;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.5s ease-in 0s;
-moz-transition: opacity 0.5s ease-in 0s;
-o-transition: opacity 0.5s ease-in 0s;
transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
opacity: 0.3;
}
.jm-item-button {
height: 50px;
width: 50px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -25px;
}
.jm-item-button a {
border-radius: 50%;
-webkit-border-radius: 50%;
background: #FF6B0E;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
line-height: 50px;
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
text-decoration: none !important;
display: block;
}
.jm-item-button a:hover {
background: #3b3b3b;
}
/** first **/
.first .jm-item-button {
-webkit-transition: all 0.5s ease-in 0.5s;
-moz-transition: all 0.5s ease-in 0.5s;
-o-transition: all 0.5s ease-in 0.5s;
transition: all 0.5s ease-in 0.5s;
top: -50px;
}
.first .jm-item-wrapper:hover .jm-item-button {
top: 20%;
}
/** second **/
.second {
overflow: hidden;
}
.second .jm-item-wrapper .jm-item-title {
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
left: -100%;
}
.second .jm-item-description {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(0,0,0,0.4);
color: #fff;
top: 100%;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
top: 0;
}</pre>
<br />
5. Kemudian simpan Template Anda.<br />
<h4>
Penerapannya:</h4>
Supaya kode diatas muncul diposting blog Anda <i class="icon-double-angle-right"></i> Silahkan buat Entri baru <b>gunakan mode HTML</b> kemudian masukkan kode berikut ini kedalam halaman posting blog Anda.<br />
<br />
<pre><div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img src="http://4.bp.blogspot.com/-maYehkdr9Pg/U9AnMOOguJI/AAAAAAAACWE/Hu6grazRIoA/s1600/cofee.jpg" alt="Cofee Capucino" />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.
1. Lorem
2. Ipsum
3. Dolor
<div class="jm-item-button"><a href="#">View</a></div>
</div>
</div>
<div class="jm-item-title">Cofee Capucino</div>
</div>
</div></pre>
<br />
Kemudian klik <b>Publish</b> dan lihat hasil-nya.<br />
Sekian tutorial Animasi hover sederhana pada gambar semoga bermanfaat,..<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-23947213027105315852014-07-29T18:34:00.000+07:002014-07-29T18:34:01.197+07:00Membuat Animasi GIF dengan PhotoshopAnda sudah tahu khan apa itu Animasi GIF ? <b>GIF</b> adalah animasi sederhana yang sering kali Anda temui di sebuah website/blog mau pun di smartphone. Untuk membuat animasi GIF tidaklah susah. Ada banyak sofware yang bisa Anda gunakan seperti Free Video to GIF Converter, Falco Gif Animator dan Movie to Animated GIF Converter, namun kali saya akan share cara untuk membuat animasi GIF dengan photoshop. pada praktek ini saya menggunakan photoshop CS2.<br />
<br />
<b>Langsung saja, berikut ini langkah-langkahnya :</b><br />
<br />
1. Buka program photoshop, klik <b>File</b> <i class="icon-double-angle-right"></i> <b>New</b> atau tekan Ctrl+N saja biar lebih cepat.<br />
2. Pada file name beri nama Animasi. Untuk pengaturan Size <b>Width</b> : 400 pixel, <b>Height</b> : 200 pixel. dan <b>Resolution</b> : 72 pixel/inch.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-dVPiqCtA1cc/U9dwhK0cUqI/AAAAAAAAA9U/VfTh9nUcsA4/s1600/file+new.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi GIF dengan Photoshop" src="http://2.bp.blogspot.com/-dVPiqCtA1cc/U9dwhK0cUqI/AAAAAAAAA9U/VfTh9nUcsA4/s1600/file+new.png" height="228" title="screnshot file new" width="400" /></a></div>
<br />
3. Klik <b>Ok</b>. Maka hasilnya seperti gambar dibawah, sebuah file baru dengan nama <b>Animasi</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-yzcxdJ_m4DM/U9dxm_brhyI/AAAAAAAAA9c/wuE08Iah5UQ/s1600/file+baru.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi GIF dengan Photoshop" src="http://3.bp.blogspot.com/-yzcxdJ_m4DM/U9dxm_brhyI/AAAAAAAAA9c/wuE08Iah5UQ/s1600/file+baru.png" height="233" title="screenshot file baru" width="400" /></a></div>
<br />
4. Buat layer baru. Klik menu <b>Layer</b> <i class="icon-double-angle-right"></i> <b>New</b> <i class="icon-double-angle-right"></i> <b>Layer</b> biar lebih cepat tekan saja tombol <b>Shift+Ctrl+N</b>.<br />
5. Beri nama <b>Kotak</b> atau bisa juga dengan nama lain sesuai kemauan Anda.<br />
6. Di layer program photoshop Anda maka terlihat ada layer baru dengan nama <b>Kotak</b>.<br />
7. Klik <b>Rectangle Tool</b>. bisa juga Anda menekan tombol <b>U</b> pada keyboard agar lebih cepat.<br />
8. Pilih <b>Fill Fixels</b> dan <b>Rectangle Tool</b> lihat gambar dibawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-HHaEcOXDIDw/U9d1Pe4LKXI/AAAAAAAAA9o/nopGjaPpmaM/s1600/fill+fixels.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat animasi Gif dengan photoshop" src="http://2.bp.blogspot.com/-HHaEcOXDIDw/U9d1Pe4LKXI/AAAAAAAAA9o/nopGjaPpmaM/s1600/fill+fixels.png" title="screenshot fill pixels" /></a></div>
<br />
9. Buatlah kotak di dalam file Animasi tadi.<br />
10. Klik <b>Styles</b> dan pilih <b>Chiseled Sky</b>, atau bisa dengan styles yang lain.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-9a5Eq4Rjw0A/U9d4dF72PrI/AAAAAAAAA90/aioggGbjBRE/s1600/styles+Shiseled+Sky.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat animasi Gif dengan photoshop" src="http://2.bp.blogspot.com/-9a5Eq4Rjw0A/U9d4dF72PrI/AAAAAAAAA90/aioggGbjBRE/s1600/styles+Shiseled+Sky.png" title="screenshot styles chiseled sky" /></a></div>
<br />
11. Hasilnya akan seperti gambar dibawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-G4jq6yMTB0Q/U9d5Tnx73cI/AAAAAAAAA98/wtrBZzMoLAs/s1600/styles+chiseled+sky.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat animasi Gif dengan photoshop" src="http://2.bp.blogspot.com/-G4jq6yMTB0Q/U9d5Tnx73cI/AAAAAAAAA98/wtrBZzMoLAs/s1600/styles+chiseled+sky.png" height="201" title="screenshot hasil styles chiseled sky" width="400" /></a></div>
<br />
12. Anda bisa menambahkan tulisan. Klik <b>Horizontal Type Tool</b> atau tekan tombol <b>T</b>.<br />
13. Secara otomatis akan membuat layer <b>Blog Alvin Warasi</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-eq4_w2deojU/U9d7Y7LA-4I/AAAAAAAAA-I/NQUjA2v09Ho/s1600/layer+blog+alvin+warasi.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat animasi Gif dengan photoshop" src="http://3.bp.blogspot.com/-eq4_w2deojU/U9d7Y7LA-4I/AAAAAAAAA-I/NQUjA2v09Ho/s1600/layer+blog+alvin+warasi.png" title="screenshot layer teks" /></a></div>
<br />
14. Klik <b>Styles</b> dan pilih <b>Double Ring Glow</b>. Hasilnya seperti gambar dibawah ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-YCavW_CHEC0/U9d9TeEGGyI/AAAAAAAAA-U/s-DsYzG71lc/s1600/Double+Ring+Glow.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat animasi Gif dengan photoshop" src="http://1.bp.blogspot.com/-YCavW_CHEC0/U9d9TeEGGyI/AAAAAAAAA-U/s-DsYzG71lc/s1600/Double+Ring+Glow.png" height="161" title="screenshot hasil styles Double Ring Glow" width="320" /></a></div>
<br />
15. Selanjutnya, klik menu <b>Window</b> <i class="icon-double-angle-right"></i> <b>Animation</b>.<br />
16. Di <b>Animation</b> (Frames), akan terlihat layer yang sudah Anda buat tadi. Klik <b>Select Frame Delay Time</b>, disini saya memilih <b>Delay</b> 0,5.<br />
17. Duplicate frame, klik <b>Duplicates Selected Frames</b> dan aktifkan <b>Frame 2</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-CjrA_2Jx8ag/U9d_2CrKkzI/AAAAAAAAA-g/PJnQpoPju48/s1600/Duplicates+selected+frames.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Gif dengan photoshop" src="http://3.bp.blogspot.com/-CjrA_2Jx8ag/U9d_2CrKkzI/AAAAAAAAA-g/PJnQpoPju48/s1600/Duplicates+selected+frames.png" title="screenshot duplicates selected frames" /></a></div>
<br />
18. Selanjutnya aktifkan <b>Layer Kotak</b>, klik kanan dan pilih <b>Bleding Options</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-SC2WYRED-as/U9eA-5H6AfI/AAAAAAAAA-o/ZudaBNqekJc/s1600/blending+options.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Gif dengan photoshop" src="http://2.bp.blogspot.com/-SC2WYRED-as/U9eA-5H6AfI/AAAAAAAAA-o/ZudaBNqekJc/s1600/blending+options.png" height="320" title="screenshot bleding options" width="233" /></a></div>
<br />
19. Centang <b>Drop Shadow</b>, <b>Inner Glow</b>, <b>Bevel and Emboss</b>, <b>Satin</b>, dan <b>Gradiend Overlay</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Qh1DP4HJTlA/U9eCHYbO0TI/AAAAAAAAA-w/_9tiQytbk1c/s1600/Layer+Style.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Gif dengan photoshop" src="http://1.bp.blogspot.com/-Qh1DP4HJTlA/U9eCHYbO0TI/AAAAAAAAA-w/_9tiQytbk1c/s1600/Layer+Style.png" height="293" title="screenshot layer style" width="400" /></a></div>
<br />
20. Lakukan hal yang sama pada layer teks <b>Blog Alvin Warasi</b> dengan mengklik kanan pilih <b>Bleding Options</b>, centanglah <b>Outer Glow</b> dan <b>Pattern Overlay</b>.<br />
<br />
21. Untuk mengetahui hasilnya, apakah berjalan dengan baik. Klik <b>Plays Animation</b>.<br />
22. Jika sudah sesuai dengan keinginan Anda ! Simpan hasilnya dan klik <b>File</b> dan plih <b>Save For Web</b>, yang perlu Anda ingat sebelum menyimpankannya pastikan telah berformat <b>GIF</b>. klik <b>Save</b>.<br />
<br />
23. Maka selesai sudah membuat Animasi Gif dengan Photoshop, hasilnya kira-kira seperti dibawah ini , keren khan ?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZqKJGFsZbQA/U9eGb3Cp23I/AAAAAAAAA-8/1UFt0GNAGUU/s1600/Animasi.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Animasi Gif dengan photoshop" src="http://2.bp.blogspot.com/-ZqKJGFsZbQA/U9eGb3Cp23I/AAAAAAAAA-8/1UFt0GNAGUU/s1600/Animasi.gif" height="160" title="Animasi" width="320" /></a></div>
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-277396600559795732014-07-29T13:31:00.001+07:002014-07-29T13:31:14.221+07:00Membuat Teks 3D dengan PhotoshopPada tutorial sebelumnya saya pernah membahas tentang cara <a href="http://the-warasi.blogspot.com/2014/07/membuat-dp-bbm-blackberry-animasi.html" rel="nofollow" target="_blank">Membuat DP BBM Blackberry Animasi Bergerak di Photoshop</a>, pada kesempatan kali ini saya akan coba mengupas sedikit bagaimana cara membuat tulisan 3d dengan Adobe Photoshop. Dalam membuat tulisan 3D dengan photoshop mungkin sedikit lebih sulit jika dibandingkan dengan software yang lain, namun jika kita melakukan dengan sungguh-sungguh dan santai itu akan menjadi hal yang sangat menyenangkan dan mendapatkan hasil yang awesome :), itu sih kata orang-orang bule sono...<br />
<br />
Biar tidak tambah penasaran sebaiknya langsung saja kita mulai tutorialnya :<br />
<br />
1. Buka program photoshop, disini saya menggunakan Photoshop CS5, buat file dengan ukuran 7x5 inch dan resolusi 300 pixel/inch.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-uvAqCBs7l2o/U9cc47XEpQI/AAAAAAAAA6Y/G-1Nxnk5lg4/s1600/file.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://4.bp.blogspot.com/-uvAqCBs7l2o/U9cc47XEpQI/AAAAAAAAA6Y/G-1Nxnk5lg4/s1600/file.jpg" height="295" title="screenshot file" width="400" /></a></div>
<br />
2. Plih Gradient Tool (G) dan ikuti intruksi seperti yang ditunjukkan pada gambar dibawah<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-adOOM-o8Wa8/U9cdt6DfzlI/AAAAAAAAA6g/7hwnhFYibI0/s1600/Gradient+Tool.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://2.bp.blogspot.com/-adOOM-o8Wa8/U9cdt6DfzlI/AAAAAAAAA6g/7hwnhFYibI0/s1600/Gradient+Tool.jpg" height="116" title="Screenshot gradient tool" width="400" /></a></div>
<br />
3. Atur warna gradiasinya seperti gambar dibawah, untuk mendapatkan warna yang tepat gunakan kode warna. Jika sudah klik Ok.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Y-5CUAUZTfk/U9ceuoF6cdI/AAAAAAAAA6s/3RC0C8Qfm5g/s1600/Gradient+Editor.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://1.bp.blogspot.com/-Y-5CUAUZTfk/U9ceuoF6cdI/AAAAAAAAA6s/3RC0C8Qfm5g/s1600/Gradient+Editor.jpg" height="400" title="screenshot gradient editor" width="347" /></a></div>
<br />
4. Tarik garis secara vertikal dari atas kebawah, masih menggunakan Gradient Tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-cBWD2wQxKNE/U9cfgq0TrII/AAAAAAAAA60/3XK5D-IOnDE/s1600/Gradient+tool+1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://3.bp.blogspot.com/-cBWD2wQxKNE/U9cfgq0TrII/AAAAAAAAA60/3XK5D-IOnDE/s1600/Gradient+tool+1.jpg" height="302" title="sreenhot gradient tool" width="400" /></a></div>
<br />
5. Ketik teks dengan jenis font <b>Calibri Bold</b>, dengan ukuran font 240pt<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-yMwa3ucXmYU/U9cgVeqzbYI/AAAAAAAAA7A/mz_m8MKHQtI/s1600/Calibri+Bold.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://4.bp.blogspot.com/-yMwa3ucXmYU/U9cgVeqzbYI/AAAAAAAAA7A/mz_m8MKHQtI/s1600/Calibri+Bold.jpg" height="301" title="Screenshot calibri bold" width="400" /></a></div>
<br />
6. Klik ikon fx kemudian pilih <b>Stroke</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-z56s33kZ4_Q/U9cg3Mp4ogI/AAAAAAAAA7I/vsx8H_rHIjg/s1600/ikon+fx.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://1.bp.blogspot.com/-z56s33kZ4_Q/U9cg3Mp4ogI/AAAAAAAAA7I/vsx8H_rHIjg/s1600/ikon+fx.jpg" height="400" title="screenshot ikon fx" width="285" /></a></div>
<br />
7. Atur ukurannya menjadi 36px dan berikan warna oranye (kode warna ff5c29)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-wrQEOkf7x0s/U9chm4JUbDI/AAAAAAAAA7Q/1JGDyfeMXw0/s1600/Layer+Style.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://4.bp.blogspot.com/-wrQEOkf7x0s/U9chm4JUbDI/AAAAAAAAA7Q/1JGDyfeMXw0/s1600/Layer+Style.jpg" height="310" title="screenshot layer style" width="400" /></a></div>
<br />
8. Klik kanan pada layer teks yang kita buat tadi, pilih <b>Convert To Smart Object</b> kemudian klik kanan sekali lagi plih <b>Rasterize Layer</b>, ini bertujuan supaya teksnya bisa dimodifikasi.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-VYWeoilaLXg/U9cixvg7-kI/AAAAAAAAA7Y/DaPQ8U7Mo8g/s1600/Convert+to+smart+object.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://2.bp.blogspot.com/-VYWeoilaLXg/U9cixvg7-kI/AAAAAAAAA7Y/DaPQ8U7Mo8g/s1600/Convert+to+smart+object.jpg" height="367" title="screenshot convert to smart object" width="400" /></a></div>
<br />
9. Tekan Ctrl+T lalu miringkan teks seperti yang terlihat pada gambar dibawah. Jika sudah tekan Enter.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-HnaZNzG1Cd0/U9cjeinqgGI/AAAAAAAAA7g/sh826Cc9zH0/s1600/Ctrl+T.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://2.bp.blogspot.com/-HnaZNzG1Cd0/U9cjeinqgGI/AAAAAAAAA7g/sh826Cc9zH0/s1600/Ctrl+T.jpg" height="293" title="screenshot Ctrl+T" width="400" /></a></div>
<br />
10. Tekan tombol Ctrl+Tombol panah atas untuk memperbanyak layer teks hingga 25 kopian.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-otlDgmFwBmY/U9ckSRzc2SI/AAAAAAAAA7s/IWAms-o6eAI/s1600/tekan+tombol.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://1.bp.blogspot.com/-otlDgmFwBmY/U9ckSRzc2SI/AAAAAAAAA7s/IWAms-o6eAI/s1600/tekan+tombol.jpg" height="237" title="screenshot Ctrl+tombol panah atas" width="400" /></a></div>
<br />
11. Blok semua layer teks tadi dengan cara mengklik layer copy 24 lalu tekan shift kemudian klik pada layer AD (tergantung teks yang diketik), sisakan satu layer paling atas (layer copy 25) kemudian klik kanan pilih Merge Layers. Setelah di Merge Layer teks hanya tinggal 2 layer yaitu layer copy 24 dan layer copy 25.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-2mZdBl1xSUk/U9clzUG0_iI/AAAAAAAAA74/1M-CQY6pss8/s1600/layer+teks.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://1.bp.blogspot.com/-2mZdBl1xSUk/U9clzUG0_iI/AAAAAAAAA74/1M-CQY6pss8/s1600/layer+teks.jpg" height="400" title="screenshot layer teks" width="306" /></a></div>
12. Pilih <b>Burn Tool (O)</b>.<br />
13. Atur gelap terang pada teks, sapukan dengan menggunakan <b>Burn Tool</b> Tadi. Untuk cahaya terang lakukan sambil menekan tombol <b>Alt</b>. Anda dapat melihat bagian mana yang terang dan yang gelap dengan menentukan sumber cahaya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-1vcAGhucFlE/U9cnPga_WwI/AAAAAAAAA8E/1RBqtnP50jM/s1600/gelap+terang+pada+teks.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://3.bp.blogspot.com/-1vcAGhucFlE/U9cnPga_WwI/AAAAAAAAA8E/1RBqtnP50jM/s1600/gelap+terang+pada+teks.jpg" height="285" title="screnshot gelap terang pada teks" width="400" /></a></div>
<br />
14. Lakukan pencahayaan pada kedua layer teks, dan hasilnya kira-kira seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-pi-meSBFEQc/U9cv_jtQDNI/AAAAAAAAA8U/JrlHygPX5Sk/s1600/pencahayaan+teks.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://4.bp.blogspot.com/-pi-meSBFEQc/U9cv_jtQDNI/AAAAAAAAA8U/JrlHygPX5Sk/s1600/pencahayaan+teks.jpg" height="283" title="screenshot pencahayaan pada teks" width="400" /></a></div>
<br />
15. Blok kedua layer teks (layer copy 24 dan layer copy 25) kemudian klik kanan pilih merge layers untuk menggabungkan kedua layer tersebut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JGxVefzkoA0/U9cyinAEFGI/AAAAAAAAA8g/gMcxDL7ogJY/s1600/penggabungan+kedua+layer.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://3.bp.blogspot.com/-JGxVefzkoA0/U9cyinAEFGI/AAAAAAAAA8g/gMcxDL7ogJY/s1600/penggabungan+kedua+layer.jpg" height="400" title="screenshot penggabungan kedua layer" width="326" /></a></div>
<br />
16. Duplicate layer teks yang sudah digabung tadi dengan cara menekan Ctrl+J, lalu turunkan sedikit layer AD copy 25.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-L_Ru6UrNRow/U9czTzh7eKI/AAAAAAAAA8o/Yvl79qca9O0/s1600/duplicate+layer.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://3.bp.blogspot.com/-L_Ru6UrNRow/U9czTzh7eKI/AAAAAAAAA8o/Yvl79qca9O0/s1600/duplicate+layer.jpg" height="320" title="screenshot duplicate layer" width="400" /></a></div>
<br />
17. Turunkan Opacity menjadi 26%<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-omm6VvQTZI8/U9c0CIyj-XI/AAAAAAAAA80/pPl9BtfuxXE/s1600/Opacity.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://1.bp.blogspot.com/-omm6VvQTZI8/U9c0CIyj-XI/AAAAAAAAA80/pPl9BtfuxXE/s1600/Opacity.jpg" height="400" title="Opacity" width="286" /></a></div>
<br />
Gambarnya sudah jadi, tambahkan watermark sebagai hak cipta Anda :)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-lVts5HDwz3w/U9c_Q2jUKDI/AAAAAAAAA9E/E4MHCQJfYLw/s1600/teks-3d.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Teks 3D dengan Photoshop" src="http://2.bp.blogspot.com/-lVts5HDwz3w/U9c_Q2jUKDI/AAAAAAAAA9E/E4MHCQJfYLw/s1600/teks-3d.jpg" height="285" title="teks-3d" width="400" /></a></div>
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-62892435399315850322014-07-28T14:32:00.001+07:002014-07-28T14:32:30.014+07:00Membuat DP BBM Blackberry Animasi Bergerak Gambar GIFSelamat Siang... kali ini saya akan share cara membuat gambar animasi bergerak dalam format gif dengan mudah, menggunakan aplikasi photoshop CS2.<br />
<br />
Oke langsung saja ya..!! <b>Ikuti langkah-langkah berikut ini :</b><br />
<br />
1. Buka aplikasi photoshop CS2<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-k9gabiD9g6o/U9W-c5wc9hI/AAAAAAAAA4c/XvGcJu2avS8/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY GIF_1" src="http://2.bp.blogspot.com/-k9gabiD9g6o/U9W-c5wc9hI/AAAAAAAAA4c/XvGcJu2avS8/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_1.png" height="320" title="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY GIF_1" width="281" /></a></div>
<br />
2. Pilih buka foto yang akan dijadikan animasi<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-R2mZ1vTt9oU/U9XAgZYnV6I/AAAAAAAAA4o/jlqVdoIOBhQ/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_2.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY GIF_2" src="http://1.bp.blogspot.com/-R2mZ1vTt9oU/U9XAgZYnV6I/AAAAAAAAA4o/jlqVdoIOBhQ/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_2.JPG" height="173" title="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY GIF_2" width="320" /></a></div>
<br />
3. Saya mengambil gambar dari facebook sendiri, saya simpan di unduhan<br />
4. Kemudian open foto yang sudah disimpan<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-tfbJRYjEcO8/U9Xue-5nFUI/AAAAAAAAA44/fD70Kga6Dus/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY" src="http://2.bp.blogspot.com/-tfbJRYjEcO8/U9Xue-5nFUI/AAAAAAAAA44/fD70Kga6Dus/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY.png" height="320" title="Alvin Warasi Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY" width="298" /></a></div>
<br />
5. Sesusikan ukurannya setting Document Size Width : 198, Height : 198 Resolution : 72, untuk ukuran Width dan Height harus sama karena request dp bbm harus berbentuk KOTAK, atau sesuaikan sendiri asal ukuran tidak melebihi 31KB.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SWu08wMzY4w/U9XweyHPuZI/AAAAAAAAA5E/ry6Lswj3eNs/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_5.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY" src="http://1.bp.blogspot.com/-SWu08wMzY4w/U9XweyHPuZI/AAAAAAAAA5E/ry6Lswj3eNs/s1600/Alvin+Warasi+Cara+Mudah+Membuat+Gambar+Animasi+Bergerak+DP+BBM+BLACKBERRY+GIF_5.png" height="267" title="Cara Mudah Membuat Gambar Animasi Bergerak DP BBM BLACKBERRY" width="320" /></a></div>
<br />
6. Nah disini saya menggunakan hanya 1 gambar saja, nanti Anda bisa berkreasi senidir sesuai keinginan untuk layar ke-2, ke-3, dan seterusnya Duplicate Layer..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-paVydloIHig/U9Xyrnx27GI/AAAAAAAAA5Q/emvDcxwd_rg/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat DP BBM BLACKBERRY Animasi" src="http://4.bp.blogspot.com/-paVydloIHig/U9Xyrnx27GI/AAAAAAAAA5Q/emvDcxwd_rg/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi.JPG" height="320" title="Membuat DP BBM BLACKBERRY Animasi" width="293" /></a></div>
<br />
7. Akan muncul seperti dibawah ini, klik Ok<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-91L7EtrPHqA/U9X02XUhBfI/AAAAAAAAA5c/QNJBjqPRdTQ/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi+bergerak.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat DP BBM BLACKBERRY Animasi" src="http://1.bp.blogspot.com/-91L7EtrPHqA/U9X02XUhBfI/AAAAAAAAA5c/QNJBjqPRdTQ/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi+bergerak.png" height="240" title="Membuat DP BBM BLACKBERRY Animasi" width="320" /></a></div>
<br />
8. Nah layer sudah ada 2 bagian, layer duplicate saya buat lebih terang, atau nanti Anda buat boleh juga..<br />
9. Pilih Window <i class="icon-double-angle-right"></i> Animation.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-CwbhIDOhyuI/U9X2TRY48fI/AAAAAAAAA5k/cafv1ST6Yrc/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi+Bergerak+Gambar+GIF.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat DP BBM BLACKBERRY Animasi Bergerak Gambar GIF" src="http://4.bp.blogspot.com/-CwbhIDOhyuI/U9X2TRY48fI/AAAAAAAAA5k/cafv1ST6Yrc/s1600/Membuat+DP+BBM+BLACKBERRY+Animasi+Bergerak+Gambar+GIF.png" height="265" title="Membuat DP BBM BLACKBERRY Animasi Bergerak Gambar GIF" width="320" /></a></div>
<br />
10. Lalu klik dibagian kiri atas sebelah kanan Animation (Frame), lalu pilih <b>Make Frames From Layer</b><br />
11. Selanjutnya Anda atur waktu kedipnya sesuai keinginan Anda, saya disini pilih 0,5 seconds<br />
12. Kemudian simpan <i class="icon-double-angle-right"></i> <b>file</b> <i class="icon-double-angle-right"></i> <b>Save For Web...</b><br />
13. Kemudian atur seperti gambar dibawah ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2RoBtrAyvWU/U9X5Vxh56NI/AAAAAAAAA5w/4Z9lzCrIliY/s1600/Cara+Membuat+DP+BBM+BLACKBERRY.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat DP BBM BLACKBERRY" src="http://2.bp.blogspot.com/-2RoBtrAyvWU/U9X5Vxh56NI/AAAAAAAAA5w/4Z9lzCrIliY/s1600/Cara+Membuat+DP+BBM+BLACKBERRY.png" title="Cara Membuat DP BBM BLACKBERRY" /></a></div>
<br />
14. Simpan di data Anda, Data (D:), atau desktop dan lain-lain.<br />
15. FINISH DEH.. ini hasilnya...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-mt2zAhYgEUA/U9X6LTXDkLI/AAAAAAAAA54/3k7REAQn6mY/s1600/alvin-warasi.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat DP BBM BLACKBERRY" src="http://4.bp.blogspot.com/-mt2zAhYgEUA/U9X6LTXDkLI/AAAAAAAAA54/3k7REAQn6mY/s1600/alvin-warasi.gif" title="Alvin Warasi" /></a></div>
<br />
<div class="note">
Catatan : ingat jika untuk dipasang di DP Blackberry ukuran jangan lebih dari 31KB, SAVE ulang jika ukuran belum sesuai, sesuaikan image size kembali sampai ukuran dibawah 32KB.</div>
<br />
Anda juga bisa menambahkan Tulisan atau Effect yang lain-lain, di layers sebelum di duplicate layer.<br />
<br />
Selamat mencoba... !!<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-13113745787645436232014-07-22T12:53:00.000+07:002014-07-22T12:53:57.454+07:00Blackberry Messenger for PC<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-5Td-BDqsCSw/U83z8y5HvuI/AAAAAAAAA34/N_jH2p1bWjA/s1600/222.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Blackberry Messenger for PC" src="http://3.bp.blogspot.com/-5Td-BDqsCSw/U83z8y5HvuI/AAAAAAAAA34/N_jH2p1bWjA/s1600/222.jpg" title="Blackberry Messenger for PC" /></a></div>
<br />
Selamat siang... Ada yang masih belum tau tentang aplikasi yang satu ini? tentu sudah tau semua dong. <b>Blackberry Messenger</b> atau <b>BBM</b> adalah aplikasi pengirim pesan instan yang saat ini lagi nge-Trend di versi Android dan iOS. Seperti yang kita ketahui, <b>BBM</b> for Android hanya dapat dijalankan di versi Ice Cream Sandwich 4.0 ke atas, Nah kemarin saya menemukan cara atau trik untuk menjalankan <b>BBM</b> di PC atau laptop Anda. Dengan trik ini, Anda dapat menggunakan <b>BBM</b> di PC seperti layaknya di Android. Supaya <b>BBM</b> dapat berjalan dengan baik di PC Anda, RAM minimal yang terpasang di PC Anda harus <b>2 GB</b> atau lebih.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-MAvvDWtA7wE/U832xJ7JPSI/AAAAAAAAA4E/chGVay1yOLg/s1600/sc.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Blackberry Messenger for PC" src="http://3.bp.blogspot.com/-MAvvDWtA7wE/U832xJ7JPSI/AAAAAAAAA4E/chGVay1yOLg/s1600/sc.png" title="Blackberry Messenger for PC" /></a></div>
<br />
Download Link :<br />
<ul>
<li>Download | <a href="http://www.mediafire.com/download/42kbkr54a2co827/VirtualBox-4.3.0-89960-Win.exe" rel="nofollow" target="_blank">Virtual Box</a> - ( 102 Mb )</li>
<li>Download | <a href="http://www.mediafire.com/download/ejrnmb3bk230qla/genymotion-1.3.0.exe" rel="nofollow" target="_blank">Genymotion</a> - ( 20 MB )</li>
<li>Download | <a href="http://developer.android.com/sdk/index.html#download" rel="nofollow" target="_blank">Android SDK</a> - ( 459 MB )</li>
</ul>
<br />
How to install :<br />
<ol>
<li>Download semua file yang dibutuhkan di atas.</li>
<li>Silahkan daftar dulu di <a href="http://genymotion.com/" rel="nofollow" target="_blank">Genymotion.com</a></li>
<li>Install Oracle VirtualBox seperti biasa.</li>
<li>Install Genymotion juga.</li>
<li>Apabila sudah, silahkan buka Genymotion kemudian login dengan akun yang sudah Anda buat tadi.</li>
<li>Kemudian pilih Nexus One 4.1.1 with Google Apps, klik Add.</li>
<li>Tunggu beberapa menit, Genymotion akan men-download file sekitar 200 MB.</li>
<li>Jika sudah, ekstrak Android SDK yang Anda download tadi.</li>
<li>Kembali ke Genymotion, masukkan path lokasi Android SDK tadi.</li>
<li>Contoh : F:\adt-bundle-windows-x86_64-20130917\sdk\</li>
<li>Jalankan Nexus One 4.1.1, kemudian tunggu hingga tampilan Android muncul</li>
<li>Sekarang Anda bisa men-download BBM langsung menlalui Play Store, atau bisa mendownload Apk-nya <a href="http://www.mediafire.com/download/gtd9nndz69stvww/BBM4ALL.apk" rel="nofollow" target="_blank">di sini</a> (13 MB)</li>
<li>Install BBM-nya, kemudian ikuti step-stepnya</li>
<li>Selesai</li>
</ol>
Selamat mencoba semoga berhasil...<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-42399149798761956272014-07-22T07:24:00.001+07:002014-07-22T07:32:48.359+07:00Membuat Smooth Scroll Back To Top dengan jQuery<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-O7dohHcxIpM/UBLpmAlOQ5I/AAAAAAAACPY/z9-ZhhFnao0/s1600/back-to-top.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Back to Top" src="http://1.bp.blogspot.com/-O7dohHcxIpM/UBLpmAlOQ5I/AAAAAAAACPY/z9-ZhhFnao0/s200/back-to-top.png" height="200" width="190" /></a></div>
<b>Membuat Smooth Scroll Back To Top di Blogger</b>. Bagi sebagian sobat mungkin sudah familiar dengan kata-kata <i>smooth scroll back to top / kembali ke atas</i>. <i>Smooth</i> sendiri berarti <i>lembut</i>. Jadi <i>smooth scroll </i>artinya <i>menggulung dengan lembut</i>. Untuk membuat Tombol <b>Back to Top</b> biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.<br />
<br />
Tombol <i>back to top</i> biasanya digunakan pada blog dengan artikel yang panjang, untuk memudahkan pengunjung melihat kembali artikel di atas. Ada beberapa cara untuk menambahkan <i>tombol back to top</i> ini.<br />
<br />
Di sini akan saya share cara yang termudah, tanpa Edit HTML. Hanya menambahkan widget saja. Ada dua Style yang akan saya berikan, silahkan sobat pake mana suka.<br />
<h4>
Style1 (tanpa fade in dan fade out)</h4>
Maksud tanpa <i>fade in</i> dan <i>fade out</i> di sini adalah, tombol akan langsung muncul begitu blog dibuka. Untuk lebih memahaminya, silahkan kunjungi dulu DEMO-nya <a href="http://hanya-contoh-aja.blogspot.com/" rel="nofollow" target="_blank">DISINI</a>.<br />
<br />
Setelah melihat demo, bandingkan dengan<i> tombol kembali ke atas</i> yang ada di blog ini.<br />
Untuk membuatnya, silahkan tambahkan widget <i>HTML/JavaScript</i>, masukan kode ini :<br />
<br />
<pre><span style="background-color: #cfe2f3;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></span>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="<span style="color: red;">Kembali ke atas</span>"><img src="<span style="color: red;">http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png</span>" /></a></pre>
<br />
Apabila sudah ada jQuery plugin, silahkan hapus kode yang ditandai.<br />
<h4>
Style2 (dengan fade in dan fade out)</h4>
Maksud fade in dan fade out disini adalah, tombol tidak akan langsung muncul kecuali telah di scroll ke bawah.<br />
<br />
Untuk membuatnya, tambahkan kode ini di atas <code></head></code> :<br />
<br />
<pre><span style="background-color: #cfe2f3;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></span>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script></pre>
<br />
Kemudian tambahkan Widget HTML/JavaScript<br />
<br />
<pre><style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div></pre>
<br />
Semoga tulisan <a href="http://the-warasi.blogspot.com/2014/07/membuat-smooth-scroll-back-to-top.html">cara membuat smooth scroll back to top</a> ini bermanfaat. Happy Blogging !<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-32038474144331235262014-07-22T07:14:00.000+07:002014-07-22T07:25:31.139+07:00Membuat Tombol Back to Top dengan Efek Bounce<a href="http://the-warasi.blogspot.com/2014/07/membuat-tombol-back-to-top-dengan-efek.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="back to top" src="http://3.bp.blogspot.com/-Nfnr1o40sYQ/UjMGAsiRECI/AAAAAAAAFao/PC2EtpeMVDc/s1600/back-to-top.png" /></a><b><a href="http://the-warasi.blogspot.com/2014/07/membuat-tombol-back-to-top-dengan-efek.html">Back to Top Button with Bounce Effect</a></b> - Sebenarnya sudah banyak tutorial untum <i>membuat tombol back to top</i> ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana <i>cara membuat tombol back to top dengan efek bounce</i>.<br />
<br />
Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada pengunjung blog ini, karena dengan berbagai pertanyaan memunculkan ide untuk membuat artike baru.<br />
Lanjut kepada tutorial... Apa sebenarnya <i>efek bounce</i> itu? <i>bounce</i> artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :<br />
<b>Langkah 1</b> : Simpan kode jQuery di atas <code></head></code><br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span> <span class="attribute">src</span>=<span class="value">'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'</span>/></span><span class="javascript"></span></code></pre>
<br />
lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.<br />
<b>Langkah 2</b> : Simpan kode ini masih di atas <code></head></code><br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span>></span><span class="javascript">
$(<span class="keyword">function</span>() { $(window).scroll(<span class="keyword">function</span>() { <span class="keyword">if</span>($(<span class="keyword">this</span>).scrollTop()><span class="number">100</span>) { $(<span class="string">'#BounceToTop'</span>).fadeIn(); } <span class="keyword">else</span> { $(<span class="string">'#BounceToTop'</span>).fadeOut(); } });
$(<span class="string">'#BounceToTop'</span>).click(<span class="keyword">function</span>() { $(<span class="string">'body,html'</span>).animate({scrollTop:<span class="number">0</span>},<span class="number">800</span>) .animate({scrollTop:<span class="number">25</span>},<span class="number">200</span>) .animate({scrollTop:<span class="number">0</span>},<span class="number">150</span>) .animate({scrollTop:<span class="number">10</span>},<span class="number">100</span>) .animate({scrollTop:<span class="number">0</span>},<span class="number">50</span>); }); });
</span><span class="tag"></<span class="title">script</span>></span></code></pre>
<br />
<b>Langkah 3</b> : Buat widget baru HTML/JavaScript, simpan kode ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">'text/css'</span> <span class="attribute">scoped</span>=<span class="value">'scoped'</span>></span><span class="css">
<span class="id">#BounceToTop</span><span class="rules">{<span class="rule"><span class="attribute">position</span>:<span class="value">fixed;</span></span> <span class="rule"><span class="attribute">bottom</span>:<span class="value"><span class="number">0</span>px;</span></span> <span class="rule"><span class="attribute">right</span>:<span class="value"><span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">cursor</span>:<span class="value">pointer;</span></span><span class="rule"><span class="attribute">display</span>:<span class="value">none}</span></span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">'BounceToTop'</span>></span><span class="tag"><<span class="title">img</span> <span class="attribute">alt</span>=<span class="value">'Back to top'</span> <span class="attribute">src</span>=<span class="value">'http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'</span>/></span><span class="tag"></<span class="title">div</span>></span></code></pre>
<br />
Tampilan tombol dengan kode di atas menggunakan <i>fade in / fade out</i> (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada <i>langkah 2</i> dengan kode ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span>></span><span class="javascript">
$(<span class="keyword">function</span>() { $(window).scroll(<span class="keyword">function</span>() { <span class="keyword">if</span>($(<span class="keyword">this</span>).scrollTop()><span class="number">100</span>) { $(<span class="string">'#BounceToTop'</span>).slideDown(<span class="number">200</span>); } <span class="keyword">else</span> { $(<span class="string">'#BounceToTop'</span>).slideUp(<span class="number">300</span>); } });
$(<span class="string">'#BounceToTop'</span>).click(<span class="keyword">function</span>() { $(<span class="string">'body,html'</span>).animate({scrollTop:<span class="number">0</span>},<span class="number">800</span>) .animate({scrollTop:<span class="number">25</span>},<span class="number">200</span>) .animate({scrollTop:<span class="number">0</span>},<span class="number">150</span>) .animate({scrollTop:<span class="number">10</span>},<span class="number">100</span>) .animate({scrollTop:<span class="number">0</span>},<span class="number">50</span>); }); });
</span><span class="tag"></<span class="title">script</span>></span></code></pre>
<br />
Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya <a href="http://the-warasi.blogspot.com/2014/07/membuat-smooth-scroll-back-to-top.html" target="_blank">DISINI</a>.<br />
<br />
Semoga bermanfaat....<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-9637684294325882202014-07-16T19:22:00.004+07:002014-07-16T19:24:37.291+07:00Membuat Tombol Twitter, Google+1 dan Facebook Like, Valid HTML5<b><a href="http://the-warasi.blogspot.com/2014/07/membuat-tombol-twitter-google1-dan.html">Valid Twitter, Google +1 and Facebook 'Like' buttons for HTML5</a></b> - Peran jejaring sosial dalam meraih visitor lumayan signifikan. Oleh karena itu jangan lupa untuk memasang Facebook 'Like' button, Google Plus dan Twitter, atau bisa ditambah dengan jejaring sosial lainnya.<br />
<br />
Masih melanjutkan artikel sebelumnya tentang <a href="http://the-warasi.blogspot.com/2014/07/cara-membuat-blog-valid-html5.html" target="_blank">bagaimana membuat template blog valid HTML5</a>, pemasangan kode <i>Facebook 'Like' button</i>, <i>Google Plus</i> dan <i>Twitter</i>, yang sudah banyak beredar pada tutorial Blogger, akan mengakibatkan banyaknya error pada validasi HTML5 terutama pada bagian postingan yang biasanya kita pasang.<br />
<br />
<div style="text-align: center;">
<img alt="valid html5 button share" src="http://2.bp.blogspot.com/-QTrcDjThWNc/Uh1AnwvUJxI/AAAAAAAAFMw/RbhrY49xTs4/s1600/facebook-twitter-gplus-valid-html5.png" /></div>
<br />
Berikut ini adalah tombol (button) yang valid HTML5 :<br />
<h4>
Twitter</h4>
<pre><code class="xml"><span class="tag"><<span class="title">a</span> <span class="attribute">class</span>=<span class="value">'twitter-share-button'</span> <span class="attribute">data-count</span>=<span class="value">'horizontal'</span> <span class="attribute">data-related</span>=<span class="value">''</span> <span class="attribute">data-via</span>=<span class="value">''</span> <span class="attribute">expr:data-text</span>=<span class="value">'data:post.title'</span> <span class="attribute">expr:data-url</span>=<span class="value">'data:post.url'</span> <span class="attribute">href</span>=<span class="value">'http://twitter.com/share'</span>></span>Tweet<span class="tag"></<span class="title">a</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">'http://platform.twitter.com/widgets.js'</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span>/></span></code></pre>
<h4>
Google Plus</h4>
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'g-plusone'</span> <span class="attribute">data-count</span>=<span class="value">'true'</span> <span class="attribute">data-size</span>=<span class="value">'medium'</span> <span class="attribute">expr:data-href</span>=<span class="value">'data:post.url'</span>/></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span>></span><span class="javascript">
window.___gcfg = {lang: &#<span class="number">39</span>;id&#<span class="number">39</span>;};
(<span class="keyword">function</span>() {
<span class="keyword">var</span> po = document.createElement(&#<span class="number">39</span>;script&#<span class="number">39</span>;); po.type = &#<span class="number">39</span>;text/javascript&#<span class="number">39</span>;; po.async = <span class="literal">true</span>;
po.src = &#<span class="number">39</span>;https:<span class="comment">//apis.google.com/js/plusone.js&#39;;</span>
<span class="keyword">var</span> s = document.getElementsByTagName(&#<span class="number">39</span>;script&#<span class="number">39</span>;)[<span class="number">0</span>]; s.parentNode.insertBefore(po, s);
})();
</span><span class="tag"></<span class="title">script</span>></span></code></pre>
<h4>
Facebook Like</h4>
<pre><code class="xml"><span class="tag"><<span class="title">iframe</span> <span class="attribute">expr:src</span>=<span class="value">'&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;width=90&amp;amp;action=like&amp;amp;font=arial&amp;amp;colorscheme=light&amp;amp;height=21&quot;'</span> <span class="attribute">style</span>=<span class="value">'border:none; overflow:hidden; width:90px; height:21px;'</span>/></span></code></pre>
<h4>
Update</h4>
Karena ada masukan dari Kang Kompi Ajaib, bahwa iframe kurang bagus untuk SEO dan disarankan untuk menggunakan kode dari Facebook Developer. Namun bagi sahabat yang ga mau buka developer fb, silahkan ikuti langkah pemasangan <i>Facebook Like Button SEO</i> friendly dan valid HTML5 :<br />
<br />
1. Simpan kode ini di abawah <code><body></code><br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">'fb-root'</span>/></span>
<span class="tag"><<span class="title">script</span>></span><span class="javascript"><span class="comment">//<![CDATA[</span>
(<span class="keyword">function</span>(d, s, id) {
<span class="keyword">var</span> js, fjs = d.getElementsByTagName(s)[<span class="number">0</span>];
<span class="keyword">if</span> (d.getElementById(id)) <span class="keyword">return</span>;
js = d.createElement(s); js.id = id;
js.src = <span class="string">"//connect.facebook.net/id_ID/all.js#xfbml=1&appId=352634211479923"</span>;
fjs.parentNode.insertBefore(js, fjs);
}(document, <span class="string">'script'</span>, <span class="string">'facebook-jssdk'</span>));
<span class="comment">//]]></span>
</span><span class="tag"></<span class="title">script</span>></span></code></pre>
<br />
Kode di atas cukup satu saja untuk memasang beberapa plugin Facebook, selanjutnya silahkan tambahkan kode Facebook Like Button.<br />
<br />
2. Untuk menambah kode Facebook Like Button, simpan kode ini di tempat mana kode akan dimunculkan :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'fb-like'</span> <span class="attribute">data-layout</span>=<span class="value">'button_count'</span> <span class="attribute">data-send</span>=<span class="value">'false'</span> <span class="attribute">data-show-faces</span>=<span class="value">'false'</span> <span class="attribute">data-width</span>=<span class="value">'90'</span> <span class="attribute">expr:data-href</span>=<span class="value">'data:post.url'</span>/></span></code></pre>
<br />
Semoga bermanfaat...<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com1tag:blogger.com,1999:blog-8007268170958119300.post-23547249653664748802014-07-16T19:00:00.000+07:002014-07-16T19:11:29.624+07:00Breadcrumbs SEO Friendly dan Valid HTML5<div class="separator" style="clear: both; text-align: center;">
<a href="http://the-warasi.blogspot.com/2014/07/breadcrumbs-seo-friendly-dan-valid-html5.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="breadcrumbs" src="http://1.bp.blogspot.com/-B3frXgCv46k/UjMGBjoMb-I/AAAAAAAAFa4/PUvOSd5LPxo/s1600/breadcrumb-for-blogger.png" /></a></div>
<b><a href="http://the-warasi.blogspot.com/2014/07/breadcrumbs-seo-friendly-dan-valid-html5.html">Breadcrumbs SEO Friendly dan Valid HTML5</a></b> - Masih berbicara seputar validasi HTML5, diantara komponen agar postingan valid HTML5 adalah breadcrumbs. Script yang akan saya bagikan, tidak hanya blog yang valid HTML5 saja yang bisa menggunakan. Bagi sobat yang tidak peduli dengan validasi pun bisa menggunakan kode yang saya bagikan.<br />
Sebenarnya, pada postingan sebelumnya (baca: Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger) itu sudah SEO Friendly, akan tetapi <i>belum valid html5</i>.<br />
Lantas apa bedanya script sebelumnya dan yang sekarang? Sebetulnya sama kodenya, namun dalam format penulisan, pada tutorial sebelumnya menggunakan <i>markup RDFa</i> sedangkan sekarang menggunakan <i>Microdata</i>. Untuk markup RDFa sendiri tidak valid HTML5. Bingung dengan RDFa dan Microdata? Insya Allah akan saya bahas pada tutorial selanjutnya.<br />
<br />
Namun secara singkat, markup HTML RDFa biasanya menggunakan kode kurang lebih seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span> <span class="attribute">xmlns:v</span>=<span class="value">'http://rdf.data-vocabulary.org/#'</span>></span></code></pre>
kode inilah yang membuatnya tidak valid html5.<br />
<br />
Kembali lagi kepada tutorial Cara membuat breadcrumbs SEO friendly dan valid html5, bagi sobat yang ingin menerapkan, silahkan simak langkahnya :<br />
<br />
<b>Langkah 1</b> : Simpan kode ini di atas <code>]]></b:skin></code><br />
<br />
<pre><code class="css"><span class="class">.breadcrumbs</span><span class="rules">{<span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">0</span>px <span class="number">5</span>px <span class="number">5</span>px <span class="number">0</span>;</span></span><span class="rule"><span class="attribute">margin-bottom</span>:<span class="value"><span class="number">20</span>px;</span></span><span class="rule"><span class="attribute">margin-top</span>:<span class="value"><span class="number">0</span>px;</span></span><span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">11</span>px;</span></span><span class="rule"><span class="attribute">color</span>:<span class="value"><span class="hexcolor">#5B5B5B</span>;</span></span><span class="rule"><span class="attribute">border-bottom</span>:<span class="value"><span class="number">1</span>px dotted <span class="hexcolor">#bbb</span>;</span></span><span class="rule">}</span></span></code></pre>
<b>Langkah 2</b> : Cari kode <code><b:includable id='main' var='top'></code> kemudian ganti dengan :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:includable</span> <span class="attribute">id</span>=<span class="value">'breadcrumb'</span> <span class="attribute">var</span>=<span class="value">'posts'</span>></span><span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.homepageUrl != data:blog.url'</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;static_page&quot;'</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span><span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">rel</span>=<span class="value">'tag'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">data:blog.pageName</span>/></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;item&quot;'</span>></span>
<span class="comment"><!-- breadcrumb for the post page --></span>
<span class="tag"><<span class="title">b:loop</span> <span class="attribute">values</span>=<span class="value">'data:posts'</span> <span class="attribute">var</span>=<span class="value">'post'</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:post.labels'</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">itemscope</span>=<span class="value">''</span> <span class="attribute">itemtype</span>=<span class="value">'http://data-vocabulary.org/Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">itemprop</span>=<span class="value">'url'</span>></span><span class="tag"><<span class="title">span</span> <span class="attribute">itemprop</span>=<span class="value">'title'</span>></span>Home<span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"><<span class="title">b:loop</span> <span class="attribute">values</span>=<span class="value">'data:post.labels'</span> <span class="attribute">var</span>=<span class="value">'label'</span>></span>
&#187; <span class="tag"><<span class="title">span</span> <span class="attribute">itemscope</span>=<span class="value">''</span> <span class="attribute">itemtype</span>=<span class="value">'http://data-vocabulary.org/Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:label.url'</span> <span class="attribute">itemprop</span>=<span class="value">'url'</span>></span><span class="tag"><<span class="title">span</span> <span class="attribute">itemprop</span>=<span class="value">'title'</span>></span><span class="tag"><<span class="title">data:label.name</span>/></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">b:loop</span>></span>
&#187; <span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">data:post.title</span>/></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span><span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">rel</span>=<span class="value">'tag'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span>Unlabelled<span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">data:post.title</span>/></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:loop</span>></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;archive&quot;'</span>></span>
<span class="comment"><!-- breadcrumb for the label archive page and search pages.. --></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span>
<span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span>Archives for <span class="tag"><<span class="title">data:blog.pageName</span>/></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;index&quot;'</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageName == &quot;&quot;'</span>></span>
<span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span>All posts<span class="tag"></<span class="title">span</span>></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">span</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span> &#187; <span class="tag"><<span class="title">span</span>></span>Posts filed under <span class="tag"><<span class="title">data:blog.pageName</span>/></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:includable</span>></span>
<span class="tag"><<span class="title">b:includable</span> <span class="attribute">id</span>=<span class="value">'main'</span> <span class="attribute">var</span>=<span class="value">'top'</span>></span>
<span class="tag"><<span class="title">b:include</span> <span class="attribute">data</span>=<span class="value">'posts'</span> <span class="attribute">name</span>=<span class="value">'breadcrumb'</span>/></span></code></pre>
<b>Saya sudah menerapkan kode sebelumnya? mana yang harus diedit?</b><br />
<br />
Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span> <span class="attribute">xmlns:v</span>=<span class="value">'http://rdf.data-vocabulary.org/#'</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">typeof</span>=<span class="value">'v:Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">property</span>=<span class="value">'v:title'</span> <span class="attribute">rel</span>=<span class="value">'v:url'</span>></span>Home<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"><<span class="title">b:loop</span> <span class="attribute">values</span>=<span class="value">'data:post.labels'</span> <span class="attribute">var</span>=<span class="value">'label'</span>></span>
&#187; <span class="tag"><<span class="title">span</span> <span class="attribute">typeof</span>=<span class="value">'v:Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:label.url'</span> <span class="attribute">property</span>=<span class="value">'v:title'</span> <span class="attribute">rel</span>=<span class="value">'v:url'</span>></span><span class="tag"><<span class="title">data:label.name</span>/></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span></code></pre>
ganti dengan kode ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'breadcrumbs'</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">itemscope</span>=<span class="value">''</span> <span class="attribute">itemtype</span>=<span class="value">'http://data-vocabulary.org/Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">itemprop</span>=<span class="value">'url'</span>></span><span class="tag"><<span class="title">span</span> <span class="attribute">itemprop</span>=<span class="value">'title'</span>></span>Home<span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"><<span class="title">b:loop</span> <span class="attribute">values</span>=<span class="value">'data:post.labels'</span> <span class="attribute">var</span>=<span class="value">'label'</span>></span>
&#187; <span class="tag"><<span class="title">span</span> <span class="attribute">itemscope</span>=<span class="value">''</span> <span class="attribute">itemtype</span>=<span class="value">'http://data-vocabulary.org/Breadcrumb'</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:label.url'</span> <span class="attribute">itemprop</span>=<span class="value">'url'</span>></span><span class="tag"><<span class="title">span</span> <span class="attribute">itemprop</span>=<span class="value">'title'</span>></span><span class="tag"><<span class="title">data:label.name</span>/></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">span</span>></span></code></pre>
<br />
Semoga bermanfaat...<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-87076621900053914372014-07-15T22:32:00.000+07:002014-07-15T22:34:09.207+07:00Memasang Author Rich Snippet di Blog<b><a href="http://the-warasi.blogspot.com/2014/07/memasang-author-rich-snippet-di-blog.html">Memasang Author Rich Snippet di Blog</a> </b>- Tutorial ini masih lanjutan dari artikel sebelumnya (baca: Mengenal Google Rich Snippets dan jenisnya). Sebenarnya tutorial ini sudah banyak di share oleh sahabat blogger dengan judul <b>Menampilkan Photo Author Blog di Hasil Pencarian</b>. Akan tetapi dari sekian banyak tutorial, ada yang benar dan ada juga yang hanya copy paste, tanpa cek dan ricek kebenarannya. :)<br />
<br />
Penggunaan Author snippet ini akan berpengaruh dalam SERP. Dengan memasang Author Snippet artinya mengklaim kepemilikan blog dengan akun Google+. Google+ merupakan jejaring sosial milik Google, dengan meklaim kepemilikan blog, maka akan bertambah kepercayaan google terhadap blog tersebut dan akan menampilkan avatar kita pada pencarian Google.<br />
<br />
Untuk menambahkan Author snippets, ikuti langkah-langkah mudahnya :<br />
<h4>
Langkah 1 : Tambahkan Tag Author</h4>
Simpan kode ini dibawah <code><head></code><br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">'URL-google-plus'</span> <span class="attribute">rel</span>=<span class="value">'author'</span>/></span></code></pre>
<br />
Edit URL-Google-Plus dengan url sobat, maka jadinya kurang lebih seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">'https://plus.google.com/113292956133224747560/'</span> <span class="attribute">rel</span>=<span class="value">'author'</span>/></span></code></pre>
<h4>
Langkah 2 : Tambahkan Kontributor</h4>
1. Masuk ke Pengaturan akun : <a href="https://www.google.com/settings/account" target="_blank">https://www.google.com/settings/account</a><br />
2. Klik <i>Edit Profil Anda</i><br />
<br />
<div style="text-align: center;">
<img alt="author rich snippets" src="http://2.bp.blogspot.com/-Nxl_zVCewz8/U8VF3Njv1OI/AAAAAAAAA2s/LBQJqtRJGz0/s1600/edit-profil.png" /></div>
<br />
3. Scroll ke bawah, Klik <i>Edit<i></i></i> pada <i>Kontributor di</i><br />
4. Tambahkan link blog sobat, dan Simpan.<br />
<br />
<div style="text-align: center;">
<img alt="author rich snippets" src="http://4.bp.blogspot.com/-mWjkLB2s7mI/U8VGCUfdZmI/AAAAAAAAA20/HFK4xxAUG2U/s1600/kontributor.png" /></div>
Semoga bermanfaat...<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-27533968091140468002014-07-15T21:52:00.002+07:002014-07-15T21:58:56.034+07:00Menghapus Tulisan Diberdayakan oleh Blogger<b>Cara Menghapus Tulisan Diberdayakan oleh Blogger</b> atau <b>Powered by Blogger</b>. Sebenarnya tutorial <i>cara menghapus tulisan diberdayakan oleh Blogger</i>, sudah banyak sobat yang lain membahasnya. Akan tetapi karena ada pertanyaan dari rekan blogger, maka saya akan share kembali <i>cara menghilangkan tulisan diberdayakan oleh Blogger</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-H50VNwQ57rM/U8VBJ0Eh_zI/AAAAAAAAA2g/gczznIzpCmY/s1600/free-blogger-templates-jquery-slider.png" style="margin-left: 1em; margin-right: 1em;"><img alt="free blogger template" src="http://2.bp.blogspot.com/-H50VNwQ57rM/U8VBJ0Eh_zI/AAAAAAAAA2g/gczznIzpCmY/s320/free-blogger-templates-jquery-slider.png" title="screenshot free blogger template" /></a></div>
<br />
Sebenarnya ada beberapa cara menghapus tulisan <i>diberdayakan oleh Blogger</i> atau <i>Powered by Blogger</i>, namun di sini saya akan share 2 cara, <i>dengan menggunakan kode CSS</i> dan <i>menghapus permanen</i>.<br />
<h4>
Cara 1 : Menyembunyikan dengan kode CSS</h4>
Untuk menyembunyikan tulisan diberdayakan oleh Blogger dengan kode CSS, silahkan ikuti langkahnya :<br />
<br />
1. Login ke blogger Anda<br />
2. Cari kode<code> ]]></b:skin></code>, simpan kode ini di atasnya<br />
<br />
<pre>#Attribution1 {
height:0px;
visibility:hidden;
display:none
}</pre>
<br />
3. Simpan template.<br />
<br />
Dengan menggunakan kode di atas, widget attribution tidak hilang, melainkan <i>hanya disembunyikan</i>. Apabila sobat lihat <i>Tata Letak</i>, widget itu masih ada. Lihat contoh Tata Letak di bawah :<br />
<br />
<div style="text-align: center;">
<img alt="attribution widget" src="http://1.bp.blogspot.com/-y64nesocEbc/UBgEk2mvFtI/AAAAAAAACQ4/80OpzqEFq3I/s1600/attributionwidget2.jpg" /></div>
<br />
<h4>
Cara 2 : Menghilangkan Widget Attribution Permanen</h4>
Untuk menghilangkan tulisan diberdayakan oleh Blogger secara permanen, sobat harus menghapus <i>Widget Attribution</i>. Dalam menghapus kode <i>Attribution</i>, kadang-kadang mengalami error. Supaya tidak error, ikuti langkah di bawah :<br />
<br />
1. Login ke Blogger<br />
2. Masuk ke <i>Template</i> > <i>Edit HTML</i>, centang <i>Expand Template Widget</i><br />
3. Cari kata-kata <b>Attribution1</b> (gunakan Ctr+F untuk mempermudah)<br />
4. Rubah <i>locked='true'</i> menjadi <i>locked='false'</i><br />
<br />
<div style="text-align: center;">
<img alt="attribution widget" src="http://1.bp.blogspot.com/-nYW4dJXqu3I/UBgEjRf2JyI/AAAAAAAACQw/gljH4g2Pc94/s1600/attributionwidget.jpg" /></div>
<br />
5. Simpan Template<br />
6. Masuk ke <b>Tata Letak</b><br />
7. Klik <i>Edit </i>pada Widget Attribution<br />
<br />
<div style="text-align: center;">
<img alt="attribution widget" src="http://1.bp.blogspot.com/-godS0k-5Vt0/UBgHepskBwI/AAAAAAAACRI/SX0VLc4d-Ik/s1600/attributionwidget3.jpg" /></div>
<br />
<br />
8. Klik <i>Hapus</i>, pada Konfigurasikan Atribusi<br />
<br />
<div style="text-align: center;">
<img alt="attribution widget" src="http://2.bp.blogspot.com/-Kg-pgII87QM/UBgHgELm8GI/AAAAAAAACRQ/znh-xz5RTiE/s1600/attributionwidget4.jpg" /></div>
<br />
9. Simpan Setelan.<br />
<br />
Dengan cara ini, maka widget attribution dan tulisan Diberdayakan oleh Blogger akan hilang secara permanen.<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-22645563399722609182014-07-13T23:05:00.001+07:002014-07-13T23:25:52.864+07:00Menandai Postingan Terbaru<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ylln4gZ5dNw/U8KpztR6h0I/AAAAAAAAA2U/dBd_Swk5coQ/s1600/first-post.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Menandai postingan terbaru" src="http://1.bp.blogspot.com/-ylln4gZ5dNw/U8KpztR6h0I/AAAAAAAAA2U/dBd_Swk5coQ/s1600/first-post.png" height="203" title="Menandai postingan terbaru" width="400" /></a></div>
<br />
<b>Menandai postingan terbaru</b> - yaitu menampilkan post terbaru dengan sebuah tanda seperti ribbon, sebenarnya tutorial ini telah banyak di share para sahabat blogger, tetapi tidak ada salahnya kan? jika saya tambah sharenya biar tambah banyak hehehe...<br />
<br />
Untuk masalah kegagalan saya jamin tidak akan menemuinya karena saya telah mencoba sendiri dan berhasil...<br />
<br />
Seperti biasa silahkan Anda masuk ke blogger dan edit html masukkan CSS di bawah ini tepat di atas kode <code>]]></b:skin></code> atau <code></style></code><br />
<pre>.newer-post {
margin: 50px auto;
width: auto;
height: auto;
background-color: none;
position: relative;
}
.newer-post2 {
font: bold 20px Sans-Serif;
text-align: center;
transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -25px;
top: 7px;
width: 160px;
background-color: blue;
color: #fff;
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.newer-post3 {
width: 86px;
height: 88px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}</pre>
<br />
Kalau sudah silahkan Anda cari kode ini <code><b:include data='post' name='post'/> </code>gunakan CTRL+F untuk memudahkan pencarian...<br />
Kalu sudah ketemu silahkan Anda ganti dengan kode dibawah ini :<br />
<br />
<pre><b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='newer-post'>
<div class='newer-post2'><div class='newer-post3'>NEW</div></div>
<div class='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if></pre>
<br />
Kemudian Anda simpan template dan cek hasilnya...<br />
Semoga bermanfaat.<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-53862586685764804782014-07-11T11:45:00.000+07:002014-07-11T11:51:22.389+07:00Parse HTML<div style="text-align: justify;"><span class="awal">B</span>agi Anda yang memerlukan Parse HTML seperti kode iklan, dll. agar sesuai atau dapat diterapkan pada template blog Anda, silahkan paste kan kode tersebut pada kotak di bawah ini, kemudian tekan tombol Parse, selanjutnya copy kode yang didapat dan pastekan pada template blog Anda.</div><script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script><br />
<table style="margin:0 auto"><tbody>
<tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 595px"></textarea><br />
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></td> </tr>
</tbody></table><div><div><div style="margin-bottom: 2px;">Cara Membuat Kotak Parse HTML<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="margin-left: 20px; padding: 5px;" type="button" value="Show Code"></div><div style="border: none; margin: 0; padding: 0;"><div style=""><div style="text-align: left;"><pre class=" language-markup"><code class=" language-markup"><span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>"text/javascript"</span><span class="token punctuation">></span></span>
<span class="token keyword">function</span> convert<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">var</span> ele1 <span class="token operator">=</span> document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">"somewhere"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> replaced<span class="token punctuation">;</span>replaced <span class="token operator">=</span> ele1<span class="token punctuation">.</span>value<span class="token punctuation">;</span>replaced <span class="token operator">=</span> replaced<span class="token punctuation">.</span>replace<span class="token punctuation">(</span><span class="token regex">/&/ig</span><span class="token punctuation">,</span> <span class="token string">"&amp;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>replaced <span class="token operator">=</span> replaced<span class="token punctuation">.</span>replace<span class="token punctuation">(</span><span class="token regex">/</ig</span><span class="token punctuation">,</span> <span class="token string">"&lt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>replaced <span class="token operator">=</span> replaced<span class="token punctuation">.</span>replace<span class="token punctuation">(</span><span class="token regex">/>/ig</span><span class="token punctuation">,</span> <span class="token string">"&gt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>replaced <span class="token operator">=</span> replaced<span class="token punctuation">.</span>replace<span class="token punctuation">(</span><span class="token operator">/</span><span class="token string">"/ig, "</span><span class="token operator">&</span>quot<span class="token punctuation">;</span><span class="token string">");replaced = replaced.replace(/&#177;/ig, "</span><span class="token operator">&</span>plusmn<span class="token punctuation">;</span><span class="token string">");replaced = replaced.replace(/&#169;/ig, "</span><span class="token operator">&</span>copy<span class="token punctuation">;</span><span class="token string">");replaced = replaced.replace(/&#174;/ig, "</span><span class="token operator">&</span>reg<span class="token punctuation">;</span><span class="token string">");replaced = replaced.replace(/ya'll/ig, "</span>ya'll"<span class="token punctuation">)</span><span class="token punctuation">;</span>ele1<span class="token punctuation">.</span>value <span class="token operator">=</span> replaced<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span>"margin:0 auto"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span>"somewhere"</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span>"background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 595px"</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span>"convert();"</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span>"padding: 5px;"</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>"button"</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span>"Parse Script"</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre></div></div></div></div>Kotak / Tool Parse HTML bisa disimpan di postingan seperti tool di atas ( pada postingan html bukan compose ) juga bisa disimpan di sidebar sebagai widget. Dan tool Parse HTML ini sudah valid HTML5.<br />
<br />
Sumber: <a href="http://www.kucoba.com/2011/03/cara-membuat-html-parse-kode-box-di.html" rel="nofollow" target="_blank" title="Sumber">www.kucoba.com</a></div><br />
Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com2tag:blogger.com,1999:blog-8007268170958119300.post-39133799222448659472014-07-09T21:18:00.000+07:002014-07-16T19:30:44.442+07:00Tips Membuat Halaman Posting Valid HTML5<a href="http://the-warasi.blogspot.com/2014/07/tips-membuat-halaman-posting-valid-html5.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="posting valid html" src="http://4.bp.blogspot.com/-QqRPOp6W3UA/U8ZmSLhbAyI/AAAAAAAAA3E/Etol4wczD0o/s1600/postingan-valid-html5.png" height="155" width="320" /></a><b><a href="http://the-warasi.blogspot.com/2014/07/tips-membuat-halaman-posting-valid-html5.html">Halaman Posting Valid HTML5</a></b> - Pada artikel sebelumnya saya sudah menjelaskan bagaimana <a href="http://the-warasi.blogspot.com/2014/07/cara-membuat-blog-valid-html5.html" target="_blank">cara membuat blog valid HTML5</a>. Dengan tutorial tersebut blog sobat sudah bisa 100% valid HTML5, namun masih terbatas pada halaman muka (homepage). Sejauh yang saya ketahui, beberapa pembuat template yang tersebar dengan embel-embel valid html5 pun kebanyakan hanya sebatas homepage saja.<br />
<br />
Masih banyak hal yang harus dilakukan, agar blog valid di halaman posting. Saat ini akan saya coba rinci satu per satu. Bagi sobat yang akan melakukan validasi, saya sarankan jangan tergesa-gesa, santai saja dan lakukan dengan tenang.<br />
<br />
Dibawah ini, hal-hal yang perlu diperhatikan agar halaman posting valid HTML5.<br />
<h4>
Breadcrumb</h4>
Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markup <i>rdfa</i>, untuk membuatnya valid html5 sobat harus menggunakan markup <i>microdata</i>. Silahkan kunjungi : <a href="http://the-warasi.blogspot.com/2014/07/breadcrumbs-seo-friendly-dan-valid-html5.html" rel="nofollow" target="_blank">Breadcrumbs SEO Friendly dan valid HTML5</a><br />
<h4>
Gambar / Image</h4>
Apabila sobat mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)<br />
<br />
<pre><div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s1600/abstract2.jpg" <span style="background-color: #783f04;">imageanchor="1"</span> style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img <span style="background-color: #783f04;">border="0"</span> height="177" src="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s320/abstract2.jpg" width="320" /></a></div></pre>
<br />
hapus <code>imageanchor="1"</code>, dan ganti <code>border="0"</code> dengan <code>alt="keterangan gambar"</code>.<br />
<br />
Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan <code>border="0"</code>. Hal yang wajib ditambahkan adalah <code>alt="keterangan gambar"</code> lebih bagus lagi menggunakan tag <code>title</code>. Sebagai contoh menampilkan gambar yang baik:<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">img</span> <span class="attribute">alt</span>=<span class="value">"ipad4"</span> <span class="attribute">src</span>=<span class="value">"http://blogspot.com/ipad4.png"</span> <span class="attribute">title</span>=<span class="value">"Ipad Terbaru"</span>/></span></code></pre>
<h4>
Tombol Like / Share</h4>
Gunakan tombol Like Facebook / Twitter / Google Plus yang valid HTML5. (baca tutorial : <a href="http://the-warasi.blogspot.com/2014/07/membuat-tombol-twitter-google1-dan.html" target="_blank">Membuat Tombol Twitter, Google +1, dan Like Facebook Valid HTML5</a>)<br />
<h4>
Related Posts</h4>
Ada beberapa script yang saya temui pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti <b>Tutorial Blogger</b>, dengan kondisi seperti itu, membuat white space yang seharusnya <b>Tutorial%20Blogger</b>. Bagi sobat yang menggunakan script ini, saya sarankan <i>untuk membuat label hanya dengan 1 kata saja</i>. Apabila sudah banyak label dengan 2 kata atau lebih, silahkan gunakan Related Posts Valid HTML5.<br />
<h4>
Widget</h4>
Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus <code><b:include name='quickedit'/></code> setelah menambah widget baru.<br />
<br />
Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode <b>CSS</b>, <b>HTML</b> dan <b>JavaScript</b> di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.<br />
<br />
Sebagai gambaran seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css">
<span class="class">.home-link</span><span class="rules">{<span class="rule"><span class="attribute">display</span>:<span class="value">none}</span></span></span> <span class="id">#blog-pager-newer-link</span> <span class="rules">{<span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">12</span>px;</span></span><span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">300</span>px;</span></span><span class="rule"><span class="attribute">float</span>:<span class="value">left;</span></span> <span class="rule"><span class="attribute">text-align</span>:<span class="value">left;</span></span><span class="rule"><span class="attribute">font-family</span>:<span class="value">Arial, sans-serif;</span></span><span class="rule">}</span></span> <span class="id">#blog-pager-older-link</span> <span class="rules">{<span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">12</span>px;</span></span><span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">300</span>px;</span></span><span class="rule"><span class="attribute">float</span>:<span class="value">right;</span></span> <span class="rule"><span class="attribute">text-align</span>:<span class="value">right;</span></span><span class="rule"><span class="attribute">font-family</span>:<span class="value">Arial, sans-serif;</span></span><span class="rule">}</span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">
$(document).ready(<span class="keyword">function</span>(){ <span class="keyword">var</span> olderLink = $(<span class="string">"a.blog-pager-older-link"</span>).attr(<span class="string">"href"</span>); $(<span class="string">"a.blog-pager-older-link"</span>).load(olderLink+<span class="string">" .post-title:first"</span>, <span class="keyword">function</span>() { <span class="keyword">var</span> olderLinkTitle = $(<span class="string">"a.blog-pager-older-link"</span>).text(); $(<span class="string">"a.blog-pager-older-link"</span>).text(olderLinkTitle + <span class="string">"\u2192"</span>);<span class="comment">//rgt });</span>
</span><span class="tag"></<span class="title">script</span>></span></code></pre>
<br />
Kode <code><style type="text/css"></code> inilah yang menyababkan error, untuk solusinya tambahkan <code>scoped</code> atau <code>scoped=''</code> atau <code>scoped='scoped'</code>. Inilah yang dinamakan <i>Boolean Attribute</i>. Maka kode yang benar menjadi :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span> <span class="attribute">scoped</span>></span></code></pre>
<h4>
Komentar</h4>
Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada 2 alternatif yang saya tawarkan :<br />
<br />
1. Gunakan Komentar Google Plus; atau<br />
2. Gunakan Threaded Comments Hack<br />
<br />
Apabila sobat menggunakan <b>Thread Comments Hack Valid HTML5</b>, ada beberapa langkah yang harus sobat lakukan dalam validasi html5 ini.<br />
<br />
1. Cari semua kode yang seperti di bawah ini (ada beberapa kode)<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">iframe</span> <span class="attribute">allowtransparency</span>=<span class="value">'true'</span> <span class="attribute">class</span>=<span class="value">'blogger-iframe-colorize blogger-comment-from-post'</span> <span class="attribute">frameborder</span>=<span class="value">'0'</span> <span class="attribute">height</span>=<span class="value">'410'</span> <span class="attribute">scrolling</span>=<span class="value">'no'</span> <span class="attribute">id</span>=<span class="value">'comment-editor'</span> <span class="attribute">name</span>=<span class="value">'comment-editor'</span> <span class="attribute">src</span>=<span class="value">''</span> <span class="attribute">style</span>=<span class="value">'display: none'</span> <span class="attribute">width</span>=<span class="value">'100%'</span>/></span></code></pre>
<br />
hapus kode-kode berikut ini :<br />
<br />
- allowtransparency='true'< - frameborder='0' - src='' - scrolling='no' - width='100%' - style='display: none' <br />
<br />
2. Cari kode seperti ini :<br />
<pre><code class="xml"><span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:post.commentFormIframeSrc'</span> <span class="attribute">id</span>=<span class="value">'comment-editor-src'</span>/></span></code></pre>
<br />
ganti dengan :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;static_page&quot;'</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id'</span> <span class="attribute">id</span>=<span class="value">'comment-editor-src'</span>/></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;item&quot;'</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id'</span> <span class="attribute">id</span>=<span class="value">'comment-editor-src'</span>/></span>
<span class="tag"></<span class="title">b:if</span>></span></code></pre>
<br />
Untuk kekurangannya, Insya Allah menyusul. Semoga bermanfaat....<br />
<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-46737933879768121042014-07-09T20:52:00.000+07:002014-07-09T22:36:51.164+07:00Cara Membuat Blog Valid HTML5<b><a href="http://the-warasi.blogspot.com/2014/07/cara-membuat-blog-valid-html5.html">Cara Membuat Blog Valid HTML5</a></b> - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh <i>Bung Adhy Kompi Ajaib</i> <img alt="smile" class="ki-smiley" src="http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif" /><br />
<br />
<b>Apa itu HTML5?</b> HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.<br />
<br />
<div style="text-align: center;">
<img alt="HTML5" src="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/s1600/html5.png" /></div>
<br />
<b>Perlukah web/blog valid HTML5?</b> dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :<br />
<ul>
<li>Membantu Search Engine meng-indeks dokumen website/blog lebih baik.</li>
<li>Render browser lebih baik dan lebih cepat</li>
<li>DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten</li>
<li>Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.</li>
<li>Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)</li>
<li>Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.</li>
</ul>
<b>Baguskah validasi Blogspot untuk SEO?</b> Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO.<br />
<br />
<div style="text-align: center;">
<b><a href="http://html5.validator.nu/" rel="nofollow" target="_blank">VALIDASI BLOG DISINI</a></b> atau <b><a href="http://validator.w3.org/" rel="nofollow" target="_blank">DISINI</a></b> | <b><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fthe-warasi.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0" rel="nofollow" target="_blank">CONTOH BLOG YANG TELAH DIVALIDASI</a></b></div>
<h4>
Cara Membuat Blog 100% Valid HTML5</h4>
<b>Langkah 1</b> : Backup template sebelum melakukan editing.<br />
<br />
<b>Langkah 2</b> : Cari kode seperti ini :<br />
<br />
<pre><code class="xml"><span class="pi"><?xml version="1.0" encoding="UTF-8" ?></span>
<span class="doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>
<span class="tag"><<span class="title">html</span> <span class="attribute">b:version</span>=<span class="value">'2'</span> <span class="attribute">class</span>=<span class="value">'v2'</span> <span class="attribute">expr:dir</span>=<span class="value">'data:blog.languageDirection'</span> <span class="attribute">xmlns</span>=<span class="value">'http://www.w3.org/1999/xhtml'</span> <span class="attribute">xmlns:b</span>=<span class="value">'http://www.google.com/2005/gml/b'</span> <span class="attribute">xmlns:data</span>=<span class="value">'http://www.google.com/2005/gml/data'</span> <span class="attribute">xmlns:expr</span>=<span class="value">'http://www.google.com/2005/gml/expr'</span>></span>
<span class="tag"><<span class="title">head</span>></span></code></pre>
<br />
ganti dengan :<br />
<br />
<pre><code class="xml"><span class="pi"><?xml version="1.0" encoding="UTF-8" ?></span>
<span class="doctype"><!DOCTYPE html></span>
<span class="tag"><<span class="title">HTML</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">'utf-8'</span>/></span></code></pre>
<br />
<b>Langkah 3</b> : Ganti kode <code></html></code> dengan <code></HTML></code> (paling bawah di template)<br />
<br />
<b>Langkah 4</b> : ganti kode ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:include</span> <span class="attribute">data</span>=<span class="value">'blog'</span> <span class="attribute">name</span>=<span class="value">'all-head-content'</span>/></span></code></pre>
<br />
dengan kode di bawah ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">meta</span> <span class="attribute">content</span>=<span class="value">'text/html; charset=UTF-8'</span> <span class="attribute">http-equiv</span>=<span class="value">'Content-Type'</span>/></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">content</span>=<span class="value">'blogger'</span> <span class="attribute">name</span>=<span class="value">'generator'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl + &quot;favicon.ico&quot;'</span> <span class="attribute">rel</span>=<span class="value">'icon'</span> <span class="attribute">type</span>=<span class="value">'image/x-icon'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.url'</span> <span class="attribute">rel</span>=<span class="value">'canonical'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl + &quot;feeds/posts/default&quot;'</span> <span class="attribute">expr:title</span>=<span class="value">'data:blog.title + &quot; - Atom&quot;'</span> <span class="attribute">rel</span>=<span class="value">'alternate'</span> <span class="attribute">type</span>=<span class="value">'application/atom+xml'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;'</span> <span class="attribute">expr:title</span>=<span class="value">'data:blog.title + &quot; - RSS&quot;'</span> <span class="attribute">rel</span>=<span class="value">'alternate'</span> <span class="attribute">type</span>=<span class="value">'application/rss+xml'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;'</span> <span class="attribute">expr:title</span>=<span class="value">'data:blog.title + &quot; - Atom&quot;'</span> <span class="attribute">rel</span>=<span class="value">'alternate'</span> <span class="attribute">type</span>=<span class="value">'application/atom+xml'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">'http://www.blogger.com/openid-server.g'</span> <span class="attribute">rel</span>=<span class="value">'openid.server'</span>/></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.homepageUrl'</span> <span class="attribute">rel</span>=<span class="value">'openid.delegate'</span>/></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.pageType == &quot;item&quot;'</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.postImageThumbnailUrl'</span>></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">expr:href</span>=<span class="value">'data:blog.postImageThumbnailUrl'</span> <span class="attribute">rel</span>=<span class="value">'image_src'</span>/></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:blog.metaDescription != &quot;&quot;'</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">expr:content</span>=<span class="value">'data:blog.metaDescription'</span> <span class="attribute">name</span>=<span class="value">'description'</span>/></span>
<span class="tag"><<span class="title">b:else</span>/></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">expr:content</span>=<span class="value">'data:blog.pageName + &quot; - &quot; + data:blog.title'</span> <span class="attribute">name</span>=<span class="value">'description'</span>/></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:if</span>></span></code></pre>
<b><br />
</b> <b>Langkah 5</b> : Ganti <code><b:skin><![CDATA[</code> dengan kode dibawah :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">'//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css'</span> <span class="attribute">rel</span>=<span class="value">'stylesheet'</span> <span class="attribute">type</span>=<span class="value">'text/css'</span>/></span>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<span class="tag"><<span class="title">b:skin</span>></span><span class="cdata"><![CDATA[*/]]
<style></span></code></pre>
<b><br />
</b> <b>Langkah 6</b> : Hapus semua kode ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:include</span> <span class="attribute">name</span>=<span class="value">'quickedit'</span>/></span></code></pre>
Setiap kali menambahkan widget baru, hapus kode di atas.<br />
<br />
<b>Langkah 7</b>: Hapus semua kode ini (opsional)<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">a</span> <span class="attribute">expr:name</span>=<span class="value">'data:post.id'</span>/></span></code></pre>
<br />
<b>Langkah 8 :</b> hapus kode seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:include</span> <span class="attribute">data</span>=<span class="value">'post'</span> <span class="attribute">name</span>=<span class="value">'postQuickEdit'</span>/></span></code></pre>
<br />
atau seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:includable</span> <span class="attribute">id</span>=<span class="value">'postQuickEdit'</span> <span class="attribute">var</span>=<span class="value">'post'</span>></span>
<span class="tag"><<span class="title">b:if</span> <span class="attribute">cond</span>=<span class="value">'data:post.editUrl'</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">expr:class</span>=<span class="value">'&quot;item-control &quot; + data:post.adminClass'</span>></span>
<span class="tag"><<span class="title">a</span> <span class="attribute">expr:href</span>=<span class="value">'data:post.editUrl'</span> <span class="attribute">expr:title</span>=<span class="value">'data:top.editPostMsg'</span>></span>
<span class="tag"><<span class="title">img</span> <span class="attribute">alt</span>=<span class="value">''</span> <span class="attribute">class</span>=<span class="value">'icon-action'</span> <span class="attribute">height</span>=<span class="value">'18'</span> <span class="attribute">src</span>=<span class="value">'http://img2.blogblog.com/img/icon18_edit_allbkg.gif'</span> <span class="attribute">width</span>=<span class="value">'18'</span>/></span>
<span class="tag"></<span class="title">a</span>></span>
<span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">b:if</span>></span>
<span class="tag"></<span class="title">b:includable</span>></span></code></pre>
<br />
<b>Langkah 9</b> : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'post-share-buttons goog-inline-block'</span>></span>...sampai...<span class="tag"></<span class="title">div</span>></span></code></pre>
<br />
<b>Langkah 10</b> : Ganti semua code <code>&</code> dengan <code>&amp;</code><br />
<br />
Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.<br />
<h4>
Harap Diperhatikan</h4>
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :<br />
<br />
1. Selalu gunakan tag <code>alt</code> pada gambar, contoh :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">img</span> <span class="attribute">alt</span>=<span class="value">"HTML5"</span> <span class="attribute">src</span>=<span class="value">"http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/s1600/html5.png"</span> /></span></code></pre>
<br />
2. Jangan gunakan <code>border="0"</code> pada gambar, sebagai gantinya tambahkan kode :<br />
<br />
<pre><code class="ini"><span class="setting">style=<span class="value"><span class="string">"border:none"</span></span></span></code></pre>
<br />
atau CSS terpisah seperti<br />
<br />
<pre><code class="css"><span class="tag">img</span><span class="rules">{<span class="rule"><span class="attribute">border</span>:<span class="value">none}</span></span></span></code></pre>
<br />
3. Pada <i>iFrame</i>, jangan menggunakan <code>frameborder="0"</code> atau <code>allowtransparency:"true"</code> <code>scrolling="no"</code>, sebagai gantinya gunakan kode :<br />
<br />
<pre><code class="ini"><span class="setting">style=<span class="value"><span class="string">"border:none;overflow:hidden"</span></span></span></code></pre>
<br />
atau CSS terpisah seperti<br />
<br />
<pre><code class="css"><span class="tag">iframe</span><span class="rules">{<span class="rule"><span class="attribute">border</span>:<span class="value">none;</span></span><span class="rule"><span class="attribute">overflow</span>:<span class="value">hidden}</span></span></span></code></pre>
<br />
4. Pada tag <code>a</code> jangan menggunakan tag <code>name</code> seperti :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">a</span> <span class="attribute">name</span>=<span class="value">'comment-form'</span>></span></code></pre>
<br />
sebagai gantinya gunakan <code>id</code> seperti :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">'#comment-form'</span>></span></code></pre>
<br />
5. Jangan ada dua <code>id</code> pada template.<br />
<br />
6. Hapus kode <code><b:include name='quickedit'/></code> setiap menambah widget baru.<br />
<br />
Artikel selanjutnya : <b><a href="http://the-warasi.blogspot.com/2013/09/tips-membuat-halaman-posting-valid-html5.html" target="_blank">Membuat Halaman Posting Valid HTML5</a></b><br />
<br />
Semoga bermanfaat...<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-44909285127192661392014-07-09T20:31:00.001+07:002014-07-09T21:18:31.592+07:00Validasi HTML5 pada Link Google Font<b><a href="http://the-warasi.blogspot.com/2014/07/validasi-html5-pada-link-google-font.html">Validasi HTML5 pada Link Google Font</a></b> - Setelah berkunjung ke blog Kang <a class="g-profile" data-gapiattached="true" data-gapiscan="true" data-onload="true" href="https://plus.google.com/117950600521728942551" target="_blank">+Adhy Suryadi</a> Kompi Ajaib, saya baru tau Link Font di Tag Head mengakibatkan Error Validasi HTML5. Sepengetahuan saya hal ini sebelumnya tidak terjadi. Entah perbaikan, atau bug pada validator. Soalnya saya coba di Validator yang lain aman-aman saja.<br />
<img alt="google font" class="thumbnail" src="http://2.bp.blogspot.com/-uKhKi081ZHk/Uz9qvm8pvuI/AAAAAAAAGaY/zlGJN8DkEEU/s1600/googlewebfont.gif" /><br />
Sebetulnya cara validasi HTML5 pada Link Font di Head sudah dijelaskan pada postingan Kompi Ajaib (baca : <a href="http://www.kompiajaib.com/2014/03/link-font-di-head-blog-error-validasi.html" rel="nofollow" target="_blank">Link Font di Head Blog Error Validasi HTML5</a>). Kalau saya simpulkan yaitu dengan dua alternatif yaitu :<br />
<br />
1. Memisahkan masing-masing font.<br />
<br />
2. Menggunakan @font-face pada CSS.<br />
<br />
Rasa penasaran menyelimuti perasaan saya, kenapa bisa error validasi? Sebelum kepada penyebab error, saya contohkan link font yang error seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">'http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald'</span> <span class="attribute">rel</span>=<span class="value">'stylesheet'</span> <span class="attribute">type</span>=<span class="value">'text/css'</span>/></span></code></pre>
<br />
Pesan yang muncul pada validator seperti ini :<br />
<blockquote class="tr_bq">
Bad value http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald for attribute href on element link: Illegal character in query: not a URL code point.</blockquote>
Selidik punya selidik ternyata permasalahannya ada pada tanda pembatas antar font (<span style="color: red;">|</span>) harus di escape menjadi <span style="color: red;">%7C</span>. Permasalahnnya sama dengan tanda <span style="color: red;">&</span> harus dirubah menjadi <span style="color: red;">&amp;</span>. Jadi dari kode error di atas harus dirubah menjadi<br />
<br />
<div style="text-align: center;">
<b><i><link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700<span style="color: red;">%7C</span>Ropa+Sans<span style="color: red;">%7C</span>Oswald' rel='stylesheet' type='text/css'/></i></b></div>
<br />
Itulah solusi yang saya tambahkan dari postingan Kang Adhy "Kompi Ajaib" Suryadi. Silahkan sobat memilih cara mana yang akan digunakan.<br />
<br />
Semoga bermanfaat...<br />
<br />Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-56394514779499054802014-07-09T20:15:00.002+07:002014-07-09T20:19:32.702+07:00Membuat Blog Valid CSS3<div class="separator" style="clear: both; text-align: center;">
<a href="http://the-warasi.blogspot.com/2014/07/membuat-blog-valid-css3.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="validasi css3" src="http://4.bp.blogspot.com/-jpCFIUz82to/Uj-S8u2SP9I/AAAAAAAAFh8/bXtLwyScTm8/s1600/validasi-css3.png" /></a></div>
<b><a href="http://the-warasi.blogspot.com/2014/07/membuat-blog-valid-css3.html">How to validate CSS3</a></b> - Setelah berkutat beberapa lama dengan <a href="http://the-warasi.blogspot.com/search/label/HTML5" rel="nofollow" target="_blank">Validasi HTML5</a>, kini saya coba untuk berbagi Validasi CSS3. Terlambat kayaknya saya berbagi tutorial ini, tapi sebuah pepatah mengatakan <i>better late than never</i>, lebih baik terlambat daripada tidak sama sekali.<br />
<br />
Diantara yang menyebabkan terlambatnya saya berbagi tentang validasi ini, saya tidak pernah memposting sesuatu yang belum pernah saya coba. Ironis kan? sebuah blog membahas validasi tapi blognya sendiri belum valid.<br />
<blockquote class="tr_bq">
Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.</blockquote>
Bagi sobat yang ingin mencoba validasi CSS3, baik menghilangkan <i>error</i> atau <i>warning</i>, silahkan dicoba trik yang saya gunakan :<br />
<h4>
Non Aktifkan CSS Reset Stylesheet Blogger</h4>
Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini :<br />
<br />
<pre><code class="xml"><span class="tag"><<span class="title">b:skin</span>></span><span class="cdata"><![CDATA[*
......
KODE CSS DI SINI
......
]]></span><span class="tag"></<span class="title">b:skin</span>></span></code></pre>
<br />
ganti <code><b:skin><![CDATA[*</code> dengan <br />
<br />
<pre><code class="xml">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <span class="tag"><<span class="title">b:skin</span>></span><span class="cdata"><![CDATA[*/]]></span><span class="tag"></<span class="title">b:skin</span>></span>
<span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">'text/css'</span>></span><span class="css"></span></code></pre>
<br />
ganti kode <code>]]></b:skin></code> dengan kode :<br />
<br />
<pre><code class="xml"><span class="tag"></<span class="title">style</span>></span></code></pre>
<br />
Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu.<br />
<br />
<h4>
Hapus Beberapa Kode</h4>
Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode <i>rounded corner</i> (ujung membulat) biasanya kodenya akan seperti ini :<br />
<br />
<pre><code class="css">-<span class="tag">moz</span>-<span class="tag">border</span>-<span class="tag">radius</span><span class="pseudo">:5px</span>;
-<span class="tag">khtml</span>-<span class="tag">border</span>-<span class="tag">radius</span><span class="pseudo">:5px</span>;
-<span class="tag">o</span>-<span class="tag">border</span>-<span class="tag">radius</span><span class="pseudo">:5px</span>;
-<span class="tag">webkit</span>-<span class="tag">border</span>-<span class="tag">radius</span><span class="pseudo">:5px</span>;
<span class="tag">border</span>-<span class="tag">radius</span><span class="pseudo">:5px</span>;</code></pre>
<br />
dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode <code>border-radius:5px</code>, oleh karena itu, hapus semua kode yang berawalan:<br />
<br />
<pre><code class="diff"><span class="deletion">-moz-</span>
<span class="deletion">-khtml-</span>
<span class="deletion">-o-</span>
<span class="deletion">-webkit-</span></code></pre>
<br />
Hapus juga kode dengan awalan<br />
<br />
<pre><code class="http"><span class="attribute">DXImageTransform</span></code></pre>
<h4>
Perhatikan Beberapa Perintah Validator</h4>
Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini :<br />
<br />
<i>Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.</i><br />
<br />
Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya<br />
<br />
<pre><code class="http"><span class="attribute">font-family</span>: <span class="string">'Open Sans', 'Segoe UI', Arial, sans-serif</span></code></pre>
<br />
Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini.Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-65485269240317523432014-07-09T12:24:00.001+07:002014-07-14T12:58:03.809+07:00Tabel Kata Kunci Warna<table class="tg-table-alvin" style="width: 100%;"><tbody>
<tr><th>Nama Warna</th><th>Kode Warna</th><th>Warna</th></tr>
<tr><td>Black</td><td>#000000</td><td style="background-color: black;"></td></tr>
<tr><td>Navy</td><td>#000080</td><td style="background-color: navy;"></td></tr>
<tr><td>DarkBlue</td><td>#00008B</td><td style="background-color: darkblue;"></td></tr>
<tr><td>MediumBlue</td><td>#0000CD</td><td style="background-color: mediumblue;"></td></tr>
<tr><td>Blue</td><td>#0000FF</td><td style="background-color: blue;"></td></tr>
<tr><td>DarkGreen</td><td>#006400</td><td style="background-color: darkgreen;"></td></tr>
<tr><td>Green</td><td>#008000</td><td style="background-color: green;"></td></tr>
<tr><td>Teal</td><td>#008080</td><td style="background-color: teal;"></td></tr>
<tr><td>DarkCyan</td><td>#008B8B</td><td style="background-color: darkcyan;"></td></tr>
<tr><td>DeepSkyBlue</td><td>#00BFFF</td><td style="background-color: deepskyblue;"></td></tr>
<tr><td>DarkTurquoise</td><td>#00CED1</td><td style="background-color: darkturquoise;"></td></tr>
<tr><td>MediumSpringGreen</td><td>#00FA9A</td><td style="background-color: mediumspringgreen;"></td></tr>
<tr><td>Lime</td><td>#00FF00</td><td style="background-color: lime;"></td></tr>
<tr><td>SpringGreen</td><td>#00FF7F</td><td style="background-color: springgreen;"></td></tr>
<tr><td>Aqua</td><td>#00FFFF</td><td style="background-color: cyan;"></td></tr>
<tr><td>Cyan</td><td>#00FFFF</td><td style="background-color: cyan;"></td></tr>
<tr><td>MidnightBlue</td><td>#191970</td><td style="background-color: midnightblue;"></td></tr>
<tr><td>DodgerBlue</td><td>#1E90FF</td><td style="background-color: dodgerblue;"></td></tr>
<tr><td>LightSeaGreen</td><td>#20B2AA</td><td style="background-color: lightseagreen;"></td></tr>
<tr><td>ForestGreen</td><td>#228B22</td><td style="background-color: forestgreen;"></td></tr>
<tr><td>SeaGreen</td><td>#2E8B57</td><td style="background-color: seagreen;"></td></tr>
<tr><td>DarkSlateGray</td><td>#2F4F4F</td><td style="background-color: darkslategrey;"></td></tr>
<tr><td>DarkSlateGrey</td><td>#2F4F4F</td><td style="background-color: darkslategrey;"></td></tr>
<tr><td>LimeGreen</td><td>#32CD32</td><td style="background-color: limegreen;"></td></tr>
<tr><td>MediumSeaGreen</td><td>#3CB371</td><td style="background-color: mediumseagreen;"></td></tr>
<tr><td>Turquoise</td><td>#40E0D0</td><td style="background-color: turquoise;"></td></tr>
<tr><td>RoyalBlue</td><td>#4169E1</td><td style="background-color: royalblue;"></td></tr>
<tr><td>SteelBlue</td><td>#4682B4</td><td style="background-color: steelblue;"></td></tr>
<tr><td>DarkSlateBlue</td><td>#483D8B</td><td style="background-color: darkslateblue;"></td></tr>
<tr><td>MediumTurquoise</td><td>#48D1CC</td><td style="background-color: mediumturquoise;"></td></tr>
<tr><td>Indigo </td><td>#4B0082</td><td style="background-color: indigo;"></td></tr>
<tr><td>DarkOliveGreen</td><td>#556B2F</td><td style="background-color: darkolivegreen;"></td></tr>
<tr><td>CadetBlue</td><td>#5F9EA0</td><td style="background-color: cadetblue;"></td></tr>
<tr><td>CornflowerBlue</td><td>#6495ED</td><td style="background-color: cornflowerblue;"></td></tr>
<tr><td>MediumAquaMarine</td><td>#66CDAA</td><td style="background-color: mediumaquamarine;"></td></tr>
<tr><td>DimGray</td><td>#696969</td><td style="background-color: dimgrey;"></td></tr>
<tr><td>DimGrey</td><td>#696969</td><td style="background-color: dimgrey;"></td></tr>
<tr><td>SlateBlue</td><td>#6A5ACD</td><td style="background-color: slateblue;"></td></tr>
<tr><td>OliveDrab</td><td>#6B8E23</td><td style="background-color: olivedrab;"></td></tr>
<tr><td>SlateGray</td><td>#708090</td><td style="background-color: slategrey;"></td></tr>
<tr><td>SlateGrey</td><td>#708090</td><td style="background-color: slategrey;"></td></tr>
<tr><td>LightSlateGray</td><td>#778899</td><td style="background-color: lightslategrey;"></td></tr>
<tr><td>LightSlateGrey</td><td>#778899</td><td style="background-color: lightslategrey;"></td></tr>
<tr><td>MediumSlateBlue</td><td>#7B68EE</td><td style="background-color: mediumslateblue;"></td></tr>
<tr><td>LawnGreen</td><td>#7CFC00</td><td style="background-color: lawngreen;"></td></tr>
<tr><td>Chartreuse</td><td>#7FFF00</td><td style="background-color: chartreuse;"></td></tr>
<tr><td>Aquamarine</td><td>#7FFFD4</td><td style="background-color: aquamarine;"></td></tr>
<tr><td>Maroon</td><td>#800000</td><td style="background-color: maroon;"></td></tr>
<tr><td>Purple</td><td>#800080</td><td style="background-color: purple;"></td></tr>
<tr><td>Olive</td><td>#808000</td><td style="background-color: olive;"></td></tr>
<tr><td>Gray</td><td>#808080</td><td style="background-color: grey;"></td></tr>
<tr><td>Grey</td><td>#808080</td><td style="background-color: grey;"></td></tr>
<tr><td>SkyBlue</td><td>#87CEEB</td><td style="background-color: skyblue;"></td></tr>
<tr><td>LightSkyBlue</td><td>#87CEFA</td><td style="background-color: lightskyblue;"></td></tr>
<tr><td>BlueViolet</td><td>#8A2BE2</td><td style="background-color: blueviolet;"></td></tr>
<tr><td>DarkRed</td><td>#8B0000</td><td style="background-color: darkred;"></td></tr>
<tr><td>DarkMagenta</td><td>#8B008B</td><td style="background-color: darkmagenta;"></td></tr>
<tr><td>SaddleBrown</td><td>#8B4513</td><td style="background-color: saddlebrown;"></td></tr>
<tr><td>DarkSeaGreen</td><td>#8FBC8F</td><td style="background-color: darkseagreen;"></td></tr>
<tr><td>LightGreen</td><td>#90EE90</td><td style="background-color: lightgreen;"></td></tr>
<tr><td>MediumPurple</td><td>#9370D8</td><td style="background-color: #9370d8;"></td></tr>
<tr><td>DarkViolet</td><td>#9400D3</td><td style="background-color: darkviolet;"></td></tr>
<tr><td>PaleGreen</td><td>#98FB98</td><td style="background-color: palegreen;"></td></tr>
<tr><td>DarkOrchid</td><td>#9932CC</td><td style="background-color: darkorchid;"></td></tr>
<tr><td>YellowGreen</td><td>#9ACD32</td><td style="background-color: yellowgreen;"></td></tr>
<tr><td>Sienna</td><td>#A0522D</td><td style="background-color: sienna;"></td></tr>
<tr><td>Brown</td><td>#A52A2A</td><td style="background-color: brown;"></td></tr>
<tr><td>DarkGray</td><td>#A9A9A9</td><td style="background-color: darkgrey;"></td></tr>
<tr><td>DarkGrey</td><td>#A9A9A9</td><td style="background-color: darkgrey;"></td></tr>
<tr><td>LightBlue</td><td>#ADD8E6</td><td style="background-color: lightblue;"></td></tr>
<tr><td>GreenYellow</td><td>#ADFF2F</td><td style="background-color: greenyellow;"></td></tr>
<tr><td>PaleTurquoise</td><td>#AFEEEE</td><td style="background-color: paleturquoise;"></td></tr>
<tr><td>LightSteelBlue</td><td>#B0C4DE</td><td style="background-color: lightsteelblue;"></td></tr>
<tr><td>PowderBlue</td><td>#B0E0E6</td><td style="background-color: powderblue;"></td></tr>
<tr><td>FireBrick</td><td>#B22222</td><td style="background-color: firebrick;"></td></tr>
<tr><td>DarkGoldenRod</td><td>#B8860B</td><td style="background-color: darkgoldenrod;"></td></tr>
<tr><td>MediumOrchid</td><td>#BA55D3</td><td style="background-color: mediumorchid;"></td></tr>
<tr><td>RosyBrown</td><td>#BC8F8F</td><td style="background-color: rosybrown;"></td></tr>
<tr><td>DarkKhaki</td><td>#BDB76B</td><td style="background-color: darkkhaki;"></td></tr>
<tr><td>Silver</td><td>#C0C0C0</td><td style="background-color: silver;"></td></tr>
<tr><td>MediumVioletRed</td><td>#C71585</td><td style="background-color: mediumvioletred;"></td></tr>
<tr><td>IndianRed </td><td>#CD5C5C</td><td style="background-color: indianred;"></td></tr>
<tr><td>Peru</td><td>#CD853F</td><td style="background-color: peru;"></td></tr>
<tr><td>Chocolate</td><td>#D2691E</td><td style="background-color: chocolate;"></td></tr>
<tr><td>Tan</td><td>#D2B48C</td><td style="background-color: tan;"></td></tr>
<tr><td>LightGray</td><td>#D3D3D3</td><td style="background-color: lightgrey;"></td></tr>
<tr><td>LightGrey</td><td>#D3D3D3</td><td style="background-color: lightgrey;"></td></tr>
<tr><td>PaleVioletRed</td><td>#D87093</td><td style="background-color: #d87093;"></td></tr>
<tr><td>Thistle</td><td>#D8BFD8</td><td style="background-color: thistle;"></td></tr>
<tr><td>Orchid</td><td>#DA70D6</td><td style="background-color: orchid;"></td></tr>
<tr><td>GoldenRod</td><td>#DAA520</td><td style="background-color: goldenrod;"></td></tr>
<tr><td>Crimson</td><td>#DC143C</td><td style="background-color: crimson;"></td></tr>
<tr><td>Gainsboro</td><td>#DCDCDC</td><td style="background-color: gainsboro;"></td></tr>
<tr><td>Plum</td><td>#DDA0DD</td><td style="background-color: plum;"></td></tr>
<tr><td>BurlyWood</td><td>#DEB887</td><td style="background-color: burlywood;"></td></tr>
<tr><td>LightCyan</td><td>#E0FFFF</td><td style="background-color: lightcyan;"></td></tr>
<tr><td>Lavender</td><td>#E6E6FA</td><td style="background-color: lavender;"></td></tr>
<tr><td>DarkSalmon</td><td>#E9967A</td><td style="background-color: darksalmon;"></td></tr>
<tr><td>Violet</td><td>#EE82EE</td><td style="background-color: violet;"></td></tr>
<tr><td>PaleGoldenRod</td><td>#EEE8AA</td><td style="background-color: palegoldenrod;"></td></tr>
<tr><td>LightCoral</td><td>#F08080</td><td style="background-color: lightcoral;"></td></tr>
<tr><td>Khaki</td><td>#F0E68C</td><td style="background-color: khaki;"></td></tr>
<tr><td>AliceBlue</td><td>#F0F8FF</td><td style="background-color: aliceblue;"></td></tr>
<tr><td>HoneyDew</td><td>#F0FFF0</td><td style="background-color: honeydew;"></td></tr>
<tr><td>Azure</td><td>#F0FFFF</td><td style="background-color: azure;"></td></tr>
<tr><td>SandyBrown</td><td>#F4A460</td><td style="background-color: sandybrown;"></td></tr>
<tr><td>Wheat</td><td>#F5DEB3</td><td style="background-color: wheat;"></td></tr>
<tr><td>Beige</td><td>#F5F5DC</td><td style="background-color: beige;"></td></tr>
<tr><td>WhiteSmoke</td><td>#F5F5F5</td><td style="background-color: whitesmoke;"></td></tr>
<tr><td>MintCream</td><td>#F5FFFA</td><td style="background-color: mintcream;"></td></tr>
<tr><td>GhostWhite</td><td>#F8F8FF</td><td style="background-color: ghostwhite;"></td></tr>
<tr><td>Salmon</td><td>#FA8072</td><td style="background-color: salmon;"></td></tr>
<tr><td>AntiqueWhite</td><td>#FAEBD7</td><td style="background-color: antiquewhite;"></td></tr>
<tr><td>Linen</td><td>#FAF0E6</td><td style="background-color: linen;"></td></tr>
<tr><td>LightGoldenRodYellow</td><td>#FAFAD2</td><td style="background-color: lightgoldenrodyellow;"></td></tr>
<tr><td>OldLace</td><td>#FDF5E6</td><td style="background-color: oldlace;"></td></tr>
<tr><td>Red</td><td>#FF0000</td><td style="background-color: red;"></td></tr>
<tr><td>Fuchsia</td><td>#FF00FF</td><td style="background-color: magenta;"></td></tr>
<tr><td>Magenta</td><td>#FF00FF</td><td style="background-color: magenta;"></td></tr>
<tr><td>DeepPink</td><td>#FF1493</td><td style="background-color: deeppink;"></td></tr>
<tr><td>OrangeRed</td><td>#FF4500</td><td style="background-color: orangered;"></td></tr>
<tr><td>Tomato</td><td>#FF6347</td><td style="background-color: tomato;"></td></tr>
<tr><td>HotPink</td><td>#FF69B4</td><td style="background-color: hotpink;"></td></tr>
<tr><td>Coral</td><td>#FF7F50</td><td style="background-color: coral;"></td></tr>
<tr><td>Darkorange</td><td>#FF8C00</td><td style="background-color: darkorange;"></td></tr>
<tr><td>LightSalmon</td><td>#FFA07A</td><td style="background-color: lightsalmon;"></td></tr>
<tr><td>Orange</td><td>#FFA500</td><td style="background-color: orange;"></td></tr>
<tr><td>LightPink</td><td>#FFB6C1</td><td style="background-color: lightpink;"></td></tr>
<tr><td>Pink</td><td>#FFC0CB</td><td style="background-color: pink;"></td></tr>
<tr><td>Gold</td><td>#FFD700</td><td style="background-color: gold;"></td></tr>
<tr><td>PeachPuff</td><td>#FFDAB9</td><td style="background-color: peachpuff;"></td></tr>
<tr><td>NavajoWhite</td><td>#FFDEAD</td><td style="background-color: navajowhite;"></td></tr>
<tr><td>Moccasin</td><td>#FFE4B5</td><td style="background-color: moccasin;"></td></tr>
<tr><td>Bisque</td><td>#FFE4C4</td><td style="background-color: bisque;"></td></tr>
<tr><td>MistyRose</td><td>#FFE4E1</td><td style="background-color: mistyrose;"></td></tr>
<tr><td>BlanchedAlmond</td><td>#FFEBCD</td><td style="background-color: blanchedalmond;"></td></tr>
<tr><td>PapayaWhip</td><td>#FFEFD5</td><td style="background-color: papayawhip;"></td></tr>
<tr><td>LavenderBlush</td><td>#FFF0F5</td><td style="background-color: lavenderblush;"></td></tr>
<tr><td>SeaShell</td><td>#FFF5EE</td><td style="background-color: seashell;"></td></tr>
<tr><td>Cornsilk</td><td>#FFF8DC</td><td style="background-color: cornsilk;"></td></tr>
<tr><td>LemonChiffon</td><td>#FFFACD</td><td style="background-color: lemonchiffon;"></td></tr>
<tr><td>FloralWhite</td><td>#FFFAF0</td><td style="background-color: floralwhite;"></td></tr>
<tr><td>Snow</td><td>#FFFAFA</td><td style="background-color: snow;"></td></tr>
<tr><td>Yellow</td><td>#FFFF00</td><td style="background-color: yellow;"></td></tr>
<tr><td>LightYellow</td><td>#FFFFE0</td><td style="background-color: lightyellow;"></td></tr>
<tr><td>Ivory</td><td>#FFFFF0</td><td style="background-color: ivory;"></td></tr>
<tr><td>White</td><td>#FFFFFF</td><td style="background-color: white;"></td></tr>
</tbody></table><br />
<div class="reference-link">Sumber: <a href="http://www.w3schools.com/" rel="nofollow" target="_blank" title="W3Schools">W3Schools</a></div><div class="image" style="background-color: #87c71d;"></div>Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-27240604931272587452014-07-09T12:19:00.000+07:002014-07-11T11:53:27.410+07:00Web Safe Color<table class="tg-table-alvin"><tbody>
<tr><td style="background-color: black; color: white;">000000</td><td style="background-color: #000033; color: white;">000033</td><td style="background-color: #000066; color: white;">000066</td><td style="background-color: #000099; color: white;">000099</td><td style="background-color: #0000cc; color: white;">0000CC</td><td style="background-color: blue; color: white;">0000FF</td></tr>
<tr><td style="background-color: #003300; color: white;">003300</td><td style="background-color: #003333; color: white;">003333</td><td style="background-color: #003366; color: white;">003366</td><td style="background-color: #003399; color: white;">003399</td><td style="background-color: #0033cc; color: white;">0033CC</td><td style="background-color: #0033ff; color: white;">0033FF</td></tr>
<tr><td style="background-color: #006600; color: white;">006600</td><td style="background-color: #006633; color: white;">006633</td><td style="background-color: #006666; color: white;">006666</td><td style="background-color: #006699; color: white;">006699</td><td style="background-color: #0066cc; color: white;">0066CC</td><td style="background-color: #0066ff; color: white;">0066FF</td></tr>
<tr><td style="background-color: #009900;">009900</td><td style="background-color: #009933;">009933</td><td style="background-color: #009966;">009966</td><td style="background-color: #009999;">009999</td><td style="background-color: #0099cc;">0099CC</td><td style="background-color: #0099ff;">0099FF</td></tr>
<tr><td style="background-color: #00cc00;">00CC00</td><td style="background-color: #00cc33;">00CC33</td><td style="background-color: #00cc66;">00CC66</td><td style="background-color: #00cc99;">00CC99</td><td style="background-color: #00cccc;">00CCCC</td><td style="background-color: #00ccff;">00CCFF</td></tr>
<tr><td style="background-color: lime;">00FF00</td><td style="background-color: #00ff33;">00FF33</td><td style="background-color: #00ff66;">00FF66</td><td style="background-color: #00ff99;">00FF99</td><td style="background-color: #00ffcc;">00FFCC</td><td style="background-color: cyan;">00FFFF</td></tr>
<tr><td style="background-color: #330000; color: white;">330000</td><td style="background-color: #330033; color: white;">330033</td><td style="background-color: #330066; color: white;">330066</td><td style="background-color: #330099; color: white;">330099</td><td style="background-color: #3300cc; color: white;">3300CC</td><td style="background-color: #3300ff; color: white;">3300FF</td></tr>
<tr><td style="background-color: #333300; color: white;">333300</td><td style="background-color: #333333; color: white;">333333</td><td style="background-color: #333366; color: white;">333366</td><td style="background-color: #333399; color: white;">333399</td><td style="background-color: #3333cc; color: white;">3333CC</td><td style="background-color: #3333ff; color: white;">3333FF</td></tr>
<tr><td style="background-color: #336600; color: white;">336600</td><td style="background-color: #336633; color: white;">336633</td><td style="background-color: #336666; color: white;">336666</td><td style="background-color: #336699; color: white;">336699</td><td style="background-color: #3366cc; color: white;">3366CC</td><td style="background-color: #3366ff; color: white;">3366FF</td></tr>
<tr><td style="background-color: #339900;">339900</td><td style="background-color: #339933;">339933</td><td style="background-color: #339966;">339966</td><td style="background-color: #339999;">339999</td><td style="background-color: #3399cc;">3399CC</td><td style="background-color: #3399ff;">3399FF</td></tr>
<tr><td style="background-color: #33cc00;">33CC00</td><td style="background-color: #33cc33;">33CC33</td><td style="background-color: #33cc66;">33CC66</td><td style="background-color: #33cc99;">33CC99</td><td style="background-color: #33cccc;">33CCCC</td><td style="background-color: #33ccff;">33CCFF</td></tr>
<tr><td style="background-color: #33ff00;">33FF00</td><td style="background-color: #33ff33;">33FF33</td><td style="background-color: #33ff66;">33FF66</td><td style="background-color: #33ff99;">33FF99</td><td style="background-color: #33ffcc;">33FFCC</td><td style="background-color: #33ffff;">33FFFF</td></tr>
<tr><td style="background-color: #660000; color: white;">660000</td><td style="background-color: #660033; color: white;">660033</td><td style="background-color: #660066; color: white;">660066</td><td style="background-color: #660099; color: white;">660099</td><td style="background-color: #6600cc; color: white;">6600CC</td><td style="background-color: #6600ff; color: white;">6600FF</td></tr>
<tr><td style="background-color: #663300; color: white;">663300</td><td style="background-color: #663333; color: white;">663333</td><td style="background-color: #663366; color: white;">663366</td><td style="background-color: #663399; color: white;">663399</td><td style="background-color: #6633cc; color: white;">6633CC</td><td style="background-color: #6633ff; color: white;">6633FF</td></tr>
<tr><td style="background-color: #666600; color: white;">666600</td><td style="background-color: #666633; color: white;">666633</td><td style="background-color: #666666; color: white;">666666</td><td style="background-color: #666699; color: white;">666699</td><td style="background-color: #6666cc; color: white;">6666CC</td><td style="background-color: #6666ff; color: white;">6666FF</td></tr>
<tr><td style="background-color: #669900;">669900</td><td style="background-color: #669933;">669933</td><td style="background-color: #669966;">669966</td><td style="background-color: #669999;">669999</td><td style="background-color: #6699cc;">6699CC</td><td style="background-color: #6699ff;">6699FF</td></tr>
<tr><td style="background-color: #66cc00;">66CC00</td><td style="background-color: #66cc33;">66CC33</td><td style="background-color: #66cc66;">66CC66</td><td style="background-color: #66cc99;">66CC99</td><td style="background-color: #66cccc;">66CCCC</td><td style="background-color: #66ccff;">66CCFF</td></tr>
<tr><td style="background-color: #66ff00;">66FF00</td><td style="background-color: #66ff33;">66FF33</td><td style="background-color: #66ff66;">66FF66</td><td style="background-color: #66ff99;">66FF99</td><td style="background-color: #66ffcc;">66FFCC</td><td style="background-color: #66ffff;">66FFFF</td></tr>
<tr><td style="background-color: #990000; color: white;">990000</td><td style="background-color: #990033; color: white;">990033</td><td style="background-color: #990066; color: white;">990066</td><td style="background-color: #990099; color: white;">990099</td><td style="background-color: #9900cc; color: white;">9900CC</td><td style="background-color: #9900ff; color: white;">9900FF</td></tr>
<tr><td style="background-color: #993300; color: white;">993300</td><td style="background-color: #993333; color: white;">993333</td><td style="background-color: #993366; color: white;">993366</td><td style="background-color: #993399; color: white;">993399</td><td style="background-color: #9933cc; color: white;">9933CC</td><td style="background-color: #9933ff; color: white;">9933FF</td></tr>
<tr><td style="background-color: #996600; color: white;">996600</td><td style="background-color: #996633; color: white;">996633</td><td style="background-color: #996666; color: white;">996666</td><td style="background-color: #996699; color: white;">996699</td><td style="background-color: #9966cc; color: white;">9966CC</td><td style="background-color: #9966ff; color: white;">9966FF</td></tr>
<tr><td style="background-color: #999900;">999900</td><td style="background-color: #999933;">999933</td><td style="background-color: #999966;">999966</td><td style="background-color: #999999;">999999</td><td style="background-color: #9999cc;">9999CC</td><td style="background-color: #9999ff;">9999FF</td></tr>
<tr><td style="background-color: #99cc00;">99CC00</td><td style="background-color: #99cc33;">99CC33</td><td style="background-color: #99cc66;">99CC66</td><td style="background-color: #99cc99;">99CC99</td><td style="background-color: #99cccc;">99CCCC</td><td style="background-color: #99ccff;">99CCFF</td></tr>
<tr><td style="background-color: #99ff00;">99FF00</td><td style="background-color: #99ff33;">99FF33</td><td style="background-color: #99ff66;">99FF66</td><td style="background-color: #99ff99;">99FF99</td><td style="background-color: #99ffcc;">99FFCC</td><td style="background-color: #99ffff;">99FFFF</td></tr>
<tr><td style="background-color: #cc0000; color: white;">CC0000</td><td style="background-color: #cc0033; color: white;">CC0033</td><td style="background-color: #cc0066; color: white;">CC0066</td><td style="background-color: #cc0099; color: white;">CC0099</td><td style="background-color: #cc00cc; color: white;">CC00CC</td><td style="background-color: #cc00ff; color: white;">CC00FF</td></tr>
<tr><td style="background-color: #cc3300; color: white;">CC3300</td><td style="background-color: #cc3333; color: white;">CC3333</td><td style="background-color: #cc3366; color: white;">CC3366</td><td style="background-color: #cc3399; color: white;">CC3399</td><td style="background-color: #cc33cc; color: white;">CC33CC</td><td style="background-color: #cc33ff; color: white;">CC33FF</td></tr>
<tr><td style="background-color: #cc6600; color: white;">CC6600</td><td style="background-color: #cc6633; color: white;">CC6633</td><td style="background-color: #cc6666; color: white;">CC6666</td><td style="background-color: #cc6699; color: white;">CC6699</td><td style="background-color: #cc66cc; color: white;">CC66CC</td><td style="background-color: #cc66ff; color: white;">CC66FF</td></tr>
<tr><td style="background-color: #cc9900;">CC9900</td><td style="background-color: #cc9933;">CC9933</td><td style="background-color: #cc9966;">CC9966</td><td style="background-color: #cc9999;">CC9999</td><td style="background-color: #cc99cc;">CC99CC</td><td style="background-color: #cc99ff;">CC99FF</td></tr>
<tr><td style="background-color: #cccc00;">CCCC00</td><td style="background-color: #cccc33;">CCCC33</td><td style="background-color: #cccc66;">CCCC66</td><td style="background-color: #cccc99;">CCCC99</td><td style="background-color: #cccccc;">CCCCCC</td><td style="background-color: #ccccff;">CCCCFF</td></tr>
<tr><td style="background-color: #ccff00;">CCFF00</td><td style="background-color: #ccff33;">CCFF33</td><td style="background-color: #ccff66;">CCFF66</td><td style="background-color: #ccff99;">CCFF99</td><td style="background-color: #ccffcc;">CCFFCC</td><td style="background-color: #ccffff;">CCFFFF</td></tr>
<tr><td style="background-color: red; color: white;">FF0000</td><td style="background-color: #ff0033; color: white;">FF0033</td><td style="background-color: #ff0066; color: white;">FF0066</td><td style="background-color: #ff0099; color: white;">FF0099</td><td style="background-color: #ff00cc; color: white;">FF00CC</td><td style="background-color: magenta; color: white;">FF00FF</td></tr>
<tr><td style="background-color: #ff3300; color: white;">FF3300</td><td style="background-color: #ff3333; color: white;">FF3333</td><td style="background-color: #ff3366; color: white;">FF3366</td><td style="background-color: #ff3399; color: white;">FF3399</td><td style="background-color: #ff33cc; color: white;">FF33CC</td><td style="background-color: #ff33ff; color: white;">FF33FF</td></tr>
<tr><td style="background-color: #ff6600; color: white;">FF6600</td><td style="background-color: #ff6633; color: white;">FF6633</td><td style="background-color: #ff6666; color: white;">FF6666</td><td style="background-color: #ff6699; color: white;">FF6699</td><td style="background-color: #ff66cc; color: white;">FF66CC</td><td style="background-color: #ff66ff; color: white;">FF66FF</td></tr>
<tr><td style="background-color: #ff9900;">FF9900</td><td style="background-color: #ff9933;">FF9933</td><td style="background-color: #ff9966;">FF9966</td><td style="background-color: #ff9999;">FF9999</td><td style="background-color: #ff99cc;">FF99CC</td><td style="background-color: #ff99ff;">FF99FF</td></tr>
<tr><td style="background-color: #ffcc00;">FFCC00</td><td style="background-color: #ffcc33;">FFCC33</td><td style="background-color: #ffcc66;">FFCC66</td><td style="background-color: #ffcc99;">FFCC99</td><td style="background-color: #ffcccc;">FFCCCC</td><td style="background-color: #ffccff;">FFCCFF</td></tr>
<tr><td style="background-color: yellow;">FFFF00</td><td style="background-color: #ffff33;">FFFF33</td><td style="background-color: #ffff66;">FFFF66</td><td style="background-color: #ffff99;">FFFF99</td><td style="background-color: #ffffcc;">FFFFCC</td><td style="background-color: white;">FFFFFF</td></tr>
</tbody></table><br />
<div class="reference-link">Sumber: <a href="http://www.w3schools.com/" rel="nofollow" target="_blank" title="W3Schools">W3Schools</a></div><br />
Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0tag:blogger.com,1999:blog-8007268170958119300.post-33623064016112691012014-07-09T08:30:00.000+07:002014-07-11T11:53:27.414+07:00Generator Kode Warna<style type="text/css" scoped>
#related-post,#comments,#pembalut-samping,.related-post,.post-footer{display:none}
.post h2.post-title { font-size : 1.6em; margin-left: 450px; padding : 10px 10px 12px 0; }
.post h1.post-title { padding : 10px 10px 0 10px; font-size : 1.8em; margin-bottom : 4px; }
.post h2.post-title a, .post h1.post-title a,
.post h2.post-title a:visited,
.post h1.post-title a:visited { color : #555; }
.post h2.post-title a:hover,
.post h1.post-title a:hover { color : #16a085; }
.post-body { padding : 0 10px 10px 10px; font-size : 14px; line-height : 1.4em; text-align : justify; }
#pembalut-posting{width:100%;padding:0}
.content-wrapper{position:relative;max-width:95%;margin:0 auto}
.dte_color-area {
height: 400px;
padding: 20px;
font-weight: bold;
font-size: 16px;
}
.dte_color-area-color {
display: block;
text-align: right;
}
.dte_cp {
width: 338px;
height: 268px;
box-shadow: 0 1px 3px rgba(0,0,0,.7);
box-shadow: 0 1px 3px rgba(0,0,0,.7);
box-shadow: 0 1px 3px rgba(0,0,0,.7);
overflow: hidden;
position: absolute;
background-color: #222;
font: normal bold 11px/23px Sans-Serif;
color: #aaa;
display: none;
}
.dte_cp-color {
width: 150px;
height: 150px;
position: absolute;
top: 5px;
left: 5px;
background-color: #ff0;
overflow: hidden;
cursor: crosshair;
}
.dte_cp-hue {
position: absolute;
top: 5px;
left: 160px;
width: 35px;
height: 150px;
cursor: n-resize;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAACYCAYAAAAGJ9LXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAB3UlEQVRoQ+1aPU/DQAz1NQXxMYFYYEBZmPkV/Gp+BTMbAywIJooqhYRc7npRRIc73rNoiStZ7VA/2c/2ne3E1XXdCenjPNj927ssu99jNs7J3fmZDGCPT6+ybAGwhZOb6wtZBA9PCCIqYKe9Zagky45BN72+jpvUAKB8eX0dNy0A2clsSVte+MbZv+SMeJ61ciSopMNx1f9CRQfso4dFJVn2Cbrp9XXcRMn3+skylC+vb5yV593cOKMmrQdDEndSAXTLUEC9U8M4y7q5JgGgcbauRFAZJxTOTBGHV06rEcE4Q50GmHGWvfJIk7Bx9secUcvJCj0rmmHjZYdjSe7tCWeHjQgq45oQaQ42uml9g/aNoauNu23O+BrBqJbtLmdUN6kBMM6yGvewc5lX0lLzjFoBu5u0xllWOU0uFM7OZajNA2lgSYXuexSkrfX6E7CSpmfbf3XAEBc3usky0lAXTlqUL70AGGfZwUmpYZyVc0avACQIeuVEdxMFtDug/OpLnFVrEVTGbpvTOMbWnQ6GdKLxWVEYKuiWoYBp3EGBfrg5A84QF8ftTUxazkyhVQFoeujlGdUyJKJ7UuiIi3NNWhJnwzvIDy/PUnVtnBrLv77cQm4vr8ILzeXq2zW+AdqnJmPeI6DlAAAAAElFTkSuQmCC') no-repeat 50% 50%;
}
.dte_cp-color-new {
position: absolute;
width: 60px;
height: 30px;
top: 5px;
left: 202px;
background-color: #f00;
border: 2px solid #151515;
cursor: pointer;
}
.dte_cp-color-current {
position: absolute;
width: 60px;
height: 30px;
top: 5px;
left: 270px;
background-color: #f00;
border: 2px solid #151515;
cursor: pointer;
}
.dte_cp-hex {
position: absolute;
width: 72px;
height: 17px;
line-height: 17px;
border: 2px solid transparent;
top: 135px;
left: 204px;
}
.dte_cp-rgb-r {
top: 43px;
left: 202px;
}
.dte_cp-field {
width: 62px;
height: 24px;
border: 1px solid transparent;
position: absolute;
text-indent: 3px;
}
.dte_cp-rgb-g {
top: 72px;
left: 202px;
}
.dte_cp-rgb-b {
top: 101px;
left: 202px;
}
.dte_cp-hsb-h {
top: 43px;
left: 270px;
}
.dte_cp-hsb-s {
top: 72px;
left: 270px;
}
.dte_cp-hsb-b {
top: 101px;
left: 270px;
}
.dte_cp-submit {
display: block;
position: absolute;
top: 134px;
right: 5px;
background-color: #5498C9;
border-bottom: 1px solid #4679A0;
font-family: "Roboto_Regular","Roboto Regular",Roboto,Sans-Serif;
color: #E8F5FF;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
height: 20px;
line-height: 20px;
padding: 0 8px;
overflow: hidden;
cursor: pointer;
}
.dte_cp-color-list {
overflow: hidden;
position: absolute;
top: 160px;
right: 0;
bottom: 0;
left: 5px;
}
.dte_cp-color-box {
display: block;
float: left;
width: 13px;
height: 13px;
margin: 0 2px 2px 0;
cursor: pointer;
}
.dte_cp-color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: transparent url('data:image/gif;base64,R0lGODlhCwALAJECAAAAAP///////wAAACH5BAEAAAIALAAAAAALAAsAAAIflINoG+AeGFgGxEaXxVns2X2dh4CZJXBadDxQlihGAQA7') no-repeat 50% 50%;
margin: -5px 0 0 -5px;
}
.dte_cp-hue div {
position: absolute;
width: 23px;
height: 0;
border: 3px solid transparent;
border-left-color: #999;
border-right-color: #999;
margin: -3px 0 0 0;
left: 3px;
}
.dte_cp-color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: transparent url('data:image/png;base64,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') no-repeat 0 0;
}
.dte_cp-field span {
position: absolute;
width: 9px;
height: 24px;
overflow: hidden;
top: 0;
right: 1px;
cursor: n-resize;
}
.dte_cp-field span:before, .dte_cp-field span:after {
content: "";
display: block;
width: 0;
height: 0;
border: 3px solid transparent;
border-bottom-color: #ccc;
position: absolute;
top: 5px;
left: 1px;
}
.dte_cp-field span:after {
border-color: #ccc transparent transparent;
top: 13px;
}
.dte_cp-field {
text-indent: 3px;
}
.dte_cp input {
border: none;
background-color: white;
box-shadow: none;
box-shadow: none;
box-shadow: none;
position: absolute;
font: normal bold 11px/normal Sans-Serif;
color: #111;
top: 6px;
right: 12px;
text-align: right;
text-indent: 0;
margin: 0;
padding: 0 1px 0 0;
width: 35px;
height: 12px;
line-height: 12px;
text-transform: uppercase;
}
.dte_cp-hex input {
top: 2px;
right: 1px;
width: 60px;
height: 14px;
line-height: 14px;
}
</style><br />
Sebuah alat sederhana yang berfungsi untuk mengedit warna dan melihat hasilnya secara langsung.<br />
<br />
<div class="dte_color-area" id="dte_color-area"><div class="dte_color-area-color"><div class="dte_cp" id="dte_cp-238"><div class="dte_cp-color"><div class="dte_cp-color"><div class="dte_cp-submit"><div class="dte_cp-color-box"><div class="dte_cp-field span"><div class="dte_cp-color-list"><div class="dte_cp-hex"><div class="dte_cp-color-new"><div class="dte_cp-color-current"># <input maxlength="6" size="6" type="text" /></div><input maxlength="3" size="3" type="text" /></div><script src="http://latitudu.com/assets/js/cp.v2.js?v=1"></script><br />
</div></div></div></div></div></div></div></div></div></div>Selamat menggunakan..<br />
<br />
Alvin Warasihttp://www.blogger.com/profile/00860274590645884813noreply@blogger.com0