Tambah sidebar menjadi 3 kolom

kali ini saya memasang posting tentang sidebar..caranya cukup mudah,tinngal liat cara dibawah ini...



* Sign ke Blogger.
* Pilih Rancangan.
* Pilih Edit HTML.
* Back up dulu template anda.
* Tombol pada Expand Tempate Widgetnya tidak perlu dikasih tanda contreng.
* Cari kode #sidebar
* Copy kode dibawah in dan paste diatas kode tadi.

#sidebaratas-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:470px;
float:right;
padding:5px;
margin-top:10px;
}

ubahlah kode tersebut sesuai dengan lebar dari kedua sidebar yang sudah ada dengan menjumlahkan width dari kedua sidebar ditambah padding dan margin.
Contoh sidebar yang digunakan pada EPG Studio (kode ini hanya untuk contoh saja)

#sidebaratas-wrapper { /*Sidebar yang ditambahkan*/
border: 1px none #FFFFFF;
background:#0000b3;
width:470px;
float:right;
padding:5px 5px .25em;
margin-bottom:10px;
}
#sidebar-wrapper { /*sidebar lama*/
width: 260px;
float: $endSide;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarbaru-wrapper {/*sidemar lama*/
width: 200px;
float: right;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
psdding-left:5px;
word-wrap: break-word;
overflow: hidden;
}

* Setelah selesai mengubah lebar sidebar baru, cari kode seperti ini :

* Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :

* Klik tombol Simpan Template.
* Selesai...Lihat Blog baru anda sekarang



Jika sidebar atas ingin ditampilkan dalam bentuk kotak-kotak ikuti langkah berikut ini :


* Masih di edit HTML.
* Cari kode ini :


/* Sidebar Content
----------------------------------------------- */

* Copy seluruh kode dibawah unu kemudian paste tepat dibawah kode tadi
.sidebaratas {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebaratas ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebaratas li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebaratas .widget{
background:#3D81EE;
border:2px solid #66B5FF;
margin:0 0 0.25em;
padding:0.5em;
}

Ubahlah kode yang berwarna merah sesuai dengan keinginan anda
* Setelah selesai pengeditan, klik Tombol Simpan Template.
* Lihat perubahan pada blog anda.

Read more »

Posted in: HTML

Membagi sidebar menjadi 2

  biasanya bisa untuk mempercantik dan juga emperbanyak iklan,,
langsung saja deh ini caranya,,tinggal copas aja..hehehehehe



1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

7. Setelah itu, cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.

Read more »

Posted in: HTML

Membuat 3 kolom dibawah header

Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:

1. Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
2. Cari kode ]]></b:skin>;
3. Sebelum atau di atas kode ]]></b:skin>, letakkan kode di bawah ini:
   /* Top Header
   ---------------------------- */
   #topheader {
   width:930px;
   clear:both;
   float:left;
   color:#333;
   background:#fff;
   margin:0 auto;
   padding:0 0 10px;
   }
   
   #topheader a:visited {
   color:gray;
   text-decoration:none;
   }
   
   #topheader h2 {
   font-size:11px;
   font-weight:700;
   line-height:1.4em;
   text-transform:uppercase;
   border-bottom:1px dotted silver;
   margin:0 0 10px;
   padding:20px 0 2px;
   }
   
   #topheader ul {
   color:#333;
   margin:0;
   padding:0;
   }
   
   #topheader ul li {
   list-style-type:none;
   background:fff;
   border-bottom:1px dotted #ccc;
   padding-left:17px;
   margin-top:2px;
   }
   
   #left-topheader {
   width:360px;
   float:left;
   padding-left:15px;
   }
   
   #center-topheader {
   width:230px;
   float:left;
   padding:0 20px;
   }
   
   #right-topheader {
   width:260px;
   float:right;
   padding-right:15px;
   }
   
   
   Keterangan:
   #topheader adalah kode untuk kolom secara keseluruhan;
   #left-topheader adalah kode untuk kolom sebelah kanan;
   #center-topheader adalah kode untuk kolom pada posisi tengah;
   #right-topheader adalah kode untuk kolom sebelah kiri;
   Width: px adalah kode untuk ukuran lebar kolom;
   Padding adalah jarak sela antara kolom satu dengan lainnya;
   
   Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
4. Selanjutnya cari kode di bawah ini:
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
   </b:section>
5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:
   <div id='topheader'>
   <b:section class='topheader' id='left-topheader' preferred='yes'/>
   <b:section class='topheader' id='center-topheader' preferred='yes'/>
   <b:section class='topheader' id='right-topheader' preferred='yes'/>
   </div>
6. Simpan Tamplate, selesai.

Demikianlah tutorial cara menambah 3 (tiga) kolom di bawah header blog ini, semoga bermanfaat.

Read more »

Posted in: edit template,HTML

Tambahan Icon Pada Label Atau Category

Berkaitan dengan artikel yang kemaren yaitu tambahan Icon pada post footer dan artikel kali ini hampir serupa mengenai tambahan icon, seperti yang kita tau Label/category adalah pengelompokan beberapa artikel yang terkait, dan sebagai icon yang cocok adalah Folder karena folder adalah tempat untuk mengelompokkan file-file terkait atau kelompok file tertentu. Sekarang saya akan membuat artikel yang cukup ringan tapi semoga bermanfaat bagi para blogger untuk membuat blognya lebih hidup dan menarik! Istilah dalam iklan di TV adalah lebih punya taste gitu loh!. Maka dari itu ijinkanlah saya membuat artikel untuk menambah Icon pada Label/category.

Sebenarnya dalam label/category icon standarnya yaitu list style yang berbentuk bulat tapi kali ini Saya mencoba untuk menggantinya jika ada list stylenya dan menambah jika belum ada list stylenya, moga-moga nggak bingung dengan penjelasanku...

Nah sekarang langsung ke TKP (tempat kejadian project) yaitu ke blogspot!
silahkan Baca, Pahami dan Praktikan!

pertama harus log in ke blogger, kedua masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Taruh Code dibawah ini diatas Code ]]></b:skin>

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

Nah tulisan yang tercetak merah diatas adalah URL gambar icon bisa kamu ganti punya kamu sendiri atau bisa menggunakan icon folder yang saya sediakan dibawah ini


http://i296.photobucket.com/albums/mm169/anasku/folder-16x16.png


http://i296.photobucket.com/albums/mm169/anasku/folder-open-16x16.png


http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png


http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png

Nah kalau sudah silahkan SAVE untuk melihat hasilnya silahkan buka blog Anda.

Nah setelah Anda menggunakan trik kali ini pasti blog Anda akan kelihatan Cool kaya yang punya mungkin :D

nah sekian dulu! artikel yang ringan ini semoga sedikit membantu Anda untuk mempercantik Blog Anda,

Semoga bermanfaat

Read more »

Posted in: HTML

Membuat save energy

             Pada Tutorial ini saya juga akan membuat tutorial tentang Membuat Mode Penyimpanan Energi Blogger. Ada baiknya sebelum kita masuk ke tutorialnya kita bahas dulu mengenai kegunaan penyimpanan energi blogger ini. Menurut saya kegunaan ModePenyimpanan Energi Blogger hampir sama dengan fitur Stand By pada Windows namun secara spesifiknya kegunaan mode penyimpanan energi blogger ini adalah untuk menghemat energi saat loading blog sehingga loading blog akan terasa lebih cepat walau tidak akan begitu terasa perbedaannya dan apabila halaman blog dibiarkan saja terbuka namun tidak ada aktivitas apa-apa oleh pengunjung blog maka akan muncul layar gelap dan bertuliskan "Energi Saving Mode Blogger atau Mode Penyimpanan Energi". Bagi kalian yang tertarik untuk memasang Penyimpanan Energi Blogger ini ikuti langkah-langkahnya sebagai berikut:

Caranya sangat gampang koq, Login dulu di blog kalian terus pilih Rancangan --> Edit HTML dari cari kode

< /head >

lalu copy dan paste kode di bawahnya.
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=id"></script>

Gimana mudah bukan. Semoga bermanfaat, jangan lupa kasih saran untuk blog ini di kotak komentar dan terimakasih atas kunjungannya, saya tunggu kunjungan berikutnya dengan tutorial yang tak kalah menarik dari tutorial kali ini. Selamat mencoba

Read more »

Posted in: HTML

MEMBUAT HALAMAN STATIS

MEMBUAT HALAMAN STATIS: "

Halaman Statis merupakan filtur baru blogger yang mirip dengan postingan. Namun karena sifatnya statis, sebaiknya Halaman Statis diisi dengan konten yang sifatnya tetap, tidak seperti postingan yang selalu berkembang sesuai kondisi.
Halaman Statis secara umum memuat informasi yang sifatnya tetap, semisal:

• Profil Admin.
• Hubungi Kami.
• Tukaran Link.
• Koleksi Award
• Info Blog.
• Daftar Isi, dan lain-lain sesuai dengan keperluan.
  

Perlu diingat, Halaman Statis jumlahnya dibatasi paling banyak 10 buah.


CARA MEMBUATNYA :

• Login ke Blogger.
• Masuk Entri Baru.
• Klik tab Edit Laman. Akan muncul tampilan seperti dibawah ini :
  
  
• Klik perintah Buat Laman untuk membuat Halaman Statis. Akan muncul gambar seperti tampilan untuk membuat postingan :
  
  
  
  Silahkan anda isi Judul beserta uraiannya.
  
• Klik peritah Tayangkan Laman yang berada dibagian bawah.
• Selanjutnya anda diminta untuk memilih penempatan Halaman Statis. Anda tinggal memilih posisi Halaman Statis, Dibawah Header sebagai Tab Horizontal atau pada sidebar se bagai Tab vertikal. Perhatikan Gambar dibawah :
  
  
  
• Klik tombol perintah Simpan dan Terbitkan.
• Lihat Blog anda.
• Silahkan tambah Halaman Statis baru blog anda, maksimal 10 Halaman Statis.
• Selamat mencoba, semoga bermanfaat.
  

Sumber:

TUTORIAL BLOGGER
"

Read more »

Posted in: HTML

Membuat footer 3 kolom

Para lyfariArt'siders kali ini saya akan memposting untuk membuat footer,mungkin ini tidak penting tapi cukup untuk memeperindah blog anda
Langkah pertama
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Lagkah kedua 
ganti code"<b:section class='footer' id='footer'/>"dengan code di bawah ini

----------------------------------------------------------------------------------
<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>
</div>
---------------------------------------------------------------------------------------------------------------
Langkah ketiga
cari code"</b:skin>"
dan letakan code ini dibawahnya"#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}"

keterangan: ganti tulisan warna merah sesuai keinginan anda................ 


Selamat mencoba para lyfariArt'siders

Read more »

Posted in: edit template,HTML

Membuat footer 3 kolom

Mengedit template blogger untuk memiliki footer 3 kolom untuk template blogger ternyata bukan perkara yang sulit, namun sangatlah mudah, hanya butuh beberapa menit waktu anda. Mungkin rekan-rekan blogger menganggap ini perkerjaan rumit, yah silahkan saja menganggap begitu, namun tunggu dulu baca tutorial ini, pasti anda akan heran.

1. Seperti biasa login ke blogger.com
2. Kemudian klik “Expand Widget Template”
3. Lantas save template anda kalau-kalau terjadi kesalahan
4. Kemudian temukan ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
5. Ganti tag yang berwarna merah dengan script berikut:
---------------------------------------------------------------------------------------------------------------------
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
-----------------------------------------------------------------------------------------------------------
6. Save template anda!
Selamat anda telah mempunyai footer 3 kolom di blogger anda. Untuk melihat hasilnya, anda kembali ke “page element” lalu lihat bagian footer, pasti ada 3 tempat untuk menempatkan page element. Nah silahkan anda taruh page element yang anda inginkan di footer 3 kolom blogger blogspot anda.
Semoga bermanfaat dan selamat mencoba.

Read more »

Posted in: HTML

Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas
---------------------------------------------------------------------------------------------------------------

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

 -------------------------------------------------------------------------------------------------------------------------------------

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

---------------------------------------------------------------------------------------------------------------

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

---------------------------------------------------------------------------------------------------------------
Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!

Read more »

Posted in: HTML

Trik Memproteksi Blog dari Penjiplakan

Mungkin bagi sebagian para pemilik blog sering kali jengkel jika melihat artikel-artikel yang dibuatnya dengan memeras otak (emangnya cucian) tiba-tiba sudah ada di tempat blog milik orang lain, apalagi kalo disitu tidak disebutkan sumber asli dari artikel tersebut, pasti orang tersebut akan bilang "ANJRIT" :@ dan sumpah serapah yang lain (apa aja ya kata sumpah serapah?, aku taunya cuma itu doang, aku kan selalu ngomong yg baik2 jadi nggak tahu kata-kata kotor :D hooooeeeekkkkk..). Tapi mungkin bagi sebagian orang lagi sih nggak mempermasalahkannya, entah artikelnya diambil kek, di copy kek, di cekek kek "No Problem". Nha, kamu termasuk golongan yang mana nih? yang Protectif atau yang Cuekif (bahasa mana tuh "Cuekif"). Kalo kamu termasuk yang yang Protectif alias golongan orang yang artikelnya nggak mau dicuri orang, sini ikut saya , tak tunjukin jalan menuju sorga, eeh, maksudnya cara melakukannya.
Udah berdebar-debar ya?, nggak sabar nunggu ya? ya udah deh ini dia Tips dan Trik untuk memproteksi artikel dari pencurian...

pertama-tama kita panjatkan puja dan puji sukur kita kepada Tuhan YME. Walah malah pidato. Langsung aja deh
Pertama-tama kita panjatkan, walah kok itu lagi sih :@
Pertama-tama kita analisa dulu, biasanya kalo mau nyuri artikel kan ada beberapa cara nih, mulai dari menyeleksi tulisan yang mau dicuri kemudian di copy-paste. Atau melihat "Source Code"nya dengan meng-klik kanan dan lain-lain. Ada beberapa cara untuk mengatasi masalah tersebut, mulai dari cara yang mudah sampai cara yang sulit. Nha untuk Tips dan Trik kali ini kita akan mencoba menggunakan cara yang mudah saja, tapi ingat, cara ini hanya efektif untuk menghadapi maling kelas teri, jadi nggak akan mempan menghadapi para penjahat kelas kakap yang sudah banyak makan asam garam dunia internet (emangnya enak makan asam ama garam?). Tapi lumayan kan untuk berjaga jaga dari maling-maling kelas teri. Nha berikut adalah triknya...
copy script dibawah ini kedalam body kamu (lho? kok kedalam body sih?), maksudnya kedalam tag Edit HTML
cari kode ini letaknya kira-kira di tengah bagian kiri, dan biasanya setelah kode . perlu diperhatikan bahwa di dalam kode html terdapat banyak tulisan "body", jangan salah memilih body :D .
kalo sudah ketemu letakkkan script ini didalamnya

onmousedown="return false" oncontextmenu="return false" onselectstart="return false"

contohnya kayak gini nih

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >
Nha, script diatas untuk memproteksi agar text yang ada tidak bisa di seleksi untuk dicopy, dan juga tidak bisa di klik kanan.
trus bagaimana kalo kalo pencurinya lihat source code kita lewat menu-menu yang ada di web browser? misalnya yang pake Mozilla dengan cara Klik View -->> Page Source atau dengan menekan Ctrl+u. Nha untuk menakali masalah ini kita kita pakai cara licik aja, yaitu dengan menurunkan script html kebawah, caranya gimana tuh?
gini, taruh kursor/pointer ke atas tag <head> (letaknya dibagian atas), trus tekan enter sampai kira-kira 70 kali. Nha kalo pencurinya melihat source code kita, dia hanya akan melihat kode kepala dari html kita, sedangkan isi dari blog kita kan udah turun ke bawah, tul ga? :D
tapi ingat sekali lagi, ini hanya untuk pencuri kelas teri, walaupun diproteksi secanggih apapun, pasti tetap aja ada orang yang akan bisa membongkarnya, tapi kan setidaknya kita berjaga-jaga, ya tho?
Monggo di jajal..

Read more »

Posted in: HTML

cara membuat daftar isi

klik gambar untuk memperbesarKeberadaan daftar isi sangat lah penting untuk para pengunjung... karna sangat membantu para pengunjung untuk mencari article yang mereka temukan. liat contoh klik disini .untuk membuat nya sangat lah mudah ikuti saja langkah-langkah di bawah ini:

Langkah Pertama

1. Log in dulu di blogger
2. Klik Layouts --> Edit HTML -->
3. Beri centang di Expand Widget Template.
4. cari kode dibawah ini
   
   
   <b:include data='post' name='post'/>
5. ganti kode diatas dengan kode dibawah ini
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
6. Save tamplate

Langkah Kedua

1. klik layout
2. Klik Add a Gadget
3. Klik HTML/Javascript
4. Masukan kode di bawah ini
<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar Isi&raquo;</a>
5. Ganti yang berwarna merah dengan alamat blog anda
6. Save Lihat hasilnya...

Selamat mencoba

Read more »

Posted in: HTML

Judul Blog Bergerak atau Berjalan

Anda pasti pernah melihat judul suatu blog bergerak atau berjalan dari kiri ke kanan. Judul blog bergerak ini tentunya dapat menarik perhatian pengunjung. Cara membuat judul blog bergerak atau berjalan adalah sebagai berikut :

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode

--------------------------------------------------------------------------------------------------------

<title><data:blog.pageTitle/></title>

-------------------------------------------------------------------------------------------------------

6. Ganti kode tersebut dengan script berikut ini

------------------------------------------------------------------------------------------------

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

--------------------------------------------------------------------------------------------------------------

7. Angka 300 di dalam script tersebut merupakan kecepatan bergeraknya, silahkan ganti sesuai dengan selera anda. Jika anda ganti menjadi 100 atau 200 maka kecepatannya akan bertambah, sebaliknya kecepatan akan berkurang bila diganti menjadi 400
8. Klik Pratinjau untuk melihat apakah sudah ada perubahan sesuai dengan yang kita inginkan
9. Jika sudah oke, klik Simpan Template
10. Selesai

Selamat mencoba, semoga bermanfaat

Read more »

Posted in: HTML