Cara Membuat Tanggal, Hari dan Tahun Bergaya di Blogger

Cara Membuat Tanggal, Hari dan Tahun Bergaya di Blogger

Hal ini dapat menjadi tambahan yang keren untuk blog Anda yang dapat dengan mudah disesuaikan dengan tata letak dan desainnya. Apa yang akan kita lakukan dalam tutorial ini adalah untuk mengubah warna latar belakang Header Blogger dengan beberapa penyesuaian CSS sederhana yang akan membuat float tanggal header pada sisi kiri posting Anda dan sebagian  seperti spanduk dengan tampilan warna.

Berikut Cara Membuat Tanggal, Hari, Tahun Bergaya di Blogger 

Langkah 1.Masuk akun Blogger Anda  dan pergi ke Template > Edit HTML

Langkah 2. Klik di mana saja di dalam area kode dan pencarian (CTRL + F) untuk kode berikut:

.date-header span

Di bawah kode ini Anda akan melihat beberapa baris seperti ini:

.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);
}

Langkah 3. Anda akan harus mengganti kode di atas dengan yang satu ini:

Klik Untuk Melihat Code

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

Cara Menyesuaikan Date Header

 

Untuk Mengubah:

- Warna latar belakang, ganti #DDEDAA kode hex warna Anda.

- Warna font, ganti # 444.

- Warna perbatasan lingkaran besar di bawah header tanggal, ganti # FFBD54.

- Warna perbatasan lingkaran hijau, ganti # bada55.

- Jarak antara tanggal dan pos, mengubah nilai -190px dari margin-left.

Langkah 4. Klik tombol "Simpan template" untuk menyimpan perubahan. Itu dia!.

Sekarang Anda telah menerapkan gaya baru untuk header tanggal posting Blogger Anda. Harap dicatat bahwa kode bervariasi dari template untuk template dan jika Anda memiliki template bawaan, mungkin ada CSS pemilih yang berbeda untuk header date.

Cara Menghapus Atribusi Blogger Dengan HTML

Cara Menghapus Atribusi Blogger Dengan HTML

Berikut Cara Menghapus Atribusi Blogger Dengan HTML

Atribusi gadget adalah gadget di footer yang mengatakan "Powered By Blogger". Jika Anda telah mencoba untuk menghapus ini maka Anda mungkin dari melihat gadget ini terkunci ke dalam blog Anda. Untuk membukanya, ikuti langkah-langkah selanjutnya:

Adapun Langkah- Langkahnya Berikut:

Langkah 1. Masuk ke Dashboard Anda, pergi ke Template >  Edit HTML

Dashboard

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger.

Langkah 3. Ketik atau tempel tag berikut di dalam kotak pencarian lalu tekan Enter untuk menemukannya:

</head>

Langkah 4. Tepat di atas </ head> menambahkan kode ini:

<style>
#Attribution1 {
display: none;
}
</style>

Langkah 5. Klik tombol Simpan Template untuk menyimpan perubahan.

Itu saja !

Saya tunggu anda dikomentar :)

Cara Menambahkan Komentar Gelembung Untuk Blogger

Cara Menambahkan Komentar Gelembung Untuk Blogger 

Sebuah Komentar Bubble (atau pidato balon) dengan saat ini jumlah komentar yang ditampilkan pada setiap judul posting blogger mungkin menjadi tambahan yang sangat baik jika Anda ingin membuat blog Anda lebih menarik dan menarik. Memiliki komentar ikon gelembung bisa membantu Anda tidak hanya untuk mendapatkan lebih banyak komentar di blog Anda, tetapi mungkin  juga memberikan pengunjung Anda petunjuk tentang yang tulisan paling populer di blog Anda.

Ketika posting telah menerima banyak komentar, itu bisa mencerminkan popularitas posting Anda dan dengan demikian, membuat pembaca Anda dan pengunjung lebih tertarik untuk membaca mereka.

Jika Anda ingin menambahkan komentar atau balon bicara ke blog Blogger Anda, ikuti langkah-langkah s di bawah ini:

Cara Menambahkan Komentar Gelembung Untuk Blogger 

Langkah 1. Masuk ke Dashboard Blogger >  Pergi ke Template > klik tombol Edit HTML

Dashboard

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger

Dashboard Blogger

Langkah 3. Cari tag berikut pada template Anda:

]]></b:skin>

Catatan: sebelum sesuatu, Anda perlu untuk mengklik pada panah kecil di sebelah dan setelah kode telah diperluas, mencari ]]> </ b: skin> tag lagi

Langkah 4. Tepat di atas ]]> </ b: skin> tambahkan CSS styling berikut:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DG4xQWO2PMI2-Cz-eoT4MPB_NtuT6cTzC7q03ht0zDb7aww-d2PwYam-xfBwn2QXT2majr5L2Zl-kjJL1k4kGXnkZMCf21cdcOPueyJOn-XQaDTEjl00i-CBRRffpgZSb7kq32-ApBpf/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Langkah 5. Tidak menemukan kode ini:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Catatan: Jika Anda tidak dapat menemukannya, cari kode ini sebagai gantinya:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

Langkah 6. Dan menambahkan kode ini segera setelah:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Catatan: Untuk mengubah warna jumlah komentar, ganti ffffff dengan nilai hex warna Anda; untuk mengubah ukuran font, menaikkan / menurunkan nilai 18 px;

Langkah 7. Preview template Anda dan jika semuanya ok,  klik Save Template.

Komentar Bubbles                  

Anda dapat memilih salah satu gambar di bawah ini - klik kanan pada gambar yang Anda suka dan pilih "Copy Image Alamat / Lokasi", lalu ganti kode biru dari langkah 4 dengan alamat Anda hanya disalin.

Itu dia! Nikmatilah!!!

Apakah Anda perlu menambahkan info lebih lanjut tentang posting blog Anda? Maka saya sarankan Anda membaca tutorial ini:

Menampilkan Pos Penulis, Tanggal, Label dan Komentar Dengan Ikon bawah Judul Posting (LINKNYA DI ARTIKEL 3)

Posting Layar Penulis, Tanggal, Label dan Komentar Dengan Ikon di Bawah Judul Posting

Tutorial ini akan menunjukkan cara untuk menambahkan informasi lebih lanjut di posting Blogger seperti nama penulis, menampilkan tanggal posting, label posting dan link komentar menghitung. Bagaimana cara kerjanya? Link komentar akan menampilkannya 'Jadilah yang pertama mengomentari!' teks untuk posting tanpa komentar dan setelah kami mendapatkan komentar, ia akan menampilkan. Di sisi kiri, ia akan menampilkan nama penulis, ikon jam dengan tanggal posting yang diterbitkan dan akhirnya, label posting.

Cara Menampilkan Penulis, Tanggal, Label dan Komentar Bubbles di Blogger?                                    

1. Login ke Dashboard Blogger Anda  pergi ke 'Template' dan tekan tombol 'Edit HTML':

Dashboard blogger

2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger

Dashboard Blogger

3. Ketik atau tempel di bawah kode di kotak pencarian dan tekan Enter dua kali untuk menemukan terjadinya kedua hal itu:

& Lt; div class = 'post-header-line-1' & gt; </ blockquote> Catatan: Jika Anda tidak dapat menemukan baris di atas, gunakan ini:

& Lt; div class = 'post-header' & gt; </ blockquote>

4. Setelah kode itu, tambahkan ini berikutnya:

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO-U7SWPxkM4haLRznCxYR9LIbRMBllHbqtSdEnr0fYNvH_YRrdNd2utgoSWXRf4DkyJlouFS1MAoPIF-U8HQwTVJ6AMsL-4SGIz-6ke_SceZG04gXu7nY6paHApzgPIQ8CpAVz_T8kFU/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zCr_xk3ZGrmmF_pCr6tItIqc4Vn7qvSLcEW7IYUESFC45OTPaCZo0CXDCgKmpIpo9KeXL-VbzTqzXHAQJGhmpTDi_AjEkP3xnDMu-VcxFxJfg7sXM7ibEPg7g4AgdRCm74nzafOD_A-p/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFlOSTA4dDdlnuLpY_ojRdwyBVL0jMg9PCbzJAXsEEG6h1ZqcRVcIkh0iQ7d-VWkMG-Od-72KLxAO_l8_8VUpQKUKIZS7ih-sCnd42Y5wUF7eT2V-ykUhTS3wFz53sgjXYxNW-d1qH_OQ/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwu0k5w7trudHhOP_muVPaskWhzF9juSU-Q8H70SKW0Ku9M0KJJNq-gO9yGzT0mR3YBGjCZojsS86H4HBLDeWWI3ptUo6M_g56-26C1D31fpD_v5rnxC7lVQORPLwOmwotavGXbCAVwsH/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></b:if></span></div>

Bagaimana Menyesuaikannya: 

Untuk mengubah ikon, mengganti url warna biru dengan  gambar Anda (lihat tutorial ini: Bagaimana Mendapatkan URL An Gambar  (LINKNYA DI ARTIKEL 7 CSS):

- Url pertama adalah untuk ikon penulis

- Yang kedua adalah ikon jam

- Yang ketiga adalah ikon untuk label

- Yang terakhir adalah untuk komentar

Terkait: Cara Menambahkan Komentar Bubbles ke posting judul Blogger (LINKNYA DI ARTIKLE 4)

5. Klik tombol 'Simpan template' dan Anda selesai!

Cara Menghilangkan / Menghapus Label Dari Posting Blogger

Cara Menghilangkan / Menghapus Label Dari Posting Blogger

Banyak blogger mungkin menemukan label di bawah posting (atau judul posting) yang tidak perlu, selama mereka sudah di sidebar blog anda. Jadi, tutorial ini akan menunjukkan cara untuk menghapus secara manual dari HTML Template . Untuk menyembunyikan label dari blogger pos footer (atau di bawah judul posting), kita hanya bisa hapus centang pada "Label" pilihannya; Namun, pengaturan ini mungkin tidak bekerja dengan baik di beberapa template biasa dan kemudian, kita harus menghapus kodenya dari template kita.

 

Bagaimana Kita Akan Melakukan Ini?

 

Sembunyikan Label di Blogger Posts Menggunakan CSS                                                                

Langkah 1. Masuk ke akun kepala Blogger Anda ke tab 'Template' menekan tombol 'Edit HTML':

Dashbor

Langkah 2. Klik di mana saja di dalam area kode dan pencarian dengan menggunakan tombol CTRL + F tag di bawah ini (tekan Enter untuk menemukannya):

& lt; / head & gt; </ blockquote>

Langkah 3. Tepat di atas </ head> tag, menambahkan gaya berikut:
 

& Lt; gaya & gt;
.post-label {
display: none;
}
& Lt; / style & gt;

Langkah 4. Klik tombol 'Save Template' untuk menyimpan perubahan dan melihat blog Anda. Label di bawah tulisan harus disembunyikan sekarang.

Cara Terbaru Menghapus Navbar Bloger

Cara Menghapus Navbar Bloger

Pengertian Navbar Blogger?