Cara Yang Benar Tambahkan kode JavaScript di Blogger

Sambil menambahkan kode javascripts dalam template editor Blogger, kita sering menghadapi beberapa Kesalahan XML aneh seperti Kesalahan parsing XML, baris 768, Kolom 20: Isi elemen harus terdiri dari data karakter well-formed atau markup. Ini macam kesalahan terjadi ketika kode JavaScript tidak terbentuk dengan baik, atau kode tersebut tidak ditulis dengan benar oleh pengembang. Baru-baru ini, salah satu pengguna kami meminta kami Cara Yang Benar Tambahkan kode JavaScript di Blogger? Tutorial ini akan berubah menjadi berguna bagi mereka yang baru mulai belajar template Blogger dan pengembangan plugin. Pada artikel ini, kami akan menunjukkan Cara Yang Benar Tambahkan kode JavaScript di Blogger?

Kecerobohan:

Sebelum menginstal kode baru dalam template nya seseorang harus memastikan bahwa tag script atau gaya ditutup dengan benar. Sebagian besar waktu Anda lupa untuk menyalin tag script berakhir, dan pada akhirnya pada akhirnya itu menunjukkan kesalahan. Bagi mereka yang tidak tahu banyak, mereka menggunakan kode seperti ini:

<script>
jQuery(document).ready(function($) {
---------------------------
---------------------------
---------------------------
});

Di sini, jelas dapat dilihat bahwa tag <script> tidak dilanjutkan dengan penutup yang tepat    </script> tag yang salah. Teknik yang benar adalah dengan menutup tag dengan benar, seperti yang kita lakukan dalam HTML sederhana. Mari kita pergi ke depan dan melihat cara yang tepat untuk melakukannya.

Cara Benar Tambahkan kode JavaScript di Blogger?

Menambahkan Script di Blogger sangat mudah. Yang perlu Anda lakukan adalah pergi ke Blogger.com >> situs Anda >> Template >> Edit HTML. Sekarang tergantung pada Anda di mana Anda ingin menyisipkan coding JavaScript Anda. Namun, kami lebih suka Anda untuk menambahkannya di atas </head> tag karena ini adalah tempat di mana semua hal-hal teknis yang hadir. Berikut adalah cara kode akan terlihat seperti:

<script type="text/javascript">
//<![CDATA[
Your JavaScript coding here
//]]>
</script>

Setelah script yang benar ditambahkan dalam template Anda tekan tombol "Simpan Template", dan Anda tidak akan menghadapi kesalahan. Yang berarti bahwa JavaScript secara benar ditambahkan dalam template blogger Anda.

Kami harap tutorial ini telah membantu Anda untuk belajar Cara Yang Benar Tambahkan kode JavaScript di Blogger. Marilah kita tahu tentang pengalaman Anda? Dalam kasus Anda menghadapi kesalahan seperti ini juga. Jangan ragu untuk meninggalkan kesalahan di bawah ini yang anda hadapi sambil menambahkan kode baru untuk template Anda.

Read more ...

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

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

Apa Bitly:

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

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

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

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

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

<!-- Short URLs Script TB -->

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

<div id='shoternUrl'>

<form id='shorturl'/>

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

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

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

BitlyClient.addPageLoadEvent(function(){

BitlyCB.myShortenCallback = function(data) {

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

var result;

for (var r in data.results) {

result = data.results[r];

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

break;

}

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

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

});

</script></div>

    </b:if>

<!-- Short URLs Script  TB -->

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

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

Read more ...

Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger

Demo

Baru-baru ini, salah satu pembaca meminta kami Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger? Pemain musik dibahas sebagai sumber utama daya tarik bagi beberapa pengguna umum. Oleh karena itu, hari ini di artikel ini, kami akan menunjukkan cara untuk menambahkan HTML5 Music Player dengan Playlist di Blogger.

Instalasi HTML5 Music Player di Blogger:

Hal pertama yang harus Anda lakukan adalah untuk login ke Dashboard Blogger Anda melalui akun Google Anda. Setelah login ke account Anda, dari daftar blog Anda, pilih bahwa blog yang Anda ingin menginstal HTML5 Music Player. Sekarang pergi ke Template >> Edit HTML dan cari tag </ head> berakhir. Setelah menemukan tag, tepat di atas itu paste kode berikut.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

Setelah semuanya dilakukan, itu adalah masa untuk menyimpan template Anda. Hanya tekan tombol "Simpan Template" tombol terletak di sudut kanan atas layar monitor Anda. Sekarang pindah ke langkah berikutnya ke depan.

Menambahkan HTML 5 Music Player di Blogger:

Hal berikutnya adalah menambahkan pemutar musik HTML5 baik pada sidebar Anda atau ke halaman tertentu / posting di situs Anda. Hal ini sepenuhnya tergantung pada kebutuhan Anda, apakah Anda ingin menjadi sidebar Anda, posting, halaman atau tempat lain. Ini akan bekerja dengan baik di mana-mana. Ikuti petunjuk berikut dengan benar.

Pergi ke Blogger >> Tata Letak >> Tambah Gadget >> Tambahkan HTML / JavaScript dan hanya paste kode berikut ke dalam kotak teks HTML. Sekarang Anda mungkin ingin menyesuaikan Pemutar musik Anda sehingga sebelum kita menyimpan gadget memungkinkan mempelajari bagaimana Anda dapat menyesuaikannya. Misalnya, Mengubah, Musik, dan lain-lain Covers.

<div class="mbl">
 <div class="mbl_player" id="mnplp">
  <div class="mbl_art_bg"></div>
  <img class="mbl_cover" src="" alt=""/>
  <span class="mnpl_title"></span>
  <span class="mnpl_author"></span>

  <div class="mnpl_volume_min"></div>
  <div class="mnpl_volume"></div>
  <div class="mbl_volume_max"></div>

  <div class="mnpl_toolbar">
   <div class="mnpl_tlb_prev"></div>
   <div class="mnpl_tlb_stop"></div>
   <div class="mnpl_tlb_next"></div>
   <div class="mnpl_current"></div>
   <div class="mnpl_long"></div>
   <div class="mnpl_all"></div>
  </div>

  <div class="mbl_playlist">
  </div>
 </div>
 </div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
    ]
   });
  });
 </script>

Customization:

1. Judul: Merupakan judul musik atau lagu.
2. mfile: Ini merupakan file musik dalam ekstensi mp3.
3. Penulis: Nama orang yang terdiri musik.
4. meliputi: gambar jempol Sampul yang muncul saat lagu diputar.
5. background: Gambar yang ditampilkan di latar belakang dari pemutar musik.

Selamat: Setelah menyesuaikan, tekan tombol "Simpan" yang terletak di bagian bawah jendela. Sekarang, pergi dan memeriksa situs Anda. Saya cukup yakin situs Anda akan batu sekarang. Marilah kita tahu tentang pikiran Anda pada gadget luar biasa ini.

Kami berharap bahwa Anda telah dipuja dan belajar Cara Menambahkan HTML5 Music Player dengan Playlist di Blogger. Gadget ini sangat kuat dan mengambil detik untuk memuat, sehingga dapat dimengerti bahwa hal itu tidak akan mempengaruhi kecepatan situs Anda sama sekali. Marilah kita tahu apa yang Anda pikirkan tentang hal itu.

Catatan: Widget ini tidak akan bekerja sampai Anda akan menyesuaikannya. jadi, pastikan Anda benar menyesuaikan sesuai dengan petunjuk yang kami sebutkan di atas.

Read more ...

Bar halaman untuk kontrol Sroll blog

Dalam web browser biasanya orang menggunakan mouse untuk menggulir antar halaman, atau seseorang seperti Anda menginstal Synaptics touchpad untuk menggulir halaman dalam spiral sangat berguna? Namun, 4 tombol fungsi: Rumah , Page Up , Page Down dan End akan membantu mengurangi manipulasi jari, terutama ketika membaca paragraf panjang. Saya akan memandu Anda untuk membawa 4 dan blog fungsi yang harus dikendalikan oleh mouse klik, selain menambah fungsi scrolling halaman otomatis sangat berguna untuk membaca blog yang mengkhususkan diri dalam cerita. 

Demo di bagian gambar atas. Menambahkan kode di bawah ini ke dalam sebelum tag </ body>  dalam template Anda.

<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwKQNnT3tM3M2-VVjigO6ACjGubMLDy6iZ5LFEU2qOQCfHRpXuWqRRHiEaFejUIrUEIgxSCxB3GFqJXBXNN-HGhTNWp0l9Joy5NBIuuRtMUPzaDbC3YFVn89g2oCty009MESGNob6UG0/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Selamat : Anda sudah berhasil memasang Bar halaman untuk kontrol Sroll blog. silahkan cek apakah script sukses apa tidak.

Read more ...

Widget Recent Comments dengan gaya Message Windows 8

Windows 8 resmi dirilis pada akhir Oktober lalu dan membuat dunia menggelegar. dan untuk saat ini saya kan memberikan widget Recent Comments bergaya Message Windows 8, Widget ini menurut saya sangat keren, widget ini menggunakan CSS dan JavaScript. Langsung saja Lihat cara Memasang Widget Recent Comments dengan gaya Message Windows 8.

Langkah 1 : Tambahkan kode berikut sebelum tag ]]> </ b:> skin dalam template Anda.

#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Langkah 2: Tambahkan 1 widget HTML / Javascript di mana Anda ingin menampilkan Recent Comments . Mengedit teks dan paste kode berikut ke dalam konten dan pilih SIMPAN .

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPuD8glJiTTp7oa1o4WvLJb-owtZAtWzlClU0vj_4LS9NkMUFL3fL20YQYntYdk07bhLYE1NsAp9PpYaTeKdPH_E4-3G-ijw1twF2JzOd_Ym-h4CYiwTOLNP919USTenpXHwAOSUzSAQQ/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

Selamat: Anda telah berhasil Memasang Widget Recent Comments dengan gaya Message Windows 8. 

Read more ...

Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda

Salah satu pengguna kami baru-baru ini bertanya bagaimana kita menambahkan navigasi keyboard dalam posting blog Blogger. Standar template Blogger menampilkan tautan navigasi melalui lama dan baru Link posting yang biasanya muncul di bagian paling bawah halaman Blogger dicapai. Namun, kami telah melihat banyak WordPress serta situs berbasis HTML yang digunakan navigasi Keyboard Dari pengalaman dan pengetahuan kami, navigasi keyboard cepat, handal dan nyaman. Hari ini di artikel ini, kami akan menunjukkan Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda.

Metode ini bekerja dengan JavaScript, sehingga membuatnya jauh lebih mudah untuk menerapkan dan membuatnya aman. Namun, itu akan berhenti bekerja jika seseorang akan mematikan JavaScript, sehingga ada beberapa kelemahan yang perlu Anda ketahui sebelum menerapkannya ke blog atau website Anda. Ia bekerja cukup baik pada Homepage, halaman Arsip dan bahkan halaman posting. Yang perlu Anda lakukan adalah untuk Tekan tombol panah kiri dan kanan untuk menavigasi.

Catatan: Jika Anda ingin menavigasi ke halaman berikutnya, Anda akan tekan tombol "Kanan Arrow Key" dan ketika Anda ingin menavigasi ke halaman sebelumnya, Anda akan tekan tombol "Left Arrow Key" terletak pada keyboard Anda.

Sebelum Anda mempelajari cara kerjanya, Mari kita lihat Demo Here

Hal pertama yang perlu Anda lakukan adalah untuk login ke dashboard blogger Anda. Sekarang pergi ke Blog Anda >> Template >> Edit HTML dan cari berakhir </ head> tag. Setelah menemukan tag, hanya di atasnya paste coding JavaScript berikut. Setelah semuanya dilakukan tekan tombol "Simpan template" tombol yang terletak di bagian bawah untuk menyimpulkan.

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
};
</script>

Selamat: Itu saja, sekarang mengunjungi blog Anda dan Tekan salah "Kiri" atau "Kanan" tombol panah untuk melihat bagaimana semuanya bekerja dengan sempurna. Hal ini sangat responsif dan bekerja dengan cukup baik.

Banyak pengguna masih percaya bahwa menggunakan JavaScript dapat menyebabkan kelambatan, tapi ini bukan apa yang kita harus berpikir. Jika naskah dioptimalkan dengan benar, maka tidak ada cara itu bisa mempengaruhi kecepatan situs Anda. Di sini, di Tempat Blogging, kami menggunakan lebih dari 20 file JavaScript, namun kecepatan halaman masih 90 + dari 100.

Kami harap tutorial ini telah membantu Anda untuk memahami Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda. Apa sistem navigasi yang Anda gunakan? Marilah kita tahu apa yang Anda pikirkan tentang tutorial ini? Jangan ragu untuk meninggalkan saran Anda di komentar di bawah. 

Read more ...

Membuat Widget Related Post dengan Efek CSS Hover

Hari ini saya berbagi  Membuat Widget Related Post dengan Efek CSS Hover. Ini widget related post dibuat dengan javascript dan didesain dengan css. mudah untuk diinstal pada blogger template tidak perlu menggunakan linkwithin dan layanan lainnya untuk menciptakan widget ini.

Cukup tambahkan script ini untuk template blogger Anda yang ditunjukkan pada bawah langkah demi langkah tutorial. dengan fitur widget ini Anda bisa mendapatkan tampilan halaman lebih banyak dari pengunjung dan mendapatkan lebih banyak uang dari adsense.


Bagaimana kerjanya?

Widget terkait ini bekerja seperti tag label, ini java script memanggil semua tag label terkait dan menyelaraskan dalam jenis script ini menangkap semua posting gambar dan link terkait di bingkai dalam ukuran yang sama.

Cara Memasang  Widget Related Post :


Langkah 1
Pertama backup template Anda
Pergi ke > Edit Template> dan tekan Ctrl + F
Sekarang cari ]]> </ b: skin>

Langkah 2
Sekarang Paste kode ini di atas ]]> </ b: skin>

/*--- ------Related Posts --------------------*/
#related-posts {
margin: 1px 0px 15px 0px!important;
background: white;
height: 265px;
width: 600px!important;
padding: 0px 0px 0px 0px!important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 10px 0px!important;
padding: 15px 15px!important;
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
color: white;
font-weight: 600;
line-height: 14px;
text-transform: capitalize;
none repeat scroll 0% 0% rgb(255, 255, 255) !important;
background: #900000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0px 2px 4px #333;
}
#related-posts-text {
font-size: 1.1em !important;
font-weight: 600 !important;
line-height: 1.45em !important;
font-family: Helvetica,Arial,sans-serif !important;
width: 120px;
padding-left: 3px;
height: 65px;
border: 0pt none;
margin: 3px 0pt 0pt;
}
#related-posts img {
border: 2px solid #ccc ;
padding: 3px !important;
overflow: hidden;
width: 110px;
height: 90px;
margin:3px;
border-radius:4px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity:1;
}
#related-posts img:hover {
border: 2px solid #333;
opacity:0.5;
}
#related-posts a {
color:#666;
}
#related-posts a:hover{
color:#333;
}

 Langkah 3
Sekarang Cari </ head>
dan paste kode ini di atasnya

<!--Related Posts Scripts and Styles Start-->
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh28m_D31A4IcaISlko8zt3m5pDnonsjxqTm8tikNFh2unLkgC5vfJORz1BiDdAXcFC1NHdImTCNoM0yDZTwF1gSKF50E5e2ekE1G6YFNjBAlfgGwkbDPKp9BAN0UTXWViDP9PwrLmUu8Y/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Topics:";
</script>
<script>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
var thumburl = new Arrayundefined);
function related_results_labels_thumbsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch undefinederror){
s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);
ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!=""))
{thumburl[relatedTitlesNum]=d;} else {ifundefinedtypeofundefineddefaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]
="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh28m_D31A4IcaISlko8zt3m5pDnonsjxqTm8tikNFh2unLkgC5vfJORz1BiDdAXcFC1NHdImTCNoM0yDZTwF1gSKF50E5e2ekE1G6YFNjBAlfgGwkbDPKp9BAN0UTXWViDP9PwrLmUu8Y/s1600/no_image.jpg";}
}
ifundefinedrelatedTitles[relatedTitlesNum].length>45) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substringundefined0, 45)+"...";
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbsundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
var tmp3 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!contains_thumbsundefinedtmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}

function printRelatedLabels_thumbsundefinedcurrent) {
var splitbarcolor;
ifundefinedtypeofundefinedsplittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
forundefinedvar i = 0; i < relatedUrls.length; i++)
{
ifundefinedundefinedrelatedUrls[i]==current)||undefined!relatedTitles[i]))
{
relatedUrls.spliceundefinedi,1);
relatedTitles.spliceundefinedi,1);
thumburl.spliceundefinedi,1);
i--;
}
}

var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
ifundefinedrelatedTitles.length>0) document.writeundefined'<h2>'+relatedpoststitle+'</h2>');
document.writeundefined'<div style="clear: both;"/>');
while undefinedi < relatedTitles.length && i < 20 && i<maxresults) {
document.writeundefined'<a style="text-decoration:none;padding:5px;float:left;');
ifundefinedi!=0) document.writeundefined'border-left:solid 0.5px '+splitbarcolor+';"');
else document.writeundefined'"');
document.writeundefined' href="' + relatedUrls[r] + '"><img  src="'+thumburl[r]+'"/><br/><div id="related-posts-text">'+relatedTitles[r]+'</div></a>');
i++;

if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.writeundefined'</div>');
relatedUrls.spliceundefined0,relatedUrls.length);
thumburl.spliceundefined0,thumburl.length);
relatedTitles.spliceundefined0,relatedTitles.length);
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

Langkah 4
Langkah akhir
sekarang mencari <div class='post-footer'>
setelah menemukan kode ini pastekan kode di bawah ini di atas kode  <div class='post-footer'>
jika widgetnya tidak muncul taruh kode berikut dibawah kode <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<!--Related Post Start-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><br/><div style='clear:both'/>
<div style='clear:both;'/>
</b:if>

 Langkah 5

Save Template anda.

Sekian dulu Postingan Artikel kali ini yang membahas tentang  Membuat Widget Related Post dengan Efek CSS Hover semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Read more ...

Membuat Customized Recommendation Widget Sosial untuk Blogger

Dalam posting ini saya akan menjelaskan bagaimana menambahkan Customized Recommendation Widget Sosial untuk Blogger. sebenarnya ini hanya widget. Anda dapat menambahkannya ke blog Anda dengan mudah. ikuti langkah-langkah di bawah ini. Ini termasuk Google Plus, Like Facebook dan twitter counter. Pergi ke bawah untuk melihat demo dan widget sosial lainnya.

All Widget Sosial Demo

Cara Memasang Widget :

1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8WbAg36lHPiTOlymtN2fUKUkGR3yP7tlMqeVkz9Dh_gwuETvrBFmiNYcB8aI7mel23uI_zMR0gXQmyNB5lptZoY1laN3TqRKBN2ly8u8fiB_GVXtIF2Do0sVEdhBSmuitilsbwfxEbw/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTempatBlogging&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/TempatBlogging" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class='clear'></div>

 Information :

• Ganti TempatBlogging dengan nama pengguna facebook Anda
• Ganti TempatBlogging dengan twitter Username

      6. Save HTML/Javascript.

Sekian dulu Postingan Artikel kali ini yang membahas tentang Membuat Customized Recommendation Widget Sosial untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Read more ...

Membuat Related Post Thumbnail Dengan Komentar Hover Untuk Blogger

Membuat Related Post Thumbnail Dengan Komentar Hover Untuk Blogger - Related post yang lebih bermanfaat untuk menjaga pengunjng lama Anda. Kau tahu bagaimana? ketika pengunjung Anda selesai membaca posting Anda, meraka akan mendapat link posting serupa. oleh karna itu sebagian besar adalah kekuatan untuk membacanya. Dan jika anda menggunakan beberapa Related Post Efek Thumbnail. Pengunjung akan lebih memaksa untuk membaca Artikel Anda yang lain. Periksa gambar untuk melihat efek Hover.
Bagaimana menambahkan posting terkait dengan thumbnail ke blogger.??

1. Masuk ke akun blogger dan Pergi ke Desain >> Edit HTML
     (pastikan backup dulu template anda)
2. Find tag ini dengan menggunakan Ctrl + F]]> </ b: skin>
3. Paste kode di bawah sebelum]]> </ b: skin> tag

/* Related Post Widget */
#related-posts{
float:left;
height:160px;
margin-bottom:10px;
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}
#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}
#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}

#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}

#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}

6. Cari kode ini lagi <data:post.body/>
7. Paste kode di bawah ini setelah kode diatas.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

8. Sekarang Simpan template. Anda selesai. 

Sekian dulu tentang Artikel Membuat Related Post Thumbnail Dengan Komentar Hover Untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Read more ...

Cara Membuat Blog Anda Siap untuk Ponsel

Cara Membuat Blog Anda Siap untuk Ponsel - Anda dapat membuat blog Anda untuk ponsel browsing. sehingga orang dapat mengunjungi blog Anda dari ponsel. ketika yang normal butuh waktu lama waktu untuk memuat halaman. tapi setelah hal ini akan bisa memuat cepat,

1. Pergi ke Akun blogger Anda >> Desain >> Edit HTML

2. Cari tag ini dengan menggunakan Ctrl + F

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

3.Paste kode di bawah ini setelah tag diatas

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

 4. Sekarang klik Preview dan klik simpan template. Anda telah selesai.

Itulah Cara membuat blog Anda siap untuk ponsel. Semoga Bermanfaat dan Suksess. :D

Read more ...