Blogger Tutorial: Customize your Date Header Style 1

28 / 01 / 2017

Assalamualaikum semua! Harini nak memenuhi permintaan sahabat kita yang request dekat ask.fm on how to get date-header macam saya, ada line dekat belakang tulisan, macam ni:

1. Ok mari mulakan:Mula-mula pergi dekat Blogger Dashboard > Template >Edit HTML

2. Tekan key Ctrl + F untuk cari code h2.date-header {

3. Awak akan jumpa codes macam ni:

h2.date-header {
font: $(date.header.font);
}

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

4. Delete code tu, gantikan dengan codes bawah ni:

h2.date-header {
font: $(date.header.font);
border-bottom:1px solid #eee;
text-align:center;
line-height:1px;
text-transform:uppercase;
font-weight:normal;
}

.date-header span {
background-color:#fff;
color: #666666;
padding-left:20px;
padding-right:20px;
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

5. Save.

Dah siap. Kalau nak request tutorial boleh mintak dekat Ask.fm okay.

»
«
»
«
Assalamualaikum, 
Tutorial ni untuk yang guna Simple Template yang warna putih tu. 
Sebelum. Ada background kelabu tu kan? 
  1. Pergi dekat Template > Edit HTML
  2. Cari code .comments .comment-thread.inline-thread {
  3. Nanti akan jumpa code macam ni : 

    .comments .comment-thread.inline-thread {
      background-color: $(post.footer.background.color);
    }

  4. Padam yang saya warnakan biru tu.
  5. Kalau nak buang border pula (abaikan kalau taknak buang border): 
  6. Cari code .comments .continue {
  7. Nanti jumpa code macam ni: 

    .comments .continue {
      border-top: 2px solid $(widget.alternate.text.color);
    }

  8. Padam code yang saya birukan.
  9. Done and save. 
Hasilnya. Goodluck!
»
«
»
«

Assalamualaikum and hi. This tutorial was requested. This tutorial is on how to not let people right click on your blog. This action will prevent copycat from opening your page source. Talking about page source...why don't we just let them be because actually there are many other ways to open page source even if you disable the right click.

However, if you still intended to disable right click, follow the following steps. Oh!  I want to tell you that both Classic Template and Blogger Template Designer can use this method.

1. For Classic template, go to Home > Template > Edit Template HTML
1. For Template Designer, go to Home > Template
2. Search for <body> in your HTML context box
3. Now, replace the codes you have found earlier to this:

<body oncontextmenu='return false;'/>

4. Save and try to right click on your blog! 🙂

»
«
»
«
gambar contoh asal - not mine
<img src="IMAGE URL" width="200" style="-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; " />
<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;" />
<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 50%; -moz-border-radius-bottomright: 0;border-radius: 50%; border-bottom-right-radius: 0;" />
<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-top-right-radius: 0; -moz-border-radius: 50%; -moz-border-radius-topright: 0; border-radius: 50%; border-top-right-radius: 0;" />
<img src="IMAGE URL" width="200" style="-webkit-border-radius: 50%; -webkit-border-top-left-radius: 0; -moz-border-radius: 50%; -moz-border-radius-topleft: 0; border-radius: 50%; border-top-left-radius: 0;" />
»
«
»
«

 Assalamualaikum,

Haritu den buat yang simple template kan? Harini untuk denim pulak, tak berapa reti denim tapi akhirnya jadi jugak. Tapi lain sikit lah.  Ekceli taknak buat tuto denim tapi ramai jugak yang tanya so saya buatlah 🙂 
  1. Pergi ke Blogger Dashboard > Template > Edit HTML
  2. Cari code /* Footer
  3. Paste codes yang saya bagi ni dekat ATAS /* Footer tadi.
  4. Warna text, background semua pandai-pandai lah ubah eh ^-^
  5. Kalau dah siap, Preview . Save
Masa saya buat ni, saya pilih setting comment pop out window, so kalau yang lain tak jadi bagitau lah ye. 
Wasalam.
»
«
»
«

Assalamualaikum,

So yea saya buat benda ni sebab saya selalu post code tanpa terangkan apa yang boleh diubah. Perangai seperti ni tak ubah seperti cikgu akaun saya pada tahun lepas, hampeh tak faham. Mungkin ada yang tak tahu kan?  Tapi takpe, meh belajar. Ni ikut apa yang saya tau jelah, banyak sangat yang saya tak tau , maaf T_T (so den buat research sikit)

property border:

ketebalan :

jenis border:

Jenis dia ada banyak, boleh rujuk bawah ni :

dotted
dashed
solid
double ( 3px keatas )
groove ( 3px keatas )
ridge ( 3px keatas )
inset
outset
warna border :

Code warna, boleh ambik dari sini -> http://hexcolorgenerator.com/

border-width, border-style dan border-color

Property Border:1px solid #000000; dekat atas ni sebenarnya combinasi code  border-width, border-style dan border-color. Kalau nak guna property border-width, border-style dan border-color dalam css pun boleh, tapi ketiga-tiga property kena letak.

contoh :

border-width:10px;
border-color:#FFBBBB;
border-style:solid;

Yang bestnye guna property border-style ni, kita boleh guna sampai empat style !

border-style: solid dotted;

border-style: (atas dan bawah) (kiri dan kanan);

border-style: solid dotted dashed;

border-style: (atas) (kiri dan kanan) (bawah);

border-style: solid dotted dashed groove ;

border-style: (atas) (kanan) (bawah) (kiri) ;

Border-color pun, boleh guna sampai empat warna.

border-color:#FFBBBB #DACBEF;

border-color: (atas dan bawah) (kiri dan kanan);

border-color:#FFBBBB #DACBEF #F1EBC8;

border-color: (atas) (kiri dan kanan)(bawah) ;

border-color:#FFBBBB #DACBEF #F1EBC8 #C8E9F1;

border-color: (atas) (kanan) (bawah) (kiri) ;


Sorry kalau tak faham sebab saya selalu syok sendiri. Hihi. Sebarang soalan, boleh komen 🙂 Wasalam

Mohon jangan repost tanpa kebenaran.

 rujukan rujukan

»
«
»
«
WANA, TWENTY ONE
The girl on the left telling you to have a happy reading!

+ JOIN THIS SITE

Footsteps

My Bloglist

Sponsor



© 2011-2017 WANASEOBY.COM