Membuat Diagonal Stripes Pattern CSS

Membuat Diagonal Stripes Pattern CSS

Kali ini saya akan berbagi tutorial untuk membuat diagonal stripes menggunakan css. Seperti yang Anda lihat di sidebar blog ini, background judul dari widget menggunakan pattern garis miring. Nah, bagaimana cara membuatnya?

Silahkan tambahkan kode berikut pada CSS Anda:

#sidebar-wrapper .widget-title {
    position: relative;
    text-transform: uppercase;
    background: -webkit-repeating-linear-gradient(145deg, #fafafa, #fafafa 10px, #fff 10px, #fff 20px);
    background: repeating-linear-gradient(-55deg, #fafafa, #fafafa 10px, #fff 10px, #fff 20px);
    border-top: 1px solid #E6E5E5;
    border-right: 1px solid #E6E5E5;
    border-left: 1px solid #E6E5E5;
}

Selengkapnya...

How to Create 404 Page Not Found in Blogger

How to Create 404 Page Not Found in Blogger

How to Create 404 Page Not Found in Blogger | Cara membuat 404 Not Found di Blogger | error 404 | 404 not found | 404 error | not found | page not found | http 404 | 404 Error

Bagaimana sih cara membuat error 404 / 404 Error / Page Not Found jika kita mengetikkan alamat atau URL yang salah di blog kita? Yuk simak caranya di bawah ini:

1. Login to your account blogger | Masuk ke blogger kalian

2. Choose Template and click Edit HTML |  Pilih Template >> klik Edit HTML

3. Next, find this code  ]]></b:skin> | Selanjutnya cari kode  ]]></b:skin>

4. Copy this code and paste before | Kemudian,  Anda salin kode di bawah ini dan paste di atas kode  ]]></b:skin>

/* 404 Error Page */
body.error-page{background-color: #3a5168;}
#error-page {background:#3a5168!Important;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;
left:0;z-index:99999;}
#error-inner {margin:11% auto;text-align:center}
#error-inner .box-404 {width:200px;height:200px;background:$(main.color);color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-inner .box-404::after {content:" ";width:0;height:0;bottom:-8px;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-inner h1 {text-transform:uppercase; color:#fff}
#error-inner p {line-height:0.em;font-size:15px; color:#fff}

5. Next, find <body> and paste this code after <body> | Lalu, carilah kode <body> kemudian letakkan kode dibawah ini sebelum <body>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

6. Next, copy and paste this code before </body> | Copy dan paste kode di bawah ini tepat di atas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <div id='error-page'>
  <div id='error-inner'>
   <div class='box-404'>404</div>
   <h1>Page Not Found</h1>        
   <p>Back to <a expr:href='data:blog.homepageUrl'><data:blog.title/></a><br/>
   by 
   <a href='http://www.ridlorosyid.com'>
    Mister R
   </a>
  </p>
 </div>
</div>
</b:if>

7. Save, and you can see the Error 404 from your blog. Demo http://YOUR URL/404 ( replace YOUR URL with your url ) | Simpan, dan Anda bisa melihat hasilnya dengan memasukkan  http://YOUR URL/404 (ganti YOUR URL dengan alamat blog Anda)

Sekian tutorial How to Create 404 Page Not Found in Blogger | Cara membuat 404 Not Found di Blogger | error 404 | 404 not found | 404 error | not found | page not found | http 404 | 404 Error | tutorial blogger

Terima kasih telah mengunjungi blog saya.

Selengkapnya...

Cara Agar Footer Tetap di Bawah

Terkadang hal kecil kita tidak tahu bagaimana menyelesaikannya. Salah satunya yaitu membuat footer agar tetap di bawah. So, gimana caranya agar footer tetap di bawah? kali ini saya akan membagikan caranya menggunakan CSS agar footer tersebut tetap di bawah. Yuk simak caranya di bawah ini:

1. Pertama, lihat CSS footer kalian. Misalnya seperti di bawah ini

#mister-footer {
 width:100%;
 height:80px;
 background:#000;
}

2. Kemudian kita tambahkan kode di dalam CSS id mister-footer (lihat kode warna merah)

#mister-footer {
 width:100%;
 height:80px;
 position:absolute; bottom:0; background:#000;
}

3. Simpan dan lihat hasilnya. Yay! Cara tersebut berhasil membuat footer tetap di bawah!

Demikian tutorial blogger sederhana mengenai Cara Agar Footer Tetap di Bawah.
Terima kasih telah mengunjungi blog saya.

footer website | footer code | html5 header footer | website copyright footer

Selengkapnya...