Membuat Effect JQuery Link Nudging di Blog

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Membuat Effect JQuery Link Nudging di Blog

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
3. Tambahkan Script JQuery berikut diatas kode </head>
   
   view plainprint?

   1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  ></script>  
   Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
   
   view plainprint?

   1. <script type='text/javascript'>          
   2. $(document).ready(function()  {           
   3. $(&#39;#Label1 li&#39;).hover(function() {  //mouse in           
   4. $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
   5. }, function() { //mouse out            
   6. $(this).animate({ marginLeft: 0 }, 400);           
   7. });            
   8. });           
   9. </script><!-- end LinkNudging -->  
5. Terakhir Save Template anda, dan lihat hasilnya

Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat

Cara Membuat Widget Countdown Timer Di Blog

Countdown timer merupakan penghitungan waktu mundur yang biasanya digunakan menuju waktu atau hari tertentu. Yang kita ketahui biasanya countdown timer atau penghitungan waktu mundur digunakan untuk menyambut Tahun Baru atau tahun-tahun penting lainnya.

Jam pasir


Berhubung saat ini kita masih di dalam suasana Ramadhan (bulan yang penuh berkah) pastinya kita sebagai umat Islam menantikan suatu hari yang dinamakan Hari Raya Idul Fitri. Berhubung dengan judul diatas tentunya bagi seorang blogger yang barangkali sudah mengerti di bidang CSS, HTML, atau Javascript akan melakukan eksperimen untuk membuat widget countdown timer yang akan digunakan untuk lebaran atau tahun baru nanti.

Sebelumnya tutorial ini juga sudah diberikan oleh blog.kangismet.net pada tutorialnya yang berjudul Membuat Countdown Timer Tahun Baru 2015. Nah, karena itu untuk tahun baru 2014 yang waktunya sudah kita lewati. Saya berfikir untuk membuat kembali bagaimana widget tersebut digunakan untuk tahun-tahun berikutnya bahkan untuk hari-hari tertentu sesuai dengan kebutuhan kita. Berawal dari tutorial tersebut lah saya bereksperimen sedikit untuk mengubah javascript yang sudah tertera didalamnya
Berikut Cara Membuat Widget Countdown Timer :

1. Login Akun Blogger
2. Blogger > Tata Letak > Tambahkan Gadget > HTML/Java Script
3. Kemudian Masukan Script berikut :

\<style scoped="" type="text/css">
#waktumundur {
    background:rgba(19, 19, 19, 0.65);
    color:#FFC200;
    font-size:130%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
    font-family:Trebuchet MS, Verdana, Arial, sans-serif;
}
.digit {color:white}
.judul {color:white}
</style>
<div id="waktumundur">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
var target_date = new Date("Jul 27, 2014").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;  
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;  
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
  countdown.innerHTML =  days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> "
  + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju</span> <span class=\'judul\'>Idul Fitri 1435H</span>";
}, 1000);
//]]>
</script>

4. Kemudian Save.

Kode Warna Hijau Boleh diganti sesuai keinginan waktu Yang Anda Ingin kan , Sekian dan semoga bermanfaat ..

Cara Membuat Komentar admin berbeda dengan pengunjung blog

Cara Membuat Komentar admin berbeda dengan pengunjung blog

Kalau kita berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.

Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Langkah 1
Login ke blogger

Langkah 2
Blogger → Template → Edit Html

Langkah 3
Cari kode ]]></b:skin> kemudian copy paste kode di bawah sebelum kode ]]></b:skin>

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Untuk kode yang berwarna merah bisa anda ganti sesuai selera, bisa lihat kode warnanya disini
Langkah 4
Cari kode seperti di bawah:

<dl id='comments-block'> 
<b:loop values='data:post.comments' var='comment'> 
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> 
<a expr:name='"comment-" + data:comment.id'/> 
<b:if cond='data:comment.authorUrl'> 
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 
<b:else/> 
<data:comment.author/> 
</b:if> 
said... 
</dt> 
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/> 
<dd class='comment-body'> 
<b:if cond='data:comment.isDeleted'> 
<span class='deleted-comment'><data:comment.body/></span> 
<b:else/> 
<p><data:comment.body/></p> 
</b:if> 
</dd> 
</b:if> 
<dd class='comment-footer'> 
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data: 
comment.id' title='comment permalink'> 
<data:comment.timestamp/> 
</a> 
<b:include data='comment' name='commentDeleteIcon'/> 
</span> 
</dd> 
</b:loop> 
</dl>

Kode warna merah yang di tulis tebal (bold) adalah kode baru yang harus di sisipkan di antara kode di atas.
Langkah 5
Simpan template! Sekarang lihat artikel yang ada komentar anda, sudah berubah tampilannya apa belum? Oya saat menuliskan komentar anda harus dalam sign in diaccount anda.
Kalau ingin komentar Admin memiliki background image seperti gambar dibawah ini:

Ganti saja backgroundnya dengan URL gambar anda!
Selamat mencoba, semoga bermanfaat. 

Cara menghilangkan tang dan obeng di blog

Cara menghilangkan tang dan obeng di blog

Cara  menghilangkannya tang dan obeng dari tampilan blog milik kita, tampilan tang dan obeng ini pd saat kita berada dalam keadaan login,
Caranya cukup mudah untuk menghilangkan tang dan obeng karena
kita hanya perlu menambahkan kode yang fungsinya untuk menghilangkan tampilan tang dan obeng tersebut.



 

Adapun cara untuk menghilangkan tang dan obeng di blog ini antara lain sebagai berikut:

• Masuk/Login ke akun blogger.
• Klik rancangan.
• Klik edit HTML.
• Klik expand template widget.

Cari kode berikut.

]]></b:skin>

Masukan kode berikut tepat di atasnya ]]></b:skin>

.quickedit{
display:none;
}

 

Klik simpan template dan selesai.

Cara membuat Text berjalan di addres bar pada blog/website

Cara membuat Text berjalan di addres bar pada blog/website

Selamat siang gan 
kali saya akan membahas tentang bagaimana
cara membuat tulisan berjalan di addres bar
lansung saja langkah-langkahnya berikut ini :

• Login ke akun BLOGGER anda
• Klik Rancangan ---  Edit HTML
• Download template anda untuk mengurangi kesalahan penulisan script
• Centang Expand Template Widget
• Cari kode     </head>  (untuk mempermudah tekan CTRL + F)
• Copy kode berikut dan letakkan di atas kode   </head>

-----------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
//<![CDATA[
msg = "::Selamat datang::";
msg = "-Tips dan Trick-" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
---------------------------------------------------------------------------------------------------------------

• Ganti tulisan tebal bewarna biru ganti dengan tulisan sesuka hati sobat
• dan simpan template anda selesai.
  
  Semoga Bermanfaat