Kang Rizal: Blog

Cara Membuat Link Berupa Tombol Di Blog

<h1 class="post-title entry-title">
</h1>
<div class="post-header">
<span class="post-author vcard" itemscope="itemscope" itemtype="http://schema.org/Person"><span class="fn author"><a href="https://www.blogger.com/profile/06765216664704492350" rel="author" title="author profile"><span itemprop="name"></span></a></span></span>
</div>
<div style="display: block; margin: 15px auto; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
 <img alt="Hasil gambar untuk cara membuat tombol button link di blog" class="irc_mi iElU75DzCsYE-pQOPx8XEepE" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQEuvcsYmnVpfb0tzRZDjEQHF1c3oi0mPiBJd6e3vW7d-tYDf8yhHYAt9PZ24X-rGBCMsMX3Z9GfEapbvrqwBSKIh8D14Yt6JHPNhuJEB-ke48OucHlhGpDzahO8Vr74Rked5GFeKl9Q/s320/liinkbutton.gif" style="margin-top: 110px;" width="320" /></div>
<br />
<div style="text-align: justify;">
Tahukah artinya Link ...? Menurut versi yang saya kutip dari <a href="http://id.wikipedia.org/wiki/Link">Wikipedia</a> Link itu adalah : Sebuah acuan dalam dokumen hiperteks (<i>hypertext</i>)
  ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di
  dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai
  dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh 
sumber yang direferensikan.</div>
<div style="text-align: justify;">
<br />
Dan menurut versi orang awam seperti <a href="http://www.kangrizal.ga/">saya</a> ini hehehehe... arti Link
 itu secara sederhana adalah : Sebuah perintah  yang bisa berbentuk 
teks/gambar, video dll yang ketika kita klik maka akan terbuka alamat 
yang dituju, alamat yang akan dituju itu bisa berupa alamat halaman web 
kita sendiri ataupun alamat halaman web yang lain. <i>( apabila menurut 
anda versi saya salah mohon kiranya di maafkan hehehehe... karena saya 
sendiri juga adalah orang yang masih belajar )</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pada umumnya Link
 yang ada pada suatu halaman blog adalah yang berbentuk Teks, sedangakan
 disini saya akan mencoba berbagi sedikit kepada sobat-sobat <a href="http://www.kangrizal.ga/">Kang Rizal</a> tentang Cara membuat Link berupa Tombol, lumayan lah menambah-nambahi perbendaharaan ilmu kita bersama. Hehehehehe....</div>
<br />
Langsung saja kita praktekkan:<br />
<ol style="text-align: left;">
<li>Login ke blog anda.</li>
<li>Pada halaman Dasboard klik "<b>Rancangan</b>".</li>
<li>Lalu klik "<b>Tambah Gadged</b>".</li>
<li>Kemudian klik "<b>Html / Java Script</b>".</li>
<li>Dan masukkan kode script yang ada dibawah ini lalu klik tombol "<b>Simpan</b>".</li>
</ol>
<br />
<blockquote class="tr_bq">
<form method="get" action="<b style="color: red;">http://davotmarbun.blogspot.com/</b>"<br />
target="<b style="color: #38761d;">_blank</b>"><br />
<input type="submit" value="<b style="color: blue;">Catatan Pena</b>" name="q"><br />
</form></blockquote>
<div style="text-align: justify;">
<i>Ket:</i></div>
<div style="text-align: justify;">
<i> </i>1. Yang berwarna <b><span style="color: red;">Merah</span></b> silahkan anda rubah sesuai dengan link anda sendiri.</div>
<div style="text-align: justify;">
2. Yang berwarna <b><span style="color: blue;">Biru</span></b> silahkan rubah sesuai keinginan anda.</div>
<div style="text-align: justify;">
3. Untuk tulisan <b style="color: #38761d;">_blank</b>
 adalah : Sebuah keterangan yang menjelaskan ketika anda klik tombol 
tersebut maka akan muncul halaman  tab baru, namun jika anda 
menginginkan muncul pada halaman itu sendiri ganti tulisan <b>_blank</b>  menjadi   <b>_self</b>.</div>
<div>
</div>
<div>
</div>
<div style="text-align: center;">
<blockquote class="tr_bq">
<div>
<form action="http://www.kangrizal.ga/" method="get" target="_blank">
<input name="q" type="submit" value="DEMO" />
</form>
</div>
</blockquote>
</div>
<br />

Cara Membuat Link Berupa Tombol Di Blog

Tahukah artinya Link ...? Menurut versi yang saya kutip dari Wikipedia Link itu adalah : Sebuah acuan dalam dokumen hipertek...

Baca selengkapnya.....

Kumpulan Widget Islami

<div style="text-align: center;">
<img alt="Hasil gambar untuk kumpulan widget islam untuk blog" class="irc_mi idC7K5m0UPNY-pQOPx8XEepE" height="261" src="http://blog.al-habib.info/wp-content/uploads/2009/10/ScreenShot012.jpg" style="margin-top: 70px;" width="491" /> </div>
<br />
1.ASMAUL HUSNA

<img border="0" height="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNjE1MjA4NjA5NjYmcHQ9MTM2MTUyMDg3MzQ2MiZwPTIzODk4MSZkPUlzbGFtaWMlMjBXaWRnZXQlM2ElMjBhc21h/dWxodXNuYS*wMWImZz*xJm89ZjBmMzMwNDFjNDI5NDE1M2E*ZmQ2MGFjNGVkOWQyYTkmb2Y9MA==.gif" style="height: 0px; visibility: hidden; width: 0px;" width="0" /><br />
<div style="height: 170px; margin: 0px auto; text-align: center; width: 150px;">
<embed allowscriptaccess="sameDomain" flashvars="col1=e18f32&col2=59ba1f&col3=005500&dur=3000" height="170" loop="false" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="autohigh" src="http://widgets.al-habib.info/images/Protected_islamic-widget-asmaulhusna-01b_wpd.swf" swliveconnect="true" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed><br />
<img border="0" height="0" src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1361520856570" style="height: 0px; visibility: hidden; width: 0px;" width="0" /></div>
copy script ini:<br />
<blockquote class="tr_bq">
<img border="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNjE1MjA4NjA5NjYmcHQ9MTM2MTUyMDg3MzQ2MiZwPTIzODk4MSZkPUlzbGFtaWMlMjBXaWRnZXQlM2ElMjBhc21h/dWxodXNuYS*wMWImZz*xJm89ZjBmMzMwNDFjNDI5NDE1M2E*ZmQ2MGFjNGVkOWQyYTkmb2Y9MA==.gif" height="0" style="height: 0px; visibility: hidden; width: 0px;" width="0" /><br /><br />
<div style="height: 170px; margin: 0px auto; text-align: center; width: 150px;"><br />
<embed allowscriptaccess="sameDomain" flashvars="col1=e18f32&amp;col2=59ba1f&amp;col3=005500&amp;dur=3000" height="170" loop="false" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="autohigh" src="http://widgets.al-habib.info/images/Protected_islamic-widget-asmaulhusna-01b_wpd.swf" swliveconnect="true" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed><br /><br />
<img border="0" src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1361520856570" height="0" style="height: 0px; visibility: hidden; width: 0px;" width="0" /></div></blockquote>
<br />
2.UCAPAN ASSALAMU'ALIKUM

<img border="0" height="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNjE1MjIzODE2NTMmcHQ9MTM2MTUyMjM5MDQxMyZwPTIzODk4MSZkPUlzbGFtaWMlMjBXaWRnZXQlM2ElMjB3ZWxj/b21lLW1lc3NhZ2Utc2FsYW*mZz*xJm89ZjBmMzMwNDFjNDI5NDE1M2E*ZmQ2MGFjNGVkOWQyYTkmb2Y9MA==.gif" style="height: 0px; visibility: hidden; width: 0px;" width="0" /><br />
<div style="height: 60px; margin: 0px auto; text-align: center; width: 250px;">
<embed allowscriptaccess="sameDomain" flashvars="colframe=3366ff&colsalam=33cc00&col1=ff6600&text1=selamat%20datang%20di%20situs%20kami&col2=33cc00&text2=semoga%20anda%20senang" height="60" loop="false" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="autohigh" src="http://widgets.al-habib.info/images/Protected_islamic-widget-welcome-message-salam_wpd.swf" swliveconnect="true" type="application/x-shockwave-flash" width="250" wmode="transparent"></embed><br />
<img border="0" height="0" src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1361522330478" style="height: 0px; visibility: hidden; width: 0px;" width="0" /></div>
copy script ini:<br />
<br />
<blockquote class="tr_bq">
<br />
<img border="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNjE1MjIzODE2NTMmcHQ9MTM2MTUyMjM5MDQxMyZwPTIzODk4MSZkPUlzbGFtaWMlMjBXaWRnZXQlM2ElMjB3ZWxj/b21lLW1lc3NhZ2Utc2FsYW*mZz*xJm89ZjBmMzMwNDFjNDI5NDE1M2E*ZmQ2MGFjNGVkOWQyYTkmb2Y9MA==.gif" height="0" style="height: 0px; visibility: hidden; width: 0px;" width="0" /><br /><br />
<div style="height: 60px; margin: 0px auto; text-align: center; width: 250px;"><br />
<embed allowscriptaccess="sameDomain" flashvars="colframe=3366ff&amp;colsalam=33cc00&amp;col1=ff6600&amp;text1=selamat%20datang%20di%20situs%20kami&amp;col2=33cc00&amp;text2=semoga%20anda%20senang" height="60" loop="false" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="autohigh" src="http://widgets.al-habib.info/images/Protected_islamic-widget-welcome-message-salam_wpd.swf" swliveconnect="true" type="application/x-shockwave-flash" width="250" wmode="transparent"></embed><br /><br />
<img border="0" src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1361522330478" height="0" style="height: 0px; visibility: hidden; width: 0px;" width="0" /></div></blockquote>
<br />
3.COUNTDOWN<br />
<div style="height: 220px; margin: 0px auto; text-align: center; width: 210px;">
<embed allowscriptaccess="sameDomain" flashvars="col1=2c6a06&col2=d4e714&eD=1&eM=1&eY=2018&et1=Future%20Events&et2=Ganti%20Dengan%20Agenda%20anda%20.Semoga%20Sukses%20asik....." height="220" loop="false" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="autohigh" src="http://widgets.al-habib.info/images/Protected_islamic-widget-countdown-ornament-01_wpd.swf" swliveconnect="true" type="application/x-shockwave-flash" width="210" wmode="transparent"></embed><br />
<img border="0" height="0" src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1483325751247" style="height: 0px; visibility: hidden; width: 0px;" width="0" /></div>
<br />
copy script ini:<br />
<blockquote class="tr_bq">
 <div style="margin:0px auto;text-align:center;width:210px;height:220px;"><embed src="http://widgets.al-habib.info/images/Protected_islamic-widget-countdown-ornament-01_wpd.swf" width="210" height="220" flashvars="col1=2c6a06&col2=d4e714&eD=<span style="color: blue;">1</span>&eM=<span style="color: blue;">1</span>&eY=<span style="color: blue;">2018</span>&et1=<span style="color: magenta;">Future</span>%20<span style="color: magenta;">Events</span>&et2=<span style="color: red;">May</span>%20<span style="color: red;">Allah</span>%20<span style="color: red;">bless</span>%20<span style="color: red;">you</span>%20<span style="color: red;">and</span>%20<span style="color: red;">your</span>%20<span style="color: red;">family</span>." swliveconnect="true" quality="autohigh" loop="false" menu="false" wmode="transparent" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /><br /><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://widgets.al-habib.info/images/blank.gif?_alhacid=1483325751247"></div></blockquote>
<br />
<span style="color: red;">Ganti Tulisan yang merah dengan agenda anda</span><br />
<span style="color: red;"><span style="color: blue;">Ganti tanggal acaranya</span></span><br />
<span style="color: red;"><span style="color: blue;"><span style="background-color: magenta;"><span><span style="background-color: white;"><span style="color: magenta;">Ganti terserah anda</span></span></span></span> </span> </span><br />
<br />

Kumpulan Widget Islami

1.ASMAUL HUSNA copy script ini: <img border="0" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*...

Baca selengkapnya.....

Cara Paling Mudah Menyembunyikan Tulisan Label Di bawah Postingan Blog

<h3 class="post-title entry-title" itemprop="name" style="background-color: #141414; color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 24.4799995422363px; font-stretch: normal; margin: 0px; position: relative;">
</h3>
<div class="post-header" style="background-color: #141414; color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.8400001525879px; line-height: 1.6; margin: 0px 0px 1em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-8814358064365442480" itemprop="articleBody" style="background-color: #141414; color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.8400001525879px; line-height: 1.3; position: relative; width: 298px;">
Widget label untuk blog sangatlah penting karena mempermudah pengunjung untuk melihat kategori artikel pada suatu blog,dan biasanya setelah kita mengaktifkan widget label di blog maka di bawah setiap postingan akan tampil tulisan label.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorUGsIiFz_lqJXxjhDZGfox_aqmOSEH3vR0CT1Xj_EmD8xTzciDEb6VNEf2XM18UzKyYZBEl-288HuGjLt6xCy5ztUdyQPlwZC2bi1Yu6dXhQWhtgOjuEneWiyUSmHG3ZPW2Wykc4EG8/s1600/untitled.JPG" imageanchor="1" style="color: #444444; text-decoration: none;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorUGsIiFz_lqJXxjhDZGfox_aqmOSEH3vR0CT1Xj_EmD8xTzciDEb6VNEf2XM18UzKyYZBEl-288HuGjLt6xCy5ztUdyQPlwZC2bi1Yu6dXhQWhtgOjuEneWiyUSmHG3ZPW2Wykc4EG8/s280/untitled.JPG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background: rgb(34, 34, 34); border-radius: 0px; border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; box-sizing: border-box; max-width: 100%; padding: 8px; position: relative;" width="280" /></a></div>
<br />
Lihat lingkaran <span class="Apple-style-span" style="color: red;">merah</span> pada gambar<br />
<br />
<br />
Nah .."dalam kondisi tertentu tulisan tadi mungkin mengganggu tampilan blog kita,maka untuk sobat-sobat yang ingin menyembunyikan atau bahkan menghapusnya Kang Roni akan memberikan solusi yang sangat mudah dan pasti jitu.Langsung aja sobat simak<a href="http://www.kangrizal.tk/" style="color: #444444; text-decoration: none;" target="_blank"><i>tutorial Kang Rizal</i></a> di bawah ini.<br />
<br />
1.Masuk ke <b>Rancangan/Setting</b> dan klik<b>Edit HTML</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Q1d5omrdCqMnb7xYe2Ynl6EynyCX3M-J-k4L_s2_MUShyphenhyphentX0y7GDd4U_VfvjpiUCPdHxSLNxRCmBUWNN3-UO0iKr8qHeoN-x2QN5v1EK1Fva05oYbebizJncxeFU6Bx7HgTqigALGW8/s1600/untitled.JPG" imageanchor="1" style="color: #444444; text-decoration: none;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Q1d5omrdCqMnb7xYe2Ynl6EynyCX3M-J-k4L_s2_MUShyphenhyphentX0y7GDd4U_VfvjpiUCPdHxSLNxRCmBUWNN3-UO0iKr8qHeoN-x2QN5v1EK1Fva05oYbebizJncxeFU6Bx7HgTqigALGW8/s280/untitled.JPG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background: rgb(34, 34, 34); border-radius: 0px; border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; box-sizing: border-box; max-width: 100%; padding: 8px; position: relative;" width="280" /></a></div>
<br />
2.<b>Download template lengkap</b> untuk berjaga-jaga bila nanti ada kesalahan<br />
3.Centang<b> Expand Template Widget</b><br />
4.<b>Cari kode di bawah ini</b><br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class='post-labels'></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><b:if cond='data:post.labels'><data:postLabelsLabel/></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><b:loop values='data:post.labels' var='label'></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><b:if cond='data:label.isLast != "true"'>,</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></b:if></b:loop></b:if></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></span></span><br />
<br />
Kalau tidak ada cara saja yang seperti di bawah ini<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class='post-labels'></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><b:if cond='data:post.labels'></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><b:loop values='data:post.labels' var='label'></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><a expr:href='data:label.url' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast == &quot;true&quot;'/></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></b:loop></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></b:if></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"></span></span><br />
<br />
Kalo masih tidak ada juga, cari aja yang mirip-mirip deh itung-itung buat eksperimen yang penting templatenya sudah di download tadi,jadi bila ada kesalahan kita bisa mengembalikan ke keadaan semula.<br />
Kalau sobat mau cari code yang mirip seperti code di atas dengan mudah,sobat cari aja sebagian seperti di bawah ini<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class='post-labels'></span><br />
<br />
Biasanya ada dua sobat pilih aja yang atas dan jangan lupa kalau sobat ingin menghapus code label tadi sobat harus menghapus semuanya sampai tag penutup, lihat tag penutupnya seperti di bawah ini<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"></span></span><br />
<br />
5.Setelah ketemu <b>Hapus</b> dan <b>simpan template</b><br />
<br />
<br />
Perlu di perhatikan bila sobat hanya ingin menyembunyikan saja sobat tinggal tambahin aja code <span class="Apple-style-span" style="background-color: lime;"> </span>di akhirnya<br />
jadinya seperti ini <span class="Apple-style-span" style="background-color: lime;"></span>--> </span>mudahkan.<br />
<br />
<span class="Apple-style-span" style="font-size: medium;">Selamat bereksperimen</span></div>

Cara Paling Mudah Menyembunyikan Tulisan Label Di bawah Postingan Blog

Widget label untuk blog sangatlah penting karena mempermudah pengunjung untuk melihat kategori artikel pada suatu blog,dan biasanya s...

Baca selengkapnya.....

Menyimpan Al-Qur'an Flash Di Blog

</div>
<div style="text-align: justify;">
<span class="awal">B</span>ulan Ramadhan tahun 2013 ini akan segera 
berakhir pada beberapa hari ke depan lagi, dan tentunya masih ada 
kesempatan untuk memperbanyak amalan di bulan suci ini seperti salah 
satu halnya memperbanyak membaca Al-Qur'an. </div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Untuk itu kita sebagai pemilik blog bisa menjadikan blog kita sebagai 
sarana ibadah kita dengan cara menyimpan Al-Qur'an Flash di blog kita 
untuk kita baca dan pelajari.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Dengan Al-Qur'an Flash ini kita membaca Al-Qur'an halaman per halaman. 
Kita membuka halamannya seperti halnya membuka halaman Al-Qur'an 
sehingga lebih memberikan rasa nyata ketika membacanya. Juga kita bisa 
sambil mendengarkannya sehingga kita bisa belajar membaca Al-Qur'an. 
Untuk screenshotnya seperti gambar di bawah ini.</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Al-Qur'an Flash" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZokQeHXQUWcxPNFJW8Qx5BAUiFlrjE1xdgq2W_1GbuCXa9u8myb3aSyGimOGkF5kaiNcXF1eXfD4lXPyuhTcoNtlyREqAiJJjjweROTX57NkoI5w84PbYCjk-3AQskV_BRG91-eUWZU8/s1600/AlquranFlash.png" title="Screenshot Al-Qur'an Flash Di Blog" width="560" /></div>
<div style="text-align: center;">
<a href="http://www.kompiajaib.com/p/blog-page_8.html" target="_blank" title="Demo"><span style="font-size: large;">DEMO</span></a></div>
<div style="text-align: center;">
</div>
<div style="text-align: justify;">
Bagaimana Anda juga ingin membuatnya di blog Anda? Silahkan copy kode di
 bawah ini dan paste di postingan HTML. Agar tidak memberatkan blog 
sebaiknya simpan di halaman statis blog.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: left;">
<pre><code>
<iframe src="http://www.quranflash.com/affiliate?en" frameborder="0" style="width: 100%; height: 700px;"></iframe></code></pre>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: justify;">
Agat tampilannya bisa lebar tanpa sidebar, silahkan tambahkan tag 
conditional untuk halaman statis-nya. Sebagai contoh tag conditional 
yang saya pakai seperti di bawah ini.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: left;">
<pre><code>
<style type="text/css">

<span style="color: red;">#sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,#sidebar4-wrapper,#sidebar5-wrapper,#sidebar6-wrapper,.breadcrumbs,
 .post-footer, #comments, #blog-pager,#hosting,#bbn6-box{display:none}</span>

<span style="color: blue;">.post h1,.post h2{text-align:center}</span>

<span style="color: purple;">.main-wrapper{width:100%}</span>

</style></code></pre>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: justify;">
Kode yang berwarna merah untuk menghilangkan bagian yang tidak ingin 
ditampilkan seperti sidebar, breadcrumb, komentar, blog pager, dan 
llain-lain.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Kode yang berwarna biru agar title postingan berada di tengah.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Kode berwarna ungu agar main wrapper yang menjadi wadah postingan menjadi lebar 100%</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Silahkan sesuaikan tag conditionalnya dengan blog masing-masing dan 
simpan di bawah kode Al-Qur'an Flash tadi, sehingga penampilannya akan 
seperti di bawah ini</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<pre><code>
<iframe src="http://www.quranflash.com/affiliate?en" frameborder="0" style="width: 100%; height: 700px;"></iframe>

#sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,#sidebar4-wrapper,#sidebar5-wrapper,#sidebar6-wrapper,.breadcrumbs,
 .post-footer, #comments, #blog-pager,#hosting,#bbn6-box{display:none}

.post h1,.post h2{text-align:center}

.main-wrapper{width:100%}

</style></code></pre>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: justify;">
Silahkan lakukan preview postingan untuk memastikan pemasangannya sudah benar, kemudian Publish postingannya.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Sumber kode: http://www.quranflash.com/</div>

Menyimpan Al-Qur'an Flash Di Blog

B ulan Ramadhan tahun 2013 ini akan segera berakhir pada beberapa hari ke depan lagi, dan tentunya masih ada kesempatan untuk memp...

Baca selengkapnya.....

Cara Mengganti Icon/Gambar Address Bar Di Blog

<h3 class="post-title entry-title" itemprop="name" style="background-color: white; color: #666666; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-size: 24px; font-weight: normal; margin: 0px; position: relative;">
Cara Mengganti Icon/Gambar Address Bar Di Blog</h3>
<div class="post-header" style="background-color: white; color: #666666; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-size: 16px; line-height: 1.6; margin: 0px 0px 1.5em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-6226176191013141375" itemprop="articleBody" style="background-color: white; color: #666666; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-size: 16px; line-height: 1.3; position: relative; width: 340px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWbkizByD8n3YOM3Rl4J0OxriuJIlDG7sOxGKofgvNm0hO-WOM8ZabyryQBMqV-saisWxhs70flzY6MnvbqwZUCGJjYy3MqpKSpETFn8VNij3Lthw1EGSSMxg57NYbHrNIS3Aa70_yzGh/s1600-h/icon1.png" style="color: #888888; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="79" id="BLOGGER_PHOTO_ID_5440352114491710658" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWbkizByD8n3YOM3Rl4J0OxriuJIlDG7sOxGKofgvNm0hO-WOM8ZabyryQBMqV-saisWxhs70flzY6MnvbqwZUCGJjYy3MqpKSpETFn8VNij3Lthw1EGSSMxg57NYbHrNIS3Aa70_yzGh/s200/icon1.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; float: left; height: 119px; margin: 0pt 10px 10px 0pt; max-width: 100%; padding: 5px; position: relative; width: 280px;" width="200" /></a></div>
<div style="text-align: justify;">
<br />
Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon kecil pada <b>address bar</b> (kotak untuk mengetikkan alamat web) . jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHX7dajXwqPN5N_o_Nok-FLlDv4IRbnGonqlQUE9LPHST-tdE48stR8nxywIeZv13SvYGQOUHVcBae4oCulTwPKD4bWSBGYdSstyjweQ27pijW2X1OIW0nyXBikXeMxbAc36_pES9VRs2j/s1600-r/blogger.gif" style="color: #888888; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5139828664229278898" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLb_DTRROW2vEQUqwaq7dZnmyvey9jcoRRWKLihhO9hp0LV1OqyQiRTZ587WVPYA6EcLeaCZkgScSiJzfEadGwZNW0CxxC4ahjcMjSOjRtUSyX0alPHYAkqhoHQVIlm4BHhErGPFXOpPCx/s320/blogger.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; cursor: pointer; height: 16px; max-width: 100%; padding: 5px; position: relative; width: 16px;" /></a> lalu dibarengi dengan alamat blognya.<br />
<br />
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 <span style="color: #006600;">24x42 pixel</span> sampai<span style="color: #006600;">32x32 pixel</span> (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).<br />
<br />
kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :<br />
<br />
1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon<br />
<br />
2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs</div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em; text-align: justify;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><a href="http://www.favicongenerator.com/" style="color: #888888; text-decoration: none;" target="_blank"><span style="color: #006600;">http://www.favicongenerator.com</span></a>atau</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><a href="http://www.favicon.co.uk/" style="color: #006600; text-decoration: none;" target="_blank">http://www.favicon.co.uk</a><br />Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><a href="http://favicon-generator.org/" style="color: #888888; text-decoration: none;" target="_blank">h<span style="color: #006600;">ttp://favicon-generator.org</span></a><br />atau</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><a href="http://www.favicon.cc/" style="color: #006600; text-decoration: none;" target="_blank">http://www.favicon.cc</a><br />Anda dapat membuat favicon sendiri sesuai kreasi Anda</li>
</ul>
<div style="text-align: justify;">
3. Klik pada tombol Browse...<br />
<br />
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon<br />
<br />
5. Klik pada tombol Generate Favicon.<br />
<br />
6. Setelah proses selesai, klik pada Click Here to Download your favicon.<br />
<br />
7. Save ke komputer anda.<br />
<br />
Setelah itu .....<br />
<span class="fullpost">masuk ke "<span style="font-weight: bold;">Tata Letak</span> --> <span style="font-weight: bold;">Edit HTML</span>" trus tempatkan script berikut sebelum kode</span><br />
<br />
<span class="fullpost"><b></head></b></span></div>
<blockquote>
<span class="fullpost" style="color: #cc0000;"><link href='</span><span class="fullpost" style="color: #006600;">http://img98.imageshack.us/img98/9617/image3cr0.gif</span><span class="fullpost"><span style="color: #cc0000;">' rel='SHORTCUT ICON'/></span></span></blockquote>
<div style="text-align: justify;">
<br />
<span class="fullpost">atau bisa juga seperti kode dibawah ini :</span></div>
<blockquote style="color: #cc0000;">
<span class="fullpost"><link rel="shortcut icon"<span style="color: #006600;">href="</span></span><span class="fullpost" style="color: #006600;">http://img98.imageshack.us/img98/9617/image3cr0.gif</span><span class="fullpost">"/></span></blockquote>
<div style="text-align: justify;">
<br />
<br />
<span class="fullpost">Ganti huruf yang berwarna <span style="color: #006600;">Hijau</span> dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di </span>tempat hosting gambar.<br />
<span class="fullpost">contohnya kamu mengupload gambar kamu di<a href="http://www.photobucket.com/" style="color: #006600; text-decoration: none;" target="_blank">photobucket</a> dan juga di <a href="http://www.imageshack.us/" style="color: #006600; text-decoration: none;" target="_blank">imageshack</a> sebagai contoh kamu meng</span><span class="fullpost">-upload</span> di <a href="http://picasaweb.google.com/" style="color: #006600; text-decoration: none;" target="_blank">Album Picasa</a><span class="fullpost">caranya seperti di bawah ini :</span></div>
<ol style="text-align: justify;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">Login ke picasa dengan account google di <a href="http://picasaweb.google.com/" style="color: #006600; text-decoration: none;" target="_blank">http://picasaweb.google.com</a></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Tekan tombol <span style="font-weight: bold;">I accept</span>.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol <span style="font-style: italic;">launch picasa</span> dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol<span style="font-weight: bold;">upload</span>.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-weight: bold;">Isikan form</span> title, date, dan seterusnya. jika selesai tekan tombol <span style="font-weight: bold;">continue</span>.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Tekan tombol <span style="font-weight: bold;">browse</span> dan arahkan pada file yang akan anda upload</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Tekan tombol start upload untuk menguploadnya ke dalam server picasa</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Klik kanan gambar tersebut dan pilih<span style="font-weight: bold;">properties</span>.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Link gambar yang bertuliskan<span class="fullpost" style="color: #006600;">http://img98.imageshack.us/img98/9617/image3cr0.gif</span> anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Lakukan hal yang sama untuk gambar2 yang lain</li>
</ol>
<div style="text-align: justify;">
<br />
<br />
<span class="fullpost">atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.</span><br />
<br />
<span class="fullpost"><img border="0" src="https://img87.imageshack.us/img87/5862/image1an1.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img87.imageshack.us/img87/5862/image1an1.gif</span><br />
<span class="fullpost"><img border="0" src="https://img110.imageshack.us/img110/6218/image2ie0.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img110.imageshack.us/img110/6218/image2ie0.gif</span><br />
<span class="fullpost"><img border="0" src="https://img98.imageshack.us/img98/9617/image3cr0.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img98.imageshack.us/img98/9617/image3cr0.gif</span><br />
<span class="fullpost"><img border="0" src="https://img134.imageshack.us/img134/633/image4hx4.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img134.imageshack.us/img134/633/image4hx4.gif</span><br />
<span class="fullpost"><img border="0" src="https://img412.imageshack.us/img412/3808/image11pc0.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img412.imageshack.us/img412/3808/image11pc0.gif</span><br />
<span class="fullpost"><img border="0" src="https://img100.imageshack.us/img100/4658/image12du2.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img100.imageshack.us/img100/4658/image12du2.gif</span><br />
<span class="fullpost"><img border="0" height="30" src="https://img132.imageshack.us/img132/4733/image13lj1.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" width="30" />http://img132.imageshack.us/img132/4733/image13lj1.gif</span><br />
<span class="fullpost"><img border="0" src="https://img145.imageshack.us/img145/7793/image14zg9.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img145.imageshack.us/img145/7793/image14zg9.gif</span><br />
<span class="fullpost"><img border="0" src="https://img412.imageshack.us/img412/4403/image15jc7.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img412.imageshack.us/img412/4403/image15jc7.gif</span><br />
<span class="fullpost"><img border="0" src="https://img264.imageshack.us/img264/7575/image16kn8.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img264.imageshack.us/img264/7575/image16kn8.gif</span><br />
<span class="fullpost"><img border="0" src="https://img139.imageshack.us/img139/83/image5oa7.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img139.imageshack.us/img139/83/image5oa7.gif</span><br />
<span class="fullpost"><img border="0" src="https://img509.imageshack.us/img509/6449/image6fu0.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img509.imageshack.us/img509/6449/image6fu0.gif</span><br />
<span class="fullpost"><img border="0" src="https://img507.imageshack.us/img507/5774/image8wn8.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img507.imageshack.us/img507/5774/image8wn8.gif</span><br />
<span class="fullpost"><img border="0" src="https://img150.imageshack.us/img150/5784/image9qo1.gif" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; max-width: 100%; padding: 5px;" />http://img150.imageshack.us/img150/5784/image9qo1.gif</span><br />
<br />
<br />
<span style="font-weight: bold;">Trim's</span> . . .</div>
</div>

Cara Mengganti Icon/Gambar Address Bar Di Blog

Cara Mengganti Icon/Gambar Address Bar Di Blog Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebua...

Baca selengkapnya.....