Cara menyembunyikan buku tamu/guest book di blog

Cara menyembunyikan buku tamu/guest book di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.

Buku tamu adalah tempat untuk menaruh pesan singkat/ komentar di blog anda, dalam membuat buku tamu harus menggunakan jasa web yang menyediakan layanan buku tamu. Maksud dari judul tersembunyi disini bukanlah buku tamu yang tidak terlihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah artikel blog dan akan terbuka apabila ada yang klik pada gambar buku tamu tersebut. Cara ini merupakan salah satu cara dalam menghemat tempat pada blog kita. Selain itu, untuk menghemat tempat pada blog, anda juga bisa menambahkan tab view di blog Anda. Jika anda tertarik untuk membuat buku tamu tersembunyi ini, silahkan ikuti langkah berikut:

Sebelum anda membuat buku tamu anda menjadi tersembunyi tentunya anda harus membuat Buku Tamu terlebih dahulu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix. Setelah anda memiliki kode buku tamu tersebut, lanjut ke langkah berikut ini:

1. Pertama anda harus login di blogger anda.

2. Kemudian anda Klik Tata Letak --> Tambah Gadget --> Pilih HTML/Java Script.
3. Setelah itu anda Copy kode berikut dan Pastekan Pada kotak HTML

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdSHpmv5qDLLngY6u-3xMo854tT_k6aBqaKeKf6XnRrgydJtNiXI5FFre68Bp8_JIVKoSRY4x0g46C6Ys1UcIRbqj0W2FU_AR7eDGQUrNGBrISwU1auJ5zv6bm7wwlw_fY7JtJfpXDqW0O/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

< Taruh disini kode Shoutbox Anda>

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://amronbadriza.blogspot.com/" target="_blank">Blogaul</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

Ubah tulisan < Taruh disini kode Shoutbox Anda> dengan kode script buku tamu anda.

4. Langkah yang terakhir Save Widget anda.

Demikianlah yang dapat saya sampaikan pada artikel kali ini mengenai cara memasang buku tamu tersembunyi. Semoga apa yang saya samapaikan di atas dapat bermanfaat buat anda.

Cara membuat Menu Bar pada blog

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>
<ul>
<li><a href='http://pujudnet.blogspot.com/'>Home</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a href='http://pujudnet.blogspot.com/'>Home</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.comt.com/'>Edit me</a>
<ul>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>

Keterangan:

• Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
• Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
• Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
• Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
• Seandainya sobat tidak menemukan kode <div id="content-wrapper"> sobat bisa mengedit cara no 8 di laman>add widget>javascript/html.salin kode di no.8 tersebut

Cara Memasang Label Dropdown di blog

 

Setelah sebelumnya saya sudah berbagi ilmu mengenai cara menambahkan gadget label di blog, pada kesempatan kali ini saya akan berbagi ilmu mengenai label juga yaitu mengenai  Cara Membuat Label Bentuk Dropdown Di blog. Label bentuk dropdown ini lebih minimalis sehingga tidak terlalu banyak memakan tempat. Oke langsung saja caranya seperti berikut ini:

1. Anda Login/ masuk ke aknu Blogger anda.

Sebelum anda membuat label dropdown ini anda buat dulu label seperti pada artikel: cara menambahkan gadget label di blog
2. Pada halaman Dasbor, pilih Rancangan --> Edit HTML --> Beri tanda centang pada Expand Template Widget 

3. Kemudian anda Cari kode berikut :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

  Supaya lebih mudah untuk mencari kode tersebut gunakan CTRL + F 

  Jika sudah ketemu hapus kode tersebut dan ubah dengan kode di bawah ini :

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Pada tulisan pilih kategori  dapat anda ganti sesuai dengan selera anda.

4. selanjutnya simpan dan lihat hasilnya

Demikian yang dapat saya sampaikan mengenai cara membuat label bentuk dropdown di blog. semoga cara-cara di atas dapat bermanfaatu buat anda.

Cara Memasang Label Dropdown di blog

 

Setelah sebelumnya saya sudah berbagi ilmu mengenai cara menambahkan gadget label di blog, pada kesempatan kali ini saya akan berbagi ilmu mengenai label juga yaitu mengenai  Cara Membuat Label Bentuk Dropdown Di blog. Label bentuk dropdown ini lebih minimalis sehingga tidak terlalu banyak memakan tempat. Oke langsung saja caranya seperti berikut ini:

1. Anda Login/ masuk ke aknu Blogger anda.

Sebelum anda membuat label dropdown ini anda buat dulu label seperti pada artikel: cara menambahkan gadget label di blog
2. Pada halaman Dasbor, pilih Rancangan --> Edit HTML --> Beri tanda centang pada Expand Template Widget 

3. Kemudian anda Cari kode berikut :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

  Supaya lebih mudah untuk mencari kode tersebut gunakan CTRL + F 

  Jika sudah ketemu hapus kode tersebut dan ubah dengan kode di bawah ini :

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Pada tulisan pilih kategori  dapat anda ganti sesuai dengan selera anda.

4. selanjutnya simpan dan lihat hasilnya

Demikian yang dapat saya sampaikan mengenai cara membuat label bentuk dropdown di blog. semoga cara-cara di atas dapat bermanfaatu buat anda.

Cara Membuat Kolom Scroll Pada Blog Archive

Beberapa hari ini saya berusaha mencari bagaimana Cara Membuat Kolom Scroll Pada Blog Archive. Dalam hati, kok Arsip blog saya kok panjang banget ke bawah... terlihat tidak bagus jadinya. Pencarian pun tidak sia-sialah. Ketemu deh hasilnya.saya akan mencoba membagi pengalaman tentang tutorial Cara Membuat Kolom Scroll Pada Blog Archive.Mudah-mudah ini bisa digunakan oleh kawan-kawan semua.

Kali ini kita akan Membuat Kolom Scroll Pada Blog Archive. Kenapa memerlukan Scroll, karena tanpa scroll maka arsip blog yang banyak akan membuat blog panjang ke bawah, dan kelihatanya tidak menarik. Untuk itulah kolom scroll diperlukan.

Sewaktu teman-teman memposting suatu artikel dan di-archive-kan secara Hierarki dan Judul Artikelnya ditampilkan, maka semua artikel yang ada di Blog Archive tersebut akan tampil memanjang ke bawah. Nah untuk membuatnya terlihat sedikit rapi agar tidak memanjang terlalu ke bawah, maka kita akan membuat Kolom Scrollnya.

Untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut <div id='ArchiveList'> atau ArchiveList

Catatan: Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara, klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.

4. Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>

5. Harap disesuaikan saja kodenya, karena tidak semua templates sama,
6. Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: 200px,
7. Jika sudah klik Save templates dan lihat hasilnya.

Seperti itulah Cara Membuat Kolom Scroll Pada Blog Archive, semoga bisa bermanfaat untuk teman-teman semua dan selamat mencoba. Salam Blogger.

Referensi: http://anggasona-anotherbestblog.blogspot.com

Cara Membuat Readmore dengan Gambar

Kali ini ada trik yang ingin saya bagikan yaitu mengubah teks readmore dengan gambar. Secara otomatis apabila anda memposting maka gambar readmore akan nampak pada home page. Jika sobat ingin tau
caranya ikuti langkahnya berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Template Widget
4. Cari kode ini </head>
5. Kopi kode dibawah ini dan paste dibawah kode diatas:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://blogtrikdantips-blogspot.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan :
summary_noimg = 430; adalah jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 340; adalah jumlah karakter yang akan ditampilkan dengan gambar
img_thumb_height = 100; adalah ukuran tinggi gambar
img_thumb_width = 120; adalah lebar gambar

6. Carilah kode <data:post.body/>
7. Hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:
Kode berwarna merah diatas adalah gambar atau teks yang ingin ditampilkan pada readmore. Untuk contoh gambar sobat dapat lihat dibawah ini:

http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg

http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif

http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png

http://1.bp.blogspot.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif%27

Membuat Page Peel Join Us On Facebook

Page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar disamping. Page peel biasanya berada pada bagian sudut atas dari blog anda. Efek page peel ada yang statis juga ada yang dinamik. Page peel ini umumnya digunakan untuk berbagai tujuan salah satunya yaitu untuk mempromosikan iklan. Namun pada trik dan tips kali ini kita membuat page peel dengan efek Join US on Facebook. Jadi jika seseorang pada blog anda mengklik page peel tersebut maka dia akan diarahkan ke halaman page facebook anda. Jika anda penasaran bagaimana membuat page peel efek ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Design --> Klik Edit HTML
3. Cari kode </head>
4. Letakan script dibawah ini diatas kode </head>

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/utak-atik komputer &#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/>

5. Ganti kode berwarna merah dengan url halaman facebook anda.
6. Simpan template

Mudah saja kan membuatnya, dengan tambahan efek page feel tersebut pada blog maka akan semakin banyak pengunjung yang bergabung dengan page facebook milik anda. Semoga artikel ini bermanfaaat......

 

Sumber :http://blogtrikdantips.blogspot.com

Membuat Efek Slide Facebook Fan Page Like di Blog

Sobat semua, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:


1. Pada blog anda masuk ke Design --> Edit HTML
2. Carilah kode </head>
3. Letakan script jquery dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4. Simpan template anda
5. Masuk ke Elemen Halaman lalu klik Tambah Gadjet
6. Pilih HTML/Javascript
7. Masukkan kode berikut ini:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ0OzSQEpQ1j87DuaMQqybphn-u3OLzOs2wuQHpzg1rTxwPFt4DazWnpeld1K5AGwx5iRMQzHQmoeXC1M9XWX_dFEOeWVB7u_o3aaG6QUQAm-5OlVaccUSkurD87Jy816zlkpl4iD_OdsL/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogtrikdantips&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://www.blogtrikdantips.blogspot.com">Indra</a></span></div></div>

8. Ganti tulisan berwarna merah dan nama fan page anda
9. Simpan gadjetnya

Sobat bagaimana dengan hasilnya...semoga dengan kode ini akan membuat blog anda menjadi lebih menarik dan bertambah pengunjung dan fannya...semoga bermanfaat.

Membuat Daftar Popular Post atau Posting Populer Tanpa Thumbnail

Popular post atau posting populer adalah artikel yang paling sering atau banyak mendapat komentar dari pengunjung. Sebelumnya saya pernah menulis artikel mengenai cara membuat populer post dengan thumbnail. Populer post dengan thumbnail atau gambar dapat anda buat dengan menggunakan gadjet blogger yang telah tersedia. Namun kali ini saya akan membuat posting populer tanpa thumbnail, posting populer ini akan menampilkan daftar post atau list posting berdasarkan judul artikel. Selain judul populer post yang ditampilkan, juga akan memuat jumlah komentar dari pengunjung. Caranya membuatnya mudah saja, langsung kita praktekan:

1. Login ke blogger
2. Masuk ke Rancangan --> Edit Halaman
3. Tambahkaan Gadjet
4. Pilih HTML/Javascript
5. Masukan kode dibawah ini:

<!-- Popular posts by www.pujudnet.blogspot.com -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://pujudnet.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Popular posts by www.pujudnet.blogspot.com -->

Keterangan:
- Kode berwarna biru adalah jumlah artikel yang ingin ditayangkan
- Kode berwarna merah adalah url blog

6. Ganti kode berwarna merah dengan url blog anda
7. Simpan gadjet anda

Sekian dulu tutorial singkat dari saya. Semoga dengan tampilan populer post di blog anda akan memberikan nuasa yang lebih baru lagi. Terima kasih telah menyimak artikel diatas. Selamat mencoba! 

 

SUMBER http://blogtrikdantips.blogspot.com

Membuat Pop Up Selamat Datang pada Blog

Blog ini kali ini akan memberikan tutorial bagaimana membuat pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:


1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>

<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>

4. Masuk lagi ke Rancangan --> Edit Laman
5. Tambahkan gadjet lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadjet tersebut

<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}



div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://blogtrikdantips.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://pujudnet.blogspot.com/ ">UTAK-ATIK KOMPUTER</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9pyeUjFnKGJCC0YBQMb6Lcjm01i2xzwc8AJeTDFsDbXTKSrKS8ZhNlYdwfONVOE4YPKTNF2S7LmC4lu-M6zckTE9M9E2JXxegD2NaNSY-KtRviBeKaapdQoHgQXNh7DnrlpCPE1vlmzm/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9pyeUjFnKGJCC0YBQMb6Lcjm01i2xzwc8AJeTDFsDbXTKSrKS8ZhNlYdwfONVOE4YPKTNF2S7LmC4lu-M6zckTE9M9E2JXxegD2NaNSY-KtRviBeKaapdQoHgQXNh7DnrlpCPE1vlmzm/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

7. Gantikan kode berwarna biru dengan url blog dan judul blog anda
8. Simpan template anda lalu lihat hasilnya

Sumber : http://blogtrikdantips.blogspot.com/

Membuat Komentar Terbaru dengan Gambar

Halo sobat blog trik dan tips, kali ini kita akan membuat komentar terbaru dengan gambar. Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar memperindah atau mempercantik blog. Anda dapat mengetahui apabila seseorang
berkomentar pada blog anda. Gambar komentator ditampilkan dalam bentuk lingkaran sehingga memberikan efek yang sangat menarik. Jika sobat ingin memasangnya pada blog ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://pujudnet.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Selanjutnya sobat tinggal menganti kode berwarna merah dengan url blog anda.
6. Jika sobat ingin mengedit tampilan widget ini berikut adalah penjelasannya:
- Kode berwarna hijau adalah jumlah komentar yang ditampilkan
- Kode berwarna biru aadalah ukuran gambar komentator
- Kode berwarna orens adalah rincian komentar dari komentator
7. Terakhir simpan gadjet anda.

Demikian adalah sekilas penjelasan bagaimana membuat komentar terbaru dengan gambar atau istilah lainnya yaitu membuat recent comment dengan avatar. Semoga dengan widget ini tampilan blog anda lebih menarik serta lebih banyak yang berkomentar. Sekian dan salam blogging....

sumber: blogtrikdantips.blogspot.com

Mengganti Tulisan Older Post dan Newers Post

Seperti di lihat pada gambar ini.. disana terdapat tulisan Older, Home, dan Newer. Tulisan itu dapat kita ganti dengan kata lainya, atau dengan gambar/icon. untk memulainya kita harus bisa mengubah-ubah sedikit html yang ada pada template blog kita,jangan kawatir karena saya akan menuntun anda.

langkah yang harus dijalani
1. Masuk ke akun blogger anda

2. Cari kode ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

3. Ganti kode tersebut menjadi seperti ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
</b:if>
</b:if>

</div>

Keterangan:

1. Disana terdapat tulisan yang berwarna Hijau Ganti lah kode tersebut menjadi <img src="Image URL" /> nah ganti Image Url dengan lokasi/Url gambar/icon yang anda miliki.

2. Anda bisa mencari Icon-Icon tersebut di- Icon Archive

3. Selamat mencoba

cara membuat Menu Dtree

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer.

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?


Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://pujudnet.com/dtree/trash.gif’);

Ganti text "http://pujudnet.com/dtree/trash.gif" dengan alamat gambar kamu. contohnya akan seperti ini :


Nha gampang tho .....

Menampilkan Recent Comments (Komentar Terbaru)

Menampilkan Recent Comments (Komentar Terbaru)

Menampilkan recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar. Recent Comments ini bisa kita pasang di halaman utama blog kita.
Beginilah cara membuat Recent Comments (Komentar Terbaru):

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :

<script style="text/javascript" src="http://superinhost.com/blog/comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://pujudnet.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti pujudnet.blogspot.com dengan nama blogmu.

3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

Coba dilihat blogmu, langsung jadi deh. Oh ya recent comments ini bisa juga dipasang didalam "Tab View"

Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini



1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan dilihat hasilnya.

Cara Mudah Memasang "LIKE" button | Tips Blogger

LIKE Button berfungsi untuk memudahkan pengunjung dalam berbagi sesuatu hal yg menarik dari blog sobat, kepada teman-teman mereka melalui media FACEBOOK. Selain itu juga berfungsi untuk meningkatkan traffik ke blog. Nah bila berminat untuk memasangnya, berikut caranya....


Langkah-langkahnya :

1. Masuk ke blogger
2. Tata Letak
3. Edit HTML
4. Klik kotak kecil Expand Template Widget
5. Ctrl+F untuk memudahkan pencarian, lalu cari kode berikut <data:post.body/>
(bila ada dua pilih yg paling bawah)
6. Kemudian copy pastekan script berikut ini tepat di bawah kode diatas

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

 
7. Simpan dan lihat hasilnya.

Cttn : Kata Like pada kata yg di beri warna merah bisa diganti dengan kata yg sobat inginkan, begitu juga dengan huruf atau font nya, bisa dengan Tahoma, verdana, trebuchet, lucida dan untuk Colorscheme, terdapat tiga warna selain dari light yaitu evil dan dark.

Cara Membuat Widget Al-Quran Online di Blog

Hallo teman-teman.... Lagi-lagi saya pengen bagi-bagi info nih, infonya sesuai sama judul diatas "Cara Membuat Widget AL QURAN ONLINE di Blog".. Disini kamu bisa baca Al-Quran sekaligus artinya secara online plusss ada juga suaranya langsung dari sang ahli. Jadi kalo gak bisa baca Al-Quran dengan bener, kita tinggal dengerin aja sang ahli :p


Oke gak perlu lama-lama, langsung saja ke tutorial gimana cara bikinnya ya. Hehe...

1. Silakan login ke Blogger
2. Pilih Tata Letak
3. Tambah Widget/Gadget baru
4. Setelah itu pilih Edit HTML/Javascript
5. Copy-Paste kodingan dibawah

<iframe border="0" src="http://www.pencerahanhati.com/surah_widget.php?uid=62" style="border: 0px; height: 1500px; width: 600px;"></iframe>

6. Selesai :)

Membuat Daftar Isi Blog Otomatis

Membuat Daftar Isi Blog Otomatis - Ingin membuat Daftar Isi Blog Otomatis seperti DAFTAR ISI pada blog saya?? Gimana caranya?? Caranya gampang kok!! Tinggal copy paste aja kode dibawah pada laman baru di blog temen-temen.

<script src="http://priawadi.googlecode.com/files/daftarisi.js">
</script><script src="http://pujudnet.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Habis itu?? Udah cuman itu aja, setelah itu lihat deh di laman yang barusan temen-temen buat. Sudah ada daftar isinya kan?? hehe... Etzzz hampir lupa yang warna MERAH itu diganti sama URL blog temen-temen :D

Selamat mencoba^^

Cara menghilangkan tulisan diberdayakan oleh blogger pada blogspot

Cara menghilangkan tulisan diberdayakan oleh blogger pada blogspot - Yupzzz... langsung aja caranya deh ya, lagi males merangkai kata :p


Caranya cukup gampang, temen-temen tinggal mengikuti langkah-langkah dibawah ini:
1. Temen-temen harus Login dululah :D
2. Trus ke Template -> Klik Edit HTML
3. Setelah itu centang "Expand Template Widget"
4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian
5. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin :

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

6. Klik Simpan Template

Urutan Kabel UTP Straight dan Cross Over

 Urutan Kabel UTP Straight dan Cross Over - Share artikel kali adalah tentang kabel UTP (Unshielded Twisted Pair), artikel ini adalah request dari sobat adhie yfs, tanpa bermaksud menggurui berikut adalah bahasan tentang kabel UTP yang penulis ketahui.

Kabel UTP merupakan salah satu media transmisi yang paling banyak digunakan untuk membuat sebuah jaringan local (Local Area Network), selain karena harganya relative murah, mudah dipasang dan cukup bisa diandalkan. Sesuai namanya Unshielded Twisted Pair berarti kabel pasangan berpilin/terbelit (twisted pair) tanpa pelindung (unshielded). Fungsi lilitan ini adalah sebagai eleminasi terhadap induksi dan kebocoran. Sebelumnya ada juga kabel STP (Shielded Twisted Pair).

 

Terdapat beberapa jenis kategori kabel UTP ini yang menunjukkan kualitas, jumlah kerapatan lilitan pairnya, semakin tinggi katagorinya semakin rapat lilitannya dan parameter lainnya seperti berikut ini:

• Kabel UTP Category 1
  Digunakan untuk komunikasi telepon (mentransmisikan data kecepatan rendah), sehingga tidak cocock untuk mentransmisikan data.
• Kabel UTP Category 2
  Mampu mentransmisikan data dengan kecepatan sampai dengan 4 Mbps (Megabits per second)
• Kabel UTP Category 3
  Digunakan pada 10BaseT network, mampu mentransmisikan data dengan kecepatan sampai 1Mbps. 10BaseT kependekan dari 10 Mbps, Baseband, Twisted pair.
• Kabel UTP Category 4
  Sering digunakan pada topologi token ring, mampu mentransmisikan data dengan kecepatan sampai 16 Mbps
• Kabel UTP Category 5
  mampu mentransmisikan data dengan kecepatan sampai 100 Mbps, 
• Kabel UTP Category 5e
  mampu mentransmisikan data dengan kecepatan sampai 1000 Mbps (1Gbps), frekwensi signal yang dapat dilewatkan sampai 100 MHz.
• Kabel UTP Category 6
  Mampu mentransmisikan data dengan kecepatan sampai 1000 Mbps (1Gbps), frekwensi signal yang dapat dilewatkan sampai 200 MHz. Secara fisik terdapat separator yg terbuat dari plastik yang berfungsi memisahkan keempat pair di dalam kabel tersebut.
• Kabel UTP Category 7 gigabit Ethernet (1Gbps), frekwensi signal 400 MHz

Untuk pemasangan kabel UTP, terdapat dua jenis pemasangan kabel UTP yang umum digunakan pada jaringan komputer terutama LAN, yaitu Straight Through Cable dan Cross Over Cable.

Kabel straight
Kabel straight merupakan kabel yang memiliki cara pemasangan yang sama antara ujung satu  dengan ujung yang lainnya. Kabel straight digunakan untuk menghubungkan 2 device yang berbeda.

Urutan standar kabel straight adalah seperti dibawah ini yaitu sesuai dengan standar TIA/EIA 368B (yang paling banyak dipakai) atau kadang-kadang juga dipakai  sesuai  standar TIA/EIA 368A sebagai berikut:

 

 

Contoh penggunaan kabel straight adalah sebagai berikut :

1. Menghubungkan antara computer dengan switch
2. Menghubungkan computer dengan LAN pada modem cable/DSL
3. Menghubungkan router dengan LAN pada modem cable/DSL
4. Menghubungkan switch ke router
5. Menghubungkan hub ke router

Kabel cross over
Kabel cross over merupakan kabel yang memiliki susunan berbeda antara ujung satu dengan
ujung dua. Kabel cross over  digunakan untuk menghubungkan 2 device yang sama. Gambar dibawah adalah susunan standar kabel cross over.

 

 

Contoh penggunaan kabel cross over adalah sebagai berikut :

1. Menghubungkan 2 buah komputer secara langsung
2. Menghubungkan 2 buah switch
3. Menghubungkan 2 buah hub
4. Menghubungkan switch dengan hub
5. Menghubungkan komputer dengan router

Dari 8 buah kabel yang ada pada kabel UTP ini (baik pada kabel straight maupun cross over) hanya 4 buah saja yang digunakan untuk mengirim dan menerima data, yaitu kabel pada pin no 1,2,3 dan 6.

 

Membuat kabel Straight dan Cross Over
Untuk membuat sebuah kabel jaringan menggunakan kabel UTP ini terdapat beberapa peralatan yang perlu kita siapkan, yaitu kabel UTP,  Connector RJ-45, Crimping tools dan RJ-45 LAN Tester, contoh gambarnya seperti dibawah ini:

Praktek membuat kabel Straight

1. Kupas bagian ujung kabel UTP, kira-kira 2 cm
2. Buka pilinan kabel, luruskan dan urutankan kabel sesuai standar TIA/EIA 368B
3. Setelah urutannya sesuai standar, potong dan ratakan ujung kabel,
4. Masukan kabel  yang sudah lurus dan sejajar tersebut ke dalam konektor RJ-45, dan pastikan semua kabel posisinya sudah benar.
5. Lakukan crimping menggunakan crimping tools, tekan crimping tool dan pastikan semua pin (kuningan) pada  konektor RJ-45 sudah “menggigit” tiap-tiap kabel.
6. Setelah selesai pada ujung yang satu, lakukan lagi pada ujung yang lain
7. Langkah terakhir adalah menge-cek kabel yang sudah kita buat tadi dengan menggunakan LAN tester, caranya masukan masing-masing ujung kabel (konektor RJ-45) ke masing2 port yang tersedia pada LAN tester, nyalakan dan pastikan semua lampu LED menyala sesuai dengan urutan kabel yang kita buat.
8. Dibawah ini adalah contoh ujung kabel UTP yang telah terpasang konektor RJ-45 dengan benar, selubung kabel (warna biru) ikut masuk kedalam konektor, urutan kabel dari kiri ke kanan (pada gambar dibawah ini urutan pin kabel dimulai dari atas ke bawah)

Demikianlah sekilas penjelasan tentang kabel UTP, category kabel UTP, standar urutan kabel straight dan cross over dan cara membuat kabel jaringan straight menggunakan crimping tools, semoga bisa membantu,  Urutan Kabel UTP Straight dan Cross Over