Firman Webs

BMA Lovers Responsive Blogger Template

Thursday, 6 March 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97r1IGB8KDXJIk6E7Ftl6Sr3IbUsfbaJwWMefh1G-JXRBeiMxwBh9eDJoWt8ibYR689vdwz4EZTuhr9qt16N8nAX0aynr5DzL0oNdWImbSn97HIF-XTA5W2kk6c4OJslEHC32AzFnkCM/s1600/BMA-Lovers-Responsive-Blogger-Template.gif" class="center" ><img alt="BMA Lovers Responsive Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97r1IGB8KDXJIk6E7Ftl6Sr3IbUsfbaJwWMefh1G-JXRBeiMxwBh9eDJoWt8ibYR689vdwz4EZTuhr9qt16N8nAX0aynr5DzL0oNdWImbSn97HIF-XTA5W2kk6c4OJslEHC32AzFnkCM/s400/BMA-Lovers-Responsive-Blogger-Template.gif" title="BMA Lovers Responsive Blogger Template"/></a><b>BMA Lovers Responsive Blogger Template</b> – sebelumnya saya mohon maaf untuk yang sudah mengirim pesan meminta template yang saya gunakan pada blog ini (BMA Minimalis theme) baik itu lewat Facebook, Google+ maupun Email dan sampai sekarang belum saya balas. Bukan berarti saya tidak boleh, saya juga senang mendapat respon positif. Namun karena templatenya yang masih sederhana dan apa adanya serta masih banyak kekurangan dan belum saya perbaiki, terutama pada menu yang belum mendukung semua perangkat. Mungkin lain waktu akan saya bagikan juga. <br/><br/>Oleh sebab itu sebagai gantinya mungkin template BMA Lovers walaupun masih sederhana juga namun ini bisa sebagai gantinya dan ini jauh lebih baik daripada yang saya gunakan pada blog ini. Setiap elemen sudah tersusun rapi di setiap media query sehingga bisa menyesuaikan setiap perangkat yang digunakan untuk mengakses. Mendukung beberapa fitur diantaranya bisa dilihat dibawah atau bisa melihat demonya langsung. <div class="bt-grup"><a class="bt red" href="http://bma-lovers.blogspot.com/" target="_blank" rel="nofollow"><span><i class="fa fa-eye"></i></span>PREVIEW</a><a class="bt" href="https://sites.google.com/site/sitemasandes/BMA%20Lovers.txt?attredirects=0&d=1" target="_blank" rel="nofollow"><span><i class="fa fa-download"></i></span>DOWNLOAD</a></div><h2><i class="fa fa-list"></i> BMA Lovers Featured</h2><i class="fa fa-external-link"></i> <a href="http://www.responsinator.com/?url=http%3A%2F%2Fbma-lovers.blogspot.com%2F" rel="nofollow" title="View on www.responsinator.com" target="_blank">Responsive</a><br/><i class="fa fa-external-link"></i> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbma-lovers.blogspot.com%2F" rel="nofollow" title="View on validator.w3.org" target="_blank">Valid HTML5</a><br/><i class="fa fa-external-link"></i> <a href="http://gtmetrix.com/reports/bma-lovers.blogspot.com/Z0FUsMzM" rel="nofollow" title="Latest Performance on gtmetrix.com" target="_blank">Fast Loading</a><br/><i class="fa fa-external-link"></i> <a href="http://chkme.com/seo-bma-lovers.blogspot.com" rel="nofollow" title="SEO Reports for bma-lovers.blogspot.com" target="_blank">Score SEO 100%</a><br/><i class="fa fa-check"></i> <a href="http://mas-andes.blogspot.com/2014/01/membuat-lightbox-widget-contact-form.html" title="Lightbox Contact Form" target="_blank">Lightbox Contact Form</a><br/><i class="fa fa-check"></i> Dinamis Post Meta<br/><i class="fa fa-check"></i> JSON Search Result<br/><i class="fa fa-check"></i> 404 Error Custom<br/><i class="fa fa-check"></i> Comment Spam Detected, dll.  <h2><i class="fa fa-wrench"></i> Konfigurasi Template</h2>Mulai dari menu yang paling atas terlebih dahulu. Menu ini pada resolusi layar atau media query yang memiliki lebar minimal 768 piksel maka tampilan menu akan muncul di bagian atas header, sedangkan jika lebar layar dibawah 768 piksel akan beralih ke mode panel yang mengarahkan menu ke bagian atas footer. Untuk mengcustom list menu yang akan ditampilkan cari kode berikut ini: <pre><br /><ul><br /><li><a href='#'>About</a></li><br /><li><a href='#'>Contact</a></li><br /><li><a href='#'>Sitemap</a></li><br /><li><a href='#'>Follow</a></li><br /></ul><br /></pre>Sedangkan konfigurasi menu navigasi bagian bawah header cari kode berikut ini: <pre><br /><ul class='clearfix'><br /><li><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Home</a></li><br /><li><a href='#'>Template</a></li><br /><li><a href='#'>Tutorial</a></li><br /><li><a href='#'>Design</a></li><br /><li><a href='#'>Widget</a></li><br /><li><a href='#'>Tools</a></li> <br /></ul><br /></pre>Untuk merubah Google+ Badge cari kode berikut ini: <pre><br /><div class='g-person' data-href='//plus.google.com/104093787575230359634' data-layout='landscape' data-rel='author' data-showtagline='false' data-theme='dark'/><br /></div><br /></pre><blockquote class='atas'>Replace <code>104093787575230359634</code> dengan ID Google+ anda. </blockquote>Juga untuk merubah fanspage (facebook like box) cari kode berikut ini: <pre><br /><div class='fb-like-box' data-colorscheme='light' data-header='false' data-height='350px' data-href='http://www.facebook.com/andestyle' data-show-border='false' data-show-faces='true' data-stream='false' data-width='400px'/><br /></pre><blockquote class='atas'>Replace <code>andestyle</code> dengan ID facebook fanspage blog anda. </blockquote>Pada bagian email subscribe juga ganti dengan ID Feedburner blog anda, cari kode berikut ini:  <pre><br /><div class='subscribe-form'><br /><form action='http://feedburner.google.com/fb/a/mailverify?uri=masandes' class='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='masandes'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-email' name='email' placeholder='Enter your email ...'/><input class='subscribe-button' title='' type='submit' value='Submit'/><br /></form><br /></div><br /></pre><blockquote class='atas'>Replace <code>masandes</code> dengan ID Feedburner blog anda. </blockquote>Untuk memasang banner ukuran 468x60 piksel yang terdapat pada bagian header caranya cari kode berikut ini: <pre><br /><br /><div class='ads468'><br /><a href='#'><br /><h5>Advertisment 468 x 60</h5><br /></a><br /></div><br /><br /></pre><blockquote class='atas'>Replace <code><h5>Advertisment 468 x 60</h5></code> dengan banner yang akan di pasang. <pre><img alt='' src='url-banner.jpg' title=''/></pre></blockquote>Sedangkan 2 banner ukuran 300x250 piksel yang terdapat pada bagian bawah posting, cari kode berikut ini: <pre><br /><br /><div class='ads300'><br /><div class='iklan'><br /><a href='#'><br /><h5>Advertisment 300 x 250</h5><br /></a><br /></div><br /><div class='iklan'><br /><a href='#'><br /><h5>Advertisment 300 x 250</h5><br /></a><br /></div><br /><div style='clear:both'/><br /></div><br /><br /></pre><blockquote class='atas'>Replace <code><h5>Advertisment 300 x 250</h5></code> dengan banner yang akan di pasang. <pre><img alt='' src='url-banner.jpg' title=''/></pre></blockquote><br/>Ikon yang digunakan pada BMA Lovers Blogger template menggunakan Font Awesome V4.0.3. Apabila ingin menambahkan atau merubah beberapa ikon bisa melihat pada halaman <a href="http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html" title="List Icon Font Awesome dan CSS Value Content V4.0.3">List Icon Font Awesome dan CSS Value Content V4.0.3</a>. <h2><i class="fa fa-file-o"></i> Instalasi Template</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvbB12HX65VdrR_dCMKyB7TsTc2459WRwPNIbbbsGGul38LbbmyL8t0PLW3kKXRTV1ZzatsrJsb_lR_swjJv4WU8TAL97ldZ9lERS3KqIBIN-ed_zfaAgHuMmzBz7AeJRo4ovDAYtgns/s1600/intalasi+templates.gif" class="center" ><img alt="BMA Lovers Responsive Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvbB12HX65VdrR_dCMKyB7TsTc2459WRwPNIbbbsGGul38LbbmyL8t0PLW3kKXRTV1ZzatsrJsb_lR_swjJv4WU8TAL97ldZ9lERS3KqIBIN-ed_zfaAgHuMmzBz7AeJRo4ovDAYtgns/s1600/intalasi+templates.gif" title="BMA Lovers Responsive Blogger Template"/></a>Instalasi atau penerapannya template kedalam blog, caranya buka file *txt hasil download lalu Select all dan masuk ke Edit HTML template kemudian replace seluruh kode yang ada pada template lama seperti pada gambar di atas.

BMA Lovers Responsive Blogger Template – sebelumnya saya mohon maaf untuk yang sudah mengirim pesan meminta template yang saya gunakan pada...

Internet Download Manager 6.19 Build 2 Terbaru

Sunday, 2 March 2014

<span style="font-family: Arial, Helvetica, sans-serif;"><b>Internet Download Manager 6.19 Build 2 Terbaru - </b>IDM 6.19 alias IDM yang terbaru, untuk agan pasti sudah tidak asing lagi dengan software downloader paling populer didunia ini.semua orang menggunakan IDM ini untuk urusan download mendownload, karena di kenal dengan stabil dan penambahan speed download yang maksimal.</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">
</span> <span style="color: orange; font-family: Arial, Helvetica, sans-serif;"><b>Screenshoot :</b></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a alt="Internet Download MAnager" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1OjRHSFwHoy0A4pbV-cXoKaxo7iDV1GvkJFKQpHs3LI_FjqRtK9b8WWZ59DMBOFQRU-YcLW46icz1NTxPxtndWcSA7jPpmyC38BxC3_1M7N1hbQfTP39ypQF9SBnUo2FKwLMSsfrrEUho/s1600/IDM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Internet Download MAnager" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1OjRHSFwHoy0A4pbV-cXoKaxo7iDV1GvkJFKQpHs3LI_FjqRtK9b8WWZ59DMBOFQRU-YcLW46icz1NTxPxtndWcSA7jPpmyC38BxC3_1M7N1hbQfTP39ypQF9SBnUo2FKwLMSsfrrEUho/s1600/IDM.PNG" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span> 
<br />
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">What's new in version 6.19</span></h3>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">(Released: Feb05, 2014)</span></div>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Improved IDM download engine</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Added support for Firefox 29 SeaMonkey 2.24</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Fixed video recognition problems in Google Chrome</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Fixed problems when taking over https downloads in Google Chrome</span></li>
</ul>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Download Internet Download Manager</span></h3>
</div>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mirror2.internetdownloadmanager.com/idman619build2.exe?b=1&filename=idman619build2.exe" rel="nofollow" target="_blank">IDM Terbaru</a></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.4shared.com/rar/lkbB8Wfmba/jamunebrow.html" rel="nofollow" target="_blank">Jamu Full Version</a></span></li>
</ul>
<div>
<b><span style="font-family: Arial, Helvetica, sans-serif;">Silakan Comment kalau belum paham :D</span></b></div>
</div>

Internet Download Manager 6.19 Build 2 Terbaru - IDM 6.19 alias IDM yang terbaru, untuk agan pasti sudah tidak asing lagi dengan software do...

Download Night Blogger Template

<span style="font-family: Arial, Helvetica, sans-serif;"><b>Download Night Blogger Template V2 - </b>sekarang <b>FirmanGZ</b>akan membagikan Template Responsive buatan Mas Uya, Template ini memiliki banyak keunggulan seperti Seo, Indexed, dll.</span><br />
<span style="color: orange; font-family: Arial, Helvetica, sans-serif;"><b><br /></b></span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span> <span style="color: orange; font-family: Arial, Helvetica, sans-serif;"><b>Screenshot :</b></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHB8Lq4siQY90faJp_8a955BgviaVoDLxpCzVzd6vxJk6vvys1X2Gu3UD5boGDWmGcOhXgsLbzzXNRA_9F-gBnFgFu-DC2_bGNnGvZVH9Uod1hZ4M-OT73kRgF1Xdnn2zgAQzSefg-SETA/s1600/Night+v2+-+Firman+Blog.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHB8Lq4siQY90faJp_8a955BgviaVoDLxpCzVzd6vxJk6vvys1X2Gu3UD5boGDWmGcOhXgsLbzzXNRA_9F-gBnFgFu-DC2_bGNnGvZVH9Uod1hZ4M-OT73kRgF1Xdnn2zgAQzSefg-SETA/s1600/Night+v2+-+Firman+Blog.PNG" width="320" /></span></a></div>
<h2 style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Fitur Night Blogger Template :</span></h2>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Fast Loading</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Valid HTML5</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">SEO 89%</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Thread Comment</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Widget Modivikasi</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Responsive</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Dll</span></li>
</ul>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">About Template :</span></h3>
</div>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Design by : Mas Uya</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Publisher : Firman Blog</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">How To Instal Template (<a href="https://www.facebook.com/suryanaxniublockshufle" rel="nofollow" target="_blank">klik</a>)</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">| <a href="http://www.4shared.com/document/B240-LNCce/Night-V2.html" rel="nofollow" target="_blank">Download</a> | <a href="http://night-v2.blogspot.com/" rel="nofollow" target="_blank">Demo</a> |</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>*Template dilindungi oleh hak cipta, dilarang mengganti link credit !!!</b></span>

Download Night Blogger Template V2 - sekarang FirmanGZ akan membagikan Template Responsive buatan Mas Uya, Template ini memiliki banyak keun...

Download Software Alexa Booster 3.4

<span style="font-family: Arial, Helvetica, sans-serif;"><b>Download Software Alexa Booster 3.4 - </b>kali ini <b><a href="http://firmangz.blogspot.com/" target="_blank">FirmanGZ</a> </b>akan membagikan software yang sering digunakan untuk merampingkan alexa rank suatu blog dengan cepat, dengan software ini alexa rank kita perlahan - lahan meramping (katanya, tapi benar sih :D),</span><br />

<span style="font-family: Arial, Helvetica, sans-serif;">
</span> <span style="color: orange; font-family: Arial, Helvetica, sans-serif;"><b>Screenshot :</b></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQP-7tEecIyAZAlYlRAy3WkJyXxikSdQrR3yAvXHnQsU1MxAYwEmnjwSDXWwnLk07-50v3m1La5klo8Dk_OZl73cBaBJXgSAibgYFL-8riq9em_tsRrGEMgC4wkKasaiEH9qf4CHC-Xwy/s1600/alexa+booster.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQP-7tEecIyAZAlYlRAy3WkJyXxikSdQrR3yAvXHnQsU1MxAYwEmnjwSDXWwnLk07-50v3m1La5klo8Dk_OZl73cBaBJXgSAibgYFL-8riq9em_tsRrGEMgC4wkKasaiEH9qf4CHC-Xwy/s1600/alexa+booster.PNG" width="400" /></a></div>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Download Alexa Booster 3.4</b></span></h3>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://www.4shared.com/rar/ue1ERV-3ce/alexa_booster_34_-_Firman_Blog.html" rel="nofollow" target="_blank">Installation</a></b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://www.4shared.com/office/RHLtK2lMba/How_to_use.html" rel="nofollow" target="_blank">How to use</a></b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://www.4shared.com/office/CSKgyMiJba/Proxy_List_Alexa_Boost.html" rel="nofollow" target="_blank">Proxy List</a></b></span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Kalau masih bingung bisa comment <a class="g-profile" href="https://plus.google.com/116008359079249147584" rel="nofollow" target="_blank">+Firmansyah Nuralif rohman</a> </span></div>
</div>

Download Software Alexa Booster 3.4 - kali ini FirmanGZ akan membagikan software yang sering digunakan untuk merampingkan alexa rank suatu...

Counter Strike 1.6 WarZone

<span style="font-family: Arial, Helvetica, sans-serif;"><b>Counter Strike 1.6 WarZone - </b>Sekarang <b>FirmanGZ </b>akan membagikan <a href="http://firmangz.blogspot.com/search/label/Games" target="_blank">action games</a> secara gratis, Game ini sering di mainkan para pecinta game karena game ini sangat ringan dan tidak memerlukan kapasitas yang besar.</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">
<span style="color: orange;"><b>Screenshot </b></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYPD365KVkpKL8WYDyjqisnMfpiijOQXKD4eSw3zf_P9yM3U2aX0b7CBxLJBQS9WdJmPsWQgGYx3Dzh3X-F8FCE6hnrXF2L34tccck_GDyHaL-xgrkA2WasUaZ2sqi2N1xUuMLKgONaoT/s1600/Counter+Strike.JPEG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYPD365KVkpKL8WYDyjqisnMfpiijOQXKD4eSw3zf_P9yM3U2aX0b7CBxLJBQS9WdJmPsWQgGYx3Dzh3X-F8FCE6hnrXF2L34tccck_GDyHaL-xgrkA2WasUaZ2sqi2N1xUuMLKgONaoT/s1600/Counter+Strike.JPEG" width="400" /></span></a></div>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Fitur </b></span></h3>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Tanggal rilis November 18, 2013</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Ukuran pengaturan 256MB</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>100% rip bersih dari GCFs Steam (file game Cache)</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Termasuk terbaru CS 1.6 bots</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Half-Life Single / Multiplayer juga disertakan</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Protocol Ganda (48 + 47) Klien</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Klien dapat bergabung P47 serta server P48</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Protocol Ganda (48 + 47) Dedicated Server juga disertakan</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Working Dedicated and Listen server (Steam and non-Steam)</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Bekerja dengan server browser Internet, favorit dan tab LAN</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Perlindungan penuh terhadap semua jenis server yang lambat</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Kompatibel dengan sXe Injected terbaru anticheat</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Sertakan Metamod-P terbaru v1.21p37</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Sertakan AMX Mod X v1.8.2 terbaru (dinonaktifkan secara default)</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>HLTV is also included and works</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Versi mesin (1.1.2.6 build 4554)</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Dimainkan pada Internet dan LAN</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Dapat digunakan sebagai Portabel</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Dalam permainan iklan dihapus</b></span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Compatible with Windows 8/7/XP</span></div>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Download </b><b>Counter Strike 1.6 WarZone</b></span></h3>
</div>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://cs-skini.me/cs/Counter-Strike.exe" rel="nofollow" target="_blank">Mirror 1</a></b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://download1115.mediafire.com/y3a0xadzh37g/62z4jw6xa4h4b2c/Counter-Strike.exe" rel="nofollow" target="_blank">Mirror 2</a></b></span></li>
</ul>
</div>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Credits</span></h3>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Valve </b>- Counter-Strike</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>revCrew </b>- REVOLUTION Emulator</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>steamCooker</b> - CF Toolbox</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>SASiO</b> - GCFExplore</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Crock</b> - Dproto and WHpatcher</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b>Baosen</b> - CS 1.6 Bot Patch</span></li>
</ul>
</div>

Counter Strike 1.6 WarZone - Sekarang FirmanGZ akan membagikan action games secara gratis, Game ini sering di mainkan para pecinta game ka...

Kombinasi CSS Button Flat UI Dengan Font Awesome

Saturday, 22 February 2014

<b>Kombinasi CSS Button Flat UI Dengan Font Awesome</b> – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother <a href="http://mas-andes.blogspot.com/2014/02/jquery-fadein-fadeout-page-load-blog.html?showComment=1392106487229#c8775829991683631331" target="_blank">Tenri Baso</a> yang menanyakan di artikel sebelumnya, karena pada artikel tersebut tidak sesuai tema konten yang dibahas jadi alangkah baiknya jika saya jawab pada artikel ini. Dengan adanya font awesome saya rasa sangat memudahkan untuk keperluan berbagai hal dan tanpa perlu adanya penggunaan gambar sehingga sangat efektif penggunaannya. Beberapa waktu lalu pernah saya bagikan tutorial untuk <a href="http://mas-andes.blogspot.com/2013/10/membuat-tombol-share-di-bawah-posting-blog.html" target="_blank" title="membuat tombol share dibawah posting blog">membuat tombol share dibawah posting blog</a>, apabila ingin menggantinya dengan kombinasi font awesome seperti yang saya gunakan pada blog ini langkah-langkah penerapannya masih sama seperti pada tutorial sebelumnya. <br/><br/>Namun pastikan terlebih dahulu sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah. Apabila belum pernah memasang bisa melihat di tutorial sebelumnya tentang <a href="http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html" target="_blank" title="cara memasang dan menggunakan font awesome">cara memasang dan menggunakan font awesome</a>, disitu juga terdapat list icon font awesome yang bisa dijadikan panduan untuk melihat nama icon. Apabila sudah terpasang bisa dilanjutkan dengan tutorial dibawah ini untuk memodifikasi button dengan kombinasi font awesome. <br/><br/><h2>CSS Social Share Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" class="center" ><img alt="CSS Social Share Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" title="CSS Social Share Button"/></a>Button yang pertama adalah untuk widget social share. Karena sudah ada dibawah posting blog ini jadi saya rasa tidak perlu lagi untuk membuat demo, bisa dilihat langsung di akhir artikel. Berikut cara memasang widget social share dengan kombinasi font awesome. Untuk kode CSS seperti biasa, taruh di atas kode <code>]]></b:skin></code> atau <code></style></code>  <pre data-codetype="CSS"><br />#button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px}<br />#button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}<br />#button-share h4 span{background:#2c3e50}<br />#button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222}<br />#button-share a:hover{background:#222}#button-share a:hover span{color:#222}<br />#button-share a span{line-height:20px;width:40px;padding:6px 0;top:0}<br />#button-share a span.fb{background:#2884f6}.fb{background:#1e90ff}<br />#button-share a span.tw{background:#45B0E3}.tw{background:#00bfff}<br />#button-share a span.gp{background:#e00}.gp{background:#f83124}<br />#button-share a span.me{background:#f39c12}.me{background:#f1c40f}<br /></pre>Sedangkan kode HTML bisa taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code> sesuaikan template masing-masing saja, Selanjutnya simpan template.  <pre data-codetype="HTML"><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='button-share'><br /><h4><span><i class='fa fa-external-link'/></span> Share artikel ke :</h4><br /><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a> <br /><a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a> <br /><a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a><br /><script><br />//<![CDATA[<br />var uri = window.location.href;<br />var ttle = document.title;<br />document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");<br />//]]><br /></script><br /></div><br /></b:if><br /></pre><h2>CSS Like Button Count (Efek Sliding)</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" class="center" ><img alt="CSS Like Button Count (Efek Sliding)" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" title="CSS Like Button Count (Efek Sliding)" width="600"/></a>Tombol like button biasanya terpasang dibawah post artikel yang digunakan untuk menampilkan banyaknya jumlah pengunjung yang menyukai artikel tersebut baik itu melalui button like Facebook, Google Plus maupun Twitter. Untuk membuat tampilan button like count agar lebih menarik dapat menggunakan CSS untuk mengatur tampilan dari widget ini. Penerapannya sama seperti pada tombol social share di atas. <pre data-codetype="CSS"><br />#button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px}<br />#button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px}<br />.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px}<br />.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}<br />.ikons i{color:#fff;line-height:42px}<br />.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}<br />.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}<br />.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}<br />.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}<br />.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}<br />.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}<br />.facebook .ikons,.facebook .slide{background:#305c99}<br />.twitter .ikons,.twitter .slide{background:#00cdff}<br />.google .ikons,.google .slide{background:#d24228}<br />.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}<br /></pre>  <pre data-codetype="HTML"><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='button-count'><br /><span>BAGIKAN:</span><br /><div class='facebook button'><br /><i class='ikons'><br /><i class='fa fa-facebook'/><br /></i><br /><div class='slide'><br /><p><br />Like<br /></p><br /></div><br /><div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/><br /></div><br /><br /><div class='google button'><br /><i class='ikons'><br /><i class='fa fa-google-plus'/><br /></i><br /><div class='slide'><br /><p><br />+1<br /></p><br /></div><br /><br /><div class='g-plusone' data-size='medium'/><br /><br /><script src='https://apis.google.com/js/platform.js' type='text/javascript'><br />{lang: &#39;id&#39;}<br /></script><br /></div><br /><br /><div class='twitter button'><br /><i class='ikons'><br /><i class='fa fa-twitter'/><br /></i><br /><div class='slide'><br /><p><br />Tweet<br /></p><br /></div><br /><a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a><br /><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><br /></div><br /></div><br /></b:if><br /></pre><h2>CSS Post Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" class="center" ><img alt="CSS Button Flat UI" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" title="CSS Button Flat UI"/></a>Button yang ini adalah button yang saya gunakan pada area posting, untuk membuat tombol demo, dll. Penerapannya ke dalam blog, taruh kode CSS seperti langkah di atas. Sedangkan untuk HTML, taruh kedalam post area mode HTML.  <pre data-codetype="CSS"><br />.bton-grup{width:500px;text-align:center;margin:5px auto}<br />.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}<br />.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}<br />.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}<br />.bton.orange{background:#FF7F00}<br />.bton.purple{background:#8e44ad}<br />.bton.blue{background:#297fb8}<br />.bton.red{background:#e74c3c}<br /></pre>  <pre data-codetype="HTML"><br /><div class='bton-grup'><br /><a href='http://mas-andes.blogspot.com' class='bton'><span><i class="fa fa-download"></i></span>Example</a><br /><a href='http://mas-andes.blogspot.com' class='bton orange'><span><i class="fa fa-file-text"></i></span>Example</a><br /><a href='http://mas-andes.blogspot.com' class='bton purple'><span><i class="fa fa-folder-open"></i></span>Example</a><br /><a href='http://mas-andes.blogspot.com' class='bton blue'><span><i class="fa fa-paperclip"></i></span>Example</a><br /><a href='http://mas-andes.blogspot.com' class='bton red'><span><i class="fa fa-link"></i></span>Example</a><br /></div><br /></pre>Demikianlah cara mengcustom button agar sedikit lebih menarik dan selanjutnya silahkan bisa di kreasikan sendiri di blog masing-masing.

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother Tenri Baso yan...

jQuery Efek fadeIn dan fadeOut Page Load Blog

Monday, 10 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" class="center" ><img alt="jQuery Efek fadeIn dan fadeOut Page Load Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" title="jQuery Efek fadeIn dan fadeOut Page Load Blog"/></a><b>jQuery Efek fadeIn dan fadeOut Page Load Blog</b> – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karena banyaknya javascript yang saya gunakan sehingga pada saat loading membuka halaman tampilannya sedikit terganggu dan terlihat kurang rapi. Untuk mengatasi hal ini maka timbul inspirasi untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Namun perlu diketahui, ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan maka supaya tidak terlihat saya menggunakan cara ini untuk menutupi kemungkinan tersebut. Mungkin apabila di antara kalian ada yang mengalami masalah seperti halnya dengan blog ini, bisa menggunakan cara ini sebagai alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya.  <h2>Efek fadeIn Page Load Blog</h2>Efek ini yang saya gunakan pada blog ini, demonya bisa di lihat saat membuka salah satu halaman di blog ini. Walaupun sederhana namun lumayan untuk memanipulasi loading halaman blog. Script yang di gunakan seperti dibawah ini, cara memasangnya masuk ke Edit HTML lalu taruh di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />$(document).ready(function () {<br /> $('body').hide().fadeIn(5000).delay(500)<br />});<br /></script><br /></pre>Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS <code>body{display:none}</code> untuk menyembunyikan body sebelum script berjalan. <h2>Efek fadeIn dan fadeOut Page Load Blog</h2>Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman). Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut tidak berjalan. Untuk menerapkannya kedalam blog caranya sama seperti langkah di atas, dengan menaruhnya di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br /> $("body").css("z-index", "-10");<br /> $("body").fadeIn(5000);<br /> $("a").click(function (event) {<br />  event.preventDefault();<br />  linkLocation = this.href;<br />  $("body").fadeOut(1000, redirectPage);<br /> });<br /><br /> function redirectPage() {<br />  window.location = linkLocation;<br /> }<br />});<br />//]]><br /></script><br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/page-load.html" target="_blank" rel="nofollow" title="illustrasi efek fadeOut"><span><i class="fa fa-eye"></i></span>DEMO</a></div>Namun sebelum menerapkan cara di atas juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya. <pre><br /><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><br /></pre>Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

jQuery Efek fadeIn dan fadeOut Page Load Blog – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karen...

Modifikasi Efek Hover Pada Button Dengan CSS3

Thursday, 6 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpKRzINpTWg34x_2PVmZLl__deUeI0tgaXkblEJBQtYSjN1euV1TTG-0Gn0HIBnEsHCFj-2a-UD-eYAHxoMw-0aCcguNPNObRVvE5e013B8GRJJFFEpJIrJa21a7PgCBh8fEGmCK8IGY/s1600/button-CSS3.gif" class="center" ><img alt="Modifikasi Efek Hover Pada Button Dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpKRzINpTWg34x_2PVmZLl__deUeI0tgaXkblEJBQtYSjN1euV1TTG-0Gn0HIBnEsHCFj-2a-UD-eYAHxoMw-0aCcguNPNObRVvE5e013B8GRJJFFEpJIrJa21a7PgCBh8fEGmCK8IGY/s1600/button-CSS3.gif" title="Modifikasi Efek Hover Pada Button Dengan CSS3"/></a><b>Modifikasi Efek Hover Pada Button Dengan CSS3</b> – setelah beberapa waktu lalu berturut-turut membahas tentang efek jQuery sekarang beralih ke CSS untuk memodifikasi button dengan bermacam efek hover. Apabila mengeposkan artikel dan ingin membuat button saat hover dengan berbagai efek agar lebih mudah dengan menambahkan attribut class dan rel dari efek yang akan di gunakan. Beberapa efek yang dapat digunakan adalah 25 efek menggunakan CSS transform, 6 efek border transitions, 6 efek shadow dan glow transition serta 8 efek speech bubbles dan 4 efek curls. Untuk dapat menerapkan seluruh efek tersebut agar dapat digunakan didalam blog langkah pertama pasang kode berikut ini kedalam template blog dan taruh di atas kode <code></head></code>. <pre><link rel='stylesheet' href='https://mas-andes.googlecode.com/svn/trunk/hover-min.css' media='all'/></pre>Kemudian simpan template. <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/button.html" target="_blank" rel="nofollow"><span><i class="fa fa-eye"></i></span>DEMO</a></div>Untuk menentukan masing-masing efek yang akan di gunakan, kode pemanggilannya seperti dibawah ini: <h2><i class="fa fa-flask"></i> 2D Transforms</h2><pre data-codetype="HTML"><br /><a rel='grow' class='button grow'>Grow</a><br /><a rel='shrink' class='button shrink'>Shrink</a><br /><a rel='pulse' class='button pulse'>Pulse</a><br /><a rel='pulse-grow' class='button pulse-grow'>Pulse Grow</a><br /><a rel='pulse-shrink' class='button pulse-shrink'>Pulse Shrink</a><br /><a rel='push' class='button push'>Push</a><br /><a rel='pop' class='button pop'>Pop</a><br /><a rel='rotate' class='button rotate'>Rotate</a><br /><a rel='grow-rotate' class='button grow-rotate'>Grow Rotate</a><br /><a rel='float' class='button float'>Float</a><br /><a rel='sink' class='button sink'>Sink</a><br /><a rel='hover' class='button hover'>Hover</a><br /><a rel='hang' class='button hang'>Hang</a><br /><a rel='skew' class='button skew'>Skew</a><br /><a rel='skew-forward' class='button skew-forward'>Skew Forward</a><br /><a rel='skew-backward' class='button skew-backward'>Skew Backward</a><br /><a rel='wobble-horizontal' class='button wobble-horizontal'>Wobble Horizontal</a><br /><a rel='wobble-vertical' class='button wobble-vertical'>Wobble Vertical</a><br /><a rel='wobble-to-bottom-right' class='button wobble-to-bottom-right'>Wobble To Bottom Right</a><br /><a rel='wobble-to-top-right' class='button wobble-to-top-right'>Wobble To Top Right</a><br /><a rel='wobble-top' class='button wobble-top'>Wobble Top</a><br /><a rel='wobble-bottom' class='button wobble-bottom'>Wobble Bottom</a><br /><a rel='wobble-skew' class='button wobble-skew'>Wobble Skew</a><br /><a rel='buzz' class='button buzz'>Buzz</a><br /><a rel='buzz-out' class='button buzz-out'>Buzz Out</a><br /></pre><h2><i class="fa fa-flask"></i> Border Transitions</h2><pre data-codetype="HTML"><br /><a rel='border-fade' class='button red border-fade'>Border Fade</a><br /><a rel='hollow' class='button red hollow'>Hollow</a><br /><a rel='trim' class='button red trim'>Trim</a><br /><a rel='outline-outward' class='button red outline-outward'>Outline Outward</a><br /><a rel='outline-inward' class='button red outline-inward'>Outline Inward</a><br /><a rel='round-corners' class='button red round-corners'>Round Corners</a><br /></pre><h2><i class="fa fa-flask"></i> Shadow and Glow Transitions</h2><pre data-codetype="HTML"><br /><a rel='glow' class='button turqoise glow'>Glow</a><br /><a rel='box-shadow-outset' class='button turqoise box-shadow-outset'>Box Shadow Outset</a><br /><a rel='box-shadow-inset' class='button turqoise box-shadow-inset'>Box Shadow Inset</a><br /><a rel='float-shadow' class='button turqoise float-shadow'>Float Shadow</a><br /><a rel='hover-shadow' class='button turqoise hover-shadow'>Hover Shadow</a><br /><a rel='shadow-radial' class='button turqoise shadow-radial'>Shadow Radial</a><br /></pre><h2><i class="fa fa-flask"></i> Speech Bubbles</h2><pre data-codetype="HTML"><br /><a rel='bubble-top' class='button orange bubble-top'>Bubble Top</a><br /><a rel='bubble-right' class='button orange bubble-right'>Bubble Right</a><br /><a rel='bubble-bottom' class='button orange bubble-bottom'>Bubble Bottom</a><br /><a rel='bubble-left' class='button orange bubble-left'>Bubble Left</a><br /><a rel='bubble-float-top' class='button orange bubble-float-top'>Bubble Float Top</a><br /><a rel='bubble-float-right' class='button orange bubble-float-right'>Bubble Float Right</a><br /><a rel='bubble-float-bottom' class='button orange bubble-float-bottom'>Bubble Float Bottom</a><br /><a rel='bubble-float-left' class='button orange bubble-float-left'>Bubble Float Left</a><br /></pre><h2><i class="fa fa-flask"></i> Curls</h2><pre data-codetype="HTML"><br /><a rel='curl-top-left' class='button purple curl-top-left'>Curl Top Left</a><br /><a rel='curl-top-right' class='button purple curl-top-right'>Curl Top Right</a><br /><a rel='curl-bottom-right' class='button purple curl-bottom-right'>Curl Bottom Right</a><br /><a rel='curl-bottom-left' class='button purple curl-bottom-left'>Curl Bottom Left</a><br /></pre>Demikian untuk cara <b>Modifikasi Efek Hover Pada Button Dengan CSS3</b> agar setiap button dapat memiliki efek hover yang berbeda-beda.

Modifikasi Efek Hover Pada Button Dengan CSS3 – setelah beberapa waktu lalu berturut-turut membahas tentang efek jQuery sekarang beralih ke...

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Monday, 3 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s1600/jquery-toggle.gif" class="center" ><img alt="Penggunaan jQuery Toggle, fadeToggle dan slideToggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s400/jquery-toggle.gif" title="Penggunaan jQuery Toggle, fadeToggle dan slideToggle"/></a><b>Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle</b> – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah <code>jquery-1.10.2</code>. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode <code></head></code> atau bisa juga di atas <code></body></code>. <pre><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></pre>Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut. <blockquote class="info">Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property <code>display:none</code>, bukan <code>visibility:hidden</code>. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code>.</blockquote><h2>Penggunaan jQuery Toggle</h2>jQuery Toggle digunakan untuk membuat efek <code>show()</code> dan <code>hide()</code> yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode <code>toggle()</code>. Syntax yang di gunakan seperti dibawah ini: <pre>$(selector).toggle(speed,easing,callback)</pre><h3>Contoh:</h3>Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini: <pre data-codetype="CSS"><br />#btn1{<br />padding:5px 15px;<br />background:#2ecc71;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh1{<br />display:none;<br />text-align:center;<br />background:#2ecc71;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='btn1'>Toggle</button><br /><div id='contoh1'>Contoh penggunaan jQuery toggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle(1000);<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt blue" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle(1000,function(){<br />      alert("Pesan ini muncul setelah toggle selesai berjalan");<br />    });<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery fadeToggle</h2>Metode <code>fadeToggle()</code> digunakan untuk memunculkan efek <code>fadeIn()</code> dan <code>fadeOut()</code> pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).fadeToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode <code>toggle()</code>. <pre data-codetype="CSS"><br />#bton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#gambar{<br />display:none;<br />text-align:center;<br />padding:10px;<br />background:#E74C3C;<br />border:5px solid #fff<br />}<br />#gambar img{<br />width:300px;<br />height:200px;<br />border:5px solid #fff<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='bton1'>fadeToggle</button><br /><div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDlRtgrPxSOuOPaTxbPyrZE0n-FRovNoXAVXzbJBWQ-8F6kAtTxd2ufcn7W8_-t0BOISZ0vLjQI9F1h90ZCSLeEVXmbhDgu3AITtVNDO8NqxUTJF2OPyqeOZsEF_U5pBFpW0HNi-3uzLw/h200/Paramore+%287%29.jpg"/></div><br /></pre><pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#bton1").click(function(){<br />    $("#gambar").fadeToggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt purple" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/fadetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery slideToggle</h2>Fungsinya sama seperti metode <code>toggle()</code> dan <code>fadeToggle()</code>, hanya saja efeknya yang berbeda. Metode <code>slideToggle()</code> digunakan untuk membuat efek <code>slideDown()</code> dan <code>slideUp()</code>. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).slideToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini: <pre data-codetype="CSS"><br />#buton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh2{<br />display:none;<br />text-align:center;<br />background:#E74C3C;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><div id="buton1">slideToggle</div><br /><div id="contoh2">Contoh penggunaan jQuery slideToggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt orange" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle(1000);<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle(1000,function(){<br />      alert("Pesan ini muncul setelah slideToggle selesai berjalan");<br />    });<br />  });<br />});<br /></pre> <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h3><i class="fa fa-cogs"></i> Konfigurasi:</h3><table>  <tr><th>Parameter</th><th>Deskripsi</th></tr>   <tr><td><em>speed</em></td><td>Opsional. Untuk menentukan kecepatan efek.<p>Value:</p><ul> <li>milidetik (contoh: <code>1000</code>, <code>2000</code>, dst).</li> <li><code>"slow"</code></li> <li><code>"fast"</code></li></ul></td></tr><tr><td><em>easing</em></td><td>Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing"<p>Value:</p><ul> <li><code>"swing"</code> bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah.</li> <li><code>"linear"</code> bergerak dalam kecepatan konstan.</li></ul></td></tr><tr><td><em>callback</em></td><td>Opsional. Fungsi yang akan dieksekusi setelah metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code> sudah selesai berjalan. </td></tr></table>

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yan...