Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Thursday, February 11, 2016

Membuat Diagonal Stripes Pattern CSS

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...

Thursday, December 10, 2015

How to Create 404 Page Not Found in Blogger

How to Create Error 404
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...

Tuesday, December 8, 2015

Cara Mengganti "Showing posts with label"

"Showing posts with label" by Mister R

Ingin mengganti kalimat "Showing posts with label" menjadi sesuai dengan apa yang kita mau? Caranya Gampang. Yuk simak langkahnya di bawah ini!

1. Pertama, cari kode berikut

 <data:navmessage></data:navmessage>

2. Misalkan kode yang kita punya adalah sebagai berikut:

<b:includable id="status-message">
  <b:if cond="data:navMessage">
    <div class="status-msg-wrap">
      <div class="status-msg-body">
        <data:navmessage>
        </data:navmessage></div>
        <div class="status-msg-border">
          <div class="status-msg-bg">
            <div class="status-msg-hidden">
              <data:navmessage>
              </data:navmessage></div>
            </div>
          </div>
        </div>
        <div style="clear: both;">
        </div>
      </b:if>
    </b:includable>

3. Kemudian ganti kode <data:navmessage> </data:navmessage> menjadi seperti di bawah ini:

<b:if cond='data:blog.searchQuery'>
  <div class='status-msg-body'>Posting berdasarkan kategori : <b><data:blog.searchLabel/></b></div>
</b:if>

4. Atau, kode lengkapnya sebagai berikut

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
      <div class='status-msg-body'>
        <b:if cond='data:blog.searchQuery'>
          <div class='status-msg-body'>Posting berdasarkan kategori <b><data:blog.searchLabel/></b></div>
        </b:if>
      </div>
      <div class='status-msg-border'>
        <div class='status-msg-bg'>
          <div class='status-msg-hidden'>
            <b:if cond='data:blog.searchQuery'>
              <div class='status-msg-body'>Posting berdasarkan kategori <b><data:blog.searchLabel/></b></div>
            </b:if>
          </div>
        </div>
      </div>
    </div>
    <div style='clear: both;'/>
  </b:if>
</b:includable>

5. Setelah itu, SIMPAN dan ihat hasilnya. Yay! Anda berhasil Mengganti "Showing posts with label"

Itulah tutorial blogger mengenai cara Mengganti "Showing posts with label".
Terimakasih telah  berkunjung ke blog saya

label blogger | blogger tutorial
Selengkapnya...

Cara Mengganti "Showing posts sorted by relevance for query"

Mengganti "Showing posts sorted by relevance for query"

Ingin mengganti kalimat "Showing posts sorted by relevance for query" menjadi sesuai dengan apa yang kita mau? Caranya Gampang. Yuk simak langkahnya di bawah ini!

1. Pertama, cari kode berikut

 <data:navmessage></data:navmessage>

2. Misalkan kode yang kita punya adalah sebagai berikut:

<b:includable id="status-message">
  <b:if cond="data:navMessage">
    <div class="status-msg-wrap">
      <div class="status-msg-body">
        <data:navmessage>
        </data:navmessage></div>
        <div class="status-msg-border">
          <div class="status-msg-bg">
            <div class="status-msg-hidden">
              <data:navmessage>
              </data:navmessage></div>
            </div>
          </div>
        </div>
        <div style="clear: both;">
        </div>
      </b:if>
    </b:includable>

3. Kemudian ganti kode <data:navmessage> </data:navmessage> menjadi seperti di bawah ini:

<b:if cond='data:blog.searchQuery'>
  <div class='status-msg-body'>Hasil Pencarian Mister R : <b><data:blog.searchQuery/></b></div>
</b:if>

4. Atau, kode lengkapnya sebagai berikut

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
      <div class='status-msg-body'>
        <b:if cond='data:blog.searchQuery'>
          <div class='status-msg-body'>Hasil Pencarian Mister R <b><data:blog.searchQuery/></b></div>
        </b:if>
      </div>
      <div class='status-msg-border'>
        <div class='status-msg-bg'>
          <div class='status-msg-hidden'>
            <b:if cond='data:blog.searchQuery'>
              <div class='status-msg-body'>Hasil Pencarian Mister R <b><data:blog.searchQuery/></b></div>
            </b:if>
          </div>
        </div>
      </div>
    </div>
    <div style='clear: both;'/>
  </b:if>
</b:includable>

5. Setelah itu, SIMPAN dan ihat hasilnya. Yay! Anda berhasil mengganti "Showing posts sorted by relevance for query"

Itulah tutorial blogger mengenai cara Mengganti "Showing posts sorted by relevance for query".
Terimakasih telah  berkunjung ke blog saya

query seacrh blogger | blogger tutorial
Selengkapnya...

Monday, December 7, 2015

Cara Agar Footer Tetap di Bawah

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...

Mengatasi Error Ups, Tampaknya Ada Yang Salah

Cara mengatasi "Ups, Tampaknya Ada Yang Salah"

Mengatasi Error Ups, Tampaknya Ada Yang Salah

Ups, tampaknya ada yang salah.
Kami mohon maaf atas ketidaknyamanan ini.
Coba segarkan laman untuk melihat apakah semuanya kembali seperti semula.

Ketika  sedang asyik blogging eh tiba-tiba blog saya tidak dapat dibuka dan terdapat notifikasi seperti di atas. Lalu gimana caranya? Di notifikasi tersebut diperintahkan untuk menghapus Cookie dan Cache. So, I do it.
Tapi, kok masih belum bisa??
Nah salah satu caranya dengan menambahkan OPENID untuk memecahkan masalah "Ups, tampaknya ada yang salah"

Langkahnya:
1. Login ke akun OPENID. Jika belum meliki akun maka daftar terlebih dahulu di https://openid.stackexchange.com

2. Klik "Use your own URL to login"

3. Kemudian copy kode yang tampil dan masukkan sebelum
Mengatasi Error Ups, Tampaknya Ada Yang Salah
4. Sebelum save, pastikan Anda menambahkan / sebelum > pada kode tersebut.

5. Yay! Masalah  Error "Ups, Tampaknya Ada Yang Salah" sudah teratasi!

Begitulah caranya untuk mengatasai "Ups, Tampaknya Ada Yang Salah"
Terimakasih telah berkunjung


blogger | blogger tutorial | OPENID

Selengkapnya...