4 Pilihan Perubahan di Widget Profile

About me

'cah ndeso kluthuk

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Lihat profile lengkapku...(no.1)

About me

'cah ndeso kluthuk

Hidup haruslah mengucurkan keringat! Tidak perlu ngomongin buruknya tetangga dan terlalu banyak cingcong, tetapi banyaklah bertindak! Banyak bicara adalah kesia-siaan karena air ludahmu bukan ludah berapi seperti milik mereka yang berdasi mengkilap!!!

Lihat profile lengkapku...(no.2)

About me

'cah ndeso kluthuk

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Lihat profile lengkapku...(no.3)

About me

Gitosamin

Aku ?! Aku bukan siapa-siapa hanya bocah kecil yang demen pipis di celana serta paling suka makan sama sambal kecap + kerupuk. Yang penting bagiku, tiap hari nggak telat makan dan kepala nggak dedel2x amat...

Lihat profile lengkapku...(no.4)



4 (empat) pilihan menata widget profile seperti di atas bisa menjadi pilihan bagi sampeyan untuk widget profile. Dengan menyandingkan keempatnya, kita bisa mengetahui secara persis pilihan terbaik, yang paling rapi dan yang terutama adalah yang paling cocok dengan selera sampeyan. Mengatur widget profile seperti di atas tidak sesulit yang dibayangkan. Hanya dengan menambah sedikit kode CSS maka sampeyan dengan cepat bisa membuat berbagai konfigurasi sesuai keinginan. Bahkan jika mau dalam 2 menit sekali sampeyan bisa merubahnya! Heh .... heh .... heh ... jadi ketawa sendiri, nih, aku! Yaaaph .... trus posting, makan, pipis ma eok-nya kapan klo mo dua menit sekali merubah tatanan widget profil! Emang betah begituan terus?! Ha ... ha ...

O, yah, sebelum kita bahas teknis pengubahan setiap tatanan di widget profil, perlu di ketahui terlebih dahulu bahwa panduan ini diperuntukkan bagi pengguna "New Blogger Template" sekaligus siapapun yang menggunakan "Template Lama" atau "Template Tata Letak".

Cara Melakukan Perubahan Tatanan Widget Profile


  • Login : Lakukan Login ke Blogger terlebih dahulu dengan menuliskan "User Name(Nama Pengguna)" atau "Email Address". Tuliskan juga "Password (Sandi)" baru kemudian klik "Login".
  • Setelah halaman baru terbuka (halaman dasboard), klik link "Design (Rancangan)".
  • Cari dan klik link "Edit HTML".
  • Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atas ]]></b:skin>.
  • KLIK "SAVE Template (Simpan Template)".
  • Buka blog untuk melihat hasilnya.

Untuk mempermudah pemahaman penataan kita kasih saja tanda :
  • About me = A
  • Profile Image (gambar) = B
  • 'cah ndeso kluthuk = C
  • Urip mono sing jelas kudu ... das = D
  • Buka blog untuk melihat hasilnya = E

Kode CSS Kunci Perubahan

#Profile1 {
       text-align: center;  
}
#Profile1 h2 { 
       text-align: center;
       padding-left: 0;  
       background: none;
}
dt.profile-data {
       text-align: center;  
}
#Profile1 img {
       display: block; 
       margin: 10px auto; float: none; 
}      
dd.profile-textblock {
       text-align: justify; 
}

Kode CSS di atas adalah beberapa kode CSS yang menjadi kunci berbagai perubahan yang hendak kita lakukan di widget profile. Melalui kode tersebut kita bisa buat berbagai konfigurasi sesuai keinginan kita. Mungkin sampeyan pingin gambar dan teks rata semua (center), mau A, C, D atau E ditengah, pinggir kiri/rata kiri atau pojok kanan/rata kanan semua bisa dilakukan hanya dengan kode kode di atas. "text-align: ....;" menjadi kunci utama pada keseluruhan teks.
  • text-align: left; untuk membuat teks rapat ke kiri sekaligus juga berfungsi untuk membuat teks rata kiri.
  • text-align: right; untuk membuat teks rapat ke kanan sekaligus juga berfungsi untuk membuat teks rata kanan.
  • text-align: center; untuk membuat teks rata tengah dan center of position (jika difungsikan pada A).
  • text-align: justify; untuk membuat teks rapat di kanan dan kiri (rata kanan-kiri).
  • Khusus pada Profile image/gambar profil B untuk membuatnya pada posisi kiri tengah dan kanan digunakan kode CSS tersendiri.

Keterangan yang tersampaikan seperti di atas bukan dengan mudah dipahami tanpa melihat bentuk nyata kode dan hasilnya. Oleh karena itu silahkan sampeyan lihat masing masing kode CSS yang digunakan di masing-masing tampilan widget profile di atas (no-1, no-2, no-3 dan no-4).

Kode CSS Widget Profile no-1

#Profile1 {
       text-align: center;  /* teks rata tengah */
}
#Profile1 h2 { 
       padding-left: 0;    /* menetralisir padding */
       background: none;   /* menghilangkan background-image */
}    
#Profile1 img {            /* buat image center of position */
       display: block;     
       margin: 10px auto; 
       float: none; 
}

  • text-align: center; berfungsi untuk membuat seluruh teks rata tengah.
  • padding-left: 0; dan background: none; digunakan untuk kondisi tertentu dimana sebuah template pada syntax #Profile1 h2 { ... } menggunakan background image dan padding di sebelah kiri (padding-left biasanya bernilai di atas 20px dan berakibat text terhalangi untuk berposisi di tengah-tengah persis). Jadi background: none; dan padding-left: 0; mempunyai fungsi sebagai penetralisir.
  • Supaya widget Profile benar-benar "center of position, maka gambar profile harus berada di tengah. Syntax #Profile1 img { ..} digunakan untuk menjalankan fungsi tersebut.

Kode CSS Widget Profile no-2

#Profile1 {
       text-align: center;
}
#Profile1 h2 { 
       padding-left: 0;  /* menetralisir padding */
       background: none; /* menghilangkan background-image */
}
#Profile1 img {          /* image center of position */
       display: block; 
       margin: 10px auto; 
       float: none; 
}      
dd.profile-textblock {
       text-align: left; /* buat rata kiri */
}

  • dd.profile-textblock { text-align: left; } berfungsi untuk membuat teks pada D (deskripsi) rata kiri. Jika menginginkan rata kanan sampeyan tinggal rubah left menjadi right.

Kode CSS Widget Profile no-3

#Profile1 {
       text-align: center;
}
#Profile1 h2 { 
       padding-left: 0;  /* menetralisir padding */
       background: none; /* menghilangkan background-image */
}
#Profile1 img {          /* image center of position */
       display: block; 
       margin: 10px auto; 
       float: none; 
}      
dd.profile-textblock {
       text-align: justify; /* buat rata kanan-kiri */
}

Seperti halnya yang kita gunakan pada widget profileno-1 dan no-2, pada widget profile no-3 masih menggunakan kode yang sama. Perubahan hanya dilakukan pada deskripsi di widget profile D dengan membuat teks menjadi rata kanan-kiri.

Kode CSS Widget Profile no-4


Hampir semua template sebenarnya menggunakan bentuk widget profile no-4, namun mungkin saja ada sebuah template (blog) yang berbeda, oleh karena itu jika sampeyan ingin membuatnya dalam bentuk seperti no-4, silahkan gunakan kode CSS berikut.
#Profile1 {
       text-align: left;
}
#Profile1 h2 { 
       padding-left: 0;  /* menetralisir padding */
       background: none; /* menghilangkan background-image */
}
#Profile1 img {          /* image center of position */
       float: left;
       margin: 0 5px 5px 0; 
       padding: 4px;
       border: 1px solid #777;
}

Pada kode di atas terjadi perubahan pada:
  • syntax #Profile1 {text-align: left;}, yang berfungsi untuk membuat seluruh teks rata kiri dan rapat ke kiri.
  • Syntax #Profile1 img { ... }, di rubah supaya gambar berada di sebelah kiri float: left;. Penambahan padding dan border serta margin berfungsi untuk membuat jarak dengan teks di kanan dan kiri (margin!), membuat jarak gambar dengan bidang di sekitarnya (padding!), membuat gambar tampil lebih indah (padding dan border!).

Kode CSS dan perubahan pada Widget Profile


Banyak perbedaan dapat di buat dengan merubah sendiri beberapa kode CSS di bawah yang menjadi segala perubahan posisi teks di widget profile.
  • #Profile1 h2 { ... } (A) dengan membuat kode CSS dalam syntax ini maka sampeyan dapat merubah beberapa variable di dalamnya seperti : color, rata-kanan (text-align:right), di tengah (text-align:center), rata kiri (text-align:left), ukuran font, jenis font dan beberapa yang lain.
  • #Profile1 img { ... } (B) Membuat gambar berposisi di kanan (float-right), di tengah (dengan kode seperti di atas- no1 s/d no-3) dan gambar di kiri (float: left;). Selain itu sampeyan dapat juga merubah margin, padding, border, serta menambahkan kode yang lain seperti border-radius, box shadow (drop-shadow) serta banyak kode yang lain.
  • dt.profile-data { ... } (C) Fungsinya sama dengan di atas (no.1).
  • dd.profile-textblock { ... } (D) Fungsinya sama dengan di atas (no.1).
  • Untuk point ke-5 (E), syntax yang digunakan adalah .profile-link { ... }. Beberapa variabel bisa dirubah dengan menggunakan kode CSS seperti yang berkaitan dengan ukuran font, warna, tebal huruf dan beberapa yang lain!

Kesimpulan


Dari uraian di atas sangat jelas bahwa sebenarnya pilihan perubahan yang dapat dilakukan di widget profile amatlah banyak (tidak hanya 4 (empat). Sekarang tergantung sampeyan mau dibentuk seperti apakah widget profile blog sampeyan?!



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


Comments

Post a Comment