Menambah Gambar Sebelum Judul Postingan

Label: 0 komentar


Banyak berbagai macam cara dilakukan para Blogger untuk membuat blog nya lebih bagus dan juga lebih menarik, salah satunya dengan menambahkan gambar atau image sebelum judul postingan (klik disini untuk melihat contihnya) supaya lebih berkesan artistic dan bagus dilihat oleh pengunjung, tapi bagaimana ya cara membuatnya



Tenang saja kali ini saya akan berbagi ilmu kepada para Sobat Blogger cara membuatnya, Ok kita langsung aja, silahkan Log in terlebih dahulu ke accunt blogger anda lalu masuk ke menu Tata Letak kemudian masuk menu Edit HTML lalu…?




Lalu Cari Code CSS seperti dibawah ini yang mirip di blog Anda (karna masing-masing blog berbeda)

.post h3 {

margin:.5em 0;

padding:30px 0px 0px 30px;

font-size:100%;

font-weight:bold;

font-style:italic;

line-height:1.3em;


color:#ccc;
Jika kodenya sudah ketemu, lalu tambahkan kode berikut:

height:48px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4VYe2l-5EaDGaXen4ArQMPu54-nB_M-7byNWhMxkNoNU7UuB1SAYQdjmCgR71yQ-Q63tlDyFqOGGA6MqsTVoI3H0TJUnvnYkcE-D85rmTHE_qPOWOCJuumgqv3-_diF-mcm-k_7hb9qe/s320/date-24.png) no-repeat left center;
Sehingga susunanya menjai seperti ini:

.post h3 {

margin:.5em 0;

padding: 33px 2px 2px 33px;


font-size:120%;

font-weight:bold;

font-style:italic;

line-height:1.3em;

color:#ccc;

height:48px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4VYe2l-5EaDGaXen4ArQMPu54-nB_M-7byNWhMxkNoNU7UuB1SAYQdjmCgR71yQ-Q63tlDyFqOGGA6MqsTVoI3H0TJUnvnYkcE-D85rmTHE_qPOWOCJuumgqv3-_diF-mcm-k_7hb9qe/s320/date-24.png) no-repeat left center;
Keterangan:




Padding : Kesesuaian antara letak gambar dengan judul postingan (ubah paddingnya dan sesuaikan dengan judul postingan anda).



Background: alamat penyimpanan gambar ganti dengan url tempat penyimpanan gambarmu



Catatan: Jika gambar terlihat tidak teratur susunanya dengan judul postingan otak-atik saja paddingnya sampai terlihat sempurna, tapi jika anda mengunakan gambar yang saya berikan paddingnya seperti ini 33px 2px 2px 33px;



Lalu Simpan template dan lihat hasilnya dan jika gambarnya tidak tepat atau kurang terlihat utak-atik saja paddingnya.




Jika anda ingin mencari koleksi gambar yang lainya Anda Bisa Cari di www.iconarchive.com.



Selamat Mencoba





CUMA DENGAN MODAL SEDIKIT HASILNYA MELIMPAH BISNIS PULSA
WOW ! MUDAH SEKALI MENDAPATKAN 1,5 JUTA DALAM 1 HR
SAYA MENGHASILKAN RP.5.544.442 DALAM SEHARI MAU GAJI RP.28 JT/BULAN? SYARAT BISA INTERNET DAN
WOW ! MUDAH SEKALI MENDAPATKAN 1,5 JUTA DALAM 1 HR CARA MUDAH DAPAT 2,5 JUTA DALAM SEHARI KLIK DISIN
Anda DICARIKAN Investor dan Pasti Sukses Bisnis Sangat Menjanjikan Dan MUdah dijalankan
BUKTIKAN ANDA JUGA BISA DAPAT HASIL Anda DICARIKAN Investor dan Pasti Sukses
KumpulBlogger.com







newer post

membuat efek kembang api dan membesar pada link

Label: 0 komentar
seperti biasa kawan langsung hajar aja ya.......



LOGIN KE BLOGGER DAN KLIK LAYOUT OR TATA LETAK

EDIT HTML DAN CARI CODE BERIKUT

a:hover



stelah ketemu code di atas tambahkan code berikut sejajar dgn code di atas






{ color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }



CONTOHNYA AKAN SEPERTI INI





a:hover { color: #0080FF; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); } {

color: #CC0000;

text-decoration: none;


}







SILAHKAN KAWAN UTAK ATIK SESUKA KAWAN HEHEHHEHE........











newer post

Membuat Efek Zoom Pada Gambar

Label: 0 komentar
Membuat Efek Zoom Pada Gambar

Lama nian saya tidak posting dan update ini blog. Karena begitu padatnya pekerjaan di dunia offline mengharuskan saya harus banting tulang untuk mengejar target dan melaksanakan tugas yang diberikan si boss, hehehee.



Insya Allah, mulai sekarang atau mulai minggu ini saya akan kembali update blog, blogwalking dan mengobok-obok blog sobat minimal saya akan ninggalin jejak kaki saya dipostingan sobat.



Mungkin sobat semua pernah nemu sebuah blog yang mempunyai keunikan pada gambar di postingan atau disidebar. Dimana apabila mouse diarahkan kegambar tersebut secara otomatis akan menjadi besar atau dalam istilahnya efek zoom pada gambar. Ini merupakan salah satu trik untuk Mempercantik Blog kita.










Biasanya cara ini dpergunakan untuk menyiasati penghematan tempat apabila kita harus menggunakan ukuran gambar yang besar. Dengan cara ini gambar bisa kita perkecil sesuai dengan kolom postingan, kemudian apabila pembaca ingin melihat ukuran yang sebenarnya tinggal mengarahkan mouse saja ke gambar tersebut. (begichu lho....)




1. Silahkan login ke Blogger terlebih dahulu.


2. Kemudian klik Tata Letak.


3. Edit HTML.


4. Letakkan kode css berikut ini, tepat diatas kode ]]></b:skin>







/* Zoom Efek */


.thumbnail{position:relative;z-index:0}


.thumbnail:hover{background-color:transparent;z-index:50}


.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}


.thumbnail span img{border-width:0;padding:2px}


.thumbnail:hover span {visibility: visible; top: 0; left: 60px}





Jangan lupa Simpan Template.



Apabila sobat ingin menggunakan affek zoom pada gambar ini, silahkan menggunakan kode gambar seperti ini ;






<a class="thumbnail" href="#thumb"><img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" border="0" alt="Photobucket"><span><img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" width ="400px" height="472px";/></span></a>





Sedangkan kode HTMl untuk TEXT adalah sebagai berikut :






<a class="thumbnail" href="#thumb">Lihat Gambar<span><img src= http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg /></span></a>





Coba di sorot (Lihat Gambar) tulisan berwarna merah dibawah ini :



Lihat Gambar



Catatan:

Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.



Sedangkan untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode yang diletakkan di atas ]]></b:skin> (yang berwarna merah)



Ok, selamat berkarya dan semoga berhasil. Salam Blogger Indonesia.


newer post
newer post older post Home
Langganan: Postingan (Atom)