Cara Mudah menghilangkan garis tepi atau border pada gambar postingan

Apakah Sobat Blogger tahu apa itu border gambar? Border, dapat kita sebut juga sebagai garis tepi, oleh karena itu border gambar adalah garis tepi suatu gambar. Di postingan kali ini kita membahas bagaimana cara menghilangkan border atau garis tepi gambar tersebut, dan tentunya yang terdapat di dalam postingan kita. Kalau teman-teman bertanya mengapa border harus dihapus? Sebenarnya border tidak harus dihapus, hanya saja bagi teman-teman yang menginginkannya silakan diperaktekkan, masalahnya menurut saya pribadi kalau suatu gambar yang ada di postingan tu ada bordernya keliatannya kurang bagus (ingat, ini pendapat saya lho) dan kelihatan kaku jika dipandang. Agar lebih jelas, teman-teman bisa melihat contoh tampilan berikut ini:<a name="more"></a><br /><br /><a href="http://klinik-blogger.blogspot.com/"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5415000877137618082" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpqNHRAVMPoqzBY6PvrkcOMzgPh_oUIApMGv9-8g3ClQzVdZaBWQtNU4N_9GCLy65knb1oo0Di9eH7OsQkDuAFfJ3zet2jSq1e35lIfIaNpKisKJztFBdQoXqN043lrQrOmN3bS0rWSY/s400/cara_menghilangkan_border_gambar01_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 375px; height: 144px;" /></a><br /><br /><a href="http://klinik-blogger.blogspot.com/" style=""><img alt="" border="0" id="BLOGGER_PHOTO_ID_5415000996584690418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcT7zWkYhK7-BHCtuw55EMB6Thw-fH0R9z3O57bfH5bk0KAvn-9VNbEvoMGT602MtOADh4XvRTyJtNMAUZ3-ASbqD8HdxPw1J0BGHZucrHYotYLmp9Eo0VrBv2iyF70ePM-oo4rneJ59E/s400/cara_menghilangkan_border_gambar02_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 363px; height: 144px;" /></a><br /><br /><br />Setelah teman-teman mengamati 2 gambar di atas maka pertanyaannya adalah "Adakah perbedaan antara dua gambar di atas?<br /><br />Jawabannya adalah: ADA, yaitu gambar satu memiliki border, sedangkan gambar dua tidak memiliki border.<br /><br />Dengan begitu sekarang kita sudah tahu pasti bahwa kegunaan border gambar hanya untuk sekedar pemisah antara suatu gambar dengan dinding posting, entah itu pemisah objek gmbar atau warna gambar.<br /><br />Nah, bagi teman-teman yang ingin membuat tampilan gambar postingannya yang tadinya seperti nomor satu dan sekarang berubah menjadi no. dua, silahkan diperaktekkan langkah2 berikut:<br /><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">1</span></span>. <span style="font-weight: bold;">Login</span> ke Blogger >> klik <span style="font-weight: bold;">Tata Letak</span> >> <span style="font-weight: bold;">Edit HTML</span><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">2</span></span>. Lalu cari kode berikut: (cukup cari "<span style="color: rgb(255, 0, 0);">post img</span>" dgn Ctrl+F)<br /><br /><p class="alert"></p><blockquote>.post img {<br />padding: 4px;<br /><span style="font-weight: bold; color: rgb(51, 51, 255);">border: 1px</span> solid $borderColor;</blockquote><p></p><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">3</span></span>. Selanjutnya, yang perlu teman-teman perhatikan adalah pada bagian yang telah ditandai dengan warna <span style="font-weight: bold; color: rgb(51, 51, 255);">biru</span> (<span style="font-weight: bold; color: rgb(51, 51, 255);">border: 1px</span>), maka tulisan "<span style="font-weight: bold; color: rgb(51, 51, 255);">1px</span>" tersebut bisa teman-teman ganti dengan "<span style="font-weight: bold; color: rgb(51, 51, 255);">0px</span>", dengan begitu seluruh border gambar yang terdapat di dalam postingannya teman-teman akan hilang semua.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold; color: rgb(255, 0, 0);">4</span></span>. bagi teman-teman yang ingin memunculkan border gambarnya kembali, maka caranya gampang. Tinggan diubah nilai "<span style="font-weight: bold; color: rgb(51, 51, 255);">0px</span>" menjadi angka di atas "<span style="font-weight: bold;">0/nol</span>". Dan ingat, <span style="font-style: italic;">semakin besar angkanya, maka semakin tebal bordernya</span>.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold; color: rgb(255, 0, 0);">5</span></span>. Selesai, jangan lupa disimpan hasil kerjaannya.<br /><br /><br />Coba sekarang teman-teman tengok gambar-gambar yang terdapat dalam postingannya teman-teman...<br /><br /><br /><br /><br /><br />Semoga Bermanfaat<br /><br />Sumber : http://t4belajarblogger.blogspot.com/<br /><br /><br /><span style="font-weight: bold;">Tags: </span><span style="color: rgb(153, 153, 153);font-size:85%;" >cara menghilangkan border gambar pada postingan, menghilangkan garis tepi gambar blogger, cara cepat menghilangkan border post, cara meghilangkan garis tepi gambar blogspot</span>

tutorial blog Cara Mudah menghilangkan garis tepi atau border pada gambar postingan

Apakah Sobat Blogger tahu apa itu border gambar? Border, dapat kita sebut juga sebagai garis tepi, oleh karena itu border gambar adalah gar...

Read more »

Membuat Slide Recent Post Versi Terbaru lengkap dengan Tumbnail

<div class="separator" style="clear: both; text-align: center;"><a href="http://klinik-blogger.blogspot.com/"><span style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Slide Recent Post" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEias6sFj3oCOBw9HfLUxY1tJ0V7o7_az134JgXGm8a2cSDBL1OaHVXMK7fIJ-LEB6k8WI4IfHCOl3XZIXbncRaNYmkw6mFWf30gIupnsaDpQdCBkf91cD0o2xUMoAMG2WciySrsa9oRfS4/s200/recentpost.jpg" width="126" /></span></a></div>Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentang recent post. Coba ketik saja di search box "recent post".<br /><br />Sekarang kita akan belajar menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena <a href="http://klinik-blogger.blogspot.com/">slide</a>, berarti terus bergerak dan bergantian. Widget <i>slide recent post</i> ini cocok dipasang di sidebar. <a href="http://klinik-blogger.blogspot.com/">Demo</a>nya bisa dilihat di sini<br /><br /><b>Cara Membuat Slide Recent Post</b><br />1. <b>Login</b> ke blogger<br />2. Pilih <b>Rancangan</b> kemudian <b>Tambah Gadget</b><br />3. Pilih <b>HTML/JavaScript</b><br />4. Masukan kode HTML berikut ini:<br /><br /><blockquote><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /><style type="text/css" media="screen"><br /><!--<br /><br />#spylist {<br />overflow:hidden;<br />margin-top:5px;<br />padding:0px 0px;<br />height:350px;<br />}<br />#spylist ul{<br />width:220px;<br />overflow:hidden;<br />list-style-type: none;<br />padding: 0px 0px;<br />margin:0px 0px;<br />}<br />#spylist li {<br />width:208px;<br />padding: 5px 5px;<br />margin:0px 0px 5px 0px;<br />list-style-type:none;<br />float:none;<br />height:70px;<br />overflow: hidden;<br />background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;<br />border:1px solid #ddd;<br />}<br />#spylist li a {<br />text-decoration:none;<br />color:#4B545B;<br />font-size:11px;<br />height:18px;<br />overflow:hidden;<br />margin:0px 0px;<br />padding:0px 0px 2px 0px;<br />}<br />#spylist li img {<br />float:left;<br />margin-right:5px;<br />background:#EFEFEF;<br />border:0;<br />}<br />.spydate{<br />overflow:hidden;<br />font-size:10px;<br />color:#0284C2;<br />padding:2px 0px;<br />margin:1px 0px 0px 0px;<br />height:15px;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />}<br />.spycomment{<br />overflow:hidden;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />font-size:10px;<br />color:#262B2F;<br />padding:0px 0px;<br />margin:0px 0px;<br />}<br /><br />--><br /></style><br /><script language='JavaScript'><br />imgr = new Array();<br />imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";<br />imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";<br />imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";<br />imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";<br />imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";<br />showRandomImg = true;<br />boxwidth = 255;<br />cellspacing = 6;<br />borderColor = "#232c35";<br />bgTD = "#000000";<br />thumbwidth = 70;<br />thumbheight = 70;<br />fntsize = 12;<br />acolor = "#666";<br />aBold = true;<br />icon = " ";<br />text = "comments";<br />showPostDate = true;<br />summaryPost = 40;<br />summaryFontsize = 10;<br />summaryColor = "#666";<br />icon2 = " ";<br />numposts = 10;<br />home_page = "<span style="color: rgb(255, 0, 0);">http://klinik-blogger.blogspot.com/</span>";<br />limitspy=4<br />intervalspy=4000<br /></script><br /><br /><div id="spylist"><br /><script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script><br /></div><br /></blockquote><br /><br /><br />Sebelum kita Simpan, berikut ini yang bisa kita ubah:<br /><ul><li>220 dan 208 adalah lebar widget.</li><li> numposts = <b>10</b>; adalah banyaknya postingan yg ingin kita tampilkan</li><li>Ganti <span style="color:red;">http://klinik-blogger.blogspot.com/</span> dengan URL blog kita sendiri.</li></ul>5. <b>Simpan</b> jika sudah selesai.

tutorial blog Membuat Slide Recent Post Versi Terbaru lengkap dengan Tumbnail

Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentan...

Read more »

Artikel Terkait Versi Terbaru Lengkap Dengan Gambar

<p> <strong>Cara Membuat Artikel Terkait(Related Posts) Bergambar </strong><span class="data-post"><strong>Related post bergambar</strong> ini secara default akan mengambil gambar di dalam postingan untuk dijadikan thumbnail pada artikel terkait, jika di dalam postingan tidak ada gambar maka thumbnail akan kosong.<br /><br /></span></p><div class="separator" style="clear: both; text-align: center;"><a href="http://klinik-blogger.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img alt="link within" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAupydGdThjICxh-_2tx5tjB5_B0GCCDecFyGOxUDHbqT3pCht3dqGfMulhj2jJZZ0MqMqDIjIe1YyHpecoH5GkNdjpjYzNXMvfOn4ojpWkVJOyIJQrPyJUAtpxFXD_6xXeMacE5bmR4/s320/linkwithin.jpg" /></a></div><br />Kelebihan pada <strong>artikel terkait bergambar</strong> ini adalah bisa dengan gambar yang akan bisa membuat penasaran pengunjung akan artikel yang bergambar tsb.<br /><br />Kekurangannya adalah <strong>artikel terkait</strong> ini hanya tampil sekitar 4-7 artikel saja yang kelihatan, jadi tidak akan banyak yang tampil dan pengunjung juga tidak akan bisa mencari artikel terkait yang sama dengan lebih banyak. Dan pada versi ini juga, kita hanya bisa menggunakan layanan yang membuat artikel terkait yang dilengkapi gambar ini adalah www.linkwithin.com<br /><br /><strong>Cara Membuat Artikel Terkait Bergambar</strong>Untuk <strong>membuat related post bergambar</strong> lakukan prosedur berikut:<br /><br />1. Buka situs <a href="http://www.linkwithin.com/" rel="nofollow" target="_blank">linkwithin</a><br />2. Masukkan email, domain, dan platform blog. Klik Get widget<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://klinik-blogger.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img alt="link within" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwP2Pomta1LZwvqmVtioCnfdVp46etw3BNRtRs4iWNyPbvcptmggoixX7alVVXQSkfuSGl9cchz8d1LzU6fzWsfqyxTfxKUdkLrJTi6Ba4JbdvN0p7TuwE6-Iz9D5J67L_5JL9HzYUK5k/s1600/linkin1b.jpg" /></a></div><br />3. Klik linkInstal widget<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4ZzjeXq0awzP1HnQ1Hc-qyAWBoHElH7U3vUGBJC6MAewjKLCbvrNCEiTIzLSPqMcFWYXz2xHWNIrj5pv_P9WJ2p_NZP32WA-1cKbRUJi7kY1IJcvArSgsVJyB-o5K24Fz14srKiqmBU/s1600/linkin2b.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="link within" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4ZzjeXq0awzP1HnQ1Hc-qyAWBoHElH7U3vUGBJC6MAewjKLCbvrNCEiTIzLSPqMcFWYXz2xHWNIrj5pv_P9WJ2p_NZP32WA-1cKbRUJi7kY1IJcvArSgsVJyB-o5K24Fz14srKiqmBU/s1600/linkin2b.jpg" /></a></div><br />4. Kopi kode script yang tersedia.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://klinik-blogger.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img alt="link within" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVoJgkonGbLc94ap9RCyeq63TXOWpmEF2Uu5u8Y6f5d5fECSSSs6z0TC6csAnRTMP2AdEOnq9XkS8EofT6jMIGkwryx7QLqpBAtepabjpVXyHj9Zj-TV_sZ_bPatsk1k6_5h_ThldVnm0/s1600/linkin3b.jpg" /></a></div><br />5. Login ke blogger<br />Tambahkan sebuah gadget html/javascript,<br />Di <b>Dasbor</b> pilih <b>Rancangan</b> - <b>Elemen laman</b> - <b>Tambah Gadget</b> - pilih gadget <b>HTML/Javascript </b><br />copy script pada langkah 4 ke dalam gadget html/javascript,<br />Letakkan gadget html/javascript di bawah postingan.<br /><br />Sekian dulu postingan saya mengenai <strong>cara membuat artikel terkait bergambar</strong>. Semoga dengan <strong>membuat artikel terkait bergambar</strong> ini blog anda semakin bagus tampilannya.<br /><br />Sumber : <a href="http://daw-xp.blogspot.com/"><span style="font-weight: bold;">Daw XP</span></a>

tutorial blog Artikel Terkait Versi Terbaru Lengkap Dengan Gambar

Cara Membuat Artikel Terkait(Related Posts) Bergambar Related post bergambar ini secara default akan mengambil gambar di dalam postinga...

Read more »