Kumpulan Kode Edit Template Blog

Kode edit template blog sekaligus tool untuk membuat blog lebih seo... Artikel selengkapnya silahkan menuju ke bawah.

Di postingan halaman ini saya tidak berniat untuk berbagi, tapi lebih pas di bilang untuk dokumentasi saja. guna untuk kepentingan dalam pembelajaran diri mengenai edit blog. Karena kebanyakan kode edit blog ini saya dapat dari teman, dan juga dari berbagai nara sumber di google brows. jadi minta maaf apabila ada kesamaan ataupun ada perbedaan. yang intinya artikel ini sebagai dokumentasi pribadi kususnya untuk diriku belajar edit blog.

Jika sobat semua yang membuka dan membaca isi dalam halaman postingan ini, saya minta maaf apabila banyak kekeliruan. karena saya bukan seorang profesional blogger melainkan hanya orang yang suka belajar blog saja. oke !!! sekiranya sobat melihat membaca dan ingin mencoba mempraktekkan ya silahkan. kan tidak ada larangan untuk sama sama saling belajar dan berbagi agar kita bisa lebih tau.

Di bawah ini beberapa kode yang di peruntukkan dalam perihal edit blog. baik edit blog pada Laman/entri, layout/widget, maupun edit HTML template blog. koleksi aku masih sedikit, nanti kalau sudah banyak kode yang ku dapat dan ku coba sukses, pasti akan aku tambahkan terus pada blog ini untuk menambah dokumentasi kode edit blog.

Sebelum mulai masuk urusan edit kode pada template blog, ada baiknya jika kita cadangkan dulu. guna untuk berjaga jaga sewaktu hasil edit template blog kita tidak berhasil. dengan mencadangkan lebih dulu, jika gagal kita tinggal upload ulang template yang sudah kita unduh (cadangkan) tadi.

TEST BLOG

Test Responsive Blog :
➪ Responsivetest
➪ Responsinator

Test Mobile-Friendly Blog :
➪ Mobile-friendly

Test Data Terstruktur Blog :
➪ Structured-data

Test Kecepatan Blog :
➪ Pagespeed

Test Seo Blog :
➪ Chkme
➪ Seositecheckup
➪ Statscrop
➪ Webseoanalytics

Blog Tool / Repair :
➪ Webmasters-tools

Blog Cepat Terindex Google :
➪ Webmasters-tools-submit-url

KODE EDIT HTML TEMPLATE BLOG

Kode penelusuran kusus.
Di letakkan pada edit template di atas kode </body>

Kunjungi situs : https://cse.google.com/ kemudian add, isi kotak yang tersedia : URL Blog Anda, Bahasa Indonesia, Nama isi yang sesuai blog anda, dan klik buat.
terus klik dapatkan kode, copas kode dan tempel pada template anda.
NB : Kalau ingin tampilnya berada di atas blog, tempel kode tadi di bawah kode <body>
untuk tampil posisi lain silahkan tempel dengan pilihanmu sendiri.

Penempatan kode untuk melacak situs AdSense di Analytics
1. Kode pelacakan Analytics, di tempatkan tepat sebelum tag </head> penutup
2. Kode iklan AdSense, di antara tag <body> dan </body>

Penempatan Kode Iklan Adsanse

1. Tampil paling atas
(paste kode pada widget header)

2. Tampil samping
(paste kode pada widget sidebar samping/ biasanya sudah pembawaan adsanse)

3. Tampil di bawah postingan
(masuk tata letak>edit laman>centang tampilkan iklan bawah post)

4. Tampil di tengah post
(ambil kode dan parse dulu, pada template cari kode <data:post.body/> )
ganti menggunakan kode berikut :

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
DISINI KODE IKLAN TELAH DI PARSE
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

5. Tampil tepat di tengah postingan
(ambil kode dan parse dulu, pada template cari kode <data:post.body/> )
ganti menggunakan kode berikut :

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='margin:10px auto'>
DISINI KODE IKLAN TELAH DI PARSE
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

6. Tampil di tengah postingan sebelah kanan
(ambil kode dan parse dulu, pada template cari kode <data:post.body/> )
ganti menggunakan kode berikut :

 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='float:right;margin:10px 0 10px 10px'>
DISINI KODE IKLAN TELAH DI PARSE
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

7. Tampil di tengah post sebelah kiri
(ambil kode dan parse dulu, pada template cari kode <data:post.body/> )
ganti menggunakan kode berikut :

 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='float:left;margin:10px 10px 10px 0'>
DISINI KODE IKLAN TELAH DI PARSE
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

8. Tampil di akhir postingan
(Ambil kode iklan dan parse dulu)
masuk edit template> cari kode <data:post.body/> (baris kedua).
paste kode iklan telah di parse di bawah kode <data:post.body/> (baris kedua).

8. Tampil di bawah judul, atas artikel postingan
(Ambil kode iklan dan parse dulu)
masuk edit template> cari kode <data:post.body/>
paste kode iklan telah di parse di bawah kode <data:post.body/>

NB : Untuk membuat posisi tampil iklan

Tampil Tengah
<center>
DISINI KODE IKLAN TELAH DI PARSE
</center>

Tampil Kiri
<div style="float:left; margin-right:15px;margin-bottom:15px">
DISINI KODE IKLAN TELAH DI PARSE
</div>

Tampil kanan
<div style="float:right; margin-right:15px;margin-bottom:15px">
DISINI KODE IKLAN TELAH DI PARSE
</div>

Kode untuk mengatasi error 404

untuk mengatasi error 404 cara (1)
Di letakkan pada edit template di atas kode </body>.

<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'in';
  var GOOG_FIXURL_SITE = 'http://www.example.com'
</script>
<script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>

untuk mengatasi error 404 cara (2)
Di letakkan pada edit template di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!--<title>404: Page Not Found ~ <data:blog.title/></title>-->
<!--Redirect jika 404 -->
<script type='text/javascript'>
BSPNF_redirect=setTimeout(function() {
location.href= &quot; http://www.example.com/ &quot;
}, 1);
</script>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>

Kode untuk membuat scroll
Di letakkan pada edit template di atas kode ]]></b:skin>

untuk membuat scroll Label.
Di letakkan pada edit template di atas kode ]]></b:skin>
#Label1 .widget-content{
    height:320px;
    width:auto;
    overflow:auto;
    }

untuk membuat scroll Popular Post.
Di letakkan pada edit template di atas kode ]]></b:skin>
#PopularPosts1 .widget-content{
    height:320px;
    width:auto;
    overflow:auto;
    }

untuk membuat scroll Archive blog.
Di letakkan pada edit template di atas kode <div id='ArchiveList'>
<div style='overflow:auto;width:auto;height:330px;'>

KODE WIDGET TATA LETAK BLOG

Kode kotak scroll di dalam laman blog.
Di letakkan pada laman dengan mode HTML.

<div style="border: 1px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 10px; width: auto;">
GANTI DENGAN ARTIKEL/TULISAN ANDA DISINI</div></div>

Kode widget sosial share melayang di samping kiri blog.
Di letakkan pada widget HTML/JavaScript.
<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Kode Icon Back To Top.
➪ Keterangan Selengkapnya kunjungi : Cara Pertama - Cara Kedua

Di letakkan pada widget HTML/JavaScript.

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://2.bp.blogspot.com/-FO7fdGb2Wog/V5r7Yxf-jCI/AAAAAAAACis/OXxV5erOZsY6wPPhOSnjaWMAl2EWoBwigCLcB/s1600/Back-To-Top.png "/></a>

Kode Tulisan Berjalan Di Blog.
➪ Keterangan Selengkapnya kunjungi : DI SINI

Di letakkan pada widget HTML/JavaScript - Di laman mode HTML.

<marquee direction="left" scrollamount="2" align="center">Ganti Tulisan /Script Gambar Anda Disini</marquee>

Kode Auto Play Video Youtube Di Blog.
➪ Keterangan Selengkapnya kunjungi : DI SINI
Di letakkan pada widget HTML/JavaScript - Di laman mode HTML.
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/42oiylPp2NA
?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
</center>
Kode Kotak Pencarian.
Di letakkan pada widget HTML/JavaScript.

<center>
<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}

 /* Form wrapper styling */
.search-wrapper {
width: 282px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 184px;
height: 15px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #333;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #333;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #333;
    font-weight: normal;
    font-style: italic;
}

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 35px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #333;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.search-wrapper button:hover{
    background: #FF0000;box-shadow:0 0 10px #111;
}

.search-wrapper button:active,
.search-wrapper button:focus{
    background: #FFA500;
    outline: 0;
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #333 transparent;
    top: 10px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #333;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #333;
}

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Pencarian Tulis Disini" required="" />
        <button type="submit"> GO </button>
    </form>
</center>

Aku mau lanjut kerja lembur dulu, nanti lain waktu aku tambah lagi.
Note : Jika ada masalah terkait content di blog ini, silahkan anda menghubungi kami.
Contact / Phone / WA : 085203781053