Tampilkan postingan dengan label Trik Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Trik Blogspot. Tampilkan semua postingan

Sabtu, 20 September 2014

Automatically Open all External Links in a New Window in Blogger!

automatically open links in new windowJust today a client requested us that he wish to open all his external links in new window or new tab when clicked and he is not willing to manually do it for each post by adding target="_blank" inside each hyperlink. We wrote down a simple jQuery script that will check all hyperlinks inside your blog pages and will only add the target="_blank"  attribute to links which are external links. It wont  put any effect to internal links of the blog. The script will only detect external hostnames and the moment it finds one, it will insert into the html a target attribute that tells the browser to open the link in a new window. Thus preventing your blog readers from leaving your blog and also helps in increasing your overall pageviews and bounce rate. We thought we shall also share the script with all of you. 

Open all external links in a new tab

Follow these easy steps to add this cool dynamic way of updating all external links.
Note: This method works for both blogger and wordpress blogs, irrespective of platforms.
  1. Go to Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Just above </head> paste the following script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);  
});
</script>
PS: Please do not add the red code if you already have jQuery library source code installed on your blog.
     5. Save your template and you are all done!
Check your blog and click some external links to see it working just fine. :)

How it works? (Optional know-how)

I have added the code twice to check once for links starting with http://  and then for https://. Normally all bloggers blogs have hostnames starting with http://  without the http:// secure protocol. Therefore I added the second instance so that the script may work even for wordpress self hosted blogs.
The yellow highlighted part is where the script scans values inside href attributes and if the value is equal to a negative one (== -1), then this indicates that the hostname is an external domain.
Note: If you equate the href value to a positive one (==1) inside the conditional statement, then all your internal links will start opening in new windows!
Once the condition is met, the script then inserts a target="_blank" attribute inside the hyperlink tag. That simple!
Hope this script proves helpful for most of you. It is extremely SEO friendly and works fine with all major browsers be it IE, webkit browsers or Mozilla.

Selasa, 16 September 2014

Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini
Cara Buat Tombol Back To Top di BlogspotFitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti langkah-langkahdibawah ini .

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEo3FSGmSY3SweNT3kauRSX_19zJubipA92pAuSbdxGYQNdSEa9nlc47N6D6oJs6xgXYVq8l0SBlSapdFQaSaddbsFVMlZCyrYD76PW_jUoLglYhD4cgiEca8K0mFfXrpe3hjkE59eDQ4/s1600/back-to-top.gif'/></a>
  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai