Mendaftarkan Website dan Blog di Penjejak.com

Apakah Anda sudah tahu jika sekarang ada Mesin Pencari buatan Indonesia? Ya, namanya Penjejak.com. Situs pencarian ini merupakan situs pencarian lokal, yang hanya mengindeks situs web dan blog berbahasa Indonesia yang telah lolos seleksi saja. Tentunya, kualitas hasil pencarian diharapkan menjadi lebih tepat sasaran dan sesuai dengan apa yang diinginkan pencari. Lantas, apakah website atau blog Anda sudah terindeks dan muncul di halaman hasil pencarian search engine Penjejak? Berikut petunjuk langkah untuk memastikan website atau blog Anda terindeks oleh Penjejak.

Mesin Pencari Penjejak.com

Memeriksa Status Website atau Blog Anda

Langkah pertama yang perlu Anda lakukan adalah menganalisa apakah website atau blog Anda sudah masuk di layanan Penjejak. Ada dua alternatif cara untuk memeriksanya:

• Menelusuri Direktori Web Penjejak. Di sana tersaji daftar situs yang telah masuk ke layanan Penjejak. Mengingat ada ribuan situs yang terbagi dalam ratusan kategori, maka tentunya langkah ini terlalu memakan waktu.
• Menggunakan fitur Analisis Web Penjejak. Cara ini lebih cepat dan praktis. Caranya klik menu Peralatan > Analisis Situs. Pada kotak input yang tersedia, ketikkan nama domain Anda (misalnya: www.komputeran.com) atau nama subdomain Anda (misalnya: blogku.blogspot.com). Klik tombol Periksa Situs. Hasilnya akan tampil informasi apakah alamat situs Anda sudah terdaftar atau belum.

Pemeriksaan URL Situs atau Blog

Keterangan Status website Komputeran.com di Penjejak.com

Mendaftarkan URL Situs Web dan Blog

Jika pada langkah pertama ternyata website atau blog Anda belum terdata di layanan Penjejak.com, maka saatnya mendaftarkan URL situs web atau blog Anda di sana.

1. Klik menu Daftarkan situs.
2. Baca baik-baik syarat dan ketentuan yang tertera di sana, jika sudah memahami, silakan menuju ke bagian paling bawah halaman tersebut dan isi formulir secara lengkap.
3. Setelah terisi semua data website Anda, klik tombol Daftarkan Situs.
4. Selesai, Anda tinggal menunggu website Anda terdata, mungkin bisa dalam hitungan jam atau hari.

Pengisian Form Pendaftaran URL

Memantau Indeks Halaman Web

Untuk memantau apakah website atau blog yang Anda daftarkan sudah tercantum di Direktori Web dan muncul di halaman pencarian Penjejak.com, lakukan langkah:

1. Periksa kembali situs Anda menggunakan fitur Analisis Web yang telah dijelaskan di atas.
2. Jika situs sudah tercantum, maka sekarang periksa seberapa banyak halaman web Anda terindeks.
3. Buka halaman utama Penjejak.com atau halaman lain yang terdapat kotak pencarian. 
4. Pada kotak pencarian, ketikkan domain atau subdomain Anda, seperti saat melakukan pemeriksaan di Analisis Web.
5. Jika tidak muncul, coba lagi dengan menambahkan atau membuang awalan www. Pastikan juga Anda tidak menuliskan http://.
6. Jika memang sudah terindeks, maka di sana akan muncul dua baris hasil dari situs Anda. Klik pada link [ Hasil lainnya dari namasitus.com ] di bawah baris hasil kedua.
7. Kini Anda bisa melihat estimasi jumlah halaman terindeks dari keterangan di bagian atas: "Menampilkan hasil 1 hingga nnn yang sesuai". Nah, angka nnn itulah jumlahnya. 

Klik [Hasil lainnya...] untuk melihat seluruh link yang terindeks

Memasang Kotak Penjejak di Website dan Blog

Jika halaman web dari situs atau blog Anda sudah banyak yang terindeks di Penjejak, maka Anda bisa mengintegrasikannya ke website atau blog Anda dengan cara memasang kotak pencarian Penjejak di website atau blog. Cara kerjanya serupa dengan kode pencarian dari mesin pencari lainnya, seperti Google.

1. Buka halaman Peralatan > Kotak Pencarian. 
2. Pilih kode kotak pencarian yang Anda sukai modelnya. Klik Salin Kodenya untuk memperoleh baris HTML yang akan kita sisipkan di template website atau blog.
3. Anda bisa mengatur hasil pencarian dan memodifikasi kotak pencarian seperti yang dicontohkan di sana. 
4. Jika tidak ada yang perlu Anda ubah atau sudah selesai Anda modifikasi, sekarang sisipkan baris kode HTML tersebut ke website atau blog Anda. Sebagai contoh, di Blogspot Anda bisa menggunakan widget HTML/JavaScript.
5. Kini pengunjung web atau blog Anda dapat melakukan pencarian langsung dari kotak tersebut.

Kotak Pencarian untuk Dipasang di Blog atau Website Anda

  . Selamat mencoba! Read →

Cara Mudah Mengedit CSS

Ingin mempercantik tampilan website atau blog tanpa harus menggunakan banyak gambar dan objek lainnya yang akan memberatkan akses ke website atau blog Anda ? Mudah, gunakan saja style atau Cascading Style Sheet (CSS). CSS adalah salah satu teknik yang sudah lazim digunakan dalam mendesain dan menata layout halaman web. Melalui CSS, penataan tampilan halaman web dapat dilakukan secara mudah, praktis, dan terkontrol, langsung melalui HTML - tanpa banyak membutuhkan ‘bantuan’ objek lain seperti gambar dan animasi untuk mempercantik halaman web. Hasilnya, halaman web dan blog secara konsisten dapat tampil cantik, artistik, sekaligus ringan diakses, sesuai tuntutan pengunjung internet.

Contoh letak folder dan file .css yang digunakan oleh beberapa CMS dan blog engine populer antara lain:

• Joomla : /templates/nama-template/css/ 
• Drupal : /themes/nama-template/style.css 
• WordPress : /wp-content/themes/nama-theme/style.css 

Jika situs Anda menggunakan salah satu CMS di atas, maka Anda cukup mengedit file .css di lokasi tersebut. Adapun bagi Anda pengguna Blogger (Blogspot), kode CSS disisipkan langsung pada bagian header file template blog Anda via Edit HTML.

Ada banyak tool gratis untuk membuat atau mengedit file CSS. Anda tidak perlu menghapal kode-kode CSS, cukup klik, edit, dan preview, file CSS siap Anda pakai. Salah satu tool yang penulis sarankan adalah tool gratis TopStyle Lite. TopStyle Lite versi 3.x bisa Anda peroleh secara gratis di alamat : http://topstyle.en.softonic.com/ (atau cari di Google dengan kata kunci TopStyle Lite), ukuran file installer sekitar 1,5 MB. Adapun versi terbaru (4.x) masih dibatasi penggunaannya dan hanya disediakan dalam bentuk shareware atau uji coba gratis.

Download dan install TopStyle Lite ke komputer. Selanjutnya buat atau edit file .css yang Anda maksud. Sebagai contoh, untuk Blogger (Blogspot), salin kode style template Anda di Layout / Template > Edit HTML. Salin mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Paste kode yang tersalin ke jendela TopStyle Lite yang telah terbuka.

TopStyle Lite

Kini Anda cukup mengubah-ubah nilai atau menambahkan property baru beserta value-nya. Caranya lakukan klik pada kelompok Selector yang ingin Anda edit di kolom kiri, misalnya pada bagian selector body. Perhatikan, daftar property dan value yang sudah ada akan muncul di kolom Style Inspector di sebelah kanan. Pada kolom bawah, Anda dapat melihat hasil tampilan yang Anda atur.

Style Inspector

Untuk mengubah nilai, klik item property, misalnya edit property background. Lalu ubah nilainya, misalnya dari green menjadi blue. Perhatikan perubahannya pada tampilan Preview.

Untuk menambahkan property baru, klik pilihan property baru, misalnya font. Berikan nilainya, misalnya font-style Anda isi italic, font-weight Anda isi Bold, dan font-family Anda isi sans-serif. Hasilnya body blog Anda akan menggunakan font Sans-serif, dengan efek cetak miring dan cetak tebal. Untuk memasang ke blog Anda, salin seluruh kode hasil pengeditan, lalu timpakan kembali ke template Blogger Anda menggantikan kode lama, yaitu mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Simpan perubahan.

Jika file yang Anda edit adalah file CSS template sebuah CMS, misalnya file style.css Drupal atau Wordpress, maka Anda cukup mengupload file hasil edit dan timpakan ke file lama. Kini tampilan blog Anda sudah cantik sesuai selera Anda.

Read →

Membuat Gambar Postingan Berputar dan Zoom di blog

Sebelumnya aq share cara membuat gambar di postingan berputar 360 derajat, dan untuk kali ini aq share membuat gambar dipostingan blog berputar dan membesar ketika kursor diarahkan, keren kan ? sedikit tambahan dari postinganku yang sebelumnya. bagaimana caranya ? silahkan ikuti caranya dibawah ini.

• Login dulu ke akun blogger anda. 
• Kemudian dari Dasbor, cari Template --> Edit HTML. 
• Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>. 
• Kemudian copas kode di bawah tepat di ATAS Code ]]></b:skin>.

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

• Terakhir tinggal di save dan lihat hasilnya.

Gimana hasilnya? Silahkan tinggalkan komentar dibawah ini.

atau anda bisa meletakkannya pada kode a img, cari kode a img pada edit HTML, kode a img pada umumnya seperti kode berikut.

a img{border-width:0}

karna sebagian template berbeda, carilah kode yang mirip dengan kode diatas kemudian hapus kode tersebut dan gantikan dengan kode dibawah ini.

a img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

Read →

Menu Horizontal DropDwon Dengan CSS3

Cara Membuat Menu Drop Down Dengan CSS3 - Kali ini saya akan membahas bagai mana cara membuat Drop Down Menu dengan CSS3, banyak orang yang pingin mendesain Blog nya dengan Menu Drop Down yang keren dan bagus,nah ini kesempatan baik bagi para blogger untuk memasang menu Drop Down ini yang menggunakan CSS3 ini di blog kamu, cara nya membuat nya sangat mudah, dan tidak ribet, dan jika kamu pernah melihat artikel Cara Membuat Menu Horizontal Drop Down di bog ini, dan mengalami kesulitan atau kegagalan coba sekarang gunakan Menu Drop Down CSS3 yang satu ini. Berikut Cara Membuat Menu Drop Down Dengan CSS3 :

• Add Gadget  HTML Java Script, copy kode di bawah ini.

<style>
/*------ CSS3 Drop Down Menu By www.blazerracing.blogspot.com ---------*/
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

• Ganti tanda # dengan URL yang di tuju. Jika kamu mau menambah menu Drop Downya tinggal tambah kode di bawah ini 

<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>

Sehingga jika disatukan dengan yang di atas menjadi kaya gini

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>
</ul> 

Read →