Cara Membuat Efek Bintang Pada Link

Bulan lalu saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode a:link{ atau a:visited{
4. Lalu letakkan kode dibawah ini dibawah kode tadi

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGokwJ3hksDC5T4olluM7FwJ3S5L0-tnTH53o-799HZbL187jiXHszR_zdIcMvhG-z-dds1MD-9QIW2emCVz7BOkorYU5U3XE5Tbmr1vgULDmqtjw1RSw20TJwMxQ2pxwxKJ0UjjOsYa8/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

Animasi , Link

Cara Membuat Link Blog Berwarna-Warni

Sobat pasti sudah pernah melihat link berwarna warni pada blog. Ada berbagai warna yang ditampilkan link tersebut apabila cursor anda berada diatasnya. Kali ini kita akan membuat setiap link berwarna-warni pada blog anda. Javascript yang satu ini sangat mudah untuk diinstal karena anda tidak perlu mengotak atik template. Jika ingin tau caranya ikuti langkahnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML Javascript
4. Masukan kode berikut ini:

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

5. Simpan gadjet anda

Apabila script tersebut tidak bekerja itu disebabkan karena script tersebut tidak cocok pada css template. Untuk itu coba sobat hapus tag !important. Demikian trik dan tips untuk saat ini semoga bermanfaat

Link

Membuat Link Sumber Muncul pada Artikel Kopi Paste

Sobat bloggers bagaimana kabarnya? Senang sekali bisa berjumpa pada tutorial Blog Trik dan Tips “tak ada blog kalau tak ada triks”. Oke sobat siapa sih yang sering kopi paste artikel saya …..he3 ayo jujur deh. Ya gak apa2 lah yang penting sobat bloggers jangan lupa ya menyertakan link www.blogtrikdantips.blogspot.com di blog sobat. Sobat bloggers tau tidak jika anda mengkopi artikel saya di setiap posting maka akan muncul sumber artikel dari blog saya. Jika anda ingin tau triknya maka saya akan berikan langkahnya. Caranya sangat mudah sekali, cuma membutuhkan waktu sebentar saja. Oke langsung aja kita ke TKP sambil minum kopi…..he3

1. Kunjungi situs https://id.tynt.com/
2. Kemudian anda Daftar dulu atau Sign Up untuk membuat akun, Isi domain (url blog), email dan password. (jangan lupa untuk melakukan konfirmasi di email anda)
3. Klik next untuk masuk ke pengaturan script
4. Klik tombol Customize Attribution, lalu atur yang ingin ditampilkan jika seseorang mengkopi artikel anda, misalnya anda ingin menampilkan link blog maka pilih url saja, atau anda ingin menampilkan judul blog maka pilih page title.
5. Setelah selesai pengaturannya klik save dan anda akan diberikan script untuk diletakan di template blog anda. Kopilah script tersebut.
6. Kemudian masuk ke blogger, klik Rancangan --> Edit HTML
7. Lalu letakan script tersebut diatas kode </head>
8. Simpan template anda lalu lihat hasilnya.

Cobalah kopi artikel atau teks pada blog anda. Maka akan muncul sumber artikel berupa link atau judul posting dari blog anda (tergantung pengaturan anda tadi). Jika anda ingin informasi tentang jumlah artikel dan artikel apa saja yang dikopi paste, langsung saja login ke situs yang tadi kita kunjungi menggunakan akun yang telah anda daftar. Sekian dari saya, semoga bermanfaat dan selamat mencoba!

Link

Efek Link Nudging Pada Label Blog

Trik dan Tips kali ini yaitu kita akan membuat Link Nudging dengan menggunakan Jquery dan Javascipt. Efek link nudging ini membuat link bergoyang dengan halus ketika mouse diarahkan diatas link tersebut. Efek ini akan menambah keindahan dari blog anda. Link nudging kali ini kita akan terapkan pada label atau kategori blog. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

1. Masuk ke Rancangan--> Edit HTML
2. Cari kode </head>
3. Letakkan script dibawah ini diatas kode </head>

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

Keterangan: Kode Jquery diatas sudah umum digunakan, jadi jika template anda sudah ada kode tersebut tidak usah memasukan kode jquery diatas.

4. Tambahkan kode dibawah ini dan letakan dibawah kode 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>

5. Simpan template anda lalu liat hasilnya.

Jika anda ingin melihat link nudging bekerja pada label maka anda harus menambahkan widget (gadjet) label pada blog. Pilih Label dengan tampilan "Daftar". Selamat mencobanya!!

Animasi , Link , Tag - Label , Tips dan Triks

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Rancangan -- Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;

7. Simpan template sobat dan lihat hasilnya.

Animasi , Link

Cara Membuat Headline News Keren pada Blog

Blog Trik dan Tips akan membahas salah satu trik yaitu bagaimana cara membuat headline news. Pasti yang udah sering dengarin berita di televisi udah tau apa itu headline news. Tapi headline news di tv beda dong ama yang dibuat di blog. Sesuai dengan namanya headline news ini memuat judul-judul posting yang sobat terbitkan. Sobat dapat memasang headline news diatas atau dibawah blog. Headline news akan berhenti bergerak apabila cursor mouse anda berada diatas link judul posting. Oke langsung aja kita membuatnya:

1. Login ke blogger
2. Klik Rancangan -- Elemen Laman
3. Tambahkan gadjet anda dan pilih HTML/Javascript
4. Kopi kode berikut ini dan paste pada gadjet sobat

<script type="text/javascript">
var hn_url_blog="http://blogtrikdantips.blogspot.com";
var hn_jumlah_post= 15;
var hn_warna_latar="#CCFEBF";
var hn_warna_garis="#FEF9BF";
var hn_posisi="top";
var hn_tampilkan_judul=true;
var hn_backlink= true;
</script>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/headline_news_marquee.js"></script>

Keterangan:
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Ganti url (kode berwarna biru) dengan url blog sobat
6. Simpan gadjet sobat!!

Animasi , Link

Cara Membuat Breadcrumb Navigasi di Blog

Breadcrumbs adalah sebuah petunjuk atau navigasi yang menginformasikan keberadaan posisi postingan yang aktif. Breadcrumb biasanya membentuk posisi horizontal yang terletak dibawah judul posting. Breadcrumb dapat berupa susunan link yang menghubungkan sebuah posting sesuai dengan beberapa kategori dalam posting tersebut. Breadcrumbs juga membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Pada kesempatan ini saya akan memberikan trik kepada sobat blogger cara membuat breadcrumb pada blog. Berikut adalah caranya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Letakan kode dibawah ini sebelum kode <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumb by www.blogtrikdantips.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrumb -->
</b:includable>

5. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
6. Letakan kode dibawah ini sebelum kode pada langkah 5.

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

7. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

9. Simpan template sobat dan lihat hasilnya

Link , Menu , Navigation Bar

Cara Membuat Tooltips Otomatis di Blog

Tooltips adalah kotak yang menampilkan informasi dari link anda ketika cursor mouse berada tepat diatasnya. Kali ini kita akan membuat sebuah tooltip seperti pada gambar disamping ini. Tooltip yang saya buat ini akan menampilkan informasi mengenai judul link dalam sebuah kotak. Jika sudah gak sabaran langsung saja dipraktekin...

1. Login ke blogger
2. Masuklah ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'>Created by Warung Bebas </a> <a href='http://www.blogtrikdantips.blogspot.com'>Modify by Blog Trik dan Tips</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px dashed #778899;background:#4db2b3}#ttcont{background:#e6fffa;color:#000000}"
};
//]]></script><script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb_tooltips.js'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

5. Paste kode dibawah ini diatas kode </body>

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

6. Terakhir simpan templatenya

Coba lihat hasilnya pada halaman blog anda, pasti akan muncul tooltip yang sangat keren. Selamat mencoba!!!

Animasi , Link