Sharing Mie

Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

2/04/2013 01:10:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger.  Namun ini merupakan cara baru yang bisa anda terapkan ketika cara yang pertama tidak berhasil di blog anda. Karena memang setiap template blog akan menghasilkan hasil edit yang berbeda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s400/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s320/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Hasilnya Seperti Gambar Yang Di atas</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Berikut adalah langkah langkahnya :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 1 : Pergi ke blogger >> Dashboard >> Template</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 2 : Edit HTML >> Lanjutkan</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 3 : Centang Expand Template Widget</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b>]]></b:skin></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.comments-page { background-color: #f2f2f2;}<br />#blogger-comments-page { padding: 0px 5px; display: none;}<br />.comments-tab { float: left; padding: 5px; margin-right: 3px;<br />cursor: pointer; background-color: #f2f2f2;}<br />.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}<br />.comments-tab:hover { background-color: #eeeeee;}<br />.inactive-select-tab { background-color: #d1d1d1;}</blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b></head></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kemudian copy dan paste kode di bawah ini tepat di atas kode <b></head></b> yang anda temukan :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><script src='http://code.jquery.com/jquery-latest.js'/><br /><meta content='ID FB Anda disini' property='fb:admins'/><br /><script type='text/javascript'><br />function commentToggle(selectTab) {<br />$(".comments-tab").addClass("inactive-select-tab");<br />$(selectTab).removeClass("inactive-select-tab");<br />$(".comments-page").hide();<br />$(selectTab + "-page").show();<br />}<br /></script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh Comment FB temen gw yang diatas tadi.. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID Nya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 8 : Kemudian cari kode seperti ini <b><div class='comments' id='comments'></b> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><br /><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><br /><fb:comments-count expr:href='data:post.url'/> Comments<br /></div><br /><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><br /><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/><data:post.numComments/> Comments<br /></div><div class='clear'/><br /></div><br /><div class='comments-page' id='fb-comments-page'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><fb:comments expr:href='data:post.url' num_posts='2' width='400'/><br /></b:if><br /></div><br /><div class='comments comments-page' id='blogger-comments-page'></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Catatan :</b> Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Untuk kode yang saya beri warna merah <b><div class='comments comments-page' id='blogger-comments-page'> </b> , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 9 : Simpan dan lihat hasilnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger. Namun ini merupakan...

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

2/04/2013 12:58:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Tab Menu <b>Scroll Back To Top</b> dan <b>Profiles Social</b> Untuk <b>Blogger</b> - SharingWithMee Blog | Hai sobat blogger, tutorial kali ini saya akan memberikan kepada Anda sebuat tab menu scroll back to top dan profiles <b>Social Bokmark </b>yang bisa Anda gunakan untuk blog blogger Anda.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><br /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.fiveforblogger.com/2012/02/5-styles-fluid-search-bar.html" target="_blank">Demo Link</a></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
<b>Langkah :</b></div>
<div class="separator" style="clear: both;">
<b><br /></b></div>
<div class="separator" style="clear: both;">
1. Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
2. Masuk ke menu dit HTML, jangan lupa centang expand template widget</div>
<div class="separator" style="clear: both;">
3. Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
     4.  Pastekan CSS berikut ini, diatas pada kode diatas :</div>
<blockquote class="tr_bq">
#fixed-bar {<br />
    position: fixed;<br />
    bottom: 0;<br />
    z-index: 100;<br />
    width: 100%;<br />
    height: 38px;<br />
    clear: both;<br />
    margin: 0;<br />
    padding-bottom: 4px;<br />
    background-color: #333;<br />
    overflow: hidden;<br />
}<br />
#fixed-bar a {<br />
    float: right;<br />
    margin: 0;<br />
    padding: 0;<br />
    background-color: #333;<br />
}<br />
#fixed-bar a.first {<br />
    float: left;<br />
    margin-top: -1px;<br />
}<br />
.bottom-wrapper {<br />
    max-width: 92%;<br />
    width: 960px;<br />
    margin: 0 auto;<br />
}</blockquote>
<div class="separator" style="clear: both;">
    5.  Lalu cari kode dibawah ini :</div>
<blockquote class="tr_bq">
</body></blockquote>
<div class="separator" style="clear: both;">
    6.  Pastekan kode dibawah ini, diatas pada kode diatas :</div>
<blockquote class="tr_bq">
<div id='fixed-bar'><br />
<div class='bottom-wrapper'><br />
<a class='go-top first' href='#page-header'><img alt='go top' src='http://3.bp.blogspot.com/-cBnkdgGehf4/TzyKY265xwI/AAAAAAAACfQ/ZZvzUQrG7m4/s1600/up_3038.png'/></a><br />
<a href='https://plus.google.com/111920657633787249674' target='_blank' title='see on google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-BOc1ZCoB-Jw/TzyKYBnrVyI/AAAAAAAACe4/QgKgsc7um4c/s1600/gplus_3838.png'/></a><br />
<a href='http://www.facebook.com/sharer.php?' target='_blank' title='share with friends'><img alt='facebook' src='http://4.bp.blogspot.com/-lDVnV-OnEv4/TzyLhYc4yPI/AAAAAAAACfc/I7_buv1xxEM/s1600/facebook_3838.png'/></a><br />
<a href='http://twitter.com/54Blogger' target='_blank' title='follow me'><img alt='twitter' src='http://1.bp.blogspot.com/-mtVDHUkGUJs/TzyKYrJkNbI/AAAAAAAACfI/zXM9SKO2BFU/s1600/twitter_3838.png'/></a><br />
<a href='/feeds/posts/default' title='get updates'><img alt='rss' src='http://1.bp.blogspot.com/-l4C-DinWEr4/TzyKX4M7TvI/AAAAAAAACes/YDtzN-oPjYs/s1600/rss_3838.png'/></a><br />
</div><br />
</div><br />
<script>$('#fixed-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#fixed-bar').slideDown(200)}else{$('#fixed-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script></blockquote>
<div class="separator" style="clear: both;">
     7.  Save template Anda.</div>
<br />
<br />
<div>
<br /></div>
</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger - SharingWithMee Blog | Hai sobat blogger, tutorial kali ini saya akan me...

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

2/04/2013 12:55:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt. *Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
    1. Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
    2. Masuk ke menu edit HTML, centang expand template widget</div>
<div class="separator" style="clear: both;">
    3. Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<div class="separator" style="clear: both;">
Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     4.  Ganti kode diatas, dengan kode dibawah ini :</div>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<b:if cond='data:post.snippet'><br />
<b:if cond='data:post.thumbnailUrl'><br />
<div class='Image thumb'><br />
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a><br />
</div><br />
<b:else/><br />
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwfrRJZFdeo4VVI7xBsGum8AwsigKCLn9awc_Tes8zxr8ZH2E6p95o4G1KOLVpEVAhOhVkrkvXcoCenVFh4pdMRp0pNaF8niFoplkYPlQDkKCqbYuaUumkaCxBPk_MjckV3AsQKHmSBCD/s0/no-image.png'/></a><br />
</b:if><br />
<data:post.snippet/><br />
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'><br />
<div class='jump-link' style='float:right'><br />
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a><br />
</div></b:if><b:else/><br />
<data:post.body/></b:if><b:else/><br />
<data:post.body/></b:if></b:if></blockquote>
<div class="separator" style="clear: both;">
     5.  Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
     6.  Pastekan CSS dibawah ini diatas pada kode diatas :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}</blockquote>
<div class="separator" style="clear: both;">
     7.  Preview dahulu template Anda, dan save.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Catatan : Pada langkah 7 diatas,</div>
<div class="separator" style="clear: both;">
 saat Anda preview pastikan sudah sesuai dengan yang Anda harapkan.</div>
<div class="separator" style="clear: both;">
 Jika belum perhatikan langkah 3 diatas.</div>
<br />
<br /></div>

Blogger CSS HTML jQuery Tips'N'Trik Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas...

Cara Buat Block Quote Dengan Efek Keren di Blogger

2/04/2013 12:31:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>SharingWithMee</b> | Jika Anda sering mengunjungi blog terkenal yaitu <a href="http://comunity-anaksibolga.blogspot.com/" target="_blank">CAS_BSP</a>  Cheats maka Anda akan melihat blogquote yang akan kita bahas ini. Pada postingan sebelumnya yaiut cara buat <b>block quote</b> Facebook di <b>Blogger</b> maka kali ini saya memposting tentang Blockquote dengan efek bergantian bila disorot mouse.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ok langsung saja :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Masuk ke Menu Edit HTML</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Temukan <b>blockquote</b> atau sperti Ini <b>/* Blockquote */</b> Anda bila Anda telah menggunakan blockqute standard atau editan di blog Anda, kode nya akan mirip seperti ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post blockquote {<br />
background: -------------------<br />
url(------------------------------;<br />
margin:------------;<br />
padding:---------------------;<br />
border-top:---------------------------------;<br />
border-right:-------------------------;<br />
border-left: ------------------------;<br />
border-bottom: ----------------------;<br />
font-size:--------------------------;<br />
}</blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
    4.  Ganti kode diatas dengan kode dibawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post blockquote {<br />
background: #F2F1F1 url(<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFKfzeM3pRHf3MlG6a1c3c3MYCJbiC59Wv3vLnBtgXPJhJLfBTFLDr2Lq8XgwAs1xlaf3OMdTXpEKWMDguUhHYEdD3Sf9JQNXYiOrEcBCiAzad9rXCzzLbvXyxxXOO-WVd63WTNdy0Yg/s400/quote1.gif</span></b>)top left repeat-y;<br />
margin: 0 20px;<br />
padding: 10px 20px 10px 45px;<br />
border-top: 1px solid #DDD;<br />
border-right: 1px solid #666;<br />
border-left: 1px solid #DDD;<br />
border-bottom: 1px solid #666;<br />
font-size: 0.9em;<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding: 0 0 15px;<br />
}<br />
.post blockquote:hover {<br />
background: #F2F1F1 url(<span style="color: red;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBp6ADTk6A_nzCf4kYb43UEWiklOOsrdMZ7AbGCPlxjkGyxAZ6B3Q1TV5sE4chIyW7lemgFxcR_YqfkXgH04VbIG1rxQMlOq_W0TEgSSdXxyCDDqTl-ZXGk1KbU3vRLBTgWAr5ug-61M/s400/quote2.gif</b></span>)top left repeat-y;<br />
}</blockquote>
<br />
<div class="notice" style="background-attachment: scroll; background-color: #fff6bf; background-image: url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(255, 211, 36); color: #514721; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan :<br />
<ul>
<li>Ganti kode merah diatas dengan URL sesuai dengan gambar yang Anda inginkan.</li>
<li>Tapi Yang Harus Sesuai Dengan Ukuran Gambar Nya dan Bentuk Nya OK.</li>
</ul>
</div>
<br />
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara Buat Block Quote Dengan Efek Keren di Blogger

SharingWithMee | Jika Anda sering mengunjungi blog terkenal yaitu CAS_BSP Cheats maka Anda akan melihat blogquote yang akan kita bahas ...

CARA MEMBUAT EFEK JATUH JUMLAH ARTIKEL PADA LABEL

2/04/2013 04:41:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Alhamdulillah. Bismillah. SharingWithMee - Efek Jatuh Jumlah Artikel Pada Label. Sudah tau maksud judul pada postingan kali ini? Kalau belum, silahkan diliat foto dibawah ini. Atau mungkin langsung di liat pada widget Category disamping :)</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFX1v4clGQsI3dLyx1ICOd8OgrHBWQ_W4cq0W-Cw7qr7XuBgvmuAXKuPJgqM2EgldipORkdJkNOJX2DlWv4Wxos9NVDK5WI8eUKDbCYyB5aKVGT6Saelhp2Yw1Xga7c_SNUa4rg0HLpomR/s320/dropjumlah_artikel.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFX1v4clGQsI3dLyx1ICOd8OgrHBWQ_W4cq0W-Cw7qr7XuBgvmuAXKuPJgqM2EgldipORkdJkNOJX2DlWv4Wxos9NVDK5WI8eUKDbCYyB5aKVGT6Saelhp2Yw1Xga7c_SNUa4rg0HLpomR/s320/dropjumlah_artikel.PNG" /></a></div>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Tutorial :</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang permanggil jquerynya dahulu (kalau sudah ada, tidak usah dipasang lagi) :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script src='http://programisjs.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang widget label terlebih dahulu, dengan settingan / konfigurasi Tampilkan jumlah entri per label dan juga ber Daftar bukan cloud.</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Setelah dipasang, masuk ke editor template anda. Checklist Expand Template Widget.</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Cari kode dibawah (tidak harus sama persis, yg penting ada di dalam tag <ul> :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  <b:loop values='data:labels' var='label'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    <li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:if cond='data:blog.url == data:label.url'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <span expr:dir='data:blog.languageDirection'><data:label.name/></span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:else/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <b:if cond='data:showFreqNumbers'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          <span class='label-count' dir='ltr'><data:label.count/> Artikel</span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    </li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  </b:loop></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Ganti dengan kode dibawah ini :</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  <b:loop values='data:labels' var='label'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    <li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:if cond='data:blog.url == data:label.url'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <span expr:dir='data:blog.languageDirection'><data:label.name/></span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:else/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          <b:if cond='data:showFreqNumbers'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">            <span class='label-count' dir='ltr'><data:label.count/> Artikel</span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        </a></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    </li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  </b:loop></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></ul></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Kemudian pasang kode jQuery nya diatas tag </body> :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script type='text/javascript'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">$('#ID-WIDGET-LABEL li a').hover(function() {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    $('span.label-count',this).slideDown(500,'easeOutBounce');</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">},function() {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    $('span.label-count',this).fadeOut(400,'easeOutQuart');</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">});</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></script></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">NB : ID-WIDGET-LABEL adalah kode ID yang ada di widget Labelmu, jadi silahkan diganti dengan ID label widget anda. Biasanya ber-ID Label1 easeOutBounce daneaseOutBounce adalah jquery easingnya, Cek dan perlajari di [Link]</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang juga CSS nya (hampir lupa) :</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">span.label-count {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  position:fixed;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  background:#000;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  color:#FFF;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  font-size:25px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  font-weight:700;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  top:0;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  right:20px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  margin-top:250px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  width:auto;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  height:auto;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  text-align:center;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  opacity:0.7;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-radius:10px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  display:none;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  padding:20px 40px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">}</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">span.label-count:before {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  content:"";</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  width:0px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  height:0px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  position:absolute;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  right:100%;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  top:20px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-width:10px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-style:solid;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-color:transparent black transparent transparent;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">}</span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Untuk membuat panah / mengganti arah panah bisa liat dan pelajari di Dunia Maya Oke . Google Maksud nya </span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Oke, Silahkan dicoba. Kalau ada masalah, silahkan tinggalkan komentar anda :)</span></span></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik CARA MEMBUAT EFEK JATUH JUMLAH ARTIKEL PADA LABEL

Alhamdulillah. Bismillah. SharingWithMee - Efek Jatuh Jumlah Artikel Pada Label. Sudah tau maksud judul pada postingan kali ini? Kalau bel...

Cara Membuat Efek Balon Kata dengan CSS

2/04/2013 04:40:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="balon1" style="background-color: #af7c97; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Georgia, Times, serif; font-size: 12px; height: auto; margin: 0px auto 50px; padding: 20px 30px; position: relative; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px; vertical-align: baseline; width: 200px;">
<div style="border: 0px; padding: 0px; vertical-align: baseline;">
Menciptakan sebuah boks dengan efek<em style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">rounded corner</em> seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi bagaimana cara Saya menciptakan efek panah kecil di bawah balon kata ini?</div>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Untuk bisa memahami cara membuat efek balon kata seperti ilustrasi di atas, setidaknya Anda harus memahami empat hal di bawah ini:</div>
<ul style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 0px 1.7em 1.5em; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/css-triangle-teknik-pembuatan-dimensi.html" style="color: #225588; text-decoration: initial;" title="CSS Triagle">CSS Triangle</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/09/css-pseudo-element-tahap-pertama.html" style="color: #225588; text-decoration: initial;" title="CSS Pseudo Element Tahap Pertama">CSS Pseudo Element Tahap Pertama</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/10/css-position.html" style="color: #225588; text-decoration: initial;" title="CSS Position">CSS Position</a></li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/09/css-border-radius-membuat-efek-tumpul.html" style="color: #225588; text-decoration: initial;" title="CSS Border Radius">CSS Border Radius</a></li>
</ul>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Kunci Pertama</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Kunci pertama terletak pada CSS Pseudo Element <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>. Bentuk segitiga yang Saya buat adalah sebuah elemen palsu yang diciptakan dari CSS Pseudo Element. Di sini Saya tidak mementingkan apakah Anda akan membuat elemen palsu tersebut menggunakan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>. Saya rasa semuanya akan sama saja, karena di sini kita akan berhadapan dengan posisi absolut. Hanya saja Saya memiliki beberapa saran yang ideal: Jika Anda ingin menciptakan elemen palsu di sebelah kiri atau atas elemen asli gunakanlah <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Abefore" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:before</a></code> dan jika Anda ingin menciptakan elemen palsu di sebelah kanan atau bawah elemen asli gunakanlah <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=%3Aafter" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">:after</a></code>.</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="CSS Pseudo Element untuk menciptakan efek panah" height="244" src="http://3.bp.blogspot.com/-yEK-tWYE31A/TsxvhvG9j-I/AAAAAAAABXQ/YUJLqE5rKIE/s1600/buuble-before-css.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="344" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">CSS Pseudo Element untuk menciptakan efek panah</figcaption></figure><h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Kunci ke Dua</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Efek segitiga dibuat dengan teknik CSS Triangle. Anda bisa mempelajarinya <a href="http://www.dte.web.id/2011/11/css-triangle-teknik-pembuatan-dimensi.html" style="color: #225588; text-decoration: initial;" title="Efek Segitiga dengan CSS">di sini</a>.</div>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Prinsip Peletakan Posisi</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Posisi absolut pada elemen akan membuat elemen berpindah tempat berdasarkan koordinat layar, untuk memindahkan koordinat posisi elemen palsu menjadi berdasarkan pada elemen asli, tambahkanlah <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=position%3Arelative" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">position:relative</a></code> pada elemen asli:</div>
<pre data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 4px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="class" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata</span> <span class="rules" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">position</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">relative</span>;</span>
<span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span></code></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Nah, kali ini kita akan berhadapan dengan koordinat <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code>, <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=right" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">right</a></code>, <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=bottom" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">bottom</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=left" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">left</a></code> seperti halnya CSS Posisi Absolute pada umumnya.<br />Kita mulai dengan syarat pertama: Jika Anda ingin meletakkan elemen palsu tepat di bawah elemen asli, tuliskan nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code> sebesar<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=100%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">100%</a></code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=left" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">left</a></code> dan <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=right" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">right</a></code> bisa disesuaikan sendiri:</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="Nilai top sebesar 100%" height="246" src="http://1.bp.blogspot.com/-glk--jq3r8M/Tsxz7cXzMZI/AAAAAAAABXY/_h3HAAQ-XHA/s1600/speech-buuble-css.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="359" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">Nilai top sebesar 100%</figcaption></figure><span style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;">Kenapa harus </span><code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=100%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">100%</a></code><span style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;">?</span><br style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;" /><span style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;">Oke, kita coba ganti nilai </span><code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=top" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">top</a></code><span style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;"> menjadi </span><code style="background-color: white; border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; line-height: 17.649999618530273px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=50%25" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">50%</a></code><span style="background-color: white; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px;"> atau gunakanlah satuan piksel. maka hasilnya kurang lebih akan tampak seperti ini:</span><div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
</div>
<figure class="separator center" style="background-color: #cfdbec; border: 1px solid rgb(165, 165, 165); color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px auto 1.7em; padding: 10px; text-align: center; vertical-align: baseline;"><img alt="Nilai top sebesar 50%" height="244" src="http://4.bp.blogspot.com/-gy2kkiwWjF0/Tsx02WDS3pI/AAAAAAAABXg/kp4oZlka_LU/s1600/buuble-before.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; border: none; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 3px; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" width="344" /><figcaption style="border: 0px; font-family: Arial, sans-serif; font-size: 12px; font-style: italic; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">Nilai top sebesar 50%</figcaption></figure><div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Saya yakin sampai di sini Anda sudah mulai mengerti. Gunakanlah imajinasi. Sekarang kita masuki syarat ke dua. Ini hanyalah kesimpulan akhir dari logika di atas:</div>
<ul style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 0px 1.7em 1.5em; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di samping kiri elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> atau<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di samping kanan elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> atau<code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di atas elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">bottom</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code>bisa disesuaikan sendiri.</li>
<li style="border: 0px; margin: 0px 0px 1em 1em; padding: 0px; vertical-align: baseline;">Jika Anda ingin menempatkan elemen palsu tepat di bawah elemen asli, atur nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">top</code> menjadi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">100%</code>. Nilai <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">left</code> atau <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">right</code> bisa disesuaikan sendiri.</li>
</ul>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Produk Akhir</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Di atas Saya hanya memberikan prinsip-prinsip peletakan dan pembuatan efek panahnya saja, di bawah ini Saya akan memberikan kode sumber untuk bisa dipelajari lebih lanjut:</div>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata top" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.top</div>
<br /><div class="balon-kata right" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.right</div>
<br /><div class="balon-kata bottom" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.bottom</div>
<br /><div class="balon-kata left" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
.balon-kata.left</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><span id="line-2-1" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-1" style="color: #225588; text-decoration: initial;">1</a></span><span id="line-2-2" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-2" style="color: #225588; text-decoration: initial;">2</a></span><span id="line-2-3" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-3" style="color: #225588; text-decoration: initial;">3</a></span><span id="line-2-4" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-4" style="color: #225588; text-decoration: initial;">4</a></span><span id="line-2-5" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-5" style="color: #225588; text-decoration: initial;">5</a></span><span id="line-2-6" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-6" style="color: #225588; text-decoration: initial;">6</a></span><span id="line-2-7" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-7" style="color: #225588; text-decoration: initial;">7</a></span><span id="line-2-8" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-8" style="color: #225588; text-decoration: initial;">8</a></span><span id="line-2-9" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-9" style="color: #225588; text-decoration: initial;">9</a></span><span id="line-2-10" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-10" style="color: #225588; text-decoration: initial;">10</a></span><span id="line-2-11" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-11" style="color: #225588; text-decoration: initial;">11</a></span><span id="line-2-12" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-12" style="color: #225588; text-decoration: initial;">12</a></span><span id="line-2-13" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-13" style="color: #225588; text-decoration: initial;">13</a></span><span id="line-2-14" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-14" style="color: #225588; text-decoration: initial;">14</a></span><span id="line-2-15" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-15" style="color: #225588; text-decoration: initial;">15</a></span><span id="line-2-16" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-16" style="color: #225588; text-decoration: initial;">16</a></span><span id="line-2-17" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-17" style="color: #225588; text-decoration: initial;">17</a></span><span id="line-2-18" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-18" style="color: #225588; text-decoration: initial;">18</a></span><span id="line-2-19" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-19" style="color: #225588; text-decoration: initial;">19</a></span><span id="line-2-20" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-20" style="color: #225588; text-decoration: initial;">20</a></span><span id="line-2-21" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-21" style="color: #225588; text-decoration: initial;">21</a></span><span id="line-2-22" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-22" style="color: #225588; text-decoration: initial;">22</a></span><span id="line-2-23" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-23" style="color: #225588; text-decoration: initial;">23</a></span><span id="line-2-24" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-24" style="color: #225588; text-decoration: initial;">24</a></span><span id="line-2-25" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-25" style="color: #225588; text-decoration: initial;">25</a></span><span id="line-2-26" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-26" style="color: #225588; text-decoration: initial;">26</a></span><span id="line-2-27" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-27" style="color: #225588; text-decoration: initial;">27</a></span><span id="line-2-28" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-28" style="color: #225588; text-decoration: initial;">28</a></span><span id="line-2-29" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-29" style="color: #225588; text-decoration: initial;">29</a></span><span id="line-2-30" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-30" style="color: #225588; text-decoration: initial;">30</a></span><span id="line-2-31" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-31" style="color: #225588; text-decoration: initial;">31</a></span><span id="line-2-32" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-32" style="color: #225588; text-decoration: initial;">32</a></span><span id="line-2-33" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-33" style="color: #225588; text-decoration: initial;">33</a></span><span id="line-2-34" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-34" style="color: #225588; text-decoration: initial;">34</a></span><span id="line-2-35" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-35" style="color: #225588; text-decoration: initial;">35</a></span><span id="line-2-36" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-36" style="color: #225588; text-decoration: initial;">36</a></span><span id="line-2-37" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-37" style="color: #225588; text-decoration: initial;">37</a></span><span id="line-2-38" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-38" style="color: #225588; text-decoration: initial;">38</a></span><span id="line-2-39" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-39" style="color: #225588; text-decoration: initial;">39</a></span><span id="line-2-40" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-40" style="color: #225588; text-decoration: initial;">40</a></span><span id="line-2-41" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-41" style="color: #225588; text-decoration: initial;">41</a></span><span id="line-2-42" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-42" style="color: #225588; text-decoration: initial;">42</a></span><span id="line-2-43" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-43" style="color: #225588; text-decoration: initial;">43</a></span><span id="line-2-44" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-44" style="color: #225588; text-decoration: initial;">44</a></span><span id="line-2-45" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-45" style="color: #225588; text-decoration: initial;">45</a></span><span id="line-2-46" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-46" style="color: #225588; text-decoration: initial;">46</a></span><span id="line-2-47" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-47" style="color: #225588; text-decoration: initial;">47</a></span><span id="line-2-48" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-48" style="color: #225588; text-decoration: initial;">48</a></span><span id="line-2-49" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-49" style="color: #225588; text-decoration: initial;">49</a></span><span id="line-2-50" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-50" style="color: #225588; text-decoration: initial;">50</a></span><span id="line-2-51" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-51" style="color: #225588; text-decoration: initial;">51</a></span><span id="line-2-52" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-52" style="color: #225588; text-decoration: initial;">52</a></span><span id="line-2-53" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-53" style="color: #225588; text-decoration: initial;">53</a></span><span id="line-2-54" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-54" style="color: #225588; text-decoration: initial;">54</a></span><span id="line-2-55" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-55" style="color: #225588; text-decoration: initial;">55</a></span><span id="line-2-56" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-56" style="color: #225588; text-decoration: initial;">56</a></span><span id="line-2-57" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-57" style="color: #225588; text-decoration: initial;">57</a></span><span id="line-2-58" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-58" style="color: #225588; text-decoration: initial;">58</a></span><span id="line-2-59" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-59" style="color: #225588; text-decoration: initial;">59</a></span><span id="line-2-60" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-60" style="color: #225588; text-decoration: initial;">60</a></span><span id="line-2-61" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-61" style="color: #225588; text-decoration: initial;">61</a></span><span id="line-2-62" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-2-62" style="color: #225588; text-decoration: initial;">62</a></span></span><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata</span> <span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">{
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">background</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">black</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">position</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">relative</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">padding</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">15</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">color</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">white</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">font</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">normal <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">16</span>px Calibri,Arial,Sans-Serif</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">300</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">height</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">auto</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-webkit-border-radius</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-moz-border-radius</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-radius</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
<span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span>

<span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata</span><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.left</span><span class="pseudo" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">:before</span> <span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">{
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">content</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="string" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">""</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">height</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">position</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">absolute</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">right</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">100</span>%</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">top</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">20</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-style</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">solid</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-color</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">transparent black transparent transparent</span>;</span>
<span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span></code><span class="cl" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></span></pre>
<pre class="numbered" data-codetype="HTML" style="background-color: #002b36; border-left-color: rgb(69, 132, 190); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><span id="line-3-1" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-1" style="color: #225588; text-decoration: initial;">1</a></span><span id="line-3-2" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-2" style="color: #225588; text-decoration: initial;">2</a></span><span id="line-3-3" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-3" style="color: #225588; text-decoration: initial;">3</a></span><span id="line-3-4" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-3-4" style="color: #225588; text-decoration: initial;">4</a></span></span><code class="xml" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span> <span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">class</span>=<span class="value" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">"balon-kata top"</span>></span> ... <span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span>></span>
<span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span> <span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">class</span>=<span class="value" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">"balon-kata right"</span>></span> ... <span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span>></span>
<span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span> <span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">class</span>=<span class="value" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">"balon-kata bottom"</span>></span> ... <span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span>></span>
<span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span> <span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">class</span>=<span class="value" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">"balon-kata left"</span>></span> ... <span class="tag" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">div</span>></span></code><span class="cl" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></span></pre>
<h2 style="-webkit-animation: myfirst 2s; background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 20px; letter-spacing: -1px; margin: 3em 0px 1em; padding: 0px; vertical-align: baseline;">
Ada Alternatif Lain? Yang Lebih Kreatif?</h2>
<div style="background-color: white; border: 0px; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Cobalah untuk mewarnai dua sisi border atau gunakanlah CSS Transformasi <code style="border: 0px; color: #254c74; font-family: Verdana, Geneva, monospace; font-size: 12px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="allow" href="http://www.dte.web.id/p/cari-artikel.html?q=skew()" style="color: #225588; text-decoration: initial;" target="_blank" title="Telusuri makna kode ini">skew()</a></code> untuk membuat efeknya menjadi lebih nyata:</div>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata bottom dua" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
Mewarnai dua sisi border (top dan left)</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><span id="line-4-1" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-1" style="color: #225588; text-decoration: initial;">1</a></span><span id="line-4-2" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-2" style="color: #225588; text-decoration: initial;">2</a></span><span id="line-4-3" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-3" style="color: #225588; text-decoration: initial;">3</a></span><span id="line-4-4" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-4" style="color: #225588; text-decoration: initial;">4</a></span><span id="line-4-5" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-5" style="color: #225588; text-decoration: initial;">5</a></span><span id="line-4-6" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-6" style="color: #225588; text-decoration: initial;">6</a></span><span id="line-4-7" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-7" style="color: #225588; text-decoration: initial;">7</a></span><span id="line-4-8" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-8" style="color: #225588; text-decoration: initial;">8</a></span><span id="line-4-9" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-9" style="color: #225588; text-decoration: initial;">9</a></span><span id="line-4-10" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-10" style="color: #225588; text-decoration: initial;">10</a></span><span id="line-4-11" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-11" style="color: #225588; text-decoration: initial;">11</a></span><span id="line-4-12" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-12" style="color: #225588; text-decoration: initial;">12</a></span><span id="line-4-13" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-4-13" style="color: #225588; text-decoration: initial;">13</a></span></span><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata</span><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.bottom</span><span class="pseudo" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">:after</span> <span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">{
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">content</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="string" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">""</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">height</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">position</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">absolute</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">top</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">100</span>%</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">left</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">20</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-style</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">solid</span>;</span>
  <span class="comment" style="border: 0px; color: #586e75; font-style: italic; margin: 0px; padding: 0px; vertical-align: baseline;">/* mewarnai dua sisi border top dan left */</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-color</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">black transparent transparent black</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">display</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">block</span>;</span>
<span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span></code><span class="cl" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></span></pre>
<div class="block" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; background-color: #cccccc; border: 2px solid rgb(136, 136, 136); box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px inset; color: #333333; font-family: Ubuntu, 'Trebuchet MS', Trebuchet, Geneva, Verdana, Arial, sans-serif; font-size: 13px; line-height: 17.649999618530273px; margin: 0px 14px 1.7em; padding: 6px 10px; vertical-align: baseline;">
<div class="balon-kata bottom dua ekstra" style="background-color: black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; color: white; font-family: Calibri, Arial, sans-serif; font-size: 16px; height: 60px; line-height: normal; margin: 10px auto; padding: 15px; position: relative; vertical-align: baseline; width: 300px;">
Mendistorsi dimensi elemen palsu .balon-kata.bottom:after dengan CSS Transformasi skew()</div>
</div>
<pre class="numbered" data-codetype="CSS" style="background-color: #002b36; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin-bottom: 1.7em; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; position: relative; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="border-right-color: rgb(5, 49, 59); border-right-style: solid; border-width: 0px 2px 0px 0px; color: #586e75; display: block; float: left; line-height: 16px; margin: 0px 1em 0px -1em; min-width: 35px; padding: 0px; text-align: right; vertical-align: baseline;"><span id="line-5-1" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-1" style="color: #225588; text-decoration: initial;">1</a></span><span id="line-5-2" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-2" style="color: #225588; text-decoration: initial;">2</a></span><span id="line-5-3" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-3" style="color: #225588; text-decoration: initial;">3</a></span><span id="line-5-4" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-4" style="color: #225588; text-decoration: initial;">4</a></span><span id="line-5-5" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-5" style="color: #225588; text-decoration: initial;">5</a></span><span id="line-5-6" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-6" style="color: #225588; text-decoration: initial;">6</a></span><span id="line-5-7" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-7" style="color: #225588; text-decoration: initial;">7</a></span><span id="line-5-8" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-8" style="color: #225588; text-decoration: initial;">8</a></span><span id="line-5-9" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-9" style="color: #225588; text-decoration: initial;">9</a></span><span id="line-5-10" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-10" style="color: #225588; text-decoration: initial;">10</a></span><span id="line-5-11" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-11" style="color: #225588; text-decoration: initial;">11</a></span><span id="line-5-12" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-12" style="color: #225588; text-decoration: initial;">12</a></span><span id="line-5-13" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-13" style="color: #225588; text-decoration: initial;">13</a></span><span id="line-5-14" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-14" style="color: #225588; text-decoration: initial;">14</a></span><span id="line-5-15" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-15" style="color: #225588; text-decoration: initial;">15</a></span><span id="line-5-16" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-16" style="color: #225588; text-decoration: initial;">16</a></span><span id="line-5-17" style="border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-17" style="color: #225588; text-decoration: initial;">17</a></span><span id="line-5-18" style="background-color: #03242c; border: 0px; display: block; margin: 0px; padding: 0px 0.5em 0px 1em; position: relative; vertical-align: baseline;"><a href="http://www.dte.web.id/2011/11/efek-balon-kata-dengan-css.html#line-5-18" style="color: #225588; text-decoration: initial;">18</a></span></span><code class="css" style="border: 0px; color: #839496; display: block; font-family: Verdana, Geneva, monospace; font: inherit; letter-spacing: 0px; line-height: 16px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.balon-kata</span><span class="class" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">.bottom</span><span class="pseudo" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">:after</span> <span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">{
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">content</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="string" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">""</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">height</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">position</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">absolute</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">top</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">100</span>%</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">left</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">20</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-width</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">10</span>px</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-style</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">solid</span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">border-color</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">black transparent transparent black</span>;</span>
  <span class="comment" style="border: 0px; color: #586e75; font-style: italic; margin: 0px; padding: 0px; vertical-align: baseline;">/* transformasi skew() */</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-webkit-transform</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="function" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skew(-<span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">30</span>deg, <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>deg)</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-moz-transform</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="function" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skew(-<span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">30</span>deg, <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>deg)</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-ms-transform</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="function" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skew(-<span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">30</span>deg, <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>deg)</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">-o-transform</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="function" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skew(-<span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">30</span>deg, <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>deg)</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">transform</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="function" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skew(-<span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">30</span>deg, <span class="number" style="border: 0px; color: #2aa198; margin: 0px; padding: 0px; vertical-align: baseline;">0</span>deg)</span></span>;</span>
  <span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; color: #b58900; margin: 0px; padding: 0px; vertical-align: baseline;">display</span>:<span class="value" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">block</span>;</span>
<span class="rule" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></span></code><div>
<span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span></div>
<div>
<span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span></div>
<div>
<span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span></div>
<div>
<span class="rules" style="border: 0px; line-height: 12px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span></div>
<div>
</div>
</pre>
<br />
<a href="http://www.dte.web.id/" target="_blank"><span style="font-size: xx-small;"><i><b>CopyRight By DTE</b></i></span></a><br />
<br /></div>

Blogger CSS HTML jQuery SEO SeputarBerita Tips'N'Trik Cara Membuat Efek Balon Kata dengan CSS

Menciptakan sebuah boks dengan efek rounded corner seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi ba...