Tampilkan postingan dengan label Koding. Tampilkan semua postingan
Tampilkan postingan dengan label Koding. Tampilkan semua postingan

Selasa, 27 Juni 2017

4 Model Threaded Comment Hack Berikut Tutorial

4 Model Threaded Comment Hack Berikut Tutorial

4 Model Threaded Comment Hack Berikut Tutorial. Sobat blogger, threaded comments hack atau komentar dengan style bertingkat memang sedang banyak di gunakan banyak blogger saat ini,termasuk saya juga menggunakannya,keuntungan dengan threaded comment hack,kotak komentar anda menjadi bisa lebih bergaya,keren dan elegant,termasuk penambahan atribut rel="nofollow yang sudah di pasang di threaded comments hack ini dan juga seo friendly.

Threaded comment hack juga menggunakan atribut open new tab atau bisa di sebut target_blank pada penggunaan user comment, target blank ini bertujuan ketika seorang user mengklik salah satu akun yang berkomentar akan membuka tab baru, dan tentu saja tidak harus meninggalkan blog anda meskipun mengklik salah satu akun google komentator.

Disini saya ingin berbagi tutorial 4 model threaded comment hack yang berbeda beda model dan yang sudah di share di blog ini, namun saya akan meringkasnya dalam satu artikel supaya mudah bagi anda menemukan tutorialnya.

Cara Membuat Threaded Comment Hack Blogger Style 1

Cara Membuat Threaded Comment Hack Blogger Style 1

Cara Membuat Threaded Comment Hack Blogger Style 2

Cara Membuat Threaded Comment Hack Blogger Style 2

Cara Membuat Threaded Comment Hack Blogger Style 3

Cara Membuat Threaded Comment Hack Blogger Style 3

Cara Membuat Threaded Comment Hack Blogger Style 4

Cara Membuat Threaded Comment Hack Blogger Style 4
Nah itulah sobat blogger , 4 macam atau 4 model threaded  comment hack berikut tutorialnya, semoga ada yang di sukai, untuk lebih dan kurangnya saya mohon maaf, salam sukses selalu.

Cara Membuat Navigasi Angka Halaman Blog 2017


Cara Membuat Navigasi Angka Halaman Blog. Sobat blogger, navigasi halaman blog adalah sebuah nomor urutan untuk halam blog,navigasi halamn blog ibarat sebuah buku yang terdapat banyak artikel dan dengan halamannya, maka jika sebuah blog atau website dengan banyak artikel tapi tidak mempunyai navigasi halaman, mungkin akan sangat susah untuk pengunjung menjelajahi artikel-artikel anda yang ada di blog dan terlihat aneh mungkin.
Cara Membuat Navigasi Halaman Blog
Navigasi halaman pada sebuah blog,menurut saya adalah hal yang wajib di terapkan pada sebuah blog, selain memudahkan pembaca halaman blog atau website anda,navigasi halaman dapat meningkatkan pageview dan dapat menurunkan tdingkat bounce rate sekalgus mempercantik tampilan pada sebuah blog.
maka sangat di sayangkan jika blog anda tidak mempunya navigasi halaman,maka jika pengunjung ingin melihat artikel yang lebih lama,akan susah untuk menemukannya

Maka dari itu bagi anda yang ingin menambahkan navigasi urutan halaman atau nomor urut angka halaman pada blog anda,silahkan ikuti tutorial yang saya berikan,caranyapun cukup sangat mudah untuk di terapkan saya ambil kode ini dari blog Maskolis.


Cara Membuat Navigasi Halaman Blog/ Urutan Angka Halaman Blog

  1. Buka akun blogger anda.
  2. Pilih menu template > Klik edit Html 
  3. Lalu silhkan anda letakan code di bawah ini tepat di atas kode ]]></b:skin> 
.showpageNum a {
color:#FFF;padding:4px  10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}        
.showpageOf {
color:#222;
margin:0 6px 0 0
}        
.showpageNum a:hover {
background:#222;
color:#FFF
}        
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px  10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}

5.  Selanjutnya letakan kode di bawah ini tepat di atas kode </body>  
<script  type='text/javascript'>      
var  home_page=&quot;/&quot;;      
var  urlactivepage=location.href;      
var  postperpage=10;      
var  numshowpage=7;      
var upPageWord  =&#39;&#9668;&#39;;      
var downPageWord  =&#39;&#9658;&#39;;      
</script>      
<script  src='http://miscah.googlecode.com/files/pagenav.js'  type='text/javascript'/>

Catatan :
var  postperpage=10; Adalah jumlah post yang di tampilkan pada halaman yang dibuka, silahkan sesuaikan menurut  posting anda.      
var  numshowpage=7;  Adalah jumlah tombol navigasi di halaman.

Jika sudah di sesuaikan lalu save template dan pastikan tombol navigasi halaman muncul di blog anda.
oke sobat,saya rasa cukup sekian tutorial cara membuat navigasi nomor halaman pada blog.
lebih dan kurangnya saya mohon maaf.

Cara Membuat Related Post di Bawah Postingan Blog 2017


Cara Membuat Related Post di Bawah Postingan Blog. Related Post atau artikel terkait ala Kang ismet ,memperlihatkan artikel yang terkait dengan kategori yang di eksporsur sesuai kategori yang di pilih, artikel terkait atau related post ini sangat efektif untuk meningkatkan traffic pengunjung blog anda, karena dengan related post, pengunjung akan di tawarkan artikel lainnya dengan kategori yang di pilih, related post ini juga sangat efektif untuk menurunkan tingkat bounce rate pada blog,

Seperti yang kita tahu bahwa google sangat menyukai blog yang tingkat bounce ratenya sangat rendah, related post ini juga sangat ringan untuk loading ,karena related post atau artikel terkait ini akan di buat tanpa tumbhnail atau gambar, nah bagi anda yang ingin menggunakan related post ini, silahkan ikuti tutorial saya di artikel ini.

Cara Membuat Related Post / Artikel Terkait
Sumber Gambar : Blog.kangismet.net

Gambar di atas adalah tampilan related post yang akan kita buat, cukup simple dan ringan untuk loading.
Sebelum anda melakukan tutorial ini, silahkan backup template anda untuk menjaga kesalahan erorr pada template.

Cara Membuat Related Post Di Bawah Posting Blog. 
1. Buka akun blogger anda.
2. Pilih menu template > klik edit Html.
3. Copy code di bawah ini dan letakan tepat di atas kode ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn35shmDK_wgp_t2HxYnBmZ9YNyGlGUsojdWFVymwwzXJXSGjBE2PjGXJB0xXLl7wJpXopKTsp5kQObjufw4a0thw5Ryt6-0-LHYv6KjmpJPQaoJCVOcLoYiAm5yfQMgteLDcThaLuQGtm/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

4. Lalu copy code dibawah ini dan letakan tepat dibawah </article>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Post Widget Start -->
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Related Post&lt;/h4&gt;&quot;,
numPosts: 6,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<!-- Related Post Widget End -->

</b:if>

</b:if>
</b:includable>

5. Save template.

Selesai, nah untuk melihat hasilnya, silahkan lihat di bawah posting blog anda, namun jika anda mengalami keluhan dalam tutorial ini, silahkan ajukan di kolom komentar, lebih dan kurangnya saya mohon maaf, semoga sukses selalu.

Cara Merubah Cursor Menjadi Animasi Lucu Unik Keren

Cara Merubah Cursor Menjadi Animasi Lucu Unik Keren, Sobat blogger, apa pernah anda mengunjungi sebuah blog, ketika kita ada di blog tersebut, cursor mouse kita berubah menjadi lucu dan unik keren, bahkan seperti cursor seorang peri cinta kaya di tv, wkwkwk, untuk cara mempercantik blog semua bisa di lakukan, termasuk mengubah atau membuat cursor menjadi lucu, unik dan keren, nah biasanya hal seperti ini memang punya kesan tersendirinya pada blog.
Apa sobat blogger juga ingin mengubah atau membuat cursor pada blog anda, sekarang saatnya saya akan membuat tutorial cara merubah cursor mouse menjadi keren lucu dan unik. yu jika anda sekarang ingin mengubah cursor tersebut menjadi keren lucu dan unik, ikuti tutorial yang saya berikan.

Mengubah Cursor Menjadi Animasi Lucu Unik Keren

Cara Mengubah Widget Cursor Menjadi Animasi Lucu Unik Keren Pada Blog

1. Pertama anda buka atau klik link ini http://www.cursors-4u.com/anime/
2. Pada halaman baru, pilih salah satu widget cursor anime yang anda suka atau pilih kategori lainnya dan klik pada icon tersebut.
Lihat contoh gambar di bawah :
Cara Mengubah Cursor Menjadi Animasi Lucu Unik Keren
3. Jika anda sudah memilih salah satu cursor, klik icon tersebut, maka akan muncul halaman baru.
4. Sekarang buka akun blogger anda, Pilih menu Tema / Template > klik edit HTML.

Cara Mengubah Cursor Menjadi Animasi Lucu Unik Keren di Blog

-Copy kode pertama dan letakan diatas kode </body>
-Copy kode kedua dan letakan diatas kode ]]></b:skin> atau </style> 
Cara Mengubah Cursor Menjadi Animasi Lucu Unik Keren di Blog
5. Jika sudah klik save template dan lihat hasilnya :)
Oke sobat blogger, saya rasa sudah cukup di tutorial "Cara Mengubah Cursor Menjadi Animasi Lucu Unik Keren di Blog" sukses selalu. :)

cara membuat widget social media sticky keren dan sudah valid HTML


Sobat blogger kali ini saya ingin berbagi sebuah tutorial tentang cara membuat widget social media sticky keren dan sudah valid HTML5 , jadi widget ini berisi social button yang di  terapkan sekaligus di satu kolom widget, untuk kegunaan widget ini sendiri, tentu saja untuk menambahkan followers kita dan untuk penampakannya silahkan lihat gambar di bawah ini.

Cara Membuat Widget Sticky Valid HTML5

Nah itu adalah contoh untuk gambarnya, kalo mau lebih jelas bisa lihat di sidebar blog saya, karena saya juga menggunakan widget ini dan jika anda juga tertarik untuk memasangnya silahkan ikuti tutorial yang saya berikan :

Cara Membuat Widget Social Sticky Valid HTML5.
1. Buka akun blogger anda
2. Pilih Menu Template > Klik Edit HTML.
3. Sekarang letakan kode di bawah ini tepat di atas kode </body>

 
<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
$(document).ready(function(){
$("#on-top").sticky({topSpacing:0});
});
</script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'>
//]]>
</script>

4. Klik Save template anda.
5. Sekarang Pilih Menu Tata Letak > Add Gadget > HTML/Javascript dan paste kode di bawah ini di kolom.

<div id="on-top"><div style="background:#3498db;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;"><a href="http://www.blogger.com/follow-blog.g?blogID=ID-BLOGGER" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#000">Now</span></a></div><div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'><div style='background:#fff;margin:0;'><div class="fb-like-box" data-href="https://www.facebook.com/ID-FACEBOOK" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div><div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/ID-TWITTER" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @NAMATWITTER</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://www.madamvia.web.id/"></div></div></div><div class="g-person" data-href="//plus.google.com/ID-GOOGLE+" data-layout="landscape" data-rel="author"></div></div>
Silahkan anda ubah yang saya tandai biru sesuai ID anda dan klik save template.

Selesai, nah itulah tutorial cara membuat widget  button social di sidebar blog anda, oke sobat, atas rasa syukur yang sedalam-dalamnya kepada Allah SWT,mari kita ucapkan Alhamdulillah dan semoga di malem tahun baru ini tahun 2015 dan untuk kedepannya, semoga kita menjadi manusia sebaik-baiknya manusia, yang pasti semoga kita menjadi lebih baik dari tahun sebelumnya, lebih sukses, paling utamanya semakin taat kepada sang khaliq.. selamat malam..

Cara Membuat Iklan Parallax di Posting Blog 2017

Cara Membuat Iklan Parallax di Posting Blog. Apa sih iklan parallax scrolling itu sobat, parallax ini mungkin bisa dikatakan sebuah desain atau efek pada obyek diam saat discroll, setau saya sih begitu, karena memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai menyesuaikan diri dengan perkembangan tersebut, ya seperti contoh salah satunya dengan teknik iklan parallax ini.

Jelas hal ini untuk mengundang perhatian pembaca pada tampilan iklan tersebut, seperti contoh gambar di atas ini, dan untuk memanjakan mata pembaca dengan membuat tampilan iklan tersebut menjadi parallax, karena kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bagian body web, kurang lebihnya seperti itu penjelasan tentang iklan parallax tersebut, tutorial cara membuat iklan parallax ini saya ambil kodenya dari mas Adhy kompiajaib, sebelumnya terimakasih banyak mas adhi.

Maka untuk update terbaru pun saya tidak mau ketinggalan, dan sekarang jika sobat berminat untuk membuat iklan parallax tersebut diblog sobat, silahkan ikuti tutorialnya.. 

Cara Membuat Iklan Parallax di Blog

1. Buka akun blogger Anda
2. Pilih menu template >> klik edit HTML
3. Sekarang letakan kode dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}
@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>
Selanjutnya sobat cari kode seperti ini <div class='post-body entry-content' 
Jika sudah ketemu, lalu letakan kode dibawah ini tepat diatas kode tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGCc_AL1H023kEG_O1tPthyphenhyphenzv80Z1PVLkr-G1RE579NkXKaym-fcjRGZQDcO3JLZUBnCZe_3ccQRhbnwxWsHvvSqCSQGCRfNIQYZoL5vQApoHtvxMJp6MfCBryD12TWKFpPkyeYBoRsqaq/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>
Silahkan ganti kode gambar atau banner yang saya tandai warna biru dengan gambar atau banner iklan blog sobat atau bisa juga diganti  dengan kode iklan adsense sobat, nah cara membuat iklan parallax tersebut ternyata memang sangat mudah sobat. hehe..

Cara Membuat Template Blog Valid HTML 5

Membuat Template Blog Valid HTML5. Dengan mengikuti tren evolusi HTML ke dalam spesifikasi HTML5, saya juga tidak ingin ketinggalan tentang desain blog berbasis html5, maka saatnya sekarang  anda juga perlu perubahan pada template anda dan mengadopsi HTML5 tag markup semantik ke dalam desain website atau blog anda. , W3C telah melakukan penyampaian tentang pengembangan web untuk html5, browser dan algoritma spider, sekarang saya akan memberi panduan sederhana dalam rangka pengembang web yang dapat anda mulai dengan menggunakan beberapa elemen HTML5 dan CSS3. untuk menyingkat waktu dan tidak mau berbicara panjang lebar tentang HTML5. Mari sekarang kita lakukan perubahan untuk mengadopsi html5 pada template anda.

Cara Membuat Template Blog Valid HTML5

Sekarang silahkan backup template anda sebelum melakukan tutorial ini,untuk jaga-jaga bila terjadi kesalahan erorr dan bisa di kembalikan ke template semula.

Cara Membuat Template Blog Valid HTML5

Langkah 1.  Silahkan anda cari kode seperti dibawah ini.  (Kode bisa di lihat di paling atas )

 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Kalo sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

Langkah 2. Ganti kode </html> menjadi </HTML> ( Kode bisa di lihat di paling bawah )
Langkah 3. Sekarang anda cari kode seperti di bawah.

 <b:include data='blog' name='all-head-content'/>

Kalo sudah ketemu ganti kode tersebut dengan kode di bawah.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Langkah 4. Sekarang anda cari kode <b:skin><![CDATA[ dan ganti kode tersebut dengan kode di bawah ini.

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>

Langkah 5. Sekarang anda cari dan hapus semua kode seperti di bawah.

<b:include name='quickedit'/>

Langkah 6. Hapus lagi kode seperti di bawah.

<a expr:name='data:post.id'/>

Langkah 7. Hapus lagi Kode seperti di bawah.

<b:include data='post' name='postQuickEdit'/> 

Langkah 8. Hapus kode seperti di bawah ini, kalo tidak ada silahkan lewati saja.

<div class='post-share-buttons goog-inline-block'>...sampai...</div>

Langkah 9. Ganti semua kode & menjadi &amp;

Langkah 10. selanjutnya hapus semua kode seperti di bawah ini satu persatu.

- allowtransparency='true'
- frameborder='0'
- src=''
- scrolling='no'
- width='100%'
- style='display: none'
Klik save template dan selesai. meski sebenarnya ini tidak 100% full valid Html 5, namun dengan tutorial ini, maka anda dapat mengurangi erorr di W3C Html. Kurang dan lebih nya saya mohon maaf dan semoga bermanfaat.

Cara Pasang Tombol Widget Google+ Badge di Blog

Cara Pasang Tombol Widget Google+ Badge di Blog. Google Plus (Google+) telah menjadi faktor penting dalam membuat konten atau peringkat situs web Anda lebih tinggi pada hasil penelusuran Google (meskipun tidak secara langsung) . Jadi, jika Anda bekerja keras untuk mempromosikan situs web / blog Anda dan membawanya ke puncak SERP Google, jangan lewatkan menambahkan lencana laman atau profil Google+ untuk hal ini.
Cara Pasang Tombol Widget Google+ Badge di Blog

Membuat dan menambahkan lencana Google+ ke blog atau situs web Anda memiliki manfaatnya sendiri. lalu apa sebenarnya google plus badge itu?

Apa itu Google Plus Badge?

Lencana Google+ mirip dengan tombol Facebook Like atau Share atau tombol Tweet dari Twitter yang Anda bisa pasang di samping konten blog atau situ, untuk membantu audiens atau pengunjung untuk mebagikan konten Anda di antara lingkaran media sosial tersebut. Ini bisa mendapati pengunjung kita untuk mengikuti kita secara langsung dan terhubung dengan halaman bisnis atau profil Anda hanya dengan sekali klik, dari situs Anda sendiri.

Apa Manfaat Menambahkan Google Plus Badge?

Membuat lencana Google+ untuk laman prfil Anda dan menempatkannya di blog dan situs web Anda, memberi Anda keuntungan untuk membuat Markup Penayang (memverifikasi Anda sebagai penerbit Google yang terverifikasi) . Untuk ini, yang Anda butuhkan hanyalah tautan balik dari Google Plus ke situs web Anda dan Anda dapat mengotentikasi konten Anda.

Keterlibatan Langsung:

Google Plus Badge akan memungkinkan pengunjung situs kita agar bisa terhubung langsung dengan kita sebagai pemilik situs. Jika pengunjung menyukai konten kita, mereka dapat mulai mengikuti kita dan pos yang kita publish di Google+. Sama seperti like Facebook- yang dengan cepat dan efektif terhubung ke media sosial tersebut.

Cara Pasang Tombol Widget Google+ Badge di Blog

2. Pada halaman baru, Anda akan di lihatkan pada pengaturan tampilan google+ badge tersebut..
silahkan Pilih user atau admin yang ingin ditampilkan, atur terlebih dahulu dalam tampilan dan lebar dari weidget tersebut atau anda bisa juga dengan memilih hanya menampilkan icon saja.
 
Cara Pasang Tombol Widget Google+ Badge di Blog
3. Jika sudah selesai, silahkan scroll sedikit kebawah dan anda akan melihat sebuah kode yang sudah di sediakan dan diperbaharui agar sesuai tampilan.
4. Silahkan copy semua kode tersebut 
Cara Pasang Tombol Widget Google+ Badge di Blog
5. Sekarang buka akun blogger anda.
  • Pilih menu tata letak >> Tambah gadget >> HTML Java/Script
  • Paste code tersebut didalam kolom yang sudah disediakan.
  • Lalu klik save.
  • Lihat hasilnya.

Cara Membuat Tombol Demo Download Otomatis (Font Awesome)

Cara Membuat Tombol Demo Download Otomatis (Font Awesome) Membuat tombol demo download ini memang sudah banyak di berikan oleh blogger lain, namun saya jarang sekali menemukan tutorial dengan menggunakan font awesome, bagi anda seorang blogger yang menggunakan niche template atau blog download, tombol demo download ini sangat efektif di gunakan bagi blog anda, selain sangat mudah penerapannya , tombol demo download ini juga sangat bergaya di bandingkan dengan hanya menggunakan teks saja, jadi bagi anda yang ingin membuatnya, silahkan ikuti tutorial ini.

Membuat Tombol Demo Download Otomatis (Font Awesome)

Gambar di atas adalah contoh tombol demo yang akan kita buat, kurang lebih seperti itu.

Cara membuat tombol demo download menggunakan font awesome.
1. Buka akun blogger anda
2. Pilih menu Template > Klik Edit Html
3. Lalu silahkan anda Copy kode CSS di bawah ini dan letakan tepat di atas kode </head> 

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

4. selanjutnya silahkan anda copy code dibawah ini dan letakan tepat di atas kode ]]></b:skin> atau </style>


 .buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #E55E48;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #2ecc71;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover {
background: #454242;
text-decoration:none
}

.download:hover {
background: #454242;
text-decoration:none
}

.download:before {
content : "\f019";
font-family : FontAwesome;
font-weight : normal;
padding :11px 11px 9px !important;
background : #27ae60;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

.demo:before {
content : "\f06e";
font-family : FontAwesome;
font-weight : normal;
padding : 11px 11px 9px !important;
background : #c0392b;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

5. Klik save template.

Cara menggunakannya.
Gunakan kode Html dibawah ini di mode Tab Html.

<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="http://kodingedukation.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://
kodingedukation.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Silahkan ganti url 
http://kodingedukation.blogspot.com dengan url sesuai yang anda inginkan. bagaimana, sudah mengerti? jika belum paham, silahkan tanyakan di kolom 
komentar. lebih dan kurangnya saya mohon maaf. semoga sukses.

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog


Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog, Sobat blogger, membuat efek salju bintang ataupun daun berjatuhan di blog anda, ini adalah salah satu trik untuk menghias atau mempercantik blog anda, hingga seolah olah di blog anda seperti suasana musim salju ataupun musim semi, hehe.. jadi menurut saya ketika anda ingin sekali bagaimana rasanya musim salju,ataupun semi seperti di jepang, disini anda tidak perlu lagi ke daerah yang bisa ada turun salju ataupun musim semi dengan berguguran daun seperti harus ke jepang ataupun ke kutub utara, jadi disini,anda cukup tongkrongin saja blog anda.hehe

Sobat blogger,jika anda ingin blog anda banyak di kunjungi pengunjung, tentu saja dengan membuat pengunjung senang dengan memanjakannya,terutama dalam hal tampilan blog anda juga harus enak di lihat,maka dari itu saya akan membuatkan anda tutorial bagaimana tentang cara membuat efek salju ,daun,bintang bisa berjatuhan di blog anda,intinya supaya blog anda lebih bagus dan buat pengunjung blog anda terkagum-kagum.

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

  1. Buka akun blogger anda.
  2. Silahkan pilih menu template dan klik edit Html
  3. Sekarang silahkan anda cari kode </head> 
  4. Lalu letakan salah satu kode di bawah ini tepat di bawah kode </head> 
Kode Untuk Bunga Berjatuhan, Copy kode dan letakan di atas kode </head>

<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script>

Kode Untuk efek salju berjatuhan, Copy kode dan letakan di atas kode </head> 
<script src="//helperblogger.ucoz.com/code/snow-effect3.js"></script>
Kode Untuk efek daun berjatuhan, Copy kode dan letakan di atas kode </head>  
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>
Kode Untuk efek bintang berjatuhan, Copy kode dan letakan di atas kode </head>  
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Jika sudah di letakan,klik save template anda dan lihat hasilnya.


Lihat update terbaru di bawah ini..

Cukup pilih salah satu aja ya, jangan di buat double,namun misalkan anda ingin merubah efek salju misalkan di ganti dengan efek bintang berjatuhan, maka anda harus menghapus kode sebleumnya yang di terapkan dan ganti dengan yang di inginkan, oke sobat saya rasa cukup selesai di tutorial Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog,untuk kurang dan lebihnya saya mohon maaf. salam sukses.
UPDATE 2017-2018
Karena sebagian kode ada yang tidak berfungsi, karena situs penyingkat url nya memang sudah tidak bekerja, jadi silahkan sobat untuk mencoba efek atau effect yang saya beri di bawah ini dan saya akan mengurai kode js tersebut sehingga mungkin agak panjang kodenya sobat..

Kode Untuk Efek Salju Berjatuhan

Simpan kode diatas kode </head>
<script src="//helperblogger.ucoz.com/code/snow-effect2.js"></script>

Kode Untuk Efek Bintang Bertaburan

<script type='text/javascript'> 
//<![CDATA[
var no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLCBI1amv5JY7gaPSTM9oP0eXx39XNl1AkcA3x96ciWLje9nX2Jl64gtprTE0FmEhy-6mqz4cygpQX41yvngyf50ri1rrPDO4mt_mbtC27ZfqdHw11o286XmrMibkYh9ifJmNdWG2GmM/s1600-r/nth.png";
var month_format = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var more_text = "View More";
var comments_text = "<span>Post </span>Comment";
var POSTPAGER_OLDER = "Older Article"; // post nav text "previous post"
var POSTPAGER_NEWER = "Newer Article"; // post nav text "next post"
//]]>
</script>
<script type="text/javascript">
// <![CDATA[
var speed=40; // lower number for faster
var warp=3; // from 1 to 10
var stars=150; // number of stars
var colours=new Array("#60f", "#0f6", "#39f"); // colours of stars
var position=0; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page

/****************************
* Star Warp Effect *
* *
****************************/
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var strz=new Array();
var swide=800;
var shigh=600;
warp=1+warp/125;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addRVLoadEvent(initiate_hyperjump);

function initiate_hyperjump() { if (document.getElementById) {
var i, temp;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.overflow="visible";
boddie.style.backgroundColor="transparent";
boddie.style.zIndex=position;
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(boddie, document.body.firstChild);
set_width();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.color=colours[i%colours.length];
strs[i].style.backgroundColor="transparent";
strs[i].style.position="absolute";
strs[i].appendChild(document.createTextNode("*"));
strs[i].style.font="13px monospace";
stdy[i]=Math.random()*6-3;
stdx[i]=Math.random()*8-4;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
boddie.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
var i;
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=warp;
stdy[i]*=warp;
if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) {
if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px";
strs[i].style.left=strx[i]+"px";
strs[i].style.top=stry[i]+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
strx[i]+=3*(stdx[i]=Math.random()*8-4);
stry[i]+=3*(stdy[i]=Math.random()*6-3);
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
}
}
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>

Kode untuk Efek pada mouse bintang berjatuhan

 <script async='async' type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Efek Bunga dan daun, akan saya update kembali..