Cara Membuat Kolom Komentar Offline

Membuat Kolom Komentar Offline - Setelah lama saya tidak update karna saya lagi sibuk di dalam bualan puasa ini, kali ini saya akan update Membuat Kolom Komentar Offline Tutorial ini saya dapat dari Blog Kesukaan saya yaitu Kang Ismet yang baru saja kemarin update tutorial ini, dan langsung saya Post ulang.
Fiture ini berfungsi untuk mematikan Form Komentar agar pengunjung Blog Anda tidak bisa berkomentar disaat kesibukan anda memaksa anda untuk mematikan komentar dalam Blogger Anda.

Ok, mari kita bahas cara Pemasangan Fiture Kolom Komentar Offline ini.

Langkah 1 : Simpan Kode CSS

Simpan kode CSS ini di atas </b:skin>

/* Offline Mode
----------------------------------------------- */
#offline-mode{
background:#dfdede url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWsobRneRnh3gNYGyreeZxE78XLtlFcMuy2pueDME38wz8Yzl4Nf66sfsAA8HBOiNQAKfz_H-hgAmSD6LN6pMtvGf16XuNc6suzI1tOVL96psQofJw7q0m3RoiJwOJXS8L4Za6XkVXK0/s1600/offline-mode.png)no-repeat 3% 50%;padding:20px 20px 20px 175px;border:1px solid #c9c9c9;margin-bottom:10px}
#offline-mode h2{
font-size:220%;
text-transform:uppercase;
color:#fff;
text-shadow: -1px -1px  3px rgba(0,0,0,0.3);
}
#offline-mode p{
font-size: 12px;
color:#888;
line-height:1.8em;
margin-top:-15px;

Silakan Edit Sendiri Jika ingin memodifikasi

Langkah 2 : Simpan Kode HTML

Untuk menyimpan kode HTML, sobat cari kode <b:includable id='threaded-comment-form' var='post'> kemudian expand (klik panah sebelahnya) maka akan muncul kode seperti ini :

<div class='comment-form'>
...kode panjang....
</div>

tambahkan kode ini sesudahnya atau sebelum </b:includable>

<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

setelah itu, nonaktifkan sementara kolom komentar dengan menambahkan kode <!-- dan --> pada kode sebelumnya. Maka hasil keseluruhan menjadi seperti ini :

<!-- <div class='comment-form'>
..............
  </div>-->
 <div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

Simpan Template.

Apabila ingin mengaktifkan kembali kolom komentar, pindahkan tanda <!-- dan --> pada HTML Offline-Mode, menjadi seperti ini :

<!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->

Simpan kembali Template....

Itulah Membuat Kolom Komentar Offline semoga bermanfaat.

Source http://blog.kangismet.net/2013/08/membuat-kolom-komentar-offline.html

Read more ...

CSS Thread Comments Timeline Ala De5ain

CSS Thread Comments Timeline Ala De5ain ini adalah Style Thread Comments yang saya gunakan sebelumnya.ada beberapa fitur yang keren yaitu desain thread yang seperti timeline dan style komentar khusus author. CSS Thread Comments ini saya dapatkan dari Blog De5ain saya liat-liat sangan bagus, lau saya Post ulang deh ke Tampat Blogging. ok, langsung saja kita mulai memasang CSS Thread Comments Timeline Ala De5ain.

silahkan cari kode ]]></b:skin> atau </style> dan pastekan kode berikut diatasnya

/* Kotak Komentar */
#threaded-comment-form p{letter-spacing:0.8px;position:relative;border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );padding:16px;font-size:12px;line-height:1.4em;color:#000;margin:0 0 12px 5px;font-family:coda;border-radius:4px 4px 4px 4px}
#threaded-comment-form p::before{top:100%;border:solid transparent;content:"";height:0;width:0;position:absolute}
#threaded-comment-form p::before{border-top-color:#fff;border-width:12px;left:6%;margin-left:-28px}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:1px dashed yellow}
.comments{background:#DDD;margin:0;padding:0;border-left:1px solid #ccc;border-right:1px solid #ccc;}
#comments h4{background:#f8f8f8;border-top:1px solid #CCC;border-bottom:1px solid #CCC;color:#000;display:block;font-size:14px;font-weight:bold;padding:10px;position:relative;text-align:center}
.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
.comment-thread ol{margin:0 0 18px}
.comments-content{padding:10px}
.comments .comments-content .comment-thread ol{list-style-type:none}
.comments .comments-content .user{font-style:normal;font-weight:bold}
.comments .avatar-image-container{float:left;max-height:50px;overflow:hidden;width:50px;background:#f5f5f5;border-radius:100%;margin:5px;}
.comments .avatar-image-container img{max-width:45px;height:45px;padding:4px;border-radius:100%;}
.avatar-image-container{border:1px solid #ccc;float:left;max-height:45px;overflow:hidden;padding:5px;width:45px}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{border-bottom:1px solid #999;box-shadow:0 1px 0 #fff;display:block;margin-bottom:-1px!important;padding:6px}
.comments .comments-content .comment-content,.spammer-detected{font:13px/140% 'Coda',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;color:#000;margin-bottom:0;padding:10px;text-align:justify}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:72px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );padding:10px;position:relative;border-radius:4px 4px 4px 4px}
.comments .comments-content .datetime a:link,.comments .comments-content .datetime a:visited{float:right!important;font-family:cambria,georgia,serif;color:#888!important;font-size:10px;padding:2px 10px}
.comment-replies .comment-block{box-shadow:none}
.comments .comments-content .comment{margin:2px 0 0;padding:0;width:100%}
.comments .comments-content .inline-thread{padding:0;margin-bottom:-16px}
.comments .comments-content .comment-replies{position:relative}
.comments .comment-thread.inline-thread{border-left:5px solid #f5f5f5;background:transparent;margin:2% 10% 2% 15%;padding:10px;}
.comments .comment-thread.inline-thread .comment{width:auto;padding:0;background:transparent;border:none;box-shadow:none}
.comments .comment-thread.inline-thread .comment .comment-block{border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );border-radius:4px 4px 4px 4px;padding:10px}
.comments .continue{border-top:0;width:auto}
.comments .continue a{background:#fff;color:#000;font-family:coda;text-align:center;float:right;font-weight:normal;padding:0 6px}
.comments .continue a:before,.comments .comment .comment-actions a:before{color:#000;font:normal normal 100%/normal "FontAwesome";content:"\f055";margin-right:.2em}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed,.comment .continue{margin:0;bottom:0;padding:0.6px 0;position:absolute}
.comments .comment .comment-actions a{padding:0 0 1px;display:block;position:absolute;top:65px;left:-60px;width:52px;text-align:center;border:1px solid #ccc;background-color:#EDEDED;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );font:11px/18px sans-serif;color:#333;font-size:12px}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{text-decoration:none!important;color:#0070b0;background-color:#eee}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#346FC9!important}
.comments .thread-toggle{display:none}
.comments .comments-content .icon.blog-author{content:"";display:block;width:100%;height:4px;background-color:#4b8db5;background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);position:absolute;bottom:0;left:0}
.comment-footer{display:none;color:white;font-weight:bold;padding:0 0 10px;text-shadow:1px 1px #000000}
.comments .comment-block:before{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:12px;bottom:0;content:"";display:block;height:0;left:-25px;position:absolute;top:14px;width:0}
.comments .comment-block:after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:13px;bottom:0;content:"";display:block;height:0;left:-25px;position:absolute;top:13.2px;width:0}
#comment-editor{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC020LpogqarG1aUrjDxQHMjHIi2bMf7oe83Gzj3T3eEzJxbdk5_Eu2QTKjFyYTROQKu6WeO73g4E65Nulj_-1T8kE5P0zM1kc2bGtysQGgsuKEHesV-tJ5LVmb9AQcdKvVPA1NkVIWhKX/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}
.comments .comments-content .datetime:before{color:#888;content:"Berkomentar...";margin-left:.4em}
.comments .comment-thread.inline-thread .datetime:before{color:#888;content:"Membalas...";margin-left:.4em}
/* Efek thread-comment bertingkat hanya dengan CSS */
.comments .comment-thread.inline-thread .comment{margin:2px 0 0 -50px}

 jika sudah ada kode komentar seperti diatas , silahkan diganti.

source : http://de5ain.blogspot.com/2013/07/css-thread-comments-timeline-ala-de5ain.html

Read more ...

Cara Membuat Tombol Pocket Read it Later di Postingan Blogger Anda

Memberikan pengguna pilihan untuk membaca artikel Anda nanti menjadi sangat berguna. Kita semua sangat menyadari fakta bahwa alat memainkan peran penting dalam membantu pengguna untuk menyimpan dan berbagi konten kami. Alat-alat ini secara luas berdampak pada kemungkinan kembalinya pengunjung. Google+ Buttons, Facebook tombol dan tombol Pinterest ikuti digunakan untuk tujuan yang sama, untuk mendorong pengguna untuk berbagi dan terlibat dengan konten Anda. Pada artikel ini, kami akan menunjukkan Cara Membuat Tombol Pocket Read it Later di Postingan Blogger Anda?

Cara Membuat Tombol Pocket Read it Later di Postingan Blogger Anda, kami akan menggunakan alat bookmark online yang disebut Pocket. Tombol Pocket Read it Later dengan counter, ini akan memberikan pembaca Anda cara mudah untuk membaca konten Anda kemudian kapan saja, di mana saja, di mana-mana.

Menambahkan Pocket - Bacalah Kemudian Tombol di Blogger?

Hal pertama yang perlu Anda lakukan adalah pergi ke http://getpocket.com/publisher/button dan memilih gaya tombol yang Anda ingin menambahkan di blog Anda. Ada cukup beberapa gaya yang dapat Anda pilih sesuai dengan kebutuhan Anda.

Setelah memilih tombol, di sebelah kanan Anda dapat melihat live preview widget. Sedangkan di bagian bawah Anda melihat mendapatkan kode widget yang akan Anda gunakan untuk menambahkan Pocket membacanya nanti tombol di blogger. Hanya Copy seluruh kode seperti yang ditunjukkan pada layar shot di bawah dan lanjutkan ke langkah berikutnya.

Sekarang pergi ke Blogger.com >> Template >> Edit HTML dan cari tag <data:post.body/> dan tepat di bawah ini paste kode yang Anda disalin langkah sebelumnya. Namun, jika Anda ingin menambahkan tombol ini di akhir posting Anda kemudian paste kode di bawah ini <div class='post-footer'>.

Selamat: Setelah semuanya selesai, cukup tekan tombol "Simpan" dan Tombol Pocket Read it Later siap, dan baik untuk tinggal di website Anda. Sekarang pergi dan memeriksa situs Anda untuk melihat Tombol Pocket Read it Later di Postingan Blogger Anda.

Kami harap artikel ini telah membantu Anda untuk belajar Cara Membuat Tombol Pocket Read it Later di Postingan Blogger Anda. Marilah kita tahu tentang Pocket, jika Anda sudah menggunakan di website Anda. Jika seseorang memiliki masalah ketika menerapkan tutorial ini maka, jangan ragu untuk memberikan komentar di bawah ini.

Read more ...

Cara Enable Search Preferences di Blogger

Untuk meningkatkan SEO blog Anda, mohon aktifkan Blogger Pencarian Preferensi dan Dapatkan hasil yang lebih baik dan peringkat di mesin pencari dengan advanced  SEO dan preferensi pencarian di blogger. Ini adalah pertanda baik bagi blogger yang menggunakan platform yang blogspot sekarang mereka dapat dengan mudah memahami dan menggunakan deskripsi meta dan kata kunci dalam posting untuk hasil SEO yang lebih baik dalam mesin pencari. Anda dapat dengan mudah menambahkan terpisah dan dinamis deskripsi, kata kunci untuk setiap posting blogger. Mari kita Bahas Cara Enable Search Preferences di Blogger.

Mengakses menu Settings, pilih tab Search Preferences dan klik link Edit pada bagian Meta tag

Selanjutnya, periksa opsi Ya, kemudian ketik Deskripsi Blog Anda ke dalam kolom teks dan klik Save perubahan.

Itu saja yang bisa saya sampaikan  tentang Cara Enable Search Preferences di Blogger. Semoga bermanfaat untuk Anda.

Read more ...

The Best All in One SEO Pack PRO 2013 untuk Blogger

Ini benar-benar sulit untuk dioptimalkan di blogger template Anda (seo blogger template) untuk mendorong lebih banyak lalu lintas ke situs Web Anda. Kenapa? Hanya karena default kode template blogger tidak benar-benar dioptimalkan cukup sehingga website Anda dapat peringkat lebih tinggi dalam mesin pencari seperti Google atau Yahoo. Selain itu, Banyak blogger ketika mereka pertama kali mulai blogging mereka sengaja mengarahkan mereka ke arah blog SEO yang salah, yang membuat Google kurang peduli untuk situs mereka. Saat ini, Google menjadi lebih membatasi ini.

Tapi jangan khawatir aku di sini untuk memberikan Anda sebuah All in One SEO Pack 2013 untuk Blogger / Blogspot benar-benar "GRATIS". Sebelum berbagi paket all-in-one seo untuk blogger Saya memiliki beberapa kata untuk mengatakan: Terima kasih kepada Lee Thuong ini hebat kode seo untuk blogger.

Sekarang di sini adalah semua dalam satu paket seo 2013 untuk template blogger Anda. Merasa bebas untuk mengedit apa pun di kode yang seperti yang Anda mungkin ingin. Sebelum menginstal paket seo ini di blogspot Anda. Anda harus menemukan kode berikut:

<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.title/></title>

Kemudian menggantinya dengan The Best All in One SEO Pack PRO 2013 untuk Blogger, yang dapat Anda temukan di bawah ini: 

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.title/></title>
<b:include data=’blog’ name=’all-head-content’/>
<meta content=’your homepage keywords’ name=’keywords’/>
<meta content=’noodp,noydir’ name=’robots’/>
<link href=’https://plus.google.com/#’ rel=’author’/>
<meta content=’en_EN’ property=’og:locale’/>
<meta expr:content=’data:blog.title’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’website’ property=’og:type’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<title><data:blog.title/></title>
<b:include data=’blog’ name=’all-head-content’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/></title>
<!–  All in One SEO Pack 2013 Blogger –>
<b:include data=’blog’ name=’all-head-content’/>
<meta expr:content=’data:blog.pageName + &quot;, your post keywords&quot;’ name=’keywords’/>
<meta content=’noodp,noydir’ name=’robots’/>
<link href=’https://plus.google.com/#’ rel=’author’/>
<meta content=’en_EN’ property=’og:locale’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<!–/ All in One SEO Pack 2013 Blogger –>
<b:else/><title><data:blog.pageName/></title></b:if>
</b:if>
</b:if>

Jangan lupa untuk menambahkan situs Anda dan kata kunci pos sebelum Anda menyimpan template. juga tambahkan profil Google plus. Itu saja. Saya berharap bahwa paket The Best All in One SEO Pack PRO 2013 untuk Blogger ini akan membantu Anda lebih dalam optimasi mesin pencari template blogger Anda. Nikmati!

Read more ...

Cara Membuat Auto Generate Short URLs Post Anda di Blogger dengan Bit.ly

Dalam tutorial kami sebelumnya, kami telah menunjukkan Anda bagaimana untuk membuat URL pendek untuk blog Blogger Anda Menggunakan Google Shortener. Namun, kadang-kadang orang-orang seperti hal yang harus akurat dan dilakukan dengan otomatisasi. Bit.ly adalah layanan URL shortening cukup populer adil yang secara otomatis menyediakan URL pendek dari posting Anda. Hal ini tidak hanya membantu Anda untuk menghemat waktu berharga Anda, tetapi juga menampilkan URL pendek di bagian bawah posting Anda, sehingga pengunjung dapat dengan mudah berbagi mereka juga. Pada artikel ini, kami akan menunjukkan Cara Membuat Auto Generate Short URLs Post Anda di Blogger dengan Bit.ly?

Apa Bitly:

Ini adalah layanan online yang menyediakan Short URLs posting Anda sehingga Anda dapat berbagi dengan teman, keluarga, dan di web. Layanan ini cukup populer di situs microblogging twitter karena merupakan layanan default pemendekan sejak 6 Mei 2009. Link mempersingkat dibuat dengan layanan ini adalah permanen dan agak terlihat seperti http://bit.ly/6wgJO ini.

Cara Membuat Auto Generate Short URLs Post Anda di Blogger dengan Bit.ly

Hal pertama yang Anda akan lakukan adalah untuk login ke Dashboard Blogger Anda. Sekarang Setelah log in, pergi ke blog Anda >> Template >> Edit HTML >> dan cari tag ]]> </ b: skin> . Setelah Anda menemukannya, tepat di atasnya paste kode CSS berikut.

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

Sekarang setelah menyisipkan style sheet kode ke template Anda, sekarang saatnya untuk bergerak maju, dan mendapatkan sesuatu yang sedikit lebih serius. Sekali lagi dalam template, cari <div class='post-footer'> dan di atasnya paste coding JavaScript berikut yang akan menghasilkan Short URLs dan menampilkan mereka di akhir posting Anda.

<!-- Short URLs Script TB -->

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

<div id='shoternUrl'>

<form id='shorturl'/>

 <!-- short url widget script start -->

  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>

<script charset='utf-8' type='text/javascript'>

BitlyClient.addPageLoadEvent(function(){

BitlyCB.myShortenCallback = function(data) {

// this is how to get a result of shortening a single url

var result;

for (var r in data.results) {

result = data.results[r];

result[&#39;longUrl&#39;] = r;

break;

}

       document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}

BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);

});

</script></div>

    </b:if>

<!-- Short URLs Script  TB -->

Selamat: Setelah semuanya turun, cukup tekan tombol "Save" dan otomatis skrip Short URLs siap, dan baik untuk tinggal di website Anda. Sekarang pergi dan memeriksa situs Anda untuk melihat  Auto Generate Short URLs Post Anda di Blogger.

Kami harap artikel ini telah membantu Anda untuk belajar Cara Membuat Auto Generate Short URLs Post Anda di Blogger dengan Bit.ly. Apa pendapat Anda tentang script ini otomatis, yang kami telah membawa untuk semua orang di luar sana? Layanan memperpendek URL yang Anda gunakan? Jika seseorang memiliki masalah ketika menerapkan tutorial ini maka, jangan ragu untuk memberikan komentar di bawah ini.

Read more ...

Cara Hapus Pesan Required Field Must Not be Blank Error di Blogger?

Jika Anda adalah seorang pengguna Blogger intens dan hampir menggunakannya setiap hari untuk memperbarui blog Anda, kemudian dari dua hari terakhir, Anda mungkin telah melihat beberapa perubahan aneh dalam editor posting Blogger yang mungkin membuat Anda gila. Ini adalah semacam pemberitahuan kesalahan, yang meminta dan menghentikan Anda dari posting penerbitan. Ini hanya terjadi ketika Anda meninggalkan daerah judul posting "kosong atau terisi". Yang lucu adalah bahwa, di berbagai forum, orang yang mengambil itu sebagai bug. Namun, dapat dipastikan bahwa sesama pengguna BlogSpot tidak benar-benar menghargai ini langkah nekat. Hari ini di artikel ini, kami akan menunjukkan Anda Cara Hapus Diperlukan Lapangan Tidak Harus pemberitahuan Kesalahan Kosong di Blogger?

Pesan Peringatan muncul tepat di bawah daerah lapangan judul, tetapi tidak jelas bahwa itu adalah mengacu pada judul yaitu "Required field must not be blank Ignore warning". Bahkan setelah mengklik "Ignore warning" link notifikasi yang sama terus muncul setelah jeda beberapa detik.

Masalah:

Anda tidak dapat menyimpan, pratinjau atau bahkan mempublikasikan posting Anda. Hal ini sangat berbahaya terutama ketika Anda menulis sebuah artikel panjang dan semua dari browser crash tiba-tiba, dan membuat Anda mengosongkan tangan. Sampai saat ini, Blogger auto save benar-benar mengesankan yang secara otomatis menyimpan posting Anda, dan kemudian dapat diakses dari Draft. Sekarang tidak lagi menyimpan sampai Anda menulis judul.

Untuk meringkas: Ini adalah jenis fitur menjengkelkan, tidak membantu, berisiko dan sulit untuk mengenali. Ini benar-benar sulit untuk datang dengan sesuatu seperti ini, tapi yang lucu adalah bahwa seseorang melakukan.

Solusi:

Untuk berhenti menerima pemberitahuan ini mengganggu Anda dapat sementara memberikan judul untuk posting Anda dan mengubah nanti, tapi mengapa harus bekerja di sekitar? Judul tidak harus diminta, meskipun membayar peran kunci dalam mendapatkan peringkat mesin pencari yang lebih tinggi. Namun, masih sedikit pengguna ingin beberapa tulisan yang akan diterbitkan tanpa gelar. Sangat penting untuk menyebutkan bahwa Blogger tidak pernah diperlukan judul posting sebelumnya.

Masih ada beberapa cara di mana Anda dapat mempublikasikan posting tanpa khawatir untuk menulis judul postingan. Di bidang daerah judul post editor, hanya memberikan sedikit ruang menggunakan space-bar dan sekarang posting Anda memenuhi syarat untuk diterbitkan.

Di sisi lain, beberapa orang hanya ingin menunjukkan judul posting mereka ke mesin pencari tidak untuk pemirsa manusia. Di sini, Anda dapat menggunakan CSS sederhana yang akan menyembunyikan judul dan membuatnya dapat dilihat hanya mesin pencari. Sebelum menerbitkan posting Anda, tambahkan kode berikut di Tab HTML editor dan tekan mempublikasikan untuk menyembunyikan judul dari pengguna manusia.

<style>

.post-title, .entry-title, .post h3, .post h2 {display: none;}

</style>

Kami berharap, posting ini telah membantu Anda dalam menyingkirkan The "Required Field Must Not be Blank" pemberitahuan kesalahan. Apa pikiran Anda dan pendapat tentang fungsi baru ini? Apakah itu benar-benar harus berada di sana, atau harus cara itu di masa lalu? Mari kita melakukan percakapan bermakna dan menggugah depan di komentar.



source: http://www.mybloggerlab.com/2013/07/how-to-remove-required-field-must-not-be-blank-error-in-blogger.html

Read more ...

Scrollbar Mirip Style Mbah Google

Hay Sobat Tempat Blogging, Sudah jarang saya Update Artikel, dikarnakan Masi Otak-Atik Template saya yang masi basnyak kekurangan, dalam hal SEO juga masi minim, Dahulu Saya Sudah Update Tutorial Cara Membuat Custom WebKit Scrollbar di Blogger. untuk kali ini saya akan memberikan Scrollbar Mirip Style Mbah Google. Scrollbar ini bukan hanya mirip tapi memang sama. screenshot bisa dilihat punya saya. Langsungsaja kita bahas tutorial ini.

Cara Memasang Scrollbar Mirip Style Mbah Google:

1. Buka Blogger.com >> Blog Anda.

2. Dasboard >> Template >> Edit HTML >> Cari Kode ]]></b:skin>.

3. Letakan Kode CSS berikut di atas kode ]]></b:skin>.

/* Scrollbar  Tempat Blogging*/
 ::-webkit-scrollbar {
    height:16px;
    overflow:visible;
    width:16px
}
::-webkit-scrollbar-button {
    height:0;
    width:0
}
::-webkit-scrollbar-track {
    background-clip:padding-box;
    border:solid transparent;
    border-width:0 0 0 4px
}
::-webkit-scrollbar-track:horizontal {
    border-width:4px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color:rgba(0, 0, 0, .05);
    box-shadow:inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow:inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color:rgba(0, 0, 0, .05);
    box-shadow:inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow:inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color:rgba(255, 255, 255, .1);
    box-shadow:inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color:rgba(255, 255, 255, .1);
    box-shadow:inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color:rgba(0, 0, 0, .2);
    background-clip:padding-box;
    border:solid transparent;
    border-width:1px 1px 1px 6px;
    min-height:28px;
    padding:100px 0 0;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width:6px 1px 1px;
    padding:0 0 0 100px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color:rgba(0, 0, 0, .4);
    box-shadow:inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color:rgba(255, 255, 255, .3);
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color:rgba(255, 255, 255, .6);
    box-shadow:inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color:rgba(255, 255, 255, .75);
    box-shadow:inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width:0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width:6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color:rgba(0, 0, 0, .035);
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color:rgba(255, 255, 255, .07);
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width:0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width:6px 0 1px
}
::-webkit-scrollbar-corner {
    background:transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip:padding-box;
    background-color:#f5f5f5;
    border:solid #fff;
    border-width:0 0 0 3px;
    box-shadow:inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width:3px 0 0;
    box-shadow:inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width:1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width:5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip:padding-box;
    background-color:#f5f5f5;
    border:solid #fff;
    border-width:3px 0 0 3px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .14)
}

4. Sekarang Simpan "Template" Anda.

Semoga Artikel ini bisa membantu Anda untuk modifikasi Blogger Anda.
Jika Ada yang ingin di tanyakan komen aja gak usah malu-malu :) 

Read more ...

Cara Hosting File HTML,CSS dan Javascript dengan Google Drive di Blogger

Hosting CSS dan file JavaScript di Blogger Anda selalu menjadi keprihatinan bagi webmaster. Orang lebih memilih untuk menambahkan seluruh StyleSheet pengkodean mereka dalam satu file, sehingga mereka dapat meng-upload ke hosting mereka dan dapat dengan mudah menerapkannya pada situs web mereka. Sayangnya, blogger memiliki cukup beberapa keterbatasan yang menghentikan Anda dari tuan CSS dan JavaScript file. Baru-baru ini pengguna kami mengirim kami meminta dengan email: apakah ada cara untuk meng-host file pada blogger? Apa keuntungan hosting CSS (Stylesheet) file? Untungnya, Google Drive menyediakan Anda kesempatan untuk menjadi tuan rumah CSS, JavaScript dan HTML File secara GRATIS. Pada artikel ini, kami akan menunjukkan Cara Hosting File HTML,CSS dan Javascript dengan Google Drive di Blogger?

Mengapa Host file di Google Drive? 

• Banyak Space: Google Drive menyediakan 15 GB penyimpanan ke rekening teratur sehingga Anda dapat dengan mudah meng-upload banyak dokumen. Namun, jika ruang disk Anda penuh, maka Anda dapat meng-upgrade account Anda dari dasar untuk premium. 
• Buat & berkolaborasi: Google Drive menyediakan fleksibilitas untuk membuat dan host berbagai jenis spreadsheet dan presentasi. Membuat beberapa suntingan dalam dokumen dan melihat perubahan real-time seperti yang muncul. 
• Reliable & andalan: Dengan 100% uptime, memberikan Anda kebebasan untuk menjadi tuan rumah apa pun yang Anda suka. Ini memiliki unlimited bandwidth, tetapi Anda harus mengurus ruang disk Anda tidak melebihi tanda 5GB atau Anda dapat meng-upgrade account Anda. 
• Kembali dan merevisi: Google Drive melacak hampir semua perubahan yang Anda buat pada dokumen Anda - sehingga setiap kali Anda akan menyimpan dokumen, revisi baru juga mendapatkan save. Anda dapat mengambil sekilas kembali dan melakukan revisi sesuai. 
• Berbagi atau membuat file Pribadi: Anda dapat berbagi file dan folder dengan siapa pun. Pilih apakah orang lain bisa komentar, berbagi, melihat atau mengedit barang-barang Anda. Anda dapat menangani semuanya langsung dari dashboard Anda. 
• Keamanan yang terbaik: Google Drive terbukti selalu menjadi layanan hosting gratis yang paling dapat diandalkan dengan unlimited bandwidth. Selain itu, untuk memberikan bukti penuh keamanan Google drive telah digunakan enkripsi HTTPS untuk menjaga dokumen Anda aman. 
• Semua ini Gratis: Semua fitur yang mengesankan secara gratis. 

Apa Keuntungan dari Hosting CSS / JavaScript dalam satu file? 

Blogger tidak memberikan penggunanya fleksibilitas untuk menjadi tuan rumah CSS atau JavaScript file dalam satu link terpisah. Mereka host dalam coding website melalui  Tag HTML.

Untuk StyleSheet, tag <style> ini digunakan untuk menentukan informasi gaya untuk dokumen HTML. Antara dua </ style> tag <style>, CSS coding ditempatkan yang menentukan bagaimana elemen HTML harus membuat di web browser. Setiap dokumen HTML dapat berisi beberapa tag <style>.

Untuk tag <script> JavaScript digunakan untuk mendefinisikan script, seperti JavaScript. Tag <script> baik berisi pernyataan scripting atau menunjuk ke file eksternal melalui src atribut. Setiap dokumen HTML dapat berisi beberapa tag <script>.

Menggabungkan semua StyleSheet / JavaScript coding di 1 file membantu sebuah website untuk memuat lebih cepat. Selain itu, membantu mesin pencari untuk menjelajah situs Anda lancar.

Bagaimana Host CSS File dengan Google Drive di Blogger: 

Ada beberapa aplikasi pihak ketiga yang dapat membantu Anda untuk meng-host file di blogger termasuk Google Apps, Google Code, dan Google App bot. Pada Tempat Blogging, kita menggunakan App bot, tapi proses hosting file pada Appbot adalah banyak kompleks. Google Drive sempurna dan bekerja lebih baik daripada Appbot karena tidak ada perlu khawatir tentang bandwidth.

Langkah # 1: Menyalin CSS Coding Dari Anda Template: 

Untuk host file CSS Anda dengan Google Drive di Blogger, hal pertama yang perlu Anda lakukan adalah untuk menyalin semua StyleSheet Anda coding dari template Anda ke notepad kosong. Pergi ke Blogger »Situs Anda» Template »Edit HTML» Lanjutkan dan mencari tag <b:skin><! [CDATA[ . Setelah menemukan tag ini, Anda akan melihat potongan besar CSS coding, jadi menyalin semua CSS coding sampai tag ]]> </ b: skin>. Untuk lebih jelasnya lihat screenshot berikut.

Langkah # 2: Menyiapkan file style.css

Setelah menyalin coding CSS, menghapusnya dari template Anda dan paste coding di notepad baru kosong. Sekarang menyimpan dokumen dan nama file style.css (ekstensi file harus dalam. Css sehingga browser dapat membuat itu sebagai StyleSheet). Untuk lebih jelasnya lihat screenshot berikut.

Langkah # 3: Hosting File style.css Anda di Google Drive:

Hal berikutnya adalah untuk meng-upload file style.css ke akun Google Drive. Pertama pergi ke Google Drive dan login ke akun Gmail Anda. Sekarang Anda harus membuat folder baru, sehingga Anda dapat meng-upload semua file web hosting di satu tempat. Tekan tombol "Create" tombol dan dari daftar drop-down pilih "Folder". Sekarang nama folder apa pun yang Anda inginkan seperti hosting, file web dan lain-lain Pada akhirnya, tekan "Create" untuk menyimpulkan.

Sekarang buka folder yang telah Anda buat beberapa saat yang lalu (klik kanan pada nama folder dan pilih Open). Pada memilih upload ikon hadir di sisi kiri layar Anda, daftar drop-down akan muncul yang akan memberikan dua pilihan yaitu file dan folder. Cukup pilih "File" dan pindah ke langkah berikutnya.

Sekarang akan meminta Anda untuk memilih dokumen style.css yang Anda buat beberapa saat pergi. Setelah memilih file, tekan tombol terbuka dan pindah ke langkah berikutnya.

Pada menekan tombol upload wizard kecil  yang terbuka akan muncul di sisi kanan layar Anda. Biasanya diperlukan waktu satu atau dua menit untuk meng-upload, tapi itu sepenuhnya tergantung pada ukuran file dan kecepatan koneksi internet Anda.

Setelah upload selesai, tekan tombol "Share" tombol. Sekarang Anda harus membuat file ini tersedia untuk publik. Tekan perubahan, dan pilih "publik di web" sehingga siapapun di Internet dapat menemukan dan mengakses. Akhirnya, tekan tombol Save untuk menyimpulkan wizard. Untuk petunjuk rinci, lihat screenshot berikut. 

Langkah # 4: Mendapatkan Link Hosting Proper

Kedua langkah terakhir adalah untuk mempersiapkan link hosting yang tepat file style.css Anda. Klik kanan pada file yang Anda upload beberapa saat pergi dan pilih "Share". Salin URL hadir seluruh di area teks di bawah "Link untuk berbagi". Untuk lebih jelasnya lihat screenshot berikut.

Setelah Menyalin Link Share dari google drive, Anda akan terlihat seperti ini https://docs.google.com/file/d/your-file-code/. Anda harus mengubah link disalin ke https://googledrive.com/host/your-file-code. Ingat: Pastikan "-file-kode Anda" tetap sama sebelum dan setelah perubahan yang dibuat.

marilah kita melakukan demonstrasi kecil yang akan membantu Anda dalam menjelaskan lebih baik. Misalnya, jika link file saya https://docs.google.com/file/d/0B0WJjcJEFNzibXRyZWlwNktKcFk/ jadi saya akan mengubahnya untuk https://googledrive.com/host/0B0WJjcJEFNzibXRyZWlwNktKcFk. Satu-satunya hal yang tetap sama adalah file kode.

Langkah 5: Menambahkan file Google Drive Hosted CSS di Blogger

Setelah menyiapkan link hosting yang tepat dari file Anda, sekali lagi pergi ke Blogger »Situs Anda» Template »Edit HTML» Lanjutkan. Sekarang mencari tag <head> awal dan di bawahnya paste kode berikut. Ingat: Jangan lupa untuk mengganti https://googledrive.com/host/your-file-code dengan link hosting yang berkendara Google Anda, dan pastikan Anda telah menghapus CSS coding dari template seperti yang telah kita sebutkan di langkah # 1 . Setelah semuanya selesai, tekan tombol "Simpan Template".

Cara Menyimpan file di Template

Seperti biasa, apabila file berupa JavaScript maka simpan file di atas </body> atau dibawah </head> dengan format seperti ini :

<script src="https://googledrive.com/host/0B0WJjcJEFNzibXRyZWlwNktKcFk" type="text/javascript"></script>

Apabila file berupa CSS, simpan di bawah <head> dengan format :

<link href="https://googledrive.com/host/0B0WJjcJEFNzibXRyZWlwNktKcFk" rel="stylesheet" type="text/css"/>

Kami berharap bahwa menjawab semua pertanyaan terkait seperti mengapa untuk host file di blogger, apa keuntungan hosting CSS (Stylesheet) file, dan banyak lagi. Jika kita telah meninggalkan sesuatu yang ditemukan, atau melihat bahwa kita melewatkan sesuatu maka silakan memberikan komentar di bawah ini.

Read more ...

Membuat HTML5 Page Error 404 di Blogger Anda

Sudah selamanya sejak saya menulis tutorial baru tapi kurangnya waktu itu masalah utama bagi saya.
Jadi di sini adalah tutorial baru yang saya yakin Anda akan merasa terbantu.
Sekarang Blogger memperkenalkan halaman kesalahan kustom saya akan hadir dengan HTML5 halaman error 404 yang indah dengan efek geser bagus yang dibuat oleh kode javascript kecil.
Karena menggunakan HTML 5 dan CSS3 pola untuk latar belakang akan memiliki masalah tampilan kecil di IE (pola latar belakang dan efek javascript tidak akan ditampilkan), tetapi untuk orang lain browser akan ditampilkan baik-baik saja.

Demo

Jadi tanpa penjelasan membosankan mari kita mulai dengan pelaksanaan Membuat HTML5 Page Error 404 di Blogger Anda.

Cara Membuat HTML5 Page Error 404 di Blogger Anda?

1. Login ke Dashboard -> Template -> Edit HTML.

2. Pencarian untuk tag </body> dan tepat setelah itu paste kode berikut ini:

<!-- Start-->
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
.error-page-404 {
   background: -webkit-radial-gradient(black 10%, transparent 11%) 0 0,
-webkit-radial-gradient(black 10%, transparent 11%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -moz-radial-gradient(black 10%, transparent 11%) 0 0,
-moz-radial-gradient(black 10%, transparent 11%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -o-radial-gradient(black 10%, transparent 11%) 0 0,
-o-radial-gradient(black 10%, transparent 11%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -ms-radial-gradient(black 10%, transparent 11%) 0 0,
-ms-radial-gradient(black 10%, transparent 11%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background:
radial-gradient(black 10%, transparent 11%) 0 0,
radial-gradient(black 10%, transparent 11%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background-color:#282828;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
background-size:16px 16px;
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:50px;
        z-index:999;
}
header, section, footer { text-align: center; margin: 20px 0 0 0; }
section { margin-top: 25px; }
.ribbon { margin-top: 20px; }
.error-logo {margin-top: 0px;}
/* transitions */
#n1, #n2, #n3 { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }
/* errors */
.error { background-position: center 185px; background-repeat: no-repeat; }
.error .number { width: 348px; height: 225px; margin: 0 auto; }
#n1, #n2, #n3 { float: left; width: 100px; height: 150px; margin: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqyE1ZPMivT5Kt3iSBXYeGGS3cm7QB43zxihuPqI6hzHKuX0MZk94Lx5qfbBab9GBxZ57yS7O2dvWHwVvVfqFqG3tX5MjnP8AwS1ofAC80O6KPpspmQxKRv38A4SWk5C8zV4CTiEC5WU/s1600/numbers.png) 0 -1500px repeat-y; }
.error-404 #n1 { background-position: 0 -600px; }
.error-404 #n2 { background-position: 0 0; }
.error-404 #n3 { background-position: 0 -600px; }
#error-not-found h1{
        font-family:arial ,sans serif!important;
        text-transform:uppercase;
        font-size:50px;
        line-height:50px!important;
        border:none;
        font-weight: bold;
        color:#131313!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}
#error-not-found  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:55px;
        line-height:50px!important;
        border:none;
        font-weight: bold;
        color:#191B1C!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}
#error-not-found  p a{
        font-family:arial black ,sans serif!important;
        text-transform:uppercase;
        font-size:20px;
        border:none;
        font-weight: bold;
        color:#111111!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}
/* footer */
footer {
 height: 92px;
background: url(http://img28.imageshack.us/img28/4821/footerbackground.png) 0 0 repeat-x;
margin: 80px auto 0 auto;
 }
footer .container {
width: 552px;
height: 32px;
margin: 0 auto;
padding: 20px 0;
}
footer .engine{
z-index: 99999;
display:block;
position:absolute;
top:-47px;
margin-left:770px;
width:175px;
height:40px;
background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top;
padding:0
}
footer .search .field{
float:left;
display:inline;
height:40px;
width:135px
}
footer .search .field input{
color:#ccc;
border:0;
background:transparent;
font-size:11px;
margin:3px 0 0 10px;
padding:4px;
width:110px
}
footer .search .button{
float:left;
display:inline;
height:40px;
width:37px;
cursor:pointer;
border:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNoSUZcRMg9TBIwtYu4-bQP8DYvvQ1z7cXTD21SbGByFOCo4E4QoT0PUs-78-ileSYRP7xkh3n_MGvB-omB5nyKHcbmIc2gewsqJQUegfiL1_GSMvDNjDihfzVcRlsSQgduMyQGaGQXFM/s320/search_button.png) no-repeat 0 0
}
footer .search { display: block; width:173px; height: 32px; margin: 0 auto; background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top; }
</style>
           
    <div class='error-page-404'>
                       <div class='error-logo'><img alt='' src='http://img546.imageshack.us/img546/2760/4044u.png'/></div>
             <header>  
               <div class='ribbon'><img alt='' src='http://img39.imageshack.us/img39/3108/ribbont.png'/></div>
             </header>
       <section class='error' data-error='404'>
         <div class='number'>
                <div id='n1'/>
                <div id='n2'/>
                <div id='n3'/>
            </div>
       </section>
                          <div id='error-not-found'>      
                   <h1>  Page not found</h1>
                         </div>
        <footer>
         <div class='container'>
         <div class='search'>
<form action='/search' id='searchthis' method='get'>
<div class='field'><input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/></div>
<input class='button' type='submit' value=''/>
</form>
</div>
</div>
<div id='error-not-found'>
               <p><a href='/'>go to homepage</a></p>
             </div>
        </footer>
         </div>      
</b:if>

3. Cari kode </head> menggunakan "CTR+F" pastiken kode dibawah ini di atas kode </head>.

<script type='text/javascript'>
        //<![CDATA[
  $(document).ready(function() {
 // Set error
    var error = $('section[data-error]');
    error.attr('class', 'error error-' + error.attr('data-error'));
});
   //]]>
    </script>

4. Cari Kode <b:includable id='main' var='top'> taruh kode berikut dibawah kode <b:includable id='main' var='top'>

<b:if cond='data:numPosts == 0'>
 <data:navMessage/>
</b:if>

Ok, Itu saja. Nikmati halaman Error baru untuk blog Anda

PENTING Beberapa fitur dari halaman kesalahan diimplementasikan pada blog ini tidak akan tersedia untuk Anda (gaya kotak pencarian, beberapa perubahan lain yang berbeda.)

source : http://artistutorial.blogspot.ro/2012/11/add-excelent-html5-404-error-page-to.html

Read more ...