Blog-Via

Home » Posts filed under Link

Tampilkan postingan dengan label Link. Tampilkan semua postingan

Cara Membuat Efek Bintang Pada Link

Avia || Jumat, 18 Mei 2012 || Animasi,Link || Leave a komentar

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/AVvXsEjpmJj4HiJiwv6lq1ewsLAy-ctx0T6Qhs3fsVK7Arb5tltK6V5_2a1LesukqYYTAU1KnFqRQxGqmzQeMXyjOk8HqND60nt-TMburI1w62EyrzCDZTElFqRmFkznouWOHESSmIVUhwrBqog/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!

Cara Membuat Link Blog Berwarna-Warni

Avia || Jumat, 13 April 2012 || Link || Leave a komentar

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

Membuat Link Sumber Muncul pada Artikel Kopi Paste

Avia || Minggu, 01 April 2012 || Link || Leave a komentar

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!

Efek Link Nudging Pada Label Blog

Avia || Senin, 19 Maret 2012 || Animasi,Link,Tag - Label,Tips dan Triks || Leave a komentar

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() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 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!!

Membuat Back To Top dengan Efek Smooth Scroll

Avia || Kamis, 08 Oktober 2009 || Animasi,Link || Leave a komentar

"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: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</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.

Cara Membuat Headline News Keren pada Blog

Avia || Senin, 21 September 2009 || Animasi,Link || Leave a komentar

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!!

Cara Membuat Breadcrumb Navigasi di Blog

Avia || || Link,Menu,Navigation Bar || Leave a komentar

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'>

<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>

</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

Cara Membuat Tooltips Otomatis di Blog

Avia || Minggu, 20 September 2009 || Animasi,Link || Leave a komentar

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'/><div id='warungbebasautotooltip'>

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

</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

6. Terakhir simpan templatenya

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

Membuat Efek Halaman yang Melengkung (Page Peel)

Avia || Sabtu, 19 September 2009 || Animasi,Link || Leave a komentar

Efek peel page adalah efek dimana ujung halaman melengkung ketika cursor mouse berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian pengunjung mengklik gambar iklan dibalik lekungan halaman. Efek ini juga dapat digunakan untuk berbagai macam tujuan misalnya untuk mengarahkan pengunjung ke sebuah blog atau website.

Efek ini seringkali digunakan untuk mempercantik dan memperindah blog. Ini adalah salah satu efek yang saya sukai dan saya merekomendasikan sobat blogger untuk mencobanya. Jika sobat ingin tau cara membuatnya ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang pada Expand Template Widget
4. Kopi script dibawah ini dan letakan diatas kode <b:skin><![CDATA[

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/page_peel.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://3.bp.blogspot.com/-gdg7o8HCtqA/T547peqhuTI/AAAAAAAADPg/REelXg1UcHM/s220/DSC01465.JPG) no-repeat right top;
text-indent: -9999px;
}

Keterangan:
- Kode berwarna merah adalah gambar latar belakang page peel. Sobat dapat menggantinya dengan gambar yang lain.

7. Letakan kode dibawah ini tepat dibawah kode <body>

<div id='pageflip'>
<a href='http://blogtrikdantips.blogspot.com/' target='_blank'>
<img alt='' src='http://2.bp.blogspot.com/-Wb14xiN0KPc/T7sJg5sldPI/AAAAAAAADS8/vtmXQM0CMuo/s400/page_peel_image.png'/>
<span class='msg_block'/>
</a>
</div>

Keterangan:
- Kode berwarna biru adalah link yang akan mengarahkan pengunjung ke sebuah halaman (sobat dapat menggantinya)

8. Simpan template sobat dan lihat hasilnya

Selamat mencoba dan semoga berhasil....!

Cara Membuat Posting Acak atau Random Post

Avia || Sabtu, 15 Agustus 2009 || Link,Tips dan Triks || Leave a komentar

Sudahkah anda pernah mendengar tentang random post...Nah itu dia...posting yang dapat ditampilkan secara acak. Yang diacak disini yaitu judul postingnya aja. Terkadang blogger yang baru memasang recent post dan pada halaman depannya udah ditampilkan judul yang sama. Dari pada menampilkan recent post....mendingan pasang aja gadjet berikut ini yaitu ....Random Post. Cara membuatnya gak susah amat alias cukup mudah....Jadi ikuti aja langkahnya....

1. Login dulu ke blogger.
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet
4. Pilih HTML JavaScript
5. Masukan kode dibawah ini

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://blogtrikdantips.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

6. Gantikan kode berwarna merah dengan URL blog anda.
7. Simpan gadjet tersebut

Keterangan:
Angka 10 pada kode tersebut menunjukan jumlah postingan yang ditampilkan secara acak!!! Met mencoba ya....

Cara Mencari Link yang Rusak pada Blog

Avia || Sabtu, 11 Juli 2009 || Link,Tips dan Triks,Widget || Leave a komentar

Link yang mati (atau juga disebut broken link) adalah link pada WEB yang menunjukan suatu halaman web atau server yang tidak ada atau tidak ditemukan secara permanen. Hasil yang nampak dari link yang rusak adalah munculnya 404 error, yang menunjukan tidak ditemukannya halaman yang spesifik.

Sulit bagi sobat untuk menemukan setiap link pada blog yang udah rusak. Saya akan memberikan tips kepada sobat untuk mengecek link pada blog yang udah tidak digunakan atau rusak. Anda dapat mencari link tersebut dengan mudah dan cepat. Jika sobat mencari link tersebut satu per satu maka anda akan membuang banyak waktu dan tenaga. Langsung saja ke prakteknya:

1. Kunjungi situs berikut ini "Broken Link Checker".
2. Sobat hanya perlu memasukan URL website atau blog.
3. Akan muncul daftar link dari blog sobat, dimana link yang rusak akan ditandai dengan tanda silang sedangkan link yang tidak rusak diberi tanda centang....
4. Apabila ada link blog sobat yang ditemukan rusak atau tidak bekerja maka sobat hanya perlu menghapusnya atau memperbaikinya.

Semoga bermanfaat dan selamat mencoba. Good luck!

Membuat Fungsi Redirect Blog

Avia || Selasa, 07 Juli 2009 || Link,Tips dan Triks || Leave a komentar

Setelah sebelumnya kita belajar mengenai fungsi refresh otomatis kini kita akan melihat salah satu fungsi yang bisa diterapkan pada blog anda. Fungsi Redirect!!!! Rediredt berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan.

Agar lebih jelas, saya ambil salah satu contoh.

Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan).

Selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik.

Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Cara buatnya gini loh:

1. Login ke blogger.
2. Pilih Tata letak dan klik edit HTML
3. Cari kode <head>
4. Letakan script dibawah ini dibawah kode <head> dan diatas kode ini </head>

Untuk template klasik gunakan kode ini:

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">

Untuk template baru gunakan kode ini:

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">
</meta>

Selamat mencoba!!!

Membuat Read More yang Diikuti Judul Halaman

Avia || || Link,Tips dan Triks || Leave a komentar

Readmore adalah sebuah link yang akan menunjukan artikel yang lengkap. Biasanya blogger memasang readmore pada home pagenya sehingga para pengunjung yang datang dapat melihat artikel2 lainnya. Read more yang anda buat dapat anda variasikan dengan menambah judul posting di ujungnya .....ya itu sih terserah anda jika mau memasangnya....

Bagi anda yang penasaran dan ingin tau bagaimana membuat readmore yang diikuti judul posting maka anda perlu mengikuti trik berikut ini.

1. Login ke blogger.
2. Pilih Rancangan dan klik Edit HTML
3. Klik centang pada Expand Template Widget (jangan lupa backup template anda)
4. Cari kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

5. Gantikan kode yang berwarna merah dengan kode:

<p><data:post.body/></p>
<strong><a expr:href='data:post.url'>Lanjut membaca "<data:post.title/>" �� </a></strong>

Keterangan:
Kode diatas ditambahkan apabila anda membuat readmore dengan loading halaman blog.

6. Tapi jika anda menggunakan readmore tanpa loading halaman blog maka cari kode dibawah ini:

<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore...</a></p>
</span>

7. Hapus semua kode diatas dan gantikan dengan kode ini:

<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore �<data:post.title/></a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore �<data:post.title/></a></p>
</span>

8. Simpan template anda. Selamat mencobanya!!!

Membuat Link Berwarna warni

Avia || Rabu, 01 Juli 2009 || Animasi,Link || Leave a komentar

Mungkin sobat pernah melihat beberapa blog dengan tampilan link berwarna warni seperti pelangi. Dulunya pada blog ini saya pernah memasang link berwarna-warni atau istilah lainnya disebut rainbow link. Jika sobat ingin blog tampil dengan berbagai macam animasi dan warna maka rainbow link yang satu ini dapat sobat gunakan. Caranya sangat mudah untuk membuatnya. Berikut saya akan memberikan langkah yang mudah untuk membuat link warna warni tersebut.

1. Login ke blogger.
2. Klik pada Rancangan -- Elemen Laman
3. Tambahkan Gadjet klik HTML/Javascript
4. Masukkan kode berikut ini:

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/rainbow_link.js' type='text/javascript'/>

5. Simpan gadjet

Cobalah sobat lihat hasilnya....Selamat mancoba!

Cara Mudah Membuat Blogroll di Blog

Avia || || Link || Leave a komentar

Apakah sobat tau yang dimaksud dengan blogroll. Blogroll sering memuat friends link (link exchange) atau link-link teman-teman blog sobat sehingga akan menghemat ruang pada blog. Blogroll sesuai istilahnya dilengkapi dengan fasilitas scroll apabila halaman blogroll telah terisi penuh. Ukuran blogroll dapat sobat sesuaikan dengan ruang gadjet pada blog sobat. Sobat tertarik gak untuk membuat blogroll, caranya simpel kok pasti sobat bisa membuatnya dalam sekejap....Berikut ini adalah tips dan triksnya.....

1. Login dulu ya ke blogger.
2. Klik pada Rancangan -- Elemen Laman
3. Kemudian tambahkan gadjet, pilih HTML/Javascript.
5. Kopi dan paste kode di bawah ini:

<div style="border: 2px dashed #2ECCFA;
overflow: auto;
width: 100px;
height: 100px;
text-align: center; ">
--Sobat tinggal isi informasi yang ingin ditampilkan disini--
</div>

Keterangan:
- Kode width: 100px; dan height: 100px; adalah ukuran lebar dan panjang kotak, sobat bisa merubahnya dan menyesuaikanya dengan ukuran yg sobat suka.

Hasilnya akan seperti dibawah ini:

--Sobat tinggal isi informasi yang ingin ditampilkan disini--

6. Jika udah Simpan gadjet tersebut.
7. Lihat blog anda. Jika setting blogrollnya tidak sesuai dengan keinginan anda, tinggal edit kode diatas aja.

Membuat Link Download di Blog

Avia || || Link || Leave a komentar

Sobat masih baru dengan dunia blog ya.....tentunya sobat pasti penasaran bagaimana cara membuat gadjet, membuat link, membuat tabel dan lain sebagainya. Tapi untuk kali ini saya akan memberikan tips sederhana bagi teman-teman semua cara membuat link download. Penasaran ya gimana caranya ......?

Oke kali ini kita akan membuat link download yang sederhana.
Anda dapat membuat link download pada posting atau gadjet sobat.....Dibawah ini adalah kode untuk membuat link download....

<a href="http://www.ziddu.com/download/5248041/Bonus2Bab10JT.pdf.html">Download</a> - Rahasia Meraup Profit 10 Juta di Bulan Pertama

Hasilnya akan seperti dibawah ini:
Download - Rahasia Meraup Profit 10 Juta di Bul/an Pertama

Anda juga dapat membuat link download disertai dengan gambar seperti dibawah ini. Pertama carilah situs2 yang menyediakan layanan dimana sobat dapat mengupload gambar. Misalnya ziddu, shareapic, 4shared dan lain sebagainya...Setelah upload kopi kode url gambar dan buatlah kode seperti dibawah ini:

<a href="xxxxx"/><img src="#####"/></a> - Rahasia Meraup Profit 10 Juta di Bulan Pertama

Anda hanya tinggal mengubah alamat link(xxxxx) dan lokasi gambar (#####). Jika sudah maka hasilnya dapat dilihat seperti dibawah ini:

- Rahasia Meraup Profit 10 Juta di Bulan Pertama

Selamat Mencobanya!!!!

Mengganti Link Posting Lama dan Baru dengan Gambar

Avia || || Gambar,Link || Leave a komentar

Pada bagian bawah dari posting sobat, pasti sobat akan melihat sebuah link "Older Post / Newer Post" atau "Posting Lama / Posting Baru" serta home. Mungkin sobat pada dasarnya belum tau tentang link tersebut dan setelah mengetahuinya ternyata link tersebut merupakan link yang menunjukan artikel yang baru, artikel yang lama serta homepage. Seringkali link tersebut diganti dengan gambar agar terlihat lebih menarik. Jadi bagaimana caranya ya???

1. Login ke blogger.
2. Pilih Rancangan selanjutnya klik Edit HTML
3. Beri tanda centang pada "Expand widget template"
4. Cari kode berikut atau atau tekan CTRL-F untuk mencari kode:

<data:newerPageTitle/>
Script ini menunjukan artikel terbaru. Hapus dan ganti dengan url gambar dibawah ini:

<img src='http://3.bp.blogspot.com/-bK9G7GBYCfM/T5d4Y_FWCHI/AAAAAAAADL8/ITiy_KoKdkc/s320/Rightarrow.png'/>

<data:olderPageTitle/>
Script ini menunjukan artikel yang lama. Hapus dan ganti dengan url gambar dibawah ini:

<img src='http://2.bp.blogspot.com/-rQAC_9RV0Sk/T5d5N5Th1OI/AAAAAAAADMI/aDpKG4ioe8A/s320/Leftarrow.png'/>

<data:homeMsg/>
Script ini menunjukan home page atau beranda. Hapus dan ganti dengan url gambar dibawah ini:

<img src='http://1.bp.blogspot.com/-2jRdaXoBdlc/T5d5N8zE2LI/AAAAAAAADMU/hEy36irBkvw/s320/Home.png'/>

6. Jangan lupa simpan template yang telah diubah.....Selamat mencoba!!!!

Membuat Menu Tab View Sederhana

Avia || || Link,Menu,Tips dan Triks || Leave a komentar

Sobat ingin membuat tab view yang sederhana. Tab view memiliki fungsi dan manfaat yang sangat penting. Tab view dapat menampilkan komentar, link, postingan dan lain sebagainya dalam sebuah kotak kecil. Tab view juga dapat menghemat space atau ruang dari blog sobat. Ingin tau bagaimana cara membuatnya ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik pada Edit HTML
3. Cari kode ]]></b:skin>
4. Kopi kode dibawah ini, letakkan diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Keterangan:
- Sobat dapat merubah kode diatas yang pada keterangan berwarna merah
- Sobat dapat juga mengganti background tab view berwarna ungu.

5. Kopi kode dibawah ini, letakkan dibawah kode ]]></b:skin>

<script src="http://blogtrikdantips-blogspot.googlecode.com/files/tabview.js" type="text/javascript"/>

6. Kemudian simpan template tersebut
7. Masuk ke Rancangan -- Elemen Laman, tambah gadjet kemudian pilih HTML/JavaScript
8. Masukan kode dibawah ini:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Judul Menu 1">Menu 1</a>
<a title="Judul Menu 2">Menu 2</a>
<a title="Judul Menu 3">Menu 3</a>
<a title="Judul Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">


<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 1

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 2

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 3

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 4

</div></div>


</div></div></form>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js' type='text/javascript'/>

9. Edit Tabview (isi judul dan keterangan serta widget yang ingin ditambahkan)
10. Simpan gadjet lalu lihat hasilnya!!

Membuat Menu D-Tree atau Menu Bercabang

Avia || || Link,Menu || Leave a komentar

Sobat ingin membuat menu Dtree? Apa itu Menu Dtree. Menu DTree sesuai namanya adalah sekumpulan arsip yang bercabang seperti cabang pohon. Menu Dtree terlihat seperti sobat membuka windows explorer. Menu Dtree digunakan bagi blogger yang mempunyai posting yang banyak karena Dtree ini dapat menghemat ruang. Jika sobat ingin membuatnya , ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik Edit HTML
3. Letakkan kode berikut diatas kode </head>

<link href='http://blogtrikdantips-blogspot.googlecode.com/files/dtree_blogtrikdantips.css' rel='StyleSheet' type='text/css'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/dtree_blogtrikdantips.js' type='text/javascript'/>

4. Kemudian Simpan template sobat.
5. Pindah ke Elemen Laman dan Tambah gadjet
6. Pilih HTML/JavaScript dan masukan kode dibawah ini:

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">

</script>
</div>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js" type="text/javascript"/></script>

7. Simpan Template sobat.

Keterangan:
- Ganti tulisan "#.html" dengan link judul postingan
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,�Node 1�,�#.html�);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Ganti tulisan berwarna hijau dengan url icon sobat.

DEMO - KLIK DISINI - 100% BERHASIL