Menambahkan Effect Link Nudging Pada Bloger Dengan CSS3

Setelah fakum sekian waktu agak sedikit bingung, mau mendahulukan postingan dengan tema apa ya? Karena draft dalam windows Live Writerku ternyata tidak sedikit. Menulis tutorial memang mudah, tapi butuh waktu untuk mempraktekkan dan sukses dengan eksperimen kecil itu, tentunya untuk meyakinkan para blogger bahwa suatu script bekerja, kode CSS dan HTML yang ada benar sehingga dengannya para bloggerpun tertarik untuk mencoba.

Nah karena pada postingan sebelumnya saya pernah mengetengahkan cara menambahkan link nudging dengan JQuery, kali ini saya akan berbagi cara menambahkan effect link nudging dengan CSS3. Bahkan effect inipun bisa diterapkan pada image. Berikut langkah-langkah menambahkan effect link nudging pada blogger

1. Sign in ke account anda

2. Pada dasbor => Rancangan / Design => Edit HTML

3. Back up template anda

4. Tambahkan code berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/
.nudge  { 
-moz-transition: all 0.4s ease-out;   
-o-transition: all 0.4s ease-out;   
-webkit-transition: all 0.4s ease-out;   
-ms-transition: all 0.4s ease-out;   
transition: all 0.4s ease-out;   
} 
.nudge:hover  { 
margin-left: 25px; 
padding-left: 5px; 
}

5. Simpan template

Selanjutnya untuk melihat effect ini bekerja pada postingan, anda cukup memasukkan beberapa kode berikut dalam tab HTML pada post editor.

Untuk Link Nudging gunakan kode berikut:

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Yang diganti dari kode diatas:

• Ganti kalimat "Disini letakkan URL" dengan link anda
• Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan pada link anda

Untuk Image Nudging gunakan kode berikut

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Yang diganti dari kode diatas:

• Ganti kalimat "Link image letakkan disini" dengan URL dari image anda
• Ganti kalimat "Deskripsi image letakkan disini" dengan deskripsi yang ingin ditampilkan pada image anda

Silahkan lihat hasilnya diblog anda! Lihat Demo Link Nudging disini

Keputusan Untuk Kembali

Tiada kata yang pantas untuk diucapkan ketika memutuskan sebuah pilihan pada saat mengawali, menjalankan sampai akhir suatu hal yang diupayakan kecuali pujian, syukur pada Yang Esa. Alhamdulillah 'ala kulli haal (Segala puji bagi Allah dalam setiap keadaan).

Setelah lebih dari setahun fakum ngeblog, hari ini saya putuskan untuk 'kembali'. Tidak semua alasan dapat diungkapkan, dijelaskan dan diharapkan pemaklumannya ketika saya terhenti dari aktifitas ngeblog yang sudah saya akrabi beberapa tahun belakangan ini, demikian pula untuk kebijakan yang saya tetapkan hari ini. Tapi satu hal yang pasti dan jelas bagi saya, bahwa ketika semua 'sendi' melemah selama kita masih memiliki sebuah energi postif yang abstrak itu, kita sanggup untuk berkorban, terus berupaya melalui berbagai rintangan untuk bangkit dan berjuang. Dialah 'cinta' energi yang 'menggerakkan' itu juga buahnya, rindu yang mengusik hati dan diri ini untuk 'kembali'.

Cinta dan rindu pada impian yang saya bangun dan harapkan dapat mewujud nyata ketika saya putuskan ngeblog menjadi sarana untuk meraih asa itu, asa yang ternyata masih malu untuk saya berterus terang menyibak tabirnya pada orang-orang. Biarlah mereka menebak, dan melihat langkah-langkah kecilku meraihnya, semoga kelak mereka akan menjadi saksi keberhasilan atau kegigihanku untuk meraihnya. Walau tak sampai padanya, bukankah niat yang tulus disisi Allah telah tercatat ganjaran yang sama dengan apa yg kita inginkan?

Melanjutkan ngeblog untuk tetap setia pada impian.

Terus menulis, berkarya sebagai investasi waktu mendekatkan dan mewujudkan asa.

Semua untuk dan karena mengharapkan apa yang ada disisi Allah, insyaAllah.

Mulai melangkah lagi, Bismillah!

Teriring maaf saya untuk segenap pengunjung dan teman-teman!

Maaf untuk setiap sapa yang tak terbalas,

maaf untuk setiap tanya yang belum terjawab,

maaf untuk setiap harapan yang belum diindahkan,

maaf untuk silaturahim yang sempat terputus,

maaf untuk hak-hak ukhuwah, pertemanan yang belum tertunaikan.

Sungguh setiap apa yang kalian berikan baik berupa saran, kritikan, harapan, pertanyaan, bahkan sekedar sapa semuanya sangat berarti dan juga diantara alasan besar atas keputusan yang saya tetapkan hari ini. Terima kasih saya untuk semua hal tersebut, terima kasih saya juga kepada pengunjung yang masih bisa mengambil manfaat dari blog ini, atau sekedar mampir mengintip dan bertanya pada dirinya sendiri "sudah adakah kehidupan disini?" He, lebay ya? Oke deh, insyaAllah jumpa pada postingan selanjutnya!

Wassalam

Widget Related Post With Thumbnails

Related post atau postingan terkait tentu sudak kita ketahui bersama fungsi dan manfaatnya, karena sebelumnya saya pernah mengetengahkan tutorial cara menambahkan related post pada blogger. Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.

Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut:

1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.

2. Tekan control F dan cari kode </head>

3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Kemudian cari kode berikut:

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-3'>

atau

<p class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-3'>

5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:

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

<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.

6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.

Hasil tutorial ini bisa anda lihat diblog saya "Jejak-jejak hati"

Terimakasih, semoga bermanfaat.

Widget Recent Post Animasi Dengan JQuery

 

Banyak versi widget recent post yang bisa anda gunakan untuk blog anda, mulai dari widget yang disediakan blogger sampai widget dari pihak ketiga. Diblog ini saja kira-kira terhitung sudah ada tiga versi widget recent post yang telah saya posting. Dan kali ini saya akan mengetengahkan cara menambahkan sebuah versi baru dari sekian jumlah widget recent post blogger yang ada. Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script JQuery juga dilengkapi dengan thumbnail dan captions. Sebuah karya hasil pengembangan dari blogger Indonesia (Abu Farhan).

Nah seperti apa widget berikut silahkan lihat screenshoot disamping atau lihat live demo disini, jika anda tertarik tuk mencobanya, silahkan ikuti tutorial selanjutnya.

1. Setelah sig in pada blogger dengan account anda >>> pada dasbor klik rancangan >>> pada elemen laman >>> klik tambah gadget >>> HTML/JavaScript

2. Copy kode berikut dan paste pada kolom konten

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://amatullah83.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Catatan: ganti home page dengan URL blog anda, kode lainnya masih dapat anda modifikasi lagi seperti background image, lebar dan tinggi thumbnail, lebar caption dll.

3. Klik simpan, dan simpan lagi.

Selesai. Mudah bukan? Selamat mencoba, semoga berhasil dan manfaat!

Menambahkan Effect JQuery Link Nudging Pada Tabel

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. Seru juga jadinya, tertarik ingin menerapkan JQuery Link Nudging pada blog sobat? Silahkan ikuti tutorial berikut atau terlebih dahulu silahkan lihat demo effect JQuery link nudging pada tabel di blog ini

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Rancangan>>> Edit HTML
2. Tambahkan Script JQuery berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

Catatan: abaikan langkah kedua bagi sobat yang sudah menginstal script JQuery diatas pada template blogger sobat.
3. Tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

4. Simpan, dan lihat hasilnya pada blog sobat.
Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
Resource David Wals
Demo 
Ingin mencoba effect lain pada link? Silahkan lihat disini cara membuat link hover berwarna pelangi atau disini link hover bertabur bintang