Ngalor Ngidul: Dasar

Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Sabtu, Juni 16, 2012 Kelulut Klanceng 21

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s1600/pop+sc.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s320/pop+sc.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" width="313" /></a></div><div style="text-align: justify;">Setelah sebelumnya pernah membahas <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>, </i>kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sistem atau <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong> ini sebenarnya sama saja dengan dengan <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>. </i>Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Berikut ini adalah Langkah-langkah untuk <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong>:</div>1. Seperti biasa masuk kedashboard => Design => Edit Html.<br />
2. Cari kode ]]</b:skin><br />
3. Letakkan kode CSS dibawah ini di atasnya.<br />
<blockquote class="tr_bq">.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}<br />
.sidebar .popular-posts ul{margin:0;padding:2px;}<br />
.PopularPosts .widget-content ul li {padding: .1em 0;}<br />
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}<br />
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}<br />
.PopularPosts .item-thumbnail {margin: 0;}<br />
.sidebar .PopularPosts .item-title {display: none;}</blockquote>4. Save template.<br />
5. Kembali ke Dashboard => Design => Add Element.<br />
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" /></a></div><blockquote class="tr_bq">1. Hilangkan ceklist pada snippet.<br />
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.</blockquote></div>

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal , kali ini kita akan mencoba memodifikasi Popular P...

Baca selengkapnya »

Tempat-tempat untuk membuat template blog - Template Generator Online

Sabtu, Januari 21, 2012 Kelulut Klanceng 30

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhTNUBMLBaZjLXcX9q9hmdDb711AEDKLPkKXrGTwJJgDov_9REmiEYyHHQ8pesKa7HpXwk5k3kLAyerDAhOXXy68CTiSaezbEvGYzlpWVSI8bJPGUJqzDp7wIyUD_PtTlorGKcpexOt4/s1600/html5-template-generator.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tempat-tempat untuk membuat template blog - Template Generator Online" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhTNUBMLBaZjLXcX9q9hmdDb711AEDKLPkKXrGTwJJgDov_9REmiEYyHHQ8pesKa7HpXwk5k3kLAyerDAhOXXy68CTiSaezbEvGYzlpWVSI8bJPGUJqzDp7wIyUD_PtTlorGKcpexOt4/s320/html5-template-generator.jpg" width="320" /></a></div>
Membuat dan men-Design sebuah template Blog memang tidak mudah, dan tidak juga terlalu susah. Jika bosan dengan template-template yang tersedia, solusi yang terbaik adalah membuat sendiri design templatenya. Untuk membuat template kita harus memahami struktur sebuah template tersebut. Misalnya anda menggunakan blogspot, anda cukup mempelajari bahasa html, css dan java script. Tetapi jika anda menggunakan wordpress, kita harus memahami html, css, script php, dan javascript.<br />
<br />
Mungkin hal ini juga yang membuat blogger yang menggunakan blogspot sebagai sarana pertama belajar nge-blog. Untuk mempermudah kita tanpa harus mempelajari semua bahasa pemrograman web diatas, kita bisa membuat template blog dengan menggunakan Template Generator. Dibawah ini saya akan sharing beberapa situs penyedia template generator yang dapat dicoba.<br />
<br />
1. <b><a href="http://cssez.com/">CSSEZ.</a></b><br />
CSSEZ ini adalah generator template online untuk blog Wordpress, movable type, Live Door Blog, dan Amoeba Blog. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQJ5A-ck3dMgCX3-mUxU7137jfzpSX4vVI5ihFhhpjqGxdVJ4jTdnkShrw2qEipQO83i6xGDLkqufPRO4WLA957W6cG4tIc-GBJBXWyUP8WJxb9BOkp1Qs88ZOmFO7iuZ3KsDDiTdUCA/s1600/CSSEZ.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQJ5A-ck3dMgCX3-mUxU7137jfzpSX4vVI5ihFhhpjqGxdVJ4jTdnkShrw2qEipQO83i6xGDLkqufPRO4WLA957W6cG4tIc-GBJBXWyUP8WJxb9BOkp1Qs88ZOmFO7iuZ3KsDDiTdUCA/s320/CSSEZ.jpg" width="320" /></a></div>
<br />
<br />
2. <b><a href="http://xlecom.com/?q=node/152">Drupal Theme Generator</a></b><br />
Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mb2j2PX2IiF6kS2zjMwE1oMW4DAbyBd6sHvqcS0feb1hzP2TrFEuykD8rNfW9Eqk4VNT3OVk5eO_cqlmNAlR9-xtG0H5eRZAXKpib0ozUFlGFLFn1h5_sMUGdgR69arhhblvtYBbfIY/s1600/Drupal+Theme+Generator.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mb2j2PX2IiF6kS2zjMwE1oMW4DAbyBd6sHvqcS0feb1hzP2TrFEuykD8rNfW9Eqk4VNT3OVk5eO_cqlmNAlR9-xtG0H5eRZAXKpib0ozUFlGFLFn1h5_sMUGdgR69arhhblvtYBbfIY/s320/Drupal+Theme+Generator.jpg" width="320" /></a></div>
<br />
3. <b><a href="http://www.wannabegirl.org/firdamatic">Firdamatic</a></b><br />
Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVyBw6wxVhnjhK6NRJgWYTs8Vm-rk-QClYfF1chSy5Ntpr70wmejpOK8I_DG_RUkcZUBXAEKh2h6ZvGtc_cHpp6yiX6uqcC97nLdXKisV6rAU4SHpmlCfsoj3LsvQs_ZnFjDqqUVqBkIM/s1600/Firdamatic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVyBw6wxVhnjhK6NRJgWYTs8Vm-rk-QClYfF1chSy5Ntpr70wmejpOK8I_DG_RUkcZUBXAEKh2h6ZvGtc_cHpp6yiX6uqcC97nLdXKisV6rAU4SHpmlCfsoj3LsvQs_ZnFjDqqUVqBkIM/s320/Firdamatic.jpg" width="320" /></a></div>
<br />
4. <b><a href="http://psyc.horm.org/">PsycHo</a></b><br />
Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGciX0f3ImYKihwbAYgNZkpDA9Vr5KsEMoKMtmIY86n-2AU0U4-Qzfk1Brf5M_DXLdCQor5E2tfKun1Op9cdT_zqjrk_HDKXPn1SHPop27bj1ldCAO72IMMNtqoX-WK62rDJ46aTrxOwQ/s1600/PsycHo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGciX0f3ImYKihwbAYgNZkpDA9Vr5KsEMoKMtmIY86n-2AU0U4-Qzfk1Brf5M_DXLdCQor5E2tfKun1Op9cdT_zqjrk_HDKXPn1SHPop27bj1ldCAO72IMMNtqoX-WK62rDJ46aTrxOwQ/s320/PsycHo.jpg" width="320" /></a></div>
<br />
5. <b><a href="http://templatr.cc/">Templatr</a></b><br />
Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8xppIRBqvwuLA27oaBxPEiCGGXcVUiO6YJ5nlYeFvRpWyyf9o51Ni5it04hGUscOeEe2JVSV2f1LfV6H7FpE1NVGR3GakST4FsepJaaPVZK69mueU9akeWyy099AGm63BCxv5fcZwP8/s1600/Templatr.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8xppIRBqvwuLA27oaBxPEiCGGXcVUiO6YJ5nlYeFvRpWyyf9o51Ni5it04hGUscOeEe2JVSV2f1LfV6H7FpE1NVGR3GakST4FsepJaaPVZK69mueU9akeWyy099AGm63BCxv5fcZwP8/s320/Templatr.jpg" width="320" /></a></div>
<br />
6. <b><a href="http://www.weebly.com/">Weebly</a></b><br />
Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63pgp72-VcqmRc_mLt0wx8JijWQxifkKzIvUQ705yF47O01s8kH9yNkXCZUPv2fossHUuu3M3TlZxd6OvUWQbJTuwi5LagXRXaypo6tNiUUqeUIBiAfqc8VKqhc9GOvAEGmBlo1oCPwI/s1600/Weebly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63pgp72-VcqmRc_mLt0wx8JijWQxifkKzIvUQ705yF47O01s8kH9yNkXCZUPv2fossHUuu3M3TlZxd6OvUWQbJTuwi5LagXRXaypo6tNiUUqeUIBiAfqc8VKqhc9GOvAEGmBlo1oCPwI/s320/Weebly.jpg" width="320" /></a></div>
<br />
7. <b><a href="http://www.yvoschaap.com/wpthemegen/">WordPress Theme Generator</a></b><br />
Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCeHVEfvMe0nSsoOlxu72Z46ujAQ_QX2RHkxXDelqHdEdCTyrLtvUyu2gNrm6K_zyWqPDW6ZU0APX6hMuYUHUBUWN0ZUV1YOApHvSzaykWvdHGceQ-SovlsKCDGZwTOAjmOCYiciBWQK4/s1600/WordPress+Theme+Generator.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCeHVEfvMe0nSsoOlxu72Z46ujAQ_QX2RHkxXDelqHdEdCTyrLtvUyu2gNrm6K_zyWqPDW6ZU0APX6hMuYUHUBUWN0ZUV1YOApHvSzaykWvdHGceQ-SovlsKCDGZwTOAjmOCYiciBWQK4/s320/WordPress+Theme+Generator.jpg" width="320" /></a></div>
<br />
8.<b><a href="http://istylr.com/"> iStylr</a></b><br />
Bagi yang senang edit css dan yang lainnya bisa mampir disini.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1yfou6B3p5_Xn71H6qAZB1rOHRv4Zb4X0eE5WDSsjJlvYlzdAuSJgjKEzXPzs0qwK3Fyy3dWmIl0Pta_wYuUBWqJn4tW2AFNYyahqLaE951Lvk_8fZaOU6WlfJVpCz77pjvqLjZr4F0/s1600/iStylr.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1yfou6B3p5_Xn71H6qAZB1rOHRv4Zb4X0eE5WDSsjJlvYlzdAuSJgjKEzXPzs0qwK3Fyy3dWmIl0Pta_wYuUBWqJn4tW2AFNYyahqLaE951Lvk_8fZaOU6WlfJVpCz77pjvqLjZr4F0/s320/iStylr.jpg" width="320" /></a></div>
<br />
9. <b><a href="http://pixopoint.com/generator/">PixoPoint</a></b><br />
Pixo point adalah template generator yang didesain bagi anda yang ingin membuat desain untuk website anda tanpa harus menyentuh sedikit pun kode-kode HTML. Tidak seperti Generator lainnya, semua kreasi template yang ada disini hanya bisa digunakan untuk WordPress. Begitu banyak pilihan modifikasi yang tertera di control panel, anda jadi lebih memudah merubah disain anda kapanpun juga.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ZbJzHzvb2dJHLV9rAz6tSKr3kd3MNwWvSUVqW7XVFzKJJihB3i_J4R_21cQ-PtfRDIIQw9fZHIjwr_dL3kj7HbDaF7swnA4XB-jrA43HO6i9zHkyR-Gwz3NA3GpRJ4aSC_iHQ91kyhQ/s1600/PixoPoint.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ZbJzHzvb2dJHLV9rAz6tSKr3kd3MNwWvSUVqW7XVFzKJJihB3i_J4R_21cQ-PtfRDIIQw9fZHIjwr_dL3kj7HbDaF7swnA4XB-jrA43HO6i9zHkyR-Gwz3NA3GpRJ4aSC_iHQ91kyhQ/s320/PixoPoint.jpg" width="320" /></a></div>
<br />
10. <a href="http://www.dotemplate.com/"><b>DoTemplate</b></a><br />
doTemplate menawarkan berbagai jenis catalog web template gratis. Semua template yang di hadirkan di sini sangat mengundang selera dan cukup bisa memikat anda. Cukup memilih warna, huruf dan beberapa efek-efek grafik untuk membuat kreasi template anda yang baru.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXGqGru89yk6aAKTHtz8zck00VMguXK7EMvLl1ilMfNK4j5fz6_Ma2TTJ6RK2tLDXIoTmlw-9Bhu2JZ84Eur8-8Rp_5qwxfIORU5cFs_-cl7gpzQXTQqEx2y6yiSOQmTXnwHMPkJDSewk/s1600/DoTemplate.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXGqGru89yk6aAKTHtz8zck00VMguXK7EMvLl1ilMfNK4j5fz6_Ma2TTJ6RK2tLDXIoTmlw-9Bhu2JZ84Eur8-8Rp_5qwxfIORU5cFs_-cl7gpzQXTQqEx2y6yiSOQmTXnwHMPkJDSewk/s320/DoTemplate.jpg" width="320" /></a></div>
<br />
11.<b> <a href="http://www.pimp-my-profile.com/generators/blogger.php">Pimp My Profile </a></b><br />
Template Generator yang satu ini telah menyediakan fasilitas yang dapat dipilih untuk membuat blog. Kita dapat dengan luluasa men desain template yang kita inginkan<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgamOZvNoKKDr6d5Qeo0g8u0QUYDJHCKJ2Txn7Za9mfI1EaRmjqtZUG_f96JFCXmnqDUBbskz7GQo742wQsiz4R9qKAIB4ECvm3MuPylh6FhV4_nOZUKfsEL1-EXpFmfFWyCMtmxaQ77mA/s1600/pimp-my-profile.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgamOZvNoKKDr6d5Qeo0g8u0QUYDJHCKJ2Txn7Za9mfI1EaRmjqtZUG_f96JFCXmnqDUBbskz7GQo742wQsiz4R9qKAIB4ECvm3MuPylh6FhV4_nOZUKfsEL1-EXpFmfFWyCMtmxaQ77mA/s1600/pimp-my-profile.jpeg" /></a></div>
<br />
12. <b><a href="http://www.pagecolumn.com/1_col_generator.htm">Page Colomn Layout Generator </a></b><br />
Bahkan Template Generator yang satu ini telah menyediakan pilihan colomn yang dapat di pilih mulai dari 1 colomn sampai 5 colomn<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9CvVhuMCmJVfn4Ca-akovm3Itg65r8YBHBOFdNUEUHzABi7LzuPJKFGLQfkBQcINr_O9K-fIImRbIWA29MZ7G8dVHi1GqE5MwLymglSc7mg2ghVUeA8kJKhBZv2oLs7153ypVY_Ogq8/s1600/pagecolumn.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9CvVhuMCmJVfn4Ca-akovm3Itg65r8YBHBOFdNUEUHzABi7LzuPJKFGLQfkBQcINr_O9K-fIImRbIWA29MZ7G8dVHi1GqE5MwLymglSc7mg2ghVUeA8kJKhBZv2oLs7153ypVY_Ogq8/s1600/pagecolumn.jpeg" /></a></div>
<br />
<br />
Sebenarnya masih ada banyak lagi tempat-tempat membuat template secara online, anda bisa browsing sendiri di google. Dan perlu diketahui juga bahwa situs-situs Template Generator Online di atas fiturnya sangat terbatas. Selain Template Generator Online, ada juga software untuk membuat template secara offline. Anda bisa membaca dan mendapatkan softwarenya di postingan <b><i><a href="http://realfa84.blogspot.com/2013/03/template-offline-generator-artisteer-4.html">Template offline Generator - Artisteer 4 Full Free</a></i></b>.<br />
<br />
Buat anda yang mengalami kesulitan untuk mendapatkan template sesuai harapan anda, anda bisa menggunakan jasa kami untuk merealisasikan template impian anda.<br />
Anda bisa menghubungi kami melalui menu <a href="http://realfa84.blogspot.com/2011/01/jasa-design-blogger-template.html">JASA DAN LAYANAN KAMI</a> yang ada di menu atas blog ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;">Semoga Bermanfaat..!!</span></div>
</div>

Blogging Dasar Tool Tempat-tempat untuk membuat template blog - Template Generator Online

Membuat dan men-Design sebuah template Blog memang tidak mudah, dan tidak juga terlalu susah. Jika bosan dengan template-template yang t...

Baca selengkapnya »

Cara Mengetahui id dan class dari suatu widget atau kolom

Rabu, Januari 11, 2012 Kelulut Klanceng 0

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvm9YwJ4Brl7JVWgwExxowPxM2OR3_n4tyNrN9y5eQjCOMUmal455wz9nAmv91XN_40ortb-2TBVMzcBTjCyu_FL3ua0Ip4Z7Ww1XVZ65YRbx_6NvC2qBVYp99wGzcO_CZPajnvlRSdg/s1600/html.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Mengetahui id dan class dari suatu widget atau kolom" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvm9YwJ4Brl7JVWgwExxowPxM2OR3_n4tyNrN9y5eQjCOMUmal455wz9nAmv91XN_40ortb-2TBVMzcBTjCyu_FL3ua0Ip4Z7Ww1XVZ65YRbx_6NvC2qBVYp99wGzcO_CZPajnvlRSdg/s320/html.png" width="320" /></a></div>Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.<br />
<br />
Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.<br />
<br />
Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.<br />
<br />
Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas <b><i>inspect element</i></b>. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element <b><a href="http://realfa84.blogspot.com/2011/12/mempermudah-ujicoba-design-dengan.html"><i>disini</i></a></b>.<br />
<br />
Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.<br />
<br />
1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini. <br />
2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.<br />
3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB81ZVtNDX2NmgvbSoozCpfGfVXmeZu49vPkDD2neM0A9VpFk76xq7Cj9rTiDkzt76p1I6vxnvYCGRDBsLHvJmhyrRYoJZStBIZXJlAXuBMBJNvIU-g_d5JVAAy7ZSd6gVQ3O2LYnz7aE/s1600/inspect+element.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB81ZVtNDX2NmgvbSoozCpfGfVXmeZu49vPkDD2neM0A9VpFk76xq7Cj9rTiDkzt76p1I6vxnvYCGRDBsLHvJmhyrRYoJZStBIZXJlAXuBMBJNvIU-g_d5JVAAy7ZSd6gVQ3O2LYnz7aE/s400/inspect+element.png" width="400" /></a></div><br />
4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSe5Aq9ecxI6QMt5PwNn8x-3gJ1j6aWrlCCkYtLnF4r7oHA93Jdqop0PNA5oimYvPqXg3mcEO9qg-KtC7YEUiICsUljyNmJRv4-brFL2jVTq4Fn6frGLDOvzdhAgE2VrjZTKlnSqT1MU/s1600/inspect+element1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSe5Aq9ecxI6QMt5PwNn8x-3gJ1j6aWrlCCkYtLnF4r7oHA93Jdqop0PNA5oimYvPqXg3mcEO9qg-KtC7YEUiICsUljyNmJRv4-brFL2jVTq4Fn6frGLDOvzdhAgE2VrjZTKlnSqT1MU/s400/inspect+element1.png" width="400" /></a></div><br />
Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m5L4YiewudRlcXDaaEv6Okpz43AXQEJGTAu3PgTMaVdmNdtvFaxz8zO_aiD4QQzmmetsapupSs0zeoYuyiTZZIr7r5NoeWaintB8aDn684_Tuib2TYFWTqpPpUjEW4O7AJjNpMG3cOU/s1600/inspect+element2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m5L4YiewudRlcXDaaEv6Okpz43AXQEJGTAu3PgTMaVdmNdtvFaxz8zO_aiD4QQzmmetsapupSs0zeoYuyiTZZIr7r5NoeWaintB8aDn684_Tuib2TYFWTqpPpUjEW4O7AJjNpMG3cOU/s400/inspect+element2.png" width="400" /></a></div><br />
Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....</div></div>

Blogging Dasar designe Tips n Trik Tutorial Cara Mengetahui id dan class dari suatu widget atau kolom

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten a...

Baca selengkapnya »

Pengenalan JAVASCRIPT Fungsinya

Selasa, Januari 10, 2012 Kelulut Klanceng 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pengenalan JAVASCRIPT Fungsinya" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" /></a></div><div style="text-align: justify;">Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??<br />
<br />
Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.<br />
<br />
Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.<br />
<br />
Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.</div><br />
<b>Contoh penulisan Internal:</b><br />
<pre class="javascript" name="code"><script type="text/javascript">
document.write(“Test”);
</script>
</pre><br />
<b>Contoh penulisan External:</b><br />
<pre class="javascript" name="code"><script type="text/javascript" scr='http://.../test.js'> 
</script>
</pre><br />
<b>Contoh penggunaan dalam Blogspot HTML/XML.</b><br />
<pre class="xhtml" name="code"><HTML>
<HEAD>
<title> <h1>Belajar javascript</h1> </title>
<b:skin><![CDATA[
Tempat peletakan Kode CSS
]]</b:skin>
<script type="Javascript">
Kode javascript di sini
</script>
</HEAD>
<BODY>
Kode HTML di sini
</BODY>
</HTML>
</pre></div>

Dasar designe Javascript Menengah Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya un...

Baca selengkapnya »

Cara membuat sudut melengkung dengan CSS

Senin, Januari 09, 2012 Kelulut Klanceng 28

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="155px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" width="220px" /></a></div><div style="text-align: justify;">Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.<br />
<br />
Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.<br />
<br />
Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:<br />
Kode HTML<br />
<pre class="xhtml" name="code"><div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div></pre><br />
Kode CSS<br />
<pre class="css" name="code">#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}
</pre><br />
Hasil:<br />
<style>
#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
text-align:center;
</style><br />
<div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div><br />
Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.<br />
<pre class="css" name="code">border-radius: 15px; /*Kode pembuat lengkungan sudut*/
</pre>Sehingga kode CSS-nya menjadi seperti ini.<br />
<pre class="css" name="code">#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}
</pre>Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.<br />
<style>
#areaku-tumpul{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
text-align:center;
border-radius:15px;
</style><br />
<br />
<div id="areaku-tumpul"><h2>Anggap Disini Adalah Content.</h2></div><br />
Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.<br />
<pre class="css" name="code">- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/</pre><br />
Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.<br />
</div><br />
<style>
#box-border{
width:98%;
}
#box1-border{
width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0px;
}
#box2-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0px 15px;
margin: 0 0 0 10px;
}

#box3-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 15px 0px;
margin: 10px 0 0 0;
}

#box4-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 15px 15px;
margin: 10px 0 0 10px;
}
#box5-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0 15px;
margin: 10px 0 0 0px;
}
#box6-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 0px 15px;
margin: 10px 0 0 10px;
}
#box7-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 0 15px 15px 0;
margin: 10px 0 0 0px;
}

#box8-border{width: 45%;
float: left;
border: ridge 3px lime;
padding: 10px;
background: white;
Border-radius: 15px 0 0 15px;
margin: 10px 0 0 10px;
}
</style><br />
<div id="box-border"><div id="box1-border">1. Border-radius: 15px 0px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><div id="box2-border">2. Border-radius: 0px 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 0px;<br />
- border-bottom-left-radius: 15px;</div><div id="box3-border">3. Border-radius: 15px 15px 0px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 0px;<br />
- border-bottom-left-radius: 15px;</div><div id="box4-border">4. Border-radius: 0 15px 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 15px;</div><div id="box5-border">5. Border-radius: 15px 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 15px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div></div><br />
<div id="box6-border">6. Border-radius: 0px 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 0px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><br />
<div id="box7-border">7. Border-radius: 15px 0 0 15px;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
- border-top-left-radius: 0px;<br />
- border-top-right-radius: 15px;<br />
- border-bottom-right-radius: 15px;<br />
- border-bottom-left-radius: 0px;</div><br />
<div id="box8-border">8. Border-radius: 0 15px 15px 0;<br />
Dengan perintah tersebut hasilnya sama dengan perintah individu:<br />
<br />
border-top-left-radius: 15px;<br />
border-top-right-radius: 0px;<br />
border-bottom-right-radius: 0;<br />
border-bottom-left-radius: 15px;</div><div style="clear: both;"></div>Dan Lain Sebagainya........</div>

Blogging CSS Dasar designe Menengah Tutorial Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk per...

Baca selengkapnya »

Cara Membuat Teks bayangan dan Text 3D

Minggu, Januari 01, 2012 Kelulut Klanceng 1

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjnmztTkQlqAzS0pywiBwhSAWq9jyWSKvmK9OT9_cxgEmmJ1ke9Dl8aWBUemEQ1Uk-M5_2NvSQn90VrQ8IrjUBSR1fzoraxxBch4NOTKt23dLupGjzgzAr_cEB2ffoTJYKmdDydNcWp0/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Teks bayangan dan Text 3D" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjnmztTkQlqAzS0pywiBwhSAWq9jyWSKvmK9OT9_cxgEmmJ1ke9Dl8aWBUemEQ1Uk-M5_2NvSQn90VrQ8IrjUBSR1fzoraxxBch4NOTKt23dLupGjzgzAr_cEB2ffoTJYKmdDydNcWp0/s1600/images.jpg" /></a></div><div style="text-align: justify;">Pada posting sebelumnya, kita sudah membahas tentang <i style="font-weight: bold;"><a href="http://realfa84.blogspot.com/2011/12/cara-membuat-efek-bayangan-atau-box.html">Cara membuat efek bayangan atau Box Shadow</a>. </i>Nah, pada postingan kali ini kita akan coba membahas Cara Membuat Teks bayangan dan Text 3D. Untuk Cara membuat teks bayangan ini proses dan cara kerjanya sama persis dengan <i style="font-weight: bold;">membuat efek bayangan atau Box Shadow.</i> Jadi kalau belum membaca postingannya silakan baca dulu <b><a href="http://realfa84.blogspot.com/2011/12/cara-membuat-efek-bayangan-atau-box.html">posting sebelumnya</a></b>.<br />
<br />
Dalam design blog atau website, pemakaian teks dengan bayangan ini sendiri agak jarang dipakai, karena jika terlalu berlebihan maka bukannya website atau blog menjadi semakin bagus, tapi malah menjadi sulit untuk dibaca. Yang paling sering dipakai paling hanya efek bayangan kecil seperti yang dipakai diblog ini.<br />
<br />
Untuk sedikit contohnya kalian bisa lihat perbedaannya di bawah ini.<br />
<style>
#box-1{  
background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
text-shadow:none;
</style><br />
<pre class="css" name="code">#teks-bayangan{background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
}
</pre><div id="box-1">Hasil sebelum kode bayangan/shadow</div><br />
Sekarang kita tambahkan sedikit kode dari teks-shadownya.<br />
<pre class="css" name="code">text-shadow: 2px 2px 0 red;
</pre><br />
Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.<br />
<pre class="css" name="code">#teks-bayangan{
background: #666;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code box bayangan--*/
text-shadow: 2px 2px 0 red; /*--code teks bayangan--*/
}
</pre><style>
#box-2{  
background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
text-shadow: 2px 2px 0 red;
</style><br />
<div id="box-2">Hasil Setelah Penambahan kode bayangan/shadow</div><br />
Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.<br />
<br />
<div style="text-align: justify;">2. Cara pembuatan efek bayangan ganda atau lebih.</div><div style="text-align: justify;">Untuk cara pembuatan bayangan efek ganda atau lebih ini serta efek bayangan 3D, prinsipnya tetap juga sama dengan pembuatan efek bayangan ganda dicara pembuatan box shadow. Jadi saya hanya memberikan contohnya disini. Untuk pembuatan efek 3D ini kita hanya perlu sedikit kreatif karena untuk pembuatannya kita akan membutuhkan sangat banyak kode bayangannya dan pengaturan posisi serta blurnya.<br />
<br />
Berikut ini adalah hasil-hasil kode CSS dan contohnya.<br />
<b><span style="font-size: large;">1. Letter Press.</span></b><br />
<style>
#letter-press{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0px 1px 1px #fff;
}
</style><br />
<pre class="css" name="code">#letter-press{
text-shadow: 0px 1px 1px #fff;
}
</pre><div id="letter-press">Letter Press</div><style>
#stereoscopic{
background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
text-shadow: 4px 0 0 blue,-4px 0 0 red;
letter-spacing: 7px;
font-weight: bold;
</style><br />
<b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">2. Text shadow Stereoscopic.</span></b><br />
<pre class="css" name="code">#stereoscopic{
text-shadow: 4px 0 0 blue,-4px 0 0 red;
}
</pre><div id="stereoscopic">Stereoscopic</div><b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">3. Neon.</span></b><br />
<style>
#neon{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0 0 1px #2ec728,0 0 3px #2ec728,0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}
</style><br />
<pre class="css" name="code">#neon{
text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728,
0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}
</pre><div id="neon">Neon Teks</div><b><span style="font-size: large;"><br />
</span></b><br />
<b><span style="font-size: large;">4. Efek teks terbakar.</span></b><br />
<style>
#teks-terbakar{background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}
</style><br />
<pre class="css" name="code">#teks-terbakar{
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 
2px -10px 6px #fd3, -2px -15px 11px #f80, 
2px -18px 18px #f20;
}
</pre><br />
<div id="teks-terbakar">Efek Teks Terbakar</div><br />
<b><span style="font-size: large;">5. Efek Teks 3D</span></b><br />
<style>
#teks-3D{
background: #666;
border: 3px ridge white;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align: center;
box-shadow: 0 0 10px red;
letter-spacing: 7px;
font-weight: bold;
text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;
}
</style><br />
<pre class="css" name="code">#teks-3D{text-shadow: 
1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 
1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 
4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 
4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 
7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 
7px 8px #bbb, 8px 8px #ddd;
}
</pre><br />
<div id="teks-3D">Teks Efek 3D dengan CSS</div><br />
Pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Semoga bermanfaat...</div></div></div>

Blogging CSS Dasar Menengah Tutorial Cara Membuat Teks bayangan dan Text 3D

Pada posting sebelumnya, kita sudah membahas tentang Cara membuat efek bayangan atau Box Shadow . Nah, pada postingan kali ini kita akan cob...

Baca selengkapnya »

Cara membuat efek bayangan atau Box Shadow di blog

Kamis, Desember 29, 2011 Kelulut Klanceng 8

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt7RVLIhcBmD_s2TEmg3b8HzY9MzSjHgzxhOjszNofejrhk7nVSeXfPOnpZXfHSojrRGDd4wh9eqr_lV0blUB4eezADfl4KGpBjkAanBBY3IN-C-rjivmKKvkHqRcOlzrrEFmH8i9tuA/s1600/thank-you-balloon-2-300.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat efek bayangan atau Box Shadow di blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt7RVLIhcBmD_s2TEmg3b8HzY9MzSjHgzxhOjszNofejrhk7nVSeXfPOnpZXfHSojrRGDd4wh9eqr_lV0blUB4eezADfl4KGpBjkAanBBY3IN-C-rjivmKKvkHqRcOlzrrEFmH8i9tuA/s200/thank-you-balloon-2-300.jpg" width="200" /></a></div><div style="text-align: justify;">Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-shadow atau efect bayangan. Jika teman-teman sering menggunakan image editor atau text editor seperti photoshop atau microsoft office, maka pasti teman-teman sudah tidak asing dengan istilah ini. Tapi disini kita tidak akan menggunakan image editor atau text editor. Tapi kita akan membahas cara pembuatannya dengan menggunakan CSS.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Untuk pembuatan box-shadow ini sendiri meski hanya memakai sedikit kode perintah, tapi kita bukan hanya bisa membuat satu bayangan saja, tetapi kita juga bisa membuat lebih dari satu bayangan ganda atau yang disebut bayangan ganda, bahkan lebih dari 2 bayangan pun bisa kita lakukan. Kodenya sangat sederhana, jadi sangat mudah untuk kita pahami. Kita hanya perlu mengatur koordinat jarak horizontal dan koordinat jarak vertikal serta menentukan warna yang akan kita pakai.</div><div style="text-align: justify;"><br />
</div>Jika dibuat rumus maka rumusnya kira-kira adalah seperti ini:<br />
<style>
#box-shadow
{text-align: center;
padding: 5px;
border: 3px ridge red;
background: white;
border-image: initial;}

#ket{
background: #ECFCF9;
padding: 10px 10px 10px 40px;
border: ridge 3px red;
border-top: none;
}
#tambahan1{
background: white;
padding: 5px;
text-align: center;
border: ridge 2px #DDD;
border-image: initial;
}

#box-bayangan1{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
}
#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red;
}

#box-bayangan3{
background: #000;
border:13px ridge red;
padding: 15px;
margin-top: 10px;
font-size: 28px;
color: #111;
text-align:center;
box-shadow: 0 0 10px blue;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}

#box-3D{
background: #CCC;
border: 10px ridge red;
padding: 15px;
margin-top: 10px;
font-size: 31px;
color: gold;
text-align: center;
box-shadow: 0 0 -3px blue inset, 0 0 -7px green inset, 0 0 -12px orange inset, 0 0 -17px purple inset, 0 0 -20px magenta inset, 0 0 -24px lime inset, 0 0 15px blue, 0 0 27px lime, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762;
font-weight: bolder;
text-shadow: 1px 0px #546A92, 0px 1px #384762, 2px 1px #546A92, 1px 2px #384762, 3px 2px #546A92, 2px 3px #384762, 4px 3px #546A92, 3px 4px #384762, 5px 4px #546A92, 4px 5px #384762, 6px 5px #546A92, 5px 6px #384762, 7px 6px #546A92, 6px 7px #384762, 8px 7px #546A92, 7px 8px #384762, 8px 8px #546A92;
border-image: initial;
}

#box-bayangan-ganda {
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue;
}
</style><br />
<div id="box-shadow">{<b>box-shadow</b>: <b><span style="color: blue;">(koordinat X)</span></b> <b><span style="color: #38761d;">(koordinat Y)</span></b> <b><span style="color: #741b47;">(radius blur)</span></b> <b><span style="color: red;">(warna)</span></b>;}</div><div id="ket"><b>Keterangan:</b><br />
<b><span style="color: blue;">Koordinat X</span></b>  =  Berfungsi untuk  menspesifikasikan jarak horizontal bayangan. Jika sebuah nilai berisi angka positif (misal: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (misal: -10px) maka akan memberikan bayangan disebelah kiri.<br />
<br />
<b><span style="color: #38761d;">Koordinat Y</span></b>  =  Berfungsi untuk menspesifikasikan jarak vertikal bayangan. Jika nilai berisi positif (misal: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (misal:-10px) akan memberikan bayangan disebelah atas.<br />
<br />
<b><span style="color: #741b47;">Radius Blur</span></b>    =  Berfungsi untuk  menspesifikasikan radius dari blur yang dihasilkan. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.<br />
<br />
<b><span style="color: red;">Warna</span></b>          =  Berfungsi untuk  menspesifikasikan warna bayangan.</div><br />
1. Efek bayangan Tunggal/Satu bayangan.<br />
Contoh penulisan awal.<br />
<pre class="css" name="code">{box-shadow: 0 0 10px #red;} </pre><br />
Cara penggunaan:<br />
Sebagai contoh kita anggap kita sudah memiliki kode HTML seperti ini:<br />
<pre class="xhtml" name="code"><div id="box-bayangan">disini adalah konten

</div></pre>Dan kode CSSnya misal seperti ini.<br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
} 
</pre>Hasil yang kita dapatkan dari kode CSS dan HTML tersebut hanya akan terlihat seperti dibawah ini.<br />
<div id="box-bayangan1">Hasil sebelum penambahan kode bayangan/shadow</div><br />
Sekarang kita tambahkan sedikit kode dari box-shadownya.<br />
<div id="tambahan1">box-shadow: 0 0 10px red; </div>Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.<br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan--*/
}
</pre><br />
<div id="box-bayangan">Hasil Setelah Penambahan kode bayangan/shadow</div><br />
Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.<br />
<br />
<div style="text-align: justify;">2. Cara pembuatan efek bayangan ganda atau lebih.</div><div style="text-align: justify;">Untuk cara pembuatan bayangan efek ganda atau lebih ini, prinsipnya tetap sama dengan pembuatan efek satu bayangan. Kita hanya perlu memberikan sedikit tambahan saja. Coba kalian perhatikan perbedaan dua kode dibawah ini.</div><div style="text-align: justify;"><br />
</div><div id="tambahan1"><b>box-shadow</b>: <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">10px</span></b> <span style="color: red;">red</span>; </div><br />
<div id="tambahan1"><b>box-shadow:</b> <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">10px</span></b> <b><span style="color: red;">red</span><span style="color: magenta; font-size: large;">,</span></b> <b><span style="color: blue;">0</span></b> <b><span style="color: lime;">0</span></b> <b><span style="color: #741b47;">30px</span></b> <b><span style="color: blue;">blue</span></b>; </div><br />
<div style="text-align: justify;">Pada kode kedua kita hanya menambahkan tanda koma(,) kemudian memberikan tambahan kode bayangan yang baru. Untuk pemberian kode kedua nilai/angka penentu harus lebih besar dari kode yang pertama dan warna yang berbeda pula.</div><br />
<pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan tunggal--*/
}
</pre><pre class="css" name="code">#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue; /*--code bayangan ganda--*/
}
</pre>Hasil yang akan kita dapatkan adalah seperti dibawah ini. <br />
<br />
<br />
<div id="box-bayangan-ganda">Hasil penambahan efek bayangan ganda dengan CSS</div><br />
<br />
<div style="text-align: justify;">Hal ini juga berlaku jika kita ingin menambahkan lagi bayangan yang lebih banyak. Siapa tahu kalian suatu saat bisa membuat box-shadow dengan efek pelangi. Kalau saya cuma bisa membuat yang aneka warna aja seperti dibawah ini. Hehe..</div><br />
<div id="box-3D">Kotak 3D beraneka warna dengan CSS</div><br />
Untuk posting berikutnya kita akan sedikit membahas tentang hal yang serupa yaitu cara membuat text-shadow dan text 3D<br />
<br />
<div id="box-bayangan3">Teks shadow dan teks 3D dengan CSS</div></div>

CSS Dasar Menengah Tutorial Cara membuat efek bayangan atau Box Shadow di blog

Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-sh...

Baca selengkapnya »