Blogger Kota Sukabumi: 2013

Home » Archive for 2013

Mengenal Kode HTML Dasar Div Dan Stylenya

Mengenal Kode HTML Dasar Div - Style

Bloggerkotasukabumi - HTML adalah singkatan dari Hyper Text Markup Language adalah salah satu bahasa yang umum dan paling sederhana untuk menulis di web. Sama halnya dengan manusia yang mempunyai bahasa tersendiri dan bicaranya pun berbeda begitu pun dengan internet yang mempunyai bahasa sendiri. Dengan bantuan bahasa HTML kita bisa melakukan aktivitas di internet seperti halnya upload data di internet sesuai yang kita inginkan.

Ada seorang webmaster yang bilang bahwa untuk mempelajari HTML tidaklah sulit jika dipelajari dengan sungguh-sungguh karena HTML adalah paduan ilmu dan seni dimana di dalamnya terkandung nilai estetika dan ilmu desain web yang memerlukan penguasaan bahasa mesin yang nantinya dapat diterjemahkan oleh browser. Bahasa HTML adalah salah satu bahasa komputer yang paling dasar. HTML adalah file teks atau file ASCII yang berisi perintah dengan script kepada wen browser agar menampilkan suatu tampilan grafis dari sebuah halaman di web.

Dalam file HTML terdiri dari beberapa tag HTML atau kode-kode HTML yang dimengerti oleh web browser agar dapat menampilkannya pada halaman-halaman web. File HTML dapat di buat melalui aplikasi text editor apapun di setiap operasi apa saja, antara lain : notepad di window, emasc atau vi di unix atau simple text di macintosh dan juga telah banyak tersedia aplikasi instant HTML editor. File HTML juga bisa di buat di MS.Word asal penyimpanannya melalui save as format plain text.

Salah satu kelebihan file HTML adalah cross platform maksudnya file HTML dapat di buka atau di tampilkan di beberapa sistem operasi yang berbeda dan tampilan yang persis sama meskipun saat pembuatan dan pengeditannya menggunakan operating sistem yang berbeda.

Kembali ke pokok bahasan tadi kode HTML dasar div bisa dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini :

<div>

ISI DARI DIV HTML TAG

</div>

Jika anda membentuknya seperti ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat contoh yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Jadi ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Jadi mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background

Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

<div style="background: #9fc5e8">

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas adalah kode warna yang saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.computerhope.com/htmcolor.htm.

Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

<div style="background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalah padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px ">

ISI DARI DIV HTML TAG

</div>

Dari pengaturan di atas anda ingin menaruh "ganjalan" setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk seperti ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center ">

ISI DARI DIV HTML TAG

</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

Kalau anda ingin mengubah bentuk font, maka kode font-family: Nama Font harus anda tambahkan ke dalam kode ini. Adapun nama font yang bisa anda gunakan hanya yang disediakan oleh blogger seperti Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan penutup ; sebelum menambahkan style ini.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact">

ISI DARI DIV HTML TAG

</div>

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja kode font-size: ukuran yang anda inginkan. Ukuran bisa dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat contoh di bawah.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px">

ISI DARI DIV HTML TAG

</div>

Hasilnya akan terlihat seperti di bawah ini.

ISI DARI DIV HTML TAG

Style Width

Mungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun persen(%). Kali ini saya akan memakai pixel saja.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

Hasilnya seperti ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda bisa mengapitnya dalam kode <center></center>. Seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG
</div>

</center>

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style Border

Apakah anda ingin memberi garis pembatas pada kode ini? Jika ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal bisa anda isi dengan angka berapa saja dalam satuan px. Gaya anda bisa isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna bisa anda isi dengan kode warna dari situs di atas. Coba jika kita tambahkan kode seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6">

ISI DARI DIV HTML TAG

</div>

</center>

Maka hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam seperti di atas. Anda bisa menambahkan kode border-radius: value, di mana nilai value ini bisa diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak bingung lihat contoh di bawah saja.

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px">

ISI DARI DIV HTML TAG

</div></center>

Hasilnya akan terlihat seperti di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam kode di atas. Hasilnya seperti contoh di bawah ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc">

ISI DARI DIV HTML TAG</div></center>

Hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Keterangan : Apabila anda akan melakukan eksperimen disarankan untuk tidak menghilangkan atribut apabila ada salah satu atau dua atribut yang dihilangkan maka otomatis efeknya juga akan turut hilang.

Demikian ulasan tentang mengenal kode HTML Dasar Div -Style, selamat mencoba dan semoga bermanfaat.
happy blogging..............................

Cara Membuat Widget Recent Post Dengan Scroll

Bloggersukabumi - Fungsi dari recent post adalah memudahkan para visitor/pengunjung blog untuk melihat artikel terbaru dari blog/web yang dikunjunginya. Tampilan dari widget recent post ini mirip dengan widget Popular Post, saya rasa cukup penting untuk menampilkan widget ini di blog untuk lebih meramaikan dan juga memberikan kemudahan kepada visitor dalam mengakses artikel terbaru blog.

Untuk memasang widget ini sobat blogger bisa mengikuti cara dan langkah di bawah ini :

Pilih tata letak > tambah gadget > html/javascript

Sobat copy kode dibawah ini dan paste ke dalam kotak javascript:

<div style="overflow:auto; width:100%px; max-height:250px; padding:5px;">
<style>
img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 20;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://www.bloggerkotasukabumi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>

Terakhir klik simpan

Keterangan : silahkan sobat ganti alamat url yang berwarna biru dengan alamat url blog sobat. angka yang berwarna biru adalah jumlah artikel yang akan di tampilkan.

Selamat mencoba dan semoga bermanfaat.
happy blogging.......................

Cara Membuat Kotak Berlangganan Via Email Bawah Postingan di Blog

Bloggerkotasukabumi - Bagaimana cara membuat kotak berlangganan via email bawah postingan di blog, nah pada kesempatan sore ini saya akan berbagi dengan sobat blogger. Cara pasangnya cukup mudah sobat tinggal mengikuti instruksi cara dan langkah di bawah ini :

Masuk ke akun blogger sobat
Klik > template (cat: sebelumnya sobat backup template terlebih dahulu)
Klik tombol edit HTML >
Lalu sobat cari kode ]]></b:skin> gunakan ctrl + F untuk memudahkan pencarian
Apabila sudah ketemu sobat copy kode di bawah ini dan paste/letakan di atas kode ]]></b:skin>

.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrj8hfPPAWmcGLZ0B81tYN-x1Cm0kk2q8CODPWtZnyoAwnN7vMXomfoYDfqNba2q2oKYe9Tmnu9qgb46IKXCeboZGmkWxMiRRSC3ZUTs2WM5jo96AzZxf9i_mWQKFxISc4SdceWtMm56g/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;} .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

Langkah selanjutnya sobat cari kode <data:post.body/> sobat akan menemukan kode ini lebih dari satu dan pilihlah salah satunya atau yang kedua saja kemudian letakkan kode di bawah ini tepat di bawah kode <data:post.body/>

<div class='kotakRSS1'>
<div class='Rssardi33'>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/blogspot/ttHph' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#0099DD'>Tohirun Blog </font>
<div class='ardi33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=diesilver', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssardi33' name='email' onblur='if (this.value == "") {this.value = "Ketikkan email anda disini";}' onfocus='if (this.value == "Ketikkan email anda disini") {this.value = "";}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='blogspot/ttHph'/>
<input name='title' type='hidden' value='blogspot/ttHph'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>
</form></td>
<td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/blogspot/ttHph'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/ttHph?bg=9b9b9b&fg=fffffff&anim=0' style='border:0' width='88'/></a>

</td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>

Kode yang berwarna biru bisa sobat ganti dengan kata-kata pilihan sobat sendiri.
Kode yang berwarna merah ganti dengan alamat id feedburner sobat.
Terakhir simpan template sobat.

Selamat mencoba dan semoga bermanfaat.
happy blogging.......................

Cara Membuat Tulisan Dan Image Berjalan Di Blog

Bloggerkotasukabumi - Di dalam aktivitas blogging pastinya kita akan mendapatkan hal-hal baru dan dinamis dalam dunia blogging. Setiap blogger senantiasa selalu berusaha untuk mempercantik, memperindah blognya dengan berbagai script model tampilan misalnya di dalam postingan/sidebar atau lainnya menggunakan tulisan berjalan / marquee.

Dengan harapan untuk menarik minat visitor yang berkunjung ke blognya dan mau berlama-lama membaca seluruh artikel yang ada. Postingan artikel dengan judul Cara Memvuat Tulisan Dan Image Berjalan Di Blog ini saya ambil dari blog sahabat saya, yang sumbernya saya cantumkan di bawah postingan ini so..di bawah ini ada beberapa contoh yang bisa sobat gunakan di blog :

Cara pemasangannya :

Login ke akun blogger sobat
Klik tata letak >> tambah gadget >> html/javascript
Copy salah satu kode dibawah ini dan paste/letakan di kotak javascript.
Terakhir simpan.

>> Tulisan bergerak ke kanan, copy kode di bawah ini :

<marquee direction="right"><span style="color: rgb(255, 0, 0);

font-weight: bold;">Tulisan Bergerak Ke Kanan - silahkan sobat ganti </span></marquee>

CONTOH BUAT SOBAT!!!

>> Tulisan bergerak ke kanan dan ke kiri, copy kode di bawah ini :

<marquee direction="left" behavior="alternate"><span style="color:red;

font-weight: bold;">Tulisan Bergerak Ke Kanan dan Ke Kiri- silahkan sobat ganti</span></marquee>

CONTOH BUAT SOBAT!!!

>> Tulisan bergerak ke kanan dengan perlahan, copy kode di bawah ini :

<marquee direction="right" scrolldelay="500"><span style="color:red;

font-weight: bold;">Tulisan Bergerak Ke Kanan Perlahan-silahkan sobat ganti </span></marquee>

CONTOH BUAT SOBAT!!!

>> Tulisan bergerak ke kanan dan ke kiri bisa di stop, copy kode di bawah ini :

<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red;

font-weight: bold;">Tulisan bergerak ke kanan dan ke kiri dan bisa di stop-silahkan sobat ganti</span></marquee>

CONTOH BUAT SOBAT!!!

>> Tulisan bergerak ke atas, copy kode di bawah ini :

<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="95%"><span style="color: red;

font-weight: bold;">Tulisan bergerak ke atas-silahkan sobat ganti</span></marquee>

CONTOH BUAT SOBAT!!!

>> Tulisan bergerak ke atas dan ke bawah, copy kode di bawah ini :

<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red;

font-weight: bold;">Tulisan bergerak ke atas dan ke bawah-silahkan sobat ganti</span></marquee>

CONTOH BUAT SOBAT!!!
Keterangan:
Silahkan sobat ganti tulisan berwarna merah dengan tulisan/teks yang sobat kehendaki, di bawah ini ada beberapa pilihan warna yang tersedia :

Merah= red
Biru= blue
Kuning= yellow
Putih= white
Hitam= black

Bisa Diganti dengan kode warna

<span style="color:red; font-weight: bold;"> menjadi <span style="color:#f00; font-weight: bold;">
Ini Kode warnanya:
Merah= #f00;
Biru= #00f;
Hijau= #0f0;
Ungu= #f0f;

>> Image yang bergerak ke kanan dan ke kiri, copy code di bawah ini :

Keterangan : Silahkan sobat ganti link tulisan warna merah dengan link image sobat.

Selamat mencoba dan semoga bermanfaat.
happy blogging................
sumber

Cara Menghapus Dan Menghilangkan Navbar Pada Blogger

Bloggerkotasukabumi - Letak navbar / navigation bar default dari blogger selalu berada pada bagian paling atas dari sebuah blog. Sebagian para blogger menganggap navbar tidak terlalu penting untuk ditampilkan dikarenakan memiliki kode yang tidak valid atau error di samping stylenya kurang perfomance.

Pada pagi hari yang cerah ini saya akan share Cara Menghapus Dan Menghilangkan Navbar Pada Blogger. Silahkan sobat ikuti cara dan langkah di bawah ini :

( + ) Cara atau langkah menyembunyikan navbar :

Login ke akun blogger sobat
Klik template (catatan : backup terlebih dahulu template sobat)
Klik edit HTML
Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini dan paste / letakan tepat diatas kode ]]></b:skin>

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}
Terakhir simpan template sobat .

Langkah di atas adalah cara untuk menyembunyikan / tidak menampilkan navbar default blogger, namun pada template blog sobat masih terdapat kode dari navbar tersebut.

( + ) Cara atau langkah menghilangkan navbar default blogger :

Login ke akun blogger sobat.
Klik edit HTML
kemudian sobat cari kode <body>, lalu paste / letakkan kode di bawah ini tepat diatas kode <body>

<script type='text/javascript'>

<![CDATA[



]]>

</script>
Terakhir simpan template sobat.
Sobat akan mendapati warning konfirmasi seperti di bawah ini.
Silahkan sobat klik Delete Widgets untuk menghapus navbar.

Jika sobat melakukan cara seperti ini secara otomatis sobat juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat namun cara-cara seperti ini akan mengurangi error pada blog.

( + ) Cara terakhir menghapus navbar default blogger :

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>

....................................................

</b:widget>

</b:section>

Apabila sudah ketemu silahkan sobat hapus kode tersebut.
Simpan template sobat.

Demikian ulasan saya tentang Cara Menghapus Dan Menghilangkan Navbar Pada Blogger, silakan sobat pilih cara-cara dan langkah diatas tadi kira-kira mana yang pas buat sobat gunakan untuk menghapus atau menghilangkan navbar blogger.

Selamat mencoba dan semoga bermanfaat.
happy blogging.................

sumber

Cara Menghindari Penghapusan Blog Oleh Google

Bloggerkotasukabumi - Sering kali kita mendengar ada blog yang tiba-tiba di banned atau di hapus oleh google. Dan setahu saya bahwa blog yang di hapus tidak selalu karena tindakan copast akan tetapi adanya tindakan-tindakan diluar kepatutan/kewajaran seperti halnya memuat pornografi, melakukan tindakan yang berbau sara dan tindakan tidak terpuji lainnya.

Untuk menjaga terjadinya penghapusan blog yang salah satunya diakibatkan adanya tindakan copast maka tidak ada salahnya kita memasang atau membuat seperti privacy policy, disclaimer, atau script Anti Copy Paste.

Di bawah ini ada beberapa cara dan langkah-langkah untuk mengatasi hal diatas tadi :

Pasang dan buatlah Privacy Policy di blog sobat, ini dimaksudkan agar atau seolah-olah blog anda sudah memenuhi syarat dan ketentuan yang ada atau yang berlaku .

Cara pembuatan/pemasangan Privacy Policy :
- Silahkan sobat kunjungi situs ini : http://www.serprank.com/privacy-policy-generator/index.php
- Isikan informasi situs anda : alamat blog > email > pada kolom yang tersedia.
- Use Of Cookies pilih > Yes, We Use Cookies
- Klik > Create my Privacy Policy
Sobat pasang widget Copy Scape dan DMCA pada blog sobat.

Cara pembuatanya antara lain :
- Masuk ke dashbor blogger sobat, lalu paste letakan kode di bawah ini di navigasi (HTML / javascript) blog sobat.
  
  <a href="http://www.copyscape.com/duplicate-content/"><img src="http://banners.copyscape.com/images/cs-wh-88x31.gif" ALT="Protected by Copyscape Duplicate Content Penalty Protection" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." width="88" height="31" border="0"></A>
Maka Hasil Seperti dibawa ini :
Hasil Seperti dibawa ini :
Apabila sobat akan membuat artikel dan materinya berasal dari copast blog orang lain sebaiknya dan suatu keharusan untuk dilakukan edit ulang agar tidak terlihat sebagai artikel hasil copast.

Selamat mencoba dan semoga bermanfaat.

happy blogging......................

sumber

Membuat Gambar Membesar Saat disentuh Cursor

Blogger Sukabumi - Apa kabar sobat? kabar baik pastinya, so..pastinya sobat pernah menemukan dan melihat gambar/image yang tiba-tiba menjadi besar ketika disentuh/sorot cursor mouse. Para blogger menyebutnya Image Zoom Effects/Hover Zoom Smooth Effects.

Saya perhatikan para blogger banyak yang memasang fitur cantik ini di blognya, dan ada tapinya yaitu dengan memasang fitur image zoom effect dapat menggangu visitor yang sedang membaca postingan artikel kita. Apabila sobat berminat untuk memasangnya dapat mengikuti cara dan langkah di bawah ini :

Masuk ke akun blogger sobat.
Pilih Template > Edit Html.
Sobat cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
Apabila ketemu sobat copy dan paste/letakkan kode berikut tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Terakhir simpan template sobat.

Selamat mencoba dan semoga bermanfaat..

Membuat Link Berkedip Saat Disentuh Cursor

Bloggerkotasukabumi - Pada umumnya saat sebuah link disentuh cursor mouse maka akan terlihat link yang disentuh tadi ada garis bawah / underline.

Ada salah satu cara untuk membuat variasi lain dalam memberikan tampilan link lebih hidup dan menarik yaitu membuat link berkedip saat di sentuh cursor mouse. Pada postingan kali ini saya akan share tentang cara membuat link berkedip di blog.

Sobat bisa mengikuti cara dan langkah di bawah ini :

Klik design/rancangan > edit HTML.

Lalu sobat cari kode di bawah ini :

a:hover {color:#5588AA;text-decoration:underline;}

Setelah ketemu sobat ganti tulisan underline dengan blink

Terakhir klik simpan template sobat.

Selamat mencoba dan happy blogging.....................

Membuat Link Jadi Berwarna Di Blog

Bloggerkotasukabumi - Pada saat link di sentuh cursor mouse maka otomatis link yang di sentuh tadi berubah warna secara otomatis. Pemasangan kodenya mudah sekali sobat tinggal menambahkan kode yang telah disediakan.

Berikut cara dan langkah di bawah ini:

Klik Rancangan > Edit HTML.

Cari kode <b:skin><![CDATA[

Copy kode di bawah ini lalu paste di atas kode <b:skin><![CDATA[

Terakhir simpan template sobat.

Selamat mencoba dan semoga bermanfaat.
happy blogging.............

Cara Memasang Widget Berdampingan Di Blog

Bloggerkotasukabumi - Apa kabar sobat? kabar baik pastinya. Sudah lama saya tidak update postingan artikel karena rutinitas pada dunia real hehe.., dan pada kesempatan baik ini saya akan share dengan sobat blogger tentang Cara Memasang Widget Berdampingan Di Blog.

Bagi sobat blogger tentunya sudah bisa memilah sekiranya widget mana yang layak kita pasang dan bermanfaat untuk owner blog khususnya dan para visitor umumnya.

Akan tetapi adakalanya widget-widget yang kita pasang tidak beraturan seperti halnya widget histats yang berfungsi untuk mengetahui visitor blog, lalu ada alexa yang fungsinya untuk mengetahui tingkat kepopuleran blog, dan itu salah satu widget yang wajib di pasang dan tentunya cantik kalau dipasang berdampingan, kalau alexa punya saya tidak ada alias tidak muncul sewaktu ganti pakai template ini hehehe.. .

Kerapihan dalam tampilan widget barang tentu akan mendapatkan point plus buat blog sobat, so bagi sobat yang berminat dapat mengikuti cara dan langkah di bawah ini :

Login ke akun blogger sobat
Pilih menu Layout atau Tata Letak
Selanjutnya pilih HTML/JavaScript
Kemudian isi kotak javascript dengan kode di bawah ini :

<table><tr><td>simpan kode script widget disini</td><td>simpan kode script widget disini</td></tr></table>

Keterangan :
Simpan kode script yang akan sobat pasang berdampingan pada tulisan yang berwarna merah.

lihat contoh dibawah ini kode script widget Histats dan Alexa.

</td><td><a href="http://www.alexa.com/siteinfo/http://bloggerkotasukabumi.blogspot.com/"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://bloggerkotasukabumi.blogspot.com/'></script></a> </td></tr></table>

Keterangan : Kode yang berwarna merah adalah kode script untuk widget Histats, untuk yang berwarna biru adalah kode script untuk widget Alexa.

Selamat mencoba dan semoga bermanfaat.
happy blogging......................

Source

Cara Membuka Anti Copy Paste Pada Blog Lain

Bloggerkotasukabumi - Pada kesempatan pagi ini saya share kembali tentang Cara Membuka Anti Copy Paste Pada Blog lain. Saat kita melakukan touring di blog tetangga kita akan selalu mendapatkan sebuah tulisan peringatan dilarang melakukan copy paste alasannya mereka menghindari isi artikelnya di copy sama orang Lain.

Hal seperti itu memang dilematif kenapa? disatu sisi ingin menjaga orisilitas artikelnya terjaga walaupun sumber original artikelnya madih tanda tanya, disisi lain ingin berbagi dengan yang lainnya. Dan menurut pendapat blog tetangga saya jika artikel yang kita pasang tercantum Anti Copy Paste Itu menandakan bahwa "Blogger" tersebut pelit dan tidak mau berbagi.

Masih menurut tetangga saya bahwa hal itu sangat berpengaruh terhadap visitor / pengunjung blog, malah akan sangat mengurangi jumlah visitor blog kita. Seperti yang kita tahu bahwa kian hari jumlah blogger newbie semakin bertambah dan tentu saja karena ketidak tidaktahuan dalam membuat materi artikel untuk di posting sehingga terjadilah copaser-copaser. Hemat saya dalam mengambil artikel blog lain terlebih dahulu kita edit sedemikian rupa sehingga kemiripannya hampir tidak akan tetapi essensi materi sama dan yang lebih penting kita harus mencantumkan link sumber sebagai salah satu penghargaan terhadap jerih payah orang lain dalam membuat artikel.

Di bawah ini ada cara dan langkah dalam membuka Anti Copy Paste apabila sobat berminat silahkan ikuti cara dan langkah di bawah ini sampai tuntas :

1. Google Chrome

Buka blogger / blog/ web yang akan anda copy past atau copas .
Sobat lihat di pojok kanan atas gambarnya seperti ini:

Klik gambar yang dilingkari.
Kemudian Setting apabila chrome sobat selalu di update, klik ‘Show Advanced Settings..’ yang berada di bagian paling bawah.
Pada bagian Privasi pilih Content Setting
Lalu dibawah tulisan JavaScript, pilih ‘Do not allow any site to run JavaScript’
Lalu tekan OK.

2. Opera Mini

Buka atau open blogg yang akan di copast
Klik ‘F12’
Akan keluar gambar seperti di samping.
Kemudian hilangkan gambar centang di bagian ‘Enable Java Script’

3. Mozilla Firefox

Buka blog yang akan di copast
Liat di pojok kiri atas, klik sesuai anak panah yang ditunjukkan gambar dibawah, Firefox yang selalu di update atau tidak silahkan sesuaikan.

Setelah klik Options nanti akan keluar gambar seperti dibawah ini.

Pilih Content-Lalu klik hilangkan tanda centang di Enable Java Script
Lalu tekan OK

Apabila sudah selesai kembali aktifkan kembali fungsi dari JS yang telah kita non aktifkan diatas. Selamat mencoba dan semoga bermanfaat.

happy blogging....................

sumber

Cara Memasang Widget CCTV Di Blog

Bloggerkotasukabumi - Postingan artikel saya kali ini mengenai cara memasang widget cctv di blog. Cara pemasangannya pun terbilang mudah, silahkan sobat ikuti cara dan langkah di bawah ini :

1. Login ke blogger sobat

2. Pilih Tata Letak / Layout

3. Lalu tambah gadget / add gadget

4. Kemudian sobat pilih HTML/JavaScript

5. Selanjutnya copy kode script di bawah ini lalu paste di dalam kotak javascript

<a href="#" title="I'be watching you !!"><img src="http://www.file.host-lk.tk/cctv.gif" alt="I'be watching you !!" style="border: 0px; position: fixed; top: 0px; right: 0px;" /></a>

6. Terakhir simpan

Selamat mencoba dan semoga bermanfaat.
happy blogging.............................

Cara Membuat Link Membesar Otomatis

Bloggerkotasukabumi - Pada postingan kali ini saya akan berbagi dengan sobat newbie tentunya tentang Cara Membuat Link Membesar Otomatis.

Jangan bingung dulu sob, saya akan kasih ringkasannya dulu biar nggak meraba-raba hehe..maksud dari judul diatas adalah pada saat kita menyorot atau menyentuh sebuah link yang ada di dalam sebuah artikel blog kita maka otomatis akan menjadi besar tulisannya, begitu sob.

So..bagi sobat yang ingin memasang cara ini ikuti cara dan langkah dibawah ini :

Login ke akun blogger sobat.
Pilih Template > Edit HTML.
Sobat cari kode a:hover { gunakan ctrl + F untuk pencariannya
Setelah ketemu ganti kode font-size dengan ukuran yang lebih besar.
Kode angka sebelum di ganti :

a:hover {
color:#d2691e;
font-size:10px;
font-style:italic;
cursor:wait;
}
Silahkan sobat ganti kode angka warna pink atau dengan selera sobat

a:hover {
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
}
Terakhir klik Simpan Template.

Selamat mencoba dan semoga bermanfaat.
happy blogging.....................

Cara Menghilangkan No Data Di Alexa

Apa kabarnya, sobat? kabar baik tentunya. Postingan menjelang subuh ini saya ingin berbagi dengan sobat blogger tentang cara menghilangkan no data di alexa. Saat saya membuat blog baru dan memasang widget alexa semuanya masih kosong alias tidak ada angkanya, kenapa?.

Terjadinya no data ada 2 (dua) penyebab pertama kurangnya update blog artinya jarang update artikel/posting di blog karena alasan kesibukan dan menyebabkan alexa rank tidak naik jasi lakukanlah secara rutin dan terjadwal untuk update postingan di blog secara rutin bisa dilakukan 1x dalam seminggu tergantung waktu yang sobat miliki. Kedua belum pernah melakukan claim site (claim blog) dan verify my id.

Pada poin ke dua yaitu blog sobat belum pernah melakukan proses claim site dan pada widget alexa terdapat keterangan status not claimed. Apabila ternyata belum claim site sobat bisa mengikuti cara dan langkah di bawah ini:

Kunjungi/login dengan akun sobat Alexa.com

Pilih menu site tools

Setelah itu klik Claim Your Site

Masukan url blog sobat

Pada menu pilihan Claim Your Site, sobat akan diberikan kode ID Verification untuk dipasang di blog.

Setelah itu sobat buka akun blog sobat klik template > edit html

Lalu cari kode <head> untuk mempermudah gunakan ctrl + F setelah ketemu copy kode di bawah ini dan paste tepat di bawah kode <head>

Setelah meletakkan kode kembali lagi ke akun alexa untuk melakukan verifikasi.

Proses claim your site selesai.

Lakukan refresh blog atau sobat bersabar dahulu satu atau dua hari untuk melihat perubahan pada alexa rank sobat. Terpenting sobat selalu melakukan update postingan blog

Semoga bermanfaat

Blogger Kota Sukabumi

Total Pageviews

Informasi Blog

Space Iklan

Pengunjung Blog

Mengenal Kode HTML Dasar Div Dan Stylenya

Cara Membuat Widget Recent Post Dengan Scroll

Cara Membuat Kotak Berlangganan Via Email Bawah Postingan di Blog

Cara Membuat Tulisan Dan Image Berjalan Di Blog

Cara Menghapus Dan Menghilangkan Navbar Pada Blogger

Cara Menghindari Penghapusan Blog Oleh Google

Membuat Gambar Membesar Saat disentuh Cursor

Membuat Link Berkedip Saat Disentuh Cursor

Membuat Link Jadi Berwarna Di Blog

Cara Memasang Widget Berdampingan Di Blog

Cara Membuka Anti Copy Paste Pada Blog Lain

Cara Memasang Widget CCTV Di Blog

Cara Membuat Link Membesar Otomatis

Cara Menghilangkan No Data Di Alexa

Translator

Cari Blog Ini

Space Iklan

Random Artikel

Artikel Sering Dibaca

Arsip Blog

Label Blog