Cara Membuat Tabel Pada Posting Blog

2 komentar Senin, 08 Oktober 2012
Membuat tabel pada posting blog, seperti halnya tabel pada ms Office yang terdiri dari kolom dan baris, yang berfungsi untuk memasukan data dan mengurutkanya sesuai dengan kategori atau kebutuhan sehingga menjadi susunan data yang rapih.

Untuk membuat tabel pada postingan hanya dibutuhkan tiga kode perintah utama seperti <table>, <tr> dan <td>. Penjelasan : <table> perintah untuk membuat tabel <tr> perintah untuk membuat baris dan <td> perintah untuk membuat kolom. Sebagai ilustrasi penerapan kodenya seperti ini :

<table>  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

Kode tersebut akan menghasilkan 2 kolom dan 2 baris data yang belum dipisahkan oleh garis yang membatasi tiap data, seperti tergambar hasilnya seperti ini :

Baris 1 - Kolom 1
Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2


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


Untuk menambahkan garis sebagai pemisah antar data yang dimasukan, kalian bisa menambahkan perintah border yang diatur ketebalannya sesuai dengan keinginan, sehingga kodenya menjadi seperti ini :

<table border="5">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya pun sudah dengan penambahan garis pemisah antar tiap data, seperti ini :

Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2
Jika kalian akan melakukan pengisian data pada tabel, sebagai ilustrasi kalian akan memasukan suatu data pada baris pertama kolom pertama, hal pertama yang harus dibuat adalah membuat baris lalu dikuti dengan membuat kolom dan selanjutnya memasukan data, jika akan dilanjutkan mengisi kolom kedua pada baris pertama, yang perlu dilakukan adalah membuat baris dulu kemudian membuat kolom pertama dan selanjutnya membuat kolom kedua lalu mengisi data, inti dari pengisian data pada tabel adalah pertama membuat baris lalu diikuti membuat kolom.

Dari contoh diatas sudah membentuk tabel dengan 2 kolom dan 2 baris dan sudah dipisahkan dengan garis, untuk merapihkan kita bisa memberi jarak antar sel dengan sel yang lain atau memberi jarak teks dalam 1 sel.


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


Untuk memeberi jarak antar sel kita bisa menambahkan kode perintah cellspacing dalam table, sehingga kode pengaplikasiannya seperti ini :

<table border="5" cellspacing="15">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dengan penambahan cellspacing 15, akan memberi jarak tiap sel sebesar 15px seperti hasil pengaplikasiannya dibawah ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2

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


Sedangkan untuk memberi jarak teks dalam 1 sel menggunakan kode cellpadding, kode pengaplikasinnya seperti ini:

<table border="5" cellpadding="15">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2



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

selain keteranga perintah border, cellspacing dan cellpadding masih ada kode perintah untuk mempercantik tampilan table seperti width (ukuran table), bgcolor (warna background) dan align (perataan) pengaplikasian kodenya saya gabungkan menjadi seperti ini :

<table border="5" width="400">  
<tr bgcolor="#f0f0f0">  
<td align="center">Baris 1 - Kolom 1</td>  
<td align="center">Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya menjadi seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2

sumber : situseo
Read On

Efek Transparan Pada Gambar Posting (Post Image)

0 komentar Jumat, 08 Juni 2012
Membuat efek taransparan atau tembus pandang pada gambar-gambar (image) pada postingan (post image) akan menghasilkan tampilan yang lembut, apalagi ditambah dengan efek bias warna box pada gambar, untuk mewujudkan itu yang penting kita mengetahui letak atau bagian mana yang perlu kita modifikasi.

Pada umumnya setiap template menggunakan kode css .post img { untuk bagian gambar posting, mudah-mudahan pengkodeannya sama jadi tidak susah untuk menemukan bagian gambar posting (post image), untuk menemukan posisi kode .post img {, kalian masuk pada Design - Edit HTML, jika sudah ketemu, kalian tambahkan kode perintah transparan untuk post image, yaitu opacity seperi ilustrasi kode post image dibawah ini :

.post img {
opacity: 0.3;
}

Dengan kode opacity tersebut, gambar atau image dalam postingan secara otomatis akan transparan semua, sesuai dengan transparansi yang telah ditentukan angkanya dalam template, tapi efeknya belum kelihatan walaupun mouse melewati gambar tersebut, untuk menjadikan efeknya lebih kelihatan, kalian bisa tambahkan hover supaya terjadi perbedaan jika mouse melewati gambar posting tersebut, penerapan kodenya seperti ini : 

.post img:hover {
opacity: 1.0;
}
 
Semoga dengan penggunaan opacity dalam post image, bisa menjadikan bagian post kalian menjadi lebih baik.
Semoga bermanfaat,
 
Sumber 
Read On

Related Posts Slide Out Boxes

0 komentar Sabtu, 07 April 2012
Berhubung postingan kali ini permintaan dari teman blog saya, karena fitur ini dari Tympanus.net dan di tutorial tersebut tidak dijelaskan bagaimana cara menerapkanya di Blogger jadi disini saya akan membahas bagaimana cara memasang Related Posts Slide Out Boxes di Blogger. 

Baiklah, fitur kali ini menurut saya sedikit kurang pengunaan feed jadi proses pengantian related posts harus secara manual, Berikut screenshot dari Tympanus silahkan lihat Demo di blog Sahabat Metal-XP Demo

1. Pergi ke Template/Rancangan > Edit Html
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>
  <link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/> 

3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>


4. Sekarang letakan struktur HTML ini juga diatas kode  </body>



Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut

<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>


Anda bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, Anda harus mengganti teks berwana dengan link dan judul Anda.
5. Terakhir Klik Save Template
Read On

CSS Shadow - Membuat Bayangan Dengan CSS

0 komentar Jumat, 06 April 2012
CSS ShadowPada postingan sebelumnya saya sudah membahas bagaimanacara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas. 

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW 
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
.shadow {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
Keterangan:
5px adalah ukuran x-offset 
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini: 
.inner-shadow {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}


Keterangan:
0 adalah ukuran x-inset 
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
}


dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
}


Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)
Read On

Memasang Buku Tamu Tersembunyi di Menu Navigasi

4 komentar Rabu, 29 Februari 2012
Trik Blogger kali ini akan membuat buku tamu tersembunyi di sebuah link pada navigasi bar blog kita. contohnya bisa anda lihat di bagian navbar blog Trik Blogger Ini. jika anda klik "Buku Tamu"  di  lis menu navigasi, maka si buku tamu tersebut akan muncul tiba tiba. :D
pada umumnya, Navbar Blog digunakan untuk mengalihkan sebuah link alamat url. Tapi bisa juga kita ubah fungsinya menjadi seperti tutorial kali ini.
langsung saja kita mulai tutorialya.

Langkah Pertama yang harus anda lakukan adalah, download template yang anda gunakan sekarang, guna menjaga dari kesalahan saat mempraktekan tutorial ini. kemudian


Login - dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas
Beri tanda centang pada tulisan Expand Template Widget




kemudian anda cari deretan link navbar yang akan di rubah fungsinya. contoh pada blog ini  "Buku Tamu" gunakan ctrl+f untuk mempermudah pencarian.
<div id='nav-bar'>
<a href='trik-bloger.blogspot.com' title='This Blog Address'>Home</a>
<a href='mailto:sanieride@gmail.com'>Contact me</a>
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>
<a href='trik-bloger.blogspot.com'>Feeds RSS</a>
keterangan
(merah)alamat pengalihan Menu Navigasi
(biru) teks yang akan ditampilkan

pada baris
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>

ganti alamat pengalihan (warna merah) dengan
javascript:void(0)' onclick='showHideAT()' title='Click here to open Guest Book'

perhatikan tanda kutip [ ' ] jangan sampai ikut terganti
jika sudah silahkan save template anda

kemudian pasang widget baru,
Blogger - Tata Letak - Tambah Gadget - pilih HTML/Java Script

<style type="text/css"> #at{ position:fixed; left:-160px; z-index:+1000; } * html #at{position:relative;} .attab{ height:300px; width:180px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #000000; background:#FFFFFF repeat-y center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding:10px; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"><div class="attab" onclick="showHideAT()"></div><div class="atcontent"><div align="center"><div style="#000000 no-repeat;">
KODE BUKU TAMU ANDA
</div></div> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXYUby6w_ZUgWdoXI85ULl3vvAyMG8OeBal031hUL7-ISqT06girDQMKRmCxfFsNS8N8zVJQPEWqWa7xcdjeM6G7iPVJTJYyPopCMYJt2JfYam-lOg9mfFS_PWLZTjxSZVxpH5NQOYoUl/s1600/moblin-close.png" alt="close" title="Click here to Close Cbox" /></a></div></div>  <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script>  <a href="javascript:void(0);"onclick="showHideAT()"/><img alt="WEARCREAF"  style="display:scroll;position: fixed; top:62px;right:-200px; height="120px" width="38px" /></a></div> <div class='clear'></div><span class='widget-item-control'> <span class='item-control blog-admin'>  </span> </span> <div class='clear'></div><div id='rsidebar-wrapper'><div style='height:10px;clear:both;'></div><div class='sidebar section' id='sidebarright'></div></div>
ganti KODE BUKU TAMU ANDA dengan script buku tamu anda miliki. Jika belum mempunyai kode buku tamu kunjungi www.cbox.ws  silahkan mendaftar untuk mendapatkan kode.

jika ada pertanyaan, silahkan tanyakan lewat form komentar dibawah.
Semoga bermanfaat..
Read On

Cara Membuat Link di Komentar Blog

2 komentar Sabtu, 18 Februari 2012
Sebuah artikel atau postingan biasanya mempunyai tanggapan berbeda dari setiap pembacanya, baik itu tanggapan positif atau negatif.

Isi komentar pun beragam. Ada yang memang ingin menanggapi artikel atau posting tersebut, ada juga yang sekedar nitip link blogatau web. Bagi saya it's ok selama itu tidak melampaui batas.

Ada tehnik yang lebih mudah dalam mengisi kolom komentar yaitu dengan spam atau nyepam. Tehnik ini sudah lama dilakukan oleh spammer atau orang yang melakukan spam untuk berkomentar di ratusan bahkan ribuan kolom komentar pada sebuah blog, hanya untuk mencapai satu tujuan backlink

Cukup basa-basinya. Sekarang kita mulai cara membuat link di komentar blog.

Copy paste model berikut:
 

Keterangan:
Ganti maniaktrik.blogspot.com dengan domain atau url anda
Ganti Cara Membuat Link dengan anchor text kesayangan anda atau judul blog

Jika ada pertanyaan atau sekedar casciscus atau mau praktek langsung, silahkan isi kolom komentar untuk posting blog ini.

Semoga bermanfaat.


source : http://mayyoli.blogspot.com
Read On

Kode efek pada Cbox Widget

0 komentar
Pada sore ini saya mau berbagi sedikit Ilmu tentang CHATBOX, namun sebelum anda melanjutkan membaca anda harus memperhatikan peringatan berikut ini. Bagi yang sudah tau silahkan langsung koment aja, kalau yang belum tau silahkan baca sama-sama. langsung aja deh ke TKP.
Jika anda ingin mempraktekannya anda bisa coba di bukutamu blog ini.

Berikut kode-kodenya :
  1. Teks Bertuliskan Motif Tebal (Bold Style)
      [b] Text anda [/b]
  2. Teks Style Miring (Italic Style)
      [i] Text anda [/i] 
  3. Teks Bergaris Bawah (Underline Style)
      [u] Text anda [/u] 
  4. Teks Berukuran Besar (Big Style)
      [big] Text anda [/big] 
  5. Teks Berukuran Kecil (Small Style)
      [small] Text anda [/small] 
  6. Teks Bergaris Tengah (Strike Style)
      [s] Text anda [/s] 
  7. Teks Yang Berjalan (Marquee Style)
      [scroll] Text anda [/scroll] 
  8. Teks Ber-Link
      [url=alamat URL yang dituju] Text anda [/url]
  9. Teks Rata Ke Tengah (Center Style)
      [center] Text anda [/center] 
  10. Teks Yang Berwarna (Color Style)
      [color=kode warna] Text anda [/color] 
Berikut kode warna untuk trik no 10. 
• [color=gold] Tulisan Anda[/color]
• [color=silver] Tulisan Anda [/color]
• [color=violet] Tulisan Anda [/color]
• [color=hotpink] Tulisan Anda [/color]
• [color=navyblue] Tulisan Anda [/color]
• [color=tan] Tulisan Anda [/color]
• [color=aqua] Tulisan Anda [/color]
• [color=teal] Tulisan Anda[/color]
• [color=lime] Tulisan Anda [/color]
• [color=red] Tulisan Anda[/color]
• [color=blue] Tulisan Anda [/color]
• [color=green] Tulisan Anda [/color]
• [color=yellow] Tulisan Anda [/color]
• [color=pink] Tulisan Anda [/color]
• [color=purple] Tulisan Anda [/color]
• [color=brown] Tulisan Anda [/color]
• [color=bronze] Tulisan Anda [/color]
• [color=orange] Tulisan Anda[/color]
• [color=black] Tulisan Anda [/color]
• [color=white] Tulisan Anda [/color]
source : http://devilofcheater.blogspot.com

Read On

FERE File Hosting Menggunakan Google Code

0 komentar Jumat, 20 Januari 2012

Gak usah pusing-pusing mencari file hosting dll, Google Code adalah salah satu produk google untuk menyimpan file-file kecil, pada umumnya digunakan para designer blogger untuk upload kode javascript. Tetapi bukan untuk file javascript saja yang bisa diupload ke google code mungkin semua jenis file bisa diupload seperti Rtf, Doc, PDF, rar, DLL

Langsung saja menuju TKP Cara Lengkap Upload File Di Google Code
Read On

Cara Membuat Navigasi Halaman, Seperti pada Blog ini

0 komentar Kamis, 19 Januari 2012
Tips dan triks blog yang ingin Trik Bloger bagikan hari ini adalah bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit.

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
  • Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
  • Mempercantik tampilan

Login ke dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas

Beri tanda centang pada tulisan Expand Template Widget

  • Cari Kode ]]></b:skin> gunakan CTRL+F
  • Copy lalu paste kode CSS berikut diatas ]]></b:skin>
 
  /* Page Navigation styles */
.showpageNum a
{   padding: 3px 8px;
   margin:0 4px;
   text-decoration: none;
   border:1px 1px 1px 1px solid #CEE3F6;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   background: #CEE3F6;   } 

.showpageOf
{   margin:0 8px 0 0; }

.showpageNum a:hover
{   border:1px 1px 1px 1px solid #81BEF7;
   background: #58ACFA;   }

.showpagePoint 
{   color:#fff;   text-shadow:0 1px 2px #333;
   padding: 3px 8px;
   margin: 2px;
   font-weight: 700;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   border:1px 1px 1px 1pxsolid #01DF01;
   background: #088A08;
   text-decoration: none;   }


  • Kemudian  cari kode  </body> dan letakkan kode dibawah ini, diatas kode </body>
 
<!--Page Navigation Starts-->
<script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=4; var numshowpage=6; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://salingsharing.googlecode.com/files/trik%20bloger%20navbar.js' type='text/javascript'/> 
<!--Page Navigation Ends -->
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.

Read On

Membuat Border dan Modifikasinya

3 komentar

Untuk memberikan kesan lebih indah dalam warna dan tampilan blog khususnya kode HTML/Script yang akan diletakan didalam posting pada saat menulis artikel, Anda bisa meletakan kode Script di dalam kotak dengan border dan warna background yang berbeda sesuai dengan warna pilihan, baik itu dengan border yang garis tipis, tebal atau garis putus-putus.

Ada beberapa jenis border yang saya ketahui yaitu :
  1. Ridge Border
  2. Groove Border
  3. Solid Border
  4. Insert Border
  5. Outset Border
  6. Double Border
  7. Doptted Border
  8. Dashed Border

Langkah membuat dengan border sangat mudah
  • Copy kode Script dibawah ini
  • Kemudian letakan pada posting Anda

Contoh Dashed Border
 <div style="border: 2px #006400 dashed; padding: 10px; background-color: #F2F5A9; text-align: left;"> TEKS ANDA DISINI.. </div> 

Contoh Ridge Border 
 <div style="border: 5px #006400 ridge; padding: 10px; background-color: #F5A9D0; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Dotted Border
 <div style="border: 2px #006400 dotted; padding: 10px; background-color: #FFFF00; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Double Border
 <div style="border: 3px #006400 double; padding: 10px; background-color: #A9F5A9; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Groove Border
 <div style="border: 5px #006400 groove; padding: 10px; background-color: #F2F5A9; text-align: left;">  TEKS ANDA DISINI.. </div> 

Contoh Solid Border
 <div style="border: 3px #1627A7 solid; padding: 10px; background-color: #61FFF6; text-align: left;">  TEKS ANDA DISINI..  </div> 

Demikian adalah beberapa sample border ala Trik Bloger. Semoga Bermanfaat.
Read On

Cara memasang Breadcrumb Navigasi di Blog

1 komentar Minggu, 15 Januari 2012
Cara memasang Breadcrumb Navigasi di Blog - Menu navigasi breadcrumbs
Sebelum melanjutkan Trik Bloger hendak menjelaskan dahulu apa itu Breadcrumb Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini,
apakah anda melihat 

 
nah.. itulah yang Trik Bloger akan ajarkan kali ini.

Kembali ke langkah, trik berikut merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.
  • Masuk ke akun Blogger Anda.
  • Klik tanda panah di sebelah tombol "lihat blog" > Template

  • Pilih Edit HTML
  • Jangan lupa Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).
  • Copy kode Breadcrumb di bawah ini dan paste di atas kode tersebut :

  • Selanjutnya cari kode  <a expr:name='data:post.id'/>
Kemudian copy kode berikut ini dan paste di bawah kode tersebut.


Kalau <a expr:name='data:post.id'/> tidak ketemu, cari kode yang ini <b:if cond='data:post.title'>. Kemudian copy kode tadi dan paste di atasnya.
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.
Read On

Membuat Teks Area dengan Fungsi Select All

1 komentar
Textarea ini pada dasarnya kombinasi antara form dan textarea, sehingga akan memudahkan dalam mem-blok atau menyorot isi textarea. Agar jelas maksudnya coba klik tombol Select All. Setelah diblok semua tinggal dicopy dengan klik kanan atau tekan Ctrl-V pada keyboard.

Jika dipasang pada widget sidebar maka textarea jenis ini lebih baik dan tentu lebih keren, bisa juga berfungsi sebagai sarana tukar link, dan lain lain.
Read On

Membuat Search Onblur Onfocus

0 komentar
Tutorial Trik Bloger kali ini akan membahas tentang bagai mana cara membuat onblur onfocus. Sebelumnya kita harus tahu dulu tentang "Onblur Onfocus" pengertianya adalah sebuah teks atau kalimat yang berada didalam kotak search atau sejenisnya yang akan menghilang jika kita hendak mengisi kotak tersebut.

 
Contoh Onfocus Onblur pada kotak search
Gambar diatas adalah contoh cara kerja onblur onfocus tentunya versi Trik Bloger. Teks atau kalimat didalamnya dapat kamu ganti dengan kata - kata sesukamu.
Apakah sampai disini kamu sudah mengetahui apakah onblur onfocus dan cara kerjanya.? Jika sudah, mari kita lanjutkan kembali, bagaimana cara membuat onblur onfocus di kotak search atau sejenisnya.
Langkahnya yaitu sangat mudah, kita hanya menyisipkan script onblur onfocus di dalam scrip kolom search tadi.

Contoh Menyisipkan kode :
 <form action="http://maniaktrik.blogspot.com/search" id="searchform" method="get" name="searchform"><div class="search"><input onfocus="if(this.value =='cari artikel..'){this.value ='';}" value="cari artikel.." name="q" onblur="if(this.value ==''){this.value ='cari artikel..';}" type="text"/&gt;<br/><input type="submit" name="submit" value="search..."></div></form>
kode diatas hasilnya adalah seperti berikut :




Keterangan Warna :
Untuk template anda yang sudah memiliki kotak search bawaan, anda tinggal menyisipkan kode berwarna biru dan hijau letak menyisipkannya anda cari sendiri di template blog anda. Jika bingung silahkan tanyakan pada kolom komentar dibawah postingan. Warna hijau bisa anda rubah sesuai keinginan anda, yang penting ketiganya haruslah sama.
Dan untuk template yang belum mempunyai kotak search, silahkan copy semua kode script diatas, dan letakkan dimana anda ingin meletakannya. warna merah ganti saja dengan url blog kamu.
Sekali lagi, jika ada masalah atau pertanyaan tentang posting diatas, silahkan hubungi admin lewat kolom komentar di bawah postingan ini.
Read On

Cara Memasang Related Post di Blogger

0 komentar Jumat, 13 Januari 2012
Related post yang terdapat di bawah posting pada blog Trik Bloger ini cuma sebuah tulisan yang saling berkaitan dan berhubungan terhadap sebuah posting. Fitur ini tentu sangat penting untuk SEO 'katanya'. Dengan adanya “Related Post” ala Trik Bloger ini tentu akan memudahkan para pengunjung untuk mendapatkan sebuah posting yang berkaitan. Misalkan ada sebuah posting tentang "Edit Template Blogger Agar Lebih SEO" maka related post yang muncul adalah :
(jika yang ditampilkan cuma 5 post) Baik kita memulai cara memasangnya
1. Pastikan anda sudah Login di Blogger.com jika sudah, langsung saja Pilih Template
Klik Gambar Untuk Memperjelas


2. Pilih »» edit HTML
Klik Gambar Untuk Memperjelas

3. Beri tanda centang pada tulisan Expand Template Widget

4. Cari kode <data:post.body/> caranya tekan Ctrl+F, jika sudah ketemu copy kode
    dibawah ini lalu paste di bawah <data:post.body/>


5. Dari Kode diatas cari kode var numofpost=5  gantilah angka untuk mengatur jumlah 
   postingan yang akan ditampilkan secara acak ,bisa diganti sesuai dengan kebutuhan anda.
6. Langka selanjunya adalah menyimpan template, klik Simpan Template. selesai. lihat hasilnya
   pada blog anda.
 Hasilnya bisa anda lihat sendiri di bagian bawah halaman posting Trik Bloger.
Read On
Langganan: Postingan (Atom)