Modifikasi Quickedit Postingan agar SEO Friendly

Modifikasi Quickedit Postingan agar SEO Friendly - Jika Anda check skor SEO blog Anda di situs Chkme.Com maka Anda akan tahu bahwa ada deskripsi (alt) dan title yang tidak ada pada quickedit. Yang masih bingung quickedit ini adalah tombol tang dan obeng. Logo ini muncul pada setiap widget dan jumlah postingan di bagian homepage.

Nah jika Anda mencoba menyembunyikan tombol ini dari penglihatan Anda saat sign in di akun blogger, maka tidak memberikan pengaruh sama sekali dalam skor SEO tersebut. Untuk quickedit widget memang perlu dihapus, sementara quickedit postingan ada 2 hal yang perlu Anda lakukan adalah menghapus quickedit tersebut atau memodifikasinya.

Seperti di tutorial sebelumnya, cara menghapus tang dan obeng untuk postingan dengan menghapus kode warna merah berikut ini :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Sementara jika Anda tidak mau menghapusnya maka modifikasi kode diatas seperti ini :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='edit' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18' title='edit' rel="nofollow"/>
</a>
</span>
</b:if>
</b:includable>

Bedanya dari 2 kode di atas adalah pemberian deskripsi (alt) dan title pada gambar (dalam hal ini gambar tang dan obeng). Salah satu kriteria penilaian CHKME adalah membuat semua gambar di dalam blog memiliki alt dan title. Dan mengapa ada tag nofollow disana? Karen itu akan membuang link yang percuma saja.

Kemudian check kembali blog Anda di situs CHKME, maka akan terjadi perbaikan nilai SEO Onpage situs Anda.
Demikianlah artikel Modifikasi Quickedit Postingan agar SEO Friendly, semoga memberi efek yang baik buat Anda. Thanks reader...

Sumber : http://freebloggertutor.blogspot.com

Read More

CSS3 Menu Drop Down Keren dengan Icon untuk Blogger

CSS3 Menu Drop Down Keren dengan Icon untuk Blogger - Hai sobat blogger, tutorial kali ini kita akan membahas cara membuat CSS3 Menu Drop Down Keren dengan Icon untuk Blogger yang cukup simple dan keren untuk Anda gunakan.

Langkah CSS3 Menu Drop Down Keren dengan Icon untuk Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu template, edit HTML > centang expand template widget
3. Cari kode dibawah ini 

]]></b:skin>

     4.  Pastekan kode dibawah ini diatas pada kode diatas :

.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.btrix_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.btrix_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.btrix_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }
.btrix_menu li:hover > a { color: #8fde62; }
.btrix_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.btrix_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3O1cPAZwJOsgAZDp-QcxI2XMgwfqQXp5z8-L6k0vCJOosXLiVhhZw3_Gs4pFFMLIm7-NDJJRoI8fjv7Lfz38D4g68naD_-kGBt87Fwb9eAb5xqkhv8K7pis2ktvYsSI4-yYoLaMVpSvF/s1600/docs.png) no-repeat 6px center; }
.btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL089HBRkfPHKGyZLp8FBLBOs8Xumu_4icpPUhh08TxgiDms0oYmV6EEfV2nBopeM2d35wXmVPKDRihLB4nb0qUr1CzeSoR6bR93GSWyanK1csoFvRWVH-fkmdTxe5Af93Bt5WYjp0dJ5H/s1600/bubble.png) no-repeat 6px center; }
.btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPP3M6HcCy8XOSeIH_4EM1-Qh1Z97Dq-5ftD_tLlteG0dqatnYgK9nLxtOO3E6fBBxB51xXcrG9yjXpsMG4mh9ERbK8ASXGcfFUHyWteO98KFajA1ebzB2epdmrrTaJVGdUhs9TAOPi9p/s1600/arrow.png) no-repeat 6px center; }

     5.  Cari salah satu kode dibawah ini :

<header id='header-wrapper'>

atau buat didalam widget, terserah pada inspirasi Anda untuk blog Anda.

     6.  Pastekan kode dibawah ini :

<ul class="btrix_menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>
  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>
 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="#">Contact us</a></li>
</ul>

    7. Ganti kode # dengan URL dan juga anchor textnya.

Demikianlah artikel CSS3 Menu Drop Down Keren dengan Icon untuk Blogger, semoga memberi efek yang baik buat Anda. Thanks reader...

Read More

Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar

Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar - Hai sobat blogger, pada tutorial kali ini kita akan membahas bagaimana membuat loading blog lebih cepat hanya dengan meminimalisir load pada gambar yang ada. Ini juga akan memberikan efek pada gambar yang dinamis jika Anda scroll kebawah. Jadi ini akan sangat baik jika Anda membuat beberapa script dibawah ini, script? Yah sobat script, tetapi tenang saja ini mala memang membuat load gambar akan semakin cepat.

Jika sobat tidak percaya dengan script ini mala akan semakin cepat, Anda bisa mengetes load pada Iwebtool.com

Langkah Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar :

1. Buka akun blogger Anda
2. Masuk ke menu edit HTML, tidak perlu centang expand template widget, karena kita tidak mencari script widget pada tutorial ini.
3. Cari kode dibawah ini :

</head>

     4.  Pastekan kode dibawah, diatas pada kode diatas :

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAwHbiBYot8Z3cpw0uVA1aRz4U29KxD4yNsQIMzNnxisc6z1OMrJcGAyNZyUfdbxFRMwtjEARPad4isQqHZiuf2qm-Tn85cs3JNxN9yIGd84jkMYjCRhygFe9tyf4lcJSqPrdduBnaLg/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

5. Save template Anda.

Terima kasih, semoga bermanfaat.

Read More

Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger

Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger - D-Copy Blog | Hai sobat blogger, seperti pada tutorial sebelumnya yaitu artikel terkait dengan gambar dan title saja, kali ini kita akan membahas bagaimana membuat artikel terkait dengan gambar dan deskripsi yang bagus untuk Anda buat di akun Blogger Anda.

Langkah Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu template, edit HTML dan centang expand template widget
3. Cari kode dibawah ini :

</head>

    4.  Diatasnya pastekan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <style type='text/css'>
          #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
          #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
          #relpost_img_sum:hover         {background:none;}
          #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
          #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
          #relpost_img_sum li:hover      {background-color:#F0ECE9;}
          #relpost_img_sum .news-title a {color:#2C6BA8;}
          #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
          #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
          #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
     </style>
     <script type='text/javascript'>
          var relnojudul = 0;
          var relmaxtampil = 10;
          var numchars = 200;
          var morelink = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>

5. Selanjutnya cari salah satu kode dibawah ini :

<data:post.body/>

Keterangan :

• Biasanya kode diatas ada 3-4, maka cari pada kode ke 2 ataupun 4. Tergantung pada pembentukkan template Anda.

 atau kode dibawah ini :

<div class='post-footer'>

    6.  Pastekan kode dibawah ini, dibawah pada kode diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='related_posts'>
          <h4>Artikel Terkait</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</b:if>

• Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
• Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian Membuat Artikel Terkait Dengan Gambar dan Deskripsi di Blogger :

• Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
• var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
• var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
• var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
• Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda. 

Read More

Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger

Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger - D-Copy Blog | Hai sobat blogger, seperti pada widget-widget yang sama namun dengan desain yang berbeda, pada tutorial ini kita akan membahas bagaimana membuat sosial bookmarking & kotak berlangganan artikel untuk blogger.

Langkah Membuat Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger :

1. Buka akun blogger Anda
2. Masuk ke menu tata letak, add gadget > HTML/Javascript
3. Pastekan kode dibawah ini :

<style>
#socialbox{border:2px solid black;
width:270px;padding: 5px 5px 5px 5px;  }
img.beintouch:hover {
    background: none repeat scroll 0 0 #ffbc99;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #ffbc12;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-iYLwEsqfJi5aNbIeRGZOtZcBWq4nomNw5y6UzU3aHkzACVmD1AIFtEW_MKC9zr6MUiNqx1UOSe1KHgg1swvHaCheA5JIaaqF3itMTn9onP3cvfHMLE8YzAzUkIzQFw4sIvwPrcG604/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 120px;
}
.ebutton {
    background: #D55959;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="http://facebook.com/Bloggertrix" rel="nofollow" target="_blank"> <img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNjOM6FmNnAaCF1wJ7J-n4SPS6uhyphenhyphenmsPJA6bkbuL61xV6itzTng84StByJZYZ2V6VGlef0sA93K9UL12QGIFnsYLFH1hBHkYm2kTta3cev5hwAR8VyUgegAUj_FcJtlQvymN1OIOuix_M/s1600/bloggertrix-facebook-icon.png" /></a></td><td>
<a href="http://twitter.com/ID Twitter Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5GT-UoKtsiAhcbsv01_rodfVyYQKVEbdpBQQw49_ireY0jdIxWvtr_YtYoxjl2yIwkY1b96_HOwd3IPXzgyWsPp1xOygRXl8aTvZcFbUdvZwTzdqCRK6xAbbItzpKX7Uaq2Mw-I1OSEY/s1600/bloggertrix-twitter-icon.png" /></a></td><td>
<a href="http://pinterest.com/ID Pinterst Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho2BaMf40vEl1V5sHlaPSSlvJ5gMwVqH_-a_bKQxDnfjhMyFG9AYOPgtE2iMHQK2u-r2CY2nYw3PRUrd4GkUkR2U0vF2SakixNbaNwMyP_Kh5-cKzn7srZ0CwOu15AvA3F8-68zvFRwuc/s1600/bloggertrix-pinterest-icon.png" /></a></td><td>
<a href="URL Google+ Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVi9Vd2UC2KpJXjVCLFAYl2ZdG4jj60K2X49Q8n_lb5O3GVjXwWn9NQKpUijZs2fobf-cXzVE-om9lYwm0WDIaKWaFs2tD8ozno5lch_gOA5Jj_YAC8WGMWn6HQElUHrtIXxCNKFWpJY/s1600/bloggertrix-google-icon.png" /></a></td><td>
<a href="http://feeds.feedburner.com/ID Feedburner Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhVhOUcMIwjzUa939TSHaWiwdhIS82_6mZ4aRIm0ThfQ_bwJP9mcEwWdqMQpaPWc46Tzuo-1REjvT71Oi7yZpjGQDkLclBtPrvl5iIXyc6wtNFWurMnRh8TQO-UqsuXiu65j6zLuVqU8/s1600/bloggertrix-rss-feed-icon.png" /></a></td></tr>
</tbody></table>
<div>
<center>
<b>Dapatkan Artikel Kami Dengan Email</b></center></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="ID Feedburner Anda" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>

Keterangan :
Ganti kode-kode yang sudah diwarnai diatas, sesuai dengan kebutuhan Anda.

    4.  Save template Anda.

Read More

Cara Menghostingkan CSS Blogger dengan TortoiseSVN

Cara Menghostingkan CSS dengan TortoiseSVN 100% Bekerja - D-Copy Blog | Hai sobat blogger, berhubung semakin pesatnya blogger tahun 2013 ini, tak kalah semakin bertambah pesat juga para pelagiator-pelagiator untuk mencuri desaign dari blog ataupun website. Disini kita akan membahas bagaimana menghostingkan CSS blog Blogger.

Langkah Menghostingkan CSS Blogger dengan TortoiseSVN :

1. Download TortoiseSVN » instal seperti biasa » restart komputer Anda karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command).
2. Setelah itu klik kanan pada desktop Anda » TortoiseSVN » Setting :

     3.  Akan muncul kotak dialog seperti ini. Klik General dan klik tombol Edit:

Pengaturan TortoiseSVN

Setelah file config terbuka, salin kode ini dan letakkan di bawah # Makefile = svn:eol-style=native

[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp        = svn:mime-type=image/bmp
*.gif        = svn:mime-type=image/gif
*.ico        = svn:mime-type=image/ico
*.jpeg       = svn:mime-type=image/jpeg
*.jpg        = svn:mime-type=image/jpeg
*.png        = svn:mime-type=image/png
*.tif        = svn:mime-type=image/tiff
*.tiff       = svn:mime-type=image/tiff

# Data formats
*.pdf        = svn:mime-type=application/pdf
*.avi        = svn:mime-type=video/avi
*.doc        = svn:mime-type=application/msword
*.eps        = svn:mime-type=application/postscript
*.gz         = svn:mime-type=application/gzip
*.mov        = svn:mime-type=video/quicktime
*.mp3        = svn:mime-type=audio/mpeg
*.ppt        = svn:mime-type=application/vnd.ms-powerpoint
*.ps         = svn:mime-type=application/postscript
*.psd        = svn:mime-type=application/photoshop
*.rtf        = svn:mime-type=text/rtf
*.swf        = svn:mime-type=application/x-shockwave-flash
*.tgz        = svn:mime-type=application/gzip
*.wav        = svn:mime-type=audio/wav
*.xls        = svn:mime-type=application/vnd.ms-excel
*.zip        = svn:mime-type=application/zip

# Text formats
.htaccess    = svn:mime-type=text/plain
*.css        = svn:mime-type=text/css
*.dtd        = svn:mime-type=text/xml
*.html       = svn:mime-type=text/html
*.ini        = svn:mime-type=text/plain
*.sql        = svn:mime-type=text/x-sql
*.txt        = svn:mime-type=text/plain
*.xhtml      = svn:mime-type=text/xhtml+xml
*.xml        = svn:mime-type=text/xml
*.xsd        = svn:mime-type=text/xml
*.xsl        = svn:mime-type=text/xml
*.xslt       = svn:mime-type=text/xml
*.xul        = svn:mime-type=text/xul
*.yml        = svn:mime-type=text/plain
CHANGES      = svn:mime-type=text/plain
COPYING      = svn:mime-type=text/plain
INSTALL      = svn:mime-type=text/plain
Makefile*    = svn:mime-type=text/plain
README       = svn:mime-type=text/plain
TODO         = svn:mime-type=text/plain

# Code formats
*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

# Webfonts
*.eot        = svn:mime-type=application/vnd.ms-fontobject
*.woff       = svn:mime-type=application/x-font-woff
*.ttf        = svn:mime-type=application/x-font-truetype
*.svg        = svn:mime-type=image/svg+xml

Save atau dengan menekan CTRL + S

Membuat Halaman Proyek Baru Pada Google Code

Jika belum punya akun Google, buat terlebih dahulu agar bisa mendapatkan akses ke Google Code. Kunjungi http://code.google.com, lalu klik Create A New Project:

Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk file-file yang diunggah di situ:

Klik Create Project. Kamu akan dibawa menuju halaman dasbor proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan googlecode.com password untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu:

Catat password yang tampil:

Mulai Mengunggah

Masukkan seluruh CSS blog blogger Anda ke dalam notepad, lalu save dengan format .css
Contohnya : cssanda.css

Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop lalu pilih TortoiseSVN » Repo Browser:

Akan muncul kotak dialog untuk memasukkan URL proyek:

Pola URL selalu berbentuk seperti ini:

https://nama_proyek.googlecode.com/svn/trunk/

Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan https, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan http

Klik OK. Tunggu sampai proses memuat selesai.

Buka folder dimana terdapat file yang ingin diunggah. Seret file CSS yang Anda save tadi ke area daftar file unggahan:

Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti ini:

Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang.

Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya.

Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini: 

http://nama_proyek.googlecode.com/svn/trunk/

Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini:

http://code.google.com/p/nama_proyek/source/browse/trunk/

Lalu hapus seluruh CSS yang Anda copas tadi didalam edit HTML Anda, lalu copy URL file CSS yang Anda upload tadi di SVN, dan paste URLnya dibawah <head> di dalam edit HTML blog sobat, contohnya seperti ini : <link href='http://nama_proyek.googlecode.com/svn/trunk/nama_proyek.css' media='screen' rel='stylesheet' type='text/css'/></link>

Langkah terakhir preview terlebih dahulu dan jika sudah berhasil save template Anda.

Saya juga menggunakan metode ini dan terbukti berhasil pada blog saya.

Semoga bermanfaat, terima kasih.

Read More

Langkah Mendesain Blog Blogger di Mobile (Ponsel)

Langkah Mendesain Blog Blogger di Mobile atau Handphone - D-Copy Blog | Setiap hari saya berbagi tentang tutorial blogger, hmm ... Aku sangat lelah untuk membuat posting.

Tetapi saya harus melakukan itu karena aku seorang blogger, dan waktuku adalah uang. Jadi sekarang saya akan berbagi tentang bagaimana merancang blog blogger di mobile atau dandphone dan penjelasan tentang strukturtemplate seluler. Ok tanpa banyak kata, saya akan berbagi sekarang.

Langkah Mendesain Blog Blogger di Mobile atau Handphone :

1. Buka akun blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

<body> 

     5.  Ganti kode tersebut dengan kode dibawah ini :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 

Untuk memanggil selector ponsel di blogger Anda perlu membuat seperti ini:

.mobile .class {property: value;}

atau

.mobile #id {property: value;}

untuk tag kondisional mobile seperti ini:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

Cara Membuat Tata Letak Anda Responsif :

Untuk desain yang Anda perlu tahu CSS tentu saja, dan Anda perlu untuk mengetahui struktur template Anda.
Untuk gaya responsif, saya akan memberitahu Anda beberapa dasar untuk desain responsif.

Jika Anda ingin membuat wrapper Anda responsif, hal penting pertama adalah #outer-wrapper. Kemudian untuk membuat #outer-wrapper agar responsif, Anda dapat menggunakan seperti ini:

.mobile #outer-wrapper {max-width: 630px; width: auto;}

atau

.mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}

Cara Mengedit Tata Letak HTML Melalui Ponsel

Tata letak HTML posting mobile di widget posting, jika Anda ingin mengedit tata letak, hanya mengedit seperti ini:

Hompage HTML di Ponsel:

<b:includable id='mobile-index-post' var='post'>

Halaman Postingan di Ponsel:

<b:includable id='mobile-post' var='post'>

Cara Menampilkan Widget di Ponsel

Untuk menampilkan widget di ponsel, pada tag <b:widget>, hanya menambahkan atribut ini:

mobile='only'

Untuk menampilkan widget di desktop dan mobile, pada tag <b:widget>, hanya menambahkan atribut ini:

mobile='yes'

Langkah terakhir, save template Anda.

Terima kasih, semoga bermanfaat.

Read More

Warning: At Least One Field Hcard | Memperbaiki Struktur Data

Warning: At Least One Field Hcard | Memperbaiki Struktur Data Rich Snippet - D-Copy Blog | Hai sobat blogger, pada tutorial sebelumnya bagaimana membuat rich snippet di blogger, namun pada kesempatan ini saya akan memberitahukan bagaimana memperbaiki strukstur data rich snippet yang error.

Mulai dari memperbaiki :

1. Warning: Missing required field "updated"
2. Warning: Missing required field "name (fn)"
3. Warning: Missing required hCard "author"

Langkah Memperbaiki Missing required field "updated" :

1. Backup dahulu template Anda
2. Cari kode yang mirip dengan kode dibawah ini

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if> 

     3.  Pastekan kode dibawah ini diatas pada kode diatas :

<a class='updated' href=' http://URL_Blog.blogspot.com/ ' rel='bookmark'> Nama_Lengkap_Blog, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

     4.  Dan hasilnya akan seperti ini :

<a class='updated' href=' http://URL_Blog.blogspot.com/ ' rel='bookmark'> Nama_Lengkap_Blog,  </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if> 

     5.  Save template Anda

Langkah Memperbaiki Warning: Missing required field "name (fn)" : 

hcard errors = Missing required field "name (fn)" biasanya terjadi dikarenakan kita membuat Komentar Reply pada blog kita di postingan dan bukannya pada kolom komentar yang seharusnya berbeda.

Solusi pertama adalah dengan mengganti Kode Komentar Reply yang bukan bawaan Blogger dengan Kode komentar bawaan Blogger, search aja di Google banyak sekali tutorialnya.

Solusi kedua adalah dengan menambahkan kode berikut :

 <div class='vcard' id='hcard- NAMA ANDA'>
<span class='fn n'>
<span class='given-name'>Posted by: NAMA ANDA</span>
</span>
</div>
<a class='updated' href=' http://SITUS ANDA.blogspot.com/ ' rel='bookmark'> TITLE SITUS ANDA, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Tepat di bawah kode

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

Dan coba test di Rich Snippets Testing Tool, Apakah masih error..???

Langkah Memperbaiki Missing required hCard "author" :

1. Pada langkah 3 diatas, pastekan kode dibawah ini :

<div class='vcard' id='hcard- Nama_Anda'>
<span class='fn n'>
<span class='given-name'>Posted by: Nama_Anda</span>
</span>
</div>

     2. Pastekan kode diatas pada kode dibawa ini :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if> 

     3.  Save template Anda


Jika anda sudah memasang Cara mengatasi Warning: Missing required field "updated" pada blogspot blogger maka code di atas tadi simpan di atasnya atau hasil lengkapnya akan seperti ini

<!-- dibawah adalah code untuk megatasi Hcard -->
<div class='vcard' id='hcard- Nama_Anda'>
<span class='fn n'>
<span class='given-name'>Posted by: Nama_Anda</span>
</span>
</div>
<!-- dan yang di bawah ini code mengatasi field update -->
<a class='updated' href=' http://Nama_Blog.blogspot.com/ ' rel='bookmark'> Nama_Blog, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Sekian  beberapa tips dan trik yang telah saya gunakan dan terbukti berhasil.

Read More

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt.

*Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.

Langkah Membuat Auto Readmore Dengan Gambar Tanpa Java Script :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, centang expand template widget
3. Cari kode dibawah ini :

<data:post.body/>

Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.

     4.  Ganti kode diatas, dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qrZmEA5RBpPv9-c28kbkOYuWJ1Jd1d1bFBwG4ev8Y6WbJGPSyXv4FekYkff0P1JrsV3DDVtp1hL8koBUrNIXw7FnyB8DUfeNtI-60pHMmIKMW6zeaRR319qh5daOGrTu6ZaWiV9Qkw3n/s0/no-image.png'/></a>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a>
</div></b:if><b:else/>
<data:post.body/></b:if><b:else/>
<data:post.body/></b:if></b:if>

     5.  Cari kode dibawah ini :

]]></b:skin>

     6.  Pastekan CSS dibawah ini diatas pada kode diatas :

.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}

     7.  Preview dahulu template Anda, dan save.

Catatan : Pada langkah 7 diatas, saat Anda preview pastikan sudah sesuai dengan yang Anda harapkan. Jika belum perhatikan langkah 3 diatas.

Read More

CSS3 Menu Bar Smooth Slide Out untuk Blogger

CSS3 Menu Bar Smooth Slide Out untuk Blogger - D-Copy Blog | Seperti pada menu-menu bar yang telah kami publikasi sebelummnya, yaitu : CSS Menu Dropdown keren, elegan, menu bar keren, dropdown melayang, dropdown versi 2, menu bar simpel dan keren, menu bar dengan ikon, snipping dan jquery, kali ini kita akan membahas bagaimana cara membuat CSS3 menu bar smooth slide out untuk blogger.

Langkah Membuat CSS3 Menu Bar Smooth Slide Out untuk Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

ul.nav8{list-style:none;height:120px;margin:0;padding:0}
ul.nav8 table{border-collapse:collapse;width:0;height:0;margin:-1px 0 -5px -1px}
ul.nav8 > li{float:right;height:120px;width:40px;position:relative;overflow:hidden;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s}
* html ul.nav8 > li{width:auto}
ul.nav8 > li a.ie6{float:left;height:120px;width:39px;position:relative;overflow:hidden}
ul.sub{list-style:none;height:120px;width:600px;background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;position:absolute;left:0;top:0;margin:0;padding:0}
ul.sub li{float:left}
ul.sub li:first-child{margin-left:45px}
ul.sub li a{display:block;width:110px;height:120px;float:left;overflow:hidden;position:relative;text-decoration:none;color:#000}
ul.sub li a b{font-size:14px;display:block;padding:15px 15px 5px}
ul.sub li a b:hover{font-size:16px;color:red;display:block;padding:15px 15px 5px}
ul.sub li a p{font-size:12px;display:block;margin:0;padding:0 10px}
ul.sub li a p:hover{font-size:13px;display:block;margin:0;padding:0 10px}
ul.nav8 > li:hover{width:600px}
ul.nav8 > li a.ie6:hover{direction:ltr;width:600px}
ul.sub li a:hover i{opacity:1.0}

CSS diatas sudah saya compress, sehinngan membuat blog Anda tidak berat loading akan menu ini.
Mengompresskan seluruh CSS adalah salah satu cara terbaik untuk mempercepat loading blog Anda. Masuk ke CSS Compressor untuk mengompres CSS Anda.

     5.  Pastekan kode dibawah ini, dimana yang Anda inginan.

<ul class="nav8">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://d-copy.blogspot.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://d-copy.blogspot.com/search/label/CSS"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>

Keterangan :

• Kode merah adalah URL yang harus Anda ganti
• Orange adalah text display pertama
• dan, Biru adalah text display kedua, seperti pada gambar diatas.

     6. Save template Anda.

Terima kasih semoga bermanfaat.
Sumber kode dan gambar : http://www.bloggertrix.com/2013/01/css3-smooth-slideout-menu-bar-for.html

Read More

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini saya akan memberikan kepada Anda sebuat tab menu scroll back to top dan profiles social yang bisa Anda gunakan untuk blog blogger Anda.

DEMO

Langkah Buat Tab Menu Scroll Back To Top dan Profiles Social :

1. Buka akun Blogger Anda
2. Masuk ke menu dit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan CSS berikut ini, diatas pada kode diatas :

#fixed-bar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 38px;
    clear: both;
    margin: 0;
    padding-bottom: 4px;
    background-color: #333;
    overflow: hidden;
}

#fixed-bar a {
    float: right;
    margin: 0;
    padding: 0;
    background-color: #333;
}

#fixed-bar a.first {
    float: left;
    margin-top: -1px;
}

.bottom-wrapper {
    max-width: 92%;
    width: 960px;
    margin: 0 auto;
}

    5.  Lalu cari kode dibawah ini :

</body>

    6.  Pastekan kode dibawah ini, diatas pada kode diatas :

<div id='fixed-bar'>
<div class='bottom-wrapper'>
<a class='go-top first' href='#page-header'><img alt='go top' src='http://3.bp.blogspot.com/-cBnkdgGehf4/TzyKY265xwI/AAAAAAAACfQ/ZZvzUQrG7m4/s1600/up_3038.png'/></a>
<a href='https://plus.google.com/111920657633787249674' target='_blank' title='see on google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-BOc1ZCoB-Jw/TzyKYBnrVyI/AAAAAAAACe4/QgKgsc7um4c/s1600/gplus_3838.png'/></a>
<a href='http://www.facebook.com/sharer.php?' target='_blank' title='share with friends'><img alt='facebook' src='http://4.bp.blogspot.com/-lDVnV-OnEv4/TzyLhYc4yPI/AAAAAAAACfc/I7_buv1xxEM/s1600/facebook_3838.png'/></a>
<a href='http://twitter.com/54Blogger' target='_blank' title='follow me'><img alt='twitter' src='http://1.bp.blogspot.com/-mtVDHUkGUJs/TzyKYrJkNbI/AAAAAAAACfI/zXM9SKO2BFU/s1600/twitter_3838.png'/></a>
<a href='/feeds/posts/default' title='get updates'><img alt='rss' src='http://1.bp.blogspot.com/-l4C-DinWEr4/TzyKX4M7TvI/AAAAAAAACes/YDtzN-oPjYs/s1600/rss_3838.png'/></a>
</div>
</div>
<script>$('#fixed-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#fixed-bar').slideDown(200)}else{$('#fixed-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>

     7.  Save template Anda.

Read More

Menu Bar Simpel Dan Keren Untuk Blogger

Menu Bar Simpel Dan Keren Untuk Blogger - D-Copy Blog | Hai sobat blogger, seperti pada tutorial menu yang laiinya seperti versi 1, versi 2, versi 3, versi 4 yang bisa Anda nikmati namun kali ini saya akan memberikan tutorial menu yang sangat sederhana namun terlihat keren dengan efek hover seperti neon.

Langkah Menu Bar Simpel Dan Keren Untuk Blogger :

1. Buka akun blogger Anda.
2. Masuk ke menu edit HTML, jangan lupa cantang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

Keterangan :
Dalam mode penempatan menu bar ini Anda harus sedikit berkreasi dalam mode penempatan HTML.

   5. Pastekan kode dibawah ini, dimana yang Anda ingin letakkan :

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://d-copy.blogspot.com">Home</a></li>
<li><a href="http://d-copy.blogspot.com">About</a></li>
<li><a href="http://d-copy.blogspot.com">Blog</a></li>
<li><a href="http://d-copy.blogspot.com">Services</a></li>
<li><a href="http://d-copy.blogspot.com">Support</a></li>
<li><a href="http://d-copy.blogspot.com">Sales</a></li>
<li><a href="http://d-copy.blogspot.com">Contacts</a></li>
</ul>
</div>

     6.  Edit kode yang diwarnai diatas, terakhir preview dan save template Anda.

Dalam hal ini, Anda ditutut untuk mengatur tata letak untuk penyesuain ke template Anda.

Sumber  kode : http://www.bloggertrix.com/2013/01/attractive-css3-sleek-menu-bar-for.html

Read More

Kotak Berlangganan Artikel Dan Artikel Terkait Buat Blogger

Kotak Berlangganan Artikel Dan Artikel Terkait Dengan Thumbnail Buat Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini kita akan membahas tentang kotak berlangganan artikel dan artikel terkait buat blog Anda. Pada tutorial sebelumnya tentang cara buat facebook like box dan kotak berlangganan artikel dan cara buat kotak berlangganan artikel dan artikel terkait beserta facebook like box yang mungkin bisa Anda coba.

Langkah buat Kotak Berlangganan Artikel Dan Artikel Terkait Buat Blogger :

1. Buka akub blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9HR0ZFB5aqcX7arMv7VQp6WK_JFlgO09_SM2sR9QYW5sK2awavaQtFBjlBTBO3y9LlBClyInCbI8jREft9SBwdzY-QioNumgbLAy9jB0fqmeOMp385-NwXo7DzJ7sqtUfgWSst22ykQ/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

    5.  Cari kode dibawah ini :

<data:post.body/>

Keterangan :

• Biasanya kode diatas ada 3-4 pada template, pastekan kode dibawah ini dibawah pada kode diatas pada kode 2 atau 3.
• Bila nantinya widget ini tidak muncul, maka langkukan pada kode yang lainnya sesuai dengan langkah 5 diatas.

     6.  Pastekan kode dibawah ini, dibawah pada kode dibawah :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7sj8t5Q6DVcwv1J8rmK6HbsWfC1q5R-Cg4jFbW4FnK_LIBfaZ_cA2pY5Z2-5zNWC6LtCvQF0DCmQHBzVIUYZGGq0h5ELTwOj18KC7Q143L7z3eQ5z8oS6U8pUUAdwzldjpBSLah8alww/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://bloggerbelog.googlecode.com/files/related.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>

<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/bloggerbelog/update' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://d-copy.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner Anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID Feedburner Anda'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/bloggerbelog/update'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ID Feedburner Anda?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

 Keterangan :

• Ganti kode yang diwarnai sesuai kebutuhan blog Anda.

     7.  Save template Anda.

Terima kasih, semoga bermanfaat.
Sumber kode : http://www.bloggerbelog.com/2012/08/email-subscribed-thumbnail-related-post.html

Read More

Author Bio, Social Media Share dan Subscribe Box untuk Blogger

Author Bio, Social Media Share dan Subscribe Box dibawah postingan blog untuk Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini kita akan membahas Author Bio, Social Media Share dan Subscribe Box dibawah postingan blog untuk Blogger yang yang sangat menarik untuk Anda gunakan untuk akun blog Anda.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></s:kin>

     4.  Diatasnya pastekan kode dibawah ini :

#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}

.social-connect-widget{width:400px;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}

#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:15px;margin-top:5px;background: url(http://cdn1.iconfinder.com/data/icons/UII_Icons/48x48/email.png) no-repeat;}

* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }

    5.  Lalu cari kode dibawah ini :

<data:post.body>

Keterangan :

• Biasanya kode diatas ada 3-4, pastekan kode dibawah ini pada kode ke 2/3
• Jika nantinya tidak muncul pastikan letakkan kode dibawah ini pada kode-kode <data:post.body> lainnya sesuai dengan kebutuhan blog Anda

     6.  Pastekan kode dibawah ini, dibawah kode pada langkah 5

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhkjarqZjVTPTGhrd6UBWxAwBmOjWjhmRlgfr9rNCzf_Edtj7yCV8l_IORVdai7JJzTBe1C0R1-TeBa0z_0eLSIgB3uKKsNePGylQO_3RfC3y4zZAP8TShG3iw2eEMnbh_-RYrwpb7Tg/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong>
<a href="http://twitter.com/ID Twitter Anda" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/ID Feedburner Anda" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner Anda&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
   
<div id="author-connect">
   
<div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'> 
<a href='http://twitter.com/ID Twitter Anda'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLI3a0d3Jiqq0hvU7_FxultCuMCen_-e1lMiQPtNl3atynW6q9nBsu8sDzrbEU0omCjNu_Uq_jP9_QR23Ws7IU1Kdu_yyx8OrkR6eay2PE8AunkN-L0Gk5utmBdeZZotY3dxTeAtsI1a0/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUAuQGx6avsyB17ZcDvJkpzhDw_1rUPOBLxdLiGJF7bdOnRZNAbxPaGGuJN19n6z1mmT4qs5gvQOf0RPflB_9bWWE75KJ7dpBhlWP9U5lBkIL2rz_MTxcmlyW5GSCHuw9DqR1Pl6F54Q/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/ID Stumbleupon Anda'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikAcjP9R-lQCHTZMp-I6cPj_bJZ13Bjl_dpFep2bdsyDwZUqpjqkWtyPXmUjfUTGqBa-mLlY-v8xW4fJr9ID44so5gE69vwOw72-uyWYqj-Faf7TjLK9ADW6GdD3VnzbAr5y2_fT9wTlo/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMv2hvO4BfWECngtcL9W0ShAwYhbTI041Xb7k8fv2P0uFcCsPPS5kkG14lYBRXm_9ziaQEMQ9QZV1y6fpCLvKYPOevQ3pvtrx4JyTtsnmIaY1sra51HQY4ERgDiSsUucHz7WNP6qjVRW4/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/ID Digg Anda'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUxvMoCNmSjyh3AI-5GIENuY99uMVcXjaXT8E8MX7RSDQ-OMCOWLzYR0ywUW3SlDL3L6zrvuwvHBdlsCvqvbIKBMMPEVVkivYQsUGb5aksVbsjv17DlG-9UMHnc3Uk5vzXClBJpC6tpc/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/ID Feedburner Anda'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQUFEHIA0Si5F_0nhyftTHcK4J_DRcvk4Kvopa06J23H74u4iA_fBOZykUpV8BejvvXcqBjmw3gZ_oJC8BHXFkmmmrwuGSzExnaE7BJlKSpftgZLs8X1SUZBam7UgtxyJT_bK2KKx61g0/s1600/rss.png' title='RSS Feed'/></a><a href='http://d-copy.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxwm3uNySM9wSgF8-S1LOvKTyWlSGRbUKFY98hykXQ64OUiiRgWGM69U9cRbYFJIxu3weNWV76SUCoTvgsdiAAxkaydEkfw72cGwAmIYm5G6Xd5B2JJgid0qqiIXG-nIbzlk7KvJovMI/s1600/image.png' target='_blank'/></a>
</div>
<hr style="width:155px;" />
    <div id="news-letter">
<span class="msg-box"></span>
<b>Subscribe</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
<input name="uri" type="hidden" value="ID Feedburner Anda" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
</form>
</div>
</div></div>
</b:if></b:if>​

 Keterangan :

• Ganti kode yang diwarnai diatas sesuai kebutuhan Anda

     7.  Save template Anda.

Terima kasih, semoga bermanfaat.
Sumber kode : http://www.bloggertrix.com/2013/01/customized-wordpress-style-author-bio.html

Read More

Social Media Bar Melayang Untuk Blogger

Social Media Bar Melayang Untuk Blogger - D-Copy Blog | Hai sobat blogger tutorial kali ini saya akan memberikan kepada Anda social media bar melayang untuk blogger. Pada tutorial sebelumnya social media bar melayang dengan posisi mendatar yang mungki bisa Anda coba juga (seperti yang saya pakai pada blog saya juga).

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML
3. Cari kode dibawah ini :

</body>

    4.  Diatasnya pastekan kode dbawah ini :

<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>  
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- MBL Social Media Bar For Blogger -->
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },
 
},
show: 8,
position: "left",
skin: "clear"
});
 
});
</script>

 Keterangan :

• Menambahkan URL : Ganti # dengan URL yang Anda inginkan.
• Perubahan posisi : Dalam rangka untuk mengubah posisi widget ganti position: "left" dengan posisi yang Anda inginkan. Bisa "right (kanan), top (atas), bottom (bawah)"
• Mengurangi tampilan media social : Anda bisa mengubah show: 8 dengan jumlah social media yang Anda inginkan.
• Perubahan background : Anda bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark".

     5.  Save template Anda.

Sumber artikel : http://www.mybloggerlab.com/2013/01/how-to-create-floating-social-media-bar.html

Read More

Cara Buat Tombol Widget "Add To Blogger" untuk Blogger

Cara Buat Tombol Widget "Add To Blogger" untuk Blogger - D-Copy Blog | Seperti yang Anda lihat dalam beberapa blog bahwa mereka memberikan tombol untuk menambahkan kode HTML JAVASCRIPT bukannya menunjukkan code. Jadi saya di sini untuk menunjukkan bagaimana mereka melakukan hal ini dalam pengkodean yang sangat mudah mudah. Anda langsung saja nikmati tombol ini.

Langkah :

1. Buka akun blogger Anda
2. Masuk ke menu tata letak
3. Add gadget
4. HTML/Javascript > pastekan kode dibawah ini :

<center>
<form action="http://www.blogger.com/add-widget" method="post" target="_blank">
<span style="font-size: large;">
<b>Widget Title: </b>
</span>
<input name="widget.title" size="25" type="text" value="Widget Title Here" />
</center>
<br>
<center>
<input name="go" style="font-size: 20px; width: 180px;" type="submit" value="Add to Blogger" />
<textarea name="widget.content" style="display: none; height: 0px; width: 0px;">
+++Masukkan Kode Anda Disini+++
</textarea>
<input name="infoUrl" type="hidden" value="URL Situs Anda disini" />
<input name="logoUrl" type="hidden" value="URL Gambar Anda disini - Contoh untuk Favicon : http://d-copy.blogspot.com/favicon.ico" />
</form>
</center>

Keterangan :

Ganti kode yang diwarnai diatas sesuai dengan keterangan yang terlah diberikan.

     5. Save template Anda. 

Read More

Mengubah Jumlah Postingan Yang Ditampilkan Dengan Mengklik Label

Mengubah Jumlah Postingan Yang Ditampilkan Dengan Mengklik Label - D-Copy Blog | Tutorial kali ini kita akan membahas bagaimana mengatur jumlah postingan yang akan ditampilkan jika Anda ataupun penunjung Anda mengklik salah satu link label Anda.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu Template > edit HTML, centang expand template widget
3. Cari HTML dibawah ini :

expr:href='data:label.url

    4.  Ganti HTML diatas dengan HTML dibawah ini :

expr:href='data:label.url + "?max-results= 7  

Catatan : Ganti keseluruhan HTML langkah 3 dengan langkah 4. Biasanya HTML langkah 3 lebih dari 1.

    5.  Save template Anda.

Read More

Cara Mengedit Error 404 Page Untuk Blogger

Cara Mengedit Error 404 Page Untuk Blogger - D-Copy Blog | Tutorial kali ini kita akan berhubungan dengan SEO blog Anda. Seperti pada artikel sebelumnya yang harus Anda baca dan terkait dengan artikel ini maka kita sekarang akan mengedit 404 Error Page untuk Blogger.

Cara mengubah pesan ini ke sesuatu yang lain dapat di ubah dari Pengaturan Blogger.

1. Pilihan ini ada di Setelan › Preferensi penelusuran › Pesan Ubahsuaian untuk Laman Tidak Ditemukan masukan kode berikut 

<br />
<div class="MsoNormal">
<span lang="IN" style="color: red; font-family: Algerian; font-size: 28.0pt; line-height: 115%; mso-ansi-language: IN;">404</span><span lang="IN" style="font-family: Algerian; font-size: 28.0pt; line-height: 115%; mso-ansi-language: IN;">.</span><span lang="IN"> </span><span lang="IN" style="font-family: &quot;Bradley Hand ITC&quot;; font-size: 28.0pt; line-height: 115%; mso-ansi-language: IN;">Oops, Terjadi Kesalahan.</span><span lang="IN"><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="IN" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;">Sepertinya halaman atau artikel yang Anda minta sudah
dihapus. <o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="IN" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;">Silahkan <a href="http://d-copy.blogspot.com/p/table-of-contents.html" target="_blank">lihat seluruh artikel</a> </span><span lang="IN" style="color: red; font-family: &quot;Snap ITC&quot;; font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;">D-Copy </span><span lang="IN" style="color: #00b050; font-family: &quot;Snap ITC&quot;; font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;">Blog</span><span lang="IN" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;"> atau
Anda bisa
<br />
berlih ke </span><span lang="IN" style="color: yellow; font-family: Ravie; font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;"><a href="http://d-copy.blogspot.com/" rel="nofollow" target="_blank">Beranda</a></span><span lang="IN" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: IN;"> kami.<o:p></o:p></span></div>

      2.  Simpan.

Langkah selanjutnya :

1. Anda pergi ke Template › Edit HTML masukan kode CSS berikut taruh sebelum kode </head>

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNlbRG3AAuRB1sCjm8Fo649edf2W6dsqULE9ea3TimyHhC3Y4hCfy4Qs1gWB73K1EAlr8348s3ABpB_TilL1rw-rLtB9W7yfuRrqfaIBtQImmNGlD3cHyR8U-NAzvKQMhIK0kfvjJsPI/s1600/404-error.png) no-repeat right;
 font-size:110%;
 width:90%;
 margin:10px auto;
 position:relative;
 height: 220px;
}
.status-msg-border{display:none;}
.status-msg-body{
 text-align:left;
 padding:.3em 0;
 width:100%;
 position:static;
 z-index:4
}
</style>
</b:if>

Mengganti Judul Halaman Kesalahan 

Secara default judul Page Kesalahan Blogger adalah Judul Blog Anda. Jika Anda ingin mengubahnya ke sesuatu yang lain, Anda dapat Mengedit template Anda dan mengubah kode berikut :

<title><data:blog.pageTitle/></title>

Ganti dengan kode dibawah ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>

Save Template Anda.

Untuk mengecek perubahan Anda bisa melakukan seperti langkah dibawah ini :
Misalkan salah satu artikel saya : http://d-copy.blogspot.com/2012/12/5-cara-optimasi-blog-blogger.html
Maka ubah menjadi http://d-copy.blogspot.com/2012/12/5-cara-optimasi-blog-blogger8787.html 

Read More