Pasang Kode Tuker Link

BangDhika beberapa waktu yang lalu mengajukan pertanyaan melalui shoutbox mengenai bagaimana cara membuat kode untuk tukeran link, dan sekarang saya akan coba membahasnya. Mudah-mudahan informasi ini bermanfaat juga bagi sobat lainnya yang belum mengetahui mengenai hal ini.



Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang
berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.




Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.



Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.



Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :



http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif



langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :


<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>


Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink
ke blog sobat ya tinggal sesuaikan saja.



Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :


<textarea name="code" rows="6" cols="20">



<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :


<h2>Tukeran link</h2>

<br/><br/>

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

<br/><br/>


<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">


<br/><br/>


<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Hasilnya nanti akan seperti ini :



Tukeran link



Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali








<br /><br /><a href="http://kolom-tutorial.blogspot.com" target="_blank"><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br /><br />




Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis
mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.



Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link
ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai
template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :

<br /> <a href="http://kolom-tutorial.blogspot.com" target="_blank" /><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br />

The button image will displayed on your site like this

Coba buktikan deh, klik saja pada tombol yang saya berikan.



Kode untuk membuatnya seperti ini :


<center>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">

<a href="http://kolom-tutorial.blogspot.com" target="_blank" />

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>
</center>



Silahkan ganti alamatnya dengan yang di miliki sobat.




bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar
yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih
HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.



Semoga mudah untuk di mengerti.



Salam buat blogger sejati semua......

Image dalam Kode Marquee

Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah saya jawab melalui shoutbox/buku tamu pula.
Akan tetapi sebuah jawaban singkat saja mungkin tidak akan dapat mewakilinya, dan
agar jawabannya dapat di cerna dengan mudah sengaja saya tuangkan ke dalam artikel ini.



Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke dalam kode
marquee. Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode marquee.



Prinsip dasarnya seperti ini :



<marquee>



Teks, links, gambar, atau apa saja yang ingin di masukan.



</marquee>



Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee, sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di perlukan suatu kreatifitas agar kita bisa memadukannya.



Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias setiap sudut halaman blog menggunakan kode marquee.



Kembali lagi ke bahasan utama yaitu membuat gambar bisa bergerak dengan marquee, sobat tinggal memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya (tidak berdempetan), sobat harus menyisipkan kode <br/> diantara kode gambar untuk arah vertikal dan kode &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini -->       & n b s p ;     tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya miliki seperti ini :





http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg





Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />



hasilnya seperti ini :
















yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130 pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



Maka hasilnya akan seperti ini :














Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?



Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot pada gambar berhenti, maka kodenya akan seperti ini :



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />


<br/><br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



</marquee>



Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai bingkai.
kodenya seperti ini :

<table border="10" cellpadding="3" height="135" width="195"/>

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background biru muda :

<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !



Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !

Download Template Scribe 3 kolom

Waduh, dua hari sudah tidak nongol-nongol di blog ini di akibatkan lagi seneng ngotak-ngatik template supaya menjadi tiga kolom. Dan ternyata .....twew....twew....
ada juga nih yang sudah jadi, tapi cuma yang model template klasik dulu kalau yang model baru nya belum jadi. Yoi men, bagi sobat yang menyukai template Scribe buatan dari Todd Dominey, yang aslinya cuma dua kolom, dan sekarang sudah saya sulap menjadi 3 kolom.



Template ini sudah saya coba di review di internet explorer serta firefox dan hasilnya cukup memuaskan, untuk browser lainnya saya tidak mencobanya karena saya tidak punya programnya, males installnya.




Biar lebih menarik, kali ini saya akan perlihatkan screen shootnya. Tapi maaf nih sobat, gambarnya jelek banget tidak sesuai aslinya. Silahkan klik pada gambar di bawah ini untuk melihat contoh blog yang sudah memakai template yang saya modifikasi :
















Sudah dilihat? menarik tidak? Jika tertarik silahkan baca dulu instruksinya. Template ini sudah saya masukan fungsi Read more , sobat tinggal memasukan
kode <div class="fullpost"> .... </div>
pada saat posting. Biar lebih jelas lagi, silahkan klik di sini !
Fasilitas lainnya yaitu sudah saya tambahkan menu navigasi pada headernya, kalau mau baca-baca seputar menu ini, silahkan baca di sini ! dan tentunya masih ada aksesoris lainnya yang saya tambahkan.



Templatenya saya berikan gratis, cuma syaratnya sobat jangan menghapus banner yang saya pasang ya, itung-itung menghargai hasil kerja saya selama berjam-jam di depan komputer gitoe loe !



Biar tidak terlalu banyak energi yang keluar untuk membaca artikel yang tidak terlalu bermanfaat, silahkan bagi yang berminat mendownload template ini, klik saja di sini !

Gambar Berbingkai

Rupanya postingan yang kemarin lusa salah alamat alias ga nyambung, maksud dari sobat
edelweis adalah membuat bingkai gambar yang ada di postingan, eh postingan saya malah photo profile. Saya yang salah apa bukan ya? tapi biarin deh, kan itupun lumayan buat pengetahuan.




Baiklah, saya kutif pertanyaan lanjutan dari sobat edelweis :




"Maaf Mas, sepertinya cara bertanya saya salah. Maksud saya bingkai untuk postingan gambar, bukan foto profile"





Memang keinginan setiap orang tidak sama, ada yang berkeinginan agar gambar yang ada di blog tidak mempunyai bingkai ada juga malah yang mau ada bingkai nya. Ok, saya coba jawab ya, mudah-mudahan jawaban kali ini tidak salah alamat lagi.




Pertama, tentu saja kita harus mempunyai alamat gambar yang mau di tampilkan, caranya yaitu gambar yang kita miliki harus di upload, bisa ke blogger atau ke hosting lain. Topik ini sudah saya bahas pada postingan terdahulu, bagi yang masih bingung silahkan klik di sini untuk membacanya kembali.
Bagaimana kita mengetahui kode HTML dari gambar yang kita upload di blogger? caranya yaitu setelah upload gambar selesai , maka sobat harus berpindah menu ke Edit HTML apabila sedang berada pada menu Compose. Saya ambil contoh gambar yang telah saya upload mempunyai kode seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s1600-h/DSC01367.JPG"><img id="BLOGGER_PHOTO_ID_5058536746814715122" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px" height="150" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s200/DSC01367.JPG" width="133" border="0" /></a>

Gambarnya seperti ini :


















Bagaimana caranya agar kita bisa membuat gambar tersebut menjadi ada bingkainya? Ini bisa dilakukan dengan menyisipkan beberapa atribut atau kode ke dalam kode gambar tersebut. Tampak pada kode yang saya berikan diatas sengaja saya cetak merah, nah kita bisa menyisipkan beberapa kode di dalamnya, antara lain padding serta border, contoh :



padding:3px;

border:15px solid #BEBBBB;




padding:3px; --> padding adalah jarak atau ruang kosong yang kita buat agar terpisah dengan border (bingkai) dalam contoh ini yaitu sebesar 3 pixel. Apabila sobat tidak menginginkan ada jarak, maka jangan tambahkan kode ini.



border:15px solid #BEBBBB; --> border adalah besarnya bingkai yang akan di buat, saya ambil contoh sebesar 15 pixel. #BEBBBB --> adalah kode warna yang mau di tampilkan, dalam contoh ini warna coklat.



Merujuk pada kode yang saya cetak merah di atas, apabila kita sisipkan kode tambahan maka potongan kode gambar diatas akan menjadi seperti ini :



style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px; padding:3px; border:15px solid #BEBBBB;"



Maka gambar yang di hasilkan akan seperti ini :




















Agar bingkai tampil lebih menarik, ada kode html yang bisa di pakai, contoh kodenya seperti ini :






<table border="20" cellpadding="6" />

<tr>

<td>



kode gambar yang ingin di tampilkan di sini !

</td>

</tr>

</table>

Sebagai contoh saya ambil alamat gambar yang sama yaitu pada kode gambar di atas. Untuk mengetahui alamat gambar diatas adalah kita ambil setelah kode src=", yaitu yang di awali dengan http dan di akhiri dengan JPG, sehingga alamat gambar diatas adalah sebagai berikut :




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s200/DSC01367.JPG




Untuk menampilkan gambar, kodenya jadi seperti ini :




<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s200/DSC01367.JPG">




Jadi apabila di satukan dengan kode HTML untuk bingkai, kodenya menjadi seperti ini :




<table border="15" cellpadding="6" />

<tr>

<td>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5U2UxS1OGIRGaCviWESUDnA2tm0FN4eciU6S4rgNmcp9zIBu_Ut2KnfzeYTS3LFRO75p2lMSyzY5BQAcyyeRJBXgNoaChnKWPiqpINa3VftyiXBPh-iS0wyiZhStjIjSOXwrQ0BU9QeI/s200/DSC01367.JPG">

</td>

</tr>

</table>

dan gambar yang akan di tampilkan adalah seperti ini :













Untuk bingkai yang ini menurut saya lebih menarik daripada bingkai yang pertama karena ada kesan tiga dimensi.




Agar sobat lebih faham, ada kode yang nilainya bisa sobat rubah sesuai keinginan, yaitu :




boder="15" --> nilai "15" adalah tebalnya bingkai sebesar 15 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



cellpedding="6" --> nilai "6" adalah nilai jarak antara gambar dengan bingkai sebesar 6 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



Saya rasa cukup nih, selamat mencoba deh.



Salam blogger sejati buat semua !

Download minima 3 kolom (XML)

Sesuai dengan janji saya kemarin lusa bahwa akan membuat template minima 3 kolom dalam versi XML (new blogger template), akhirnya template ini selesai juga saya modifikasi. Template ini adalah hasil desain dari Douglas Bowman dan telah di hack oleh Ramani, yang terakhir di modifikasi lagi oleh saya sendiri.



Lagi-lagi template ini saya berikan gratis, syaratnya hanya satu yaitu tidak diperkenankan untuk menghapus banner kolom-tutorial yang saya pasang. Jika mau di pindahkan, silahkan saya izinkan asal jangan di hapus aja ya.



untuk melihat contoh blog yang memakai template ini, silahkan klik di sini ! Fitur-fitur yang telah di masukan kedalam template ini antara lain sudah di pasang system Read more dengan system baru, tugas sobat hanya membubuhkan kode <span id="fulpost"> ... </span> lebih jauh tentang fungsi Read more yang di pakai pada template ini silahkan baca di sini !, menu navigasi yang terdapat di header, untuk mengetahui informasi tentang navigasi ini, silahkan klik di sini ! penambahan anchor link pada bagian footer agar mempermudah pengunjung untuk kembali ke halaman utama. Serta tulisan yang bisa berjalan pada bar menu bawah, tugas sobat hanya mengganti kata-katanya saja.



Satu informasi yang perlu sobat ketahui adalah pada saat download template tersebut sobat harus klik kanan (right click) pada link download yang di berikan, kemudian klik Save target as.... jangan klik kiri, karena proses download tidak akan berlangsung, yang keluar nanti malah kode-kodenya. Untuk instalasipun jangan copy paste kode template, akan tetapi harus melalui tombol Browse... yang telah di sediakan. Agar tidak keliru dalam proses instalasi, silahkan sobat baca di sini !



Agar tidak terlalu lama menunggu, untuk mendownload template minima 3 kolom ini, silahkan sobat klik di sini !



Selamat ber download ria !

Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik
agar photo tersebut menjadi ada figuranya.



Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana
sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk
photo frofile, contoh kode photo frofile untuk template lama seperti ini :



.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}



untuk template baru seperti ini :



.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;
}




Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :



float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.


padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).



border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.




Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!



Untuk template klasik :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Cari kode yang mirip dengan kode di bawah ini :





.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}





6. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid #ddd;

margin:0 8px 3px 0;

}






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Cari kode yang mirip dengan kode di bawah ini :






.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}





8. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid $bordercolor;

margin:0 8px 3px 0;

}





9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).



Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !




Selamat mencoba deh !