Diajar BLOG: JavaScript

Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

5 Cara Agar Blog Anda Lebih Ringan

hai sobat blogger selamat sore.. di daerah ane lagi ujan deres nih... dingin uy :D dari pada bengong gak jelas mending ane ingin berbagi tips agar loading blog lebih cepat dari BLOG Culkiboy

tentu saja loading blog juga mempengaruhi trafik blog karena pada dasar nya pengunjung tidak suka dengan blog yang terlalu berat dan akhir nya pengunjung pun langsung menutup blog sobat

buat sobat yang merasa blog nya berat coba sobat ikuti beberapa tips & trick ini..

1.Background Blog
mungkin memasang background blog dengan gambar mungkin akan terlihat lebih menarik,keren tapi di balik itu blog sobat akan terasa lebih berat karena setiap melakukan loading, gambar background akan otomatis terbaca,jika sobat ingin tetap memasang background, sobat bisa memasang background blog hanya dengan warna saja

2.Widget / Gadget
widget merupakan suatu hal yang penting bagi blog,tapi akan ada buruk nya juga bila kita memasang nya terlalu banyak (apa lagi yang gak penting,contoh nya seperti widget animasi,kalender,jam,efek blog dengan hujan salju) dengan sobat memakai widget yang terlalu banyak maka loading blog sobat menjadi sangat berat

3.Link Iklan
terlalu banyak memasang link iklan akan menambah berat blog,pengunjung juga tidak suka kehadiran link iklan yang terlalu banyak dan akhir nya pengunjung meninggalkan blog sobat,trafik blog sobat juga akan menurun

4.JavaScript
jika template sobat mengandung script orang lain maka sebaiknya sobat ganti dengan nama sobat sendiri contoh nya seperti sript recent comment
http://scriptoranglain.googlecode.com/files/recentcomment.js sobat bisa membuat file hosting dengan nama sendiri di
http://yourjavascript.com/
https://drive.google.com/
atau
http://code.google.com untuk tutorial membuat host sendiri di google banyak kok ^^

5.Postingan
pada halaman utama (hompage) jumlah posting / artikel juga mempengaruhi loading blog, karena apabila artikel yang di tampilkan terlalu banyak itu sangat mempengaruhi loading blog,untuk mengatur nya sobat tinggal login bloggger-->tata letak-->pada posting blog klik edit-->pada menu Jumlah posting di halaman utama:-->pilih 5 (angka sewajar nya) simpan
dan jangan lupa untuk memasang auto read mroe

jika blog sobat ingin mempercepat loading blog tidak ada salah nya mengikuti cara di atas
cara di atas juga ane dapatkan dari sobat blogger lain nya ^^

semoga bermanfaat
selamat mencoba

Cara Mudah Membuat Semua Link Open New Tab Pada Blog

Tidak ada komentar:

Halo Sobat.. Kali ini saya share Cara Mudah Membuat Semua Link Open New Tab Pada Blog.
Contoh Link yang open in new tab :

KLIK DISINI

Udah tau kan sekarang?
Cara Cara Mudah Membuat Semua Link Open New Tab Pada Blog :

1. Buka akun blogger anda terlebih dahulu
2. Masuk ke menu template => Edit Html
3. Silahkan anda cari kode </head> (Cari menggunakan CTRL+F agar lebih mudah)
4. Lalu salin / copy kode dibawah ini dan simpan tepat di atas kode </head>

<base target='_blank' />

5. Klik Simpan. Lihat hasilnya. :)

~Happy blogging. semoga bermanfaat

Cara Membuat Like Fanspage Melayang di Blog Mudah

1 komentar:

Cara membuat Widget Like Box FansPage Fb Melayang di Blog - Langsung saja To The Point.

DEMO : KLIK DISINI

Cara Pemasangan :

1. Masuk BLOGGER.COM -> Tata Letak -> Add Gadget -> Pilih Html/Javascript
2. Masukan kode dibawah ini ke dalam kolom yang sudah disediakan ( Tanpa Judul )

<a href="https://twitter.com/keheds321" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @keheds321</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

“<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbsederhana.id&width=300&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=417513225020019" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>”

<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://svshare7.blogspot.com/ ">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://masgober.blogspot.com/ ">Get This Widget</a></p>
</div>

Sumber kode : svshare7.blogspot.com

Kode diatas saya tambah dengan Follow Twitter.
Kalo mau dihapus tinggal hapus mulai dari <a href="https://twitter.com/keheds321" SAMPAI -> 'twitter-wjs');</script>

3. Ubah Kode Yang berwarna merah dengan ID Fanspage anda sendiri. Kalo belum tahu, Apa itu ID Facebook fanspage coba cari di Google. Misalnya gini, ID Fanspage saya http://facebook.com/bsederhana.id yang berwarna merah adalah ID Fanspage saya.

4. Save :)

Cara membuat Widget Like Box FansPage Fb Melayang di Blog
~ENJOY IT

Modifikasi Popular Post dan Random Post Menjadi Thumbnail di Blogspot

Tidak ada komentar:

Modifikasi Popular Post dan Random Post Menjadi Thumbnail di Blogspot - Beberapa hari ini saya enggak update postingan di blog ini dan juga belum bisa blogwalking ke blog-blog sahabat... karena ada alasan-alasan tertentu yang membuat saya tidak bisa update. Kebetulan saya lagi jalan-jalan ke blog-blog teman saya akhirnya saya menemukan ide posting yaitu Modifikasi Popular Post dan Random Post Menjadi Thumbnail di Blogspot. Sedikit kasian dengan blog ku yang malang ini, akhirnya aku dapat ide posting yang tutorialnya ane dapat dari Kompiajaib.

Sebenarnya sudah banyak bertebaran tutorial seperti ini dengan modifikasi yang cukup keren. Hasil modifikasinya akan tampil seperti gambar di atas dengan 3 gambar ke kanan dan 3 gambar ke bawah. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Modifikasi Popular Post Menjadi Thumbnails :
1. Buka Blogger

2. Tentunya Anda harus menambahkan widget popular post dulu. Masuk ke tata letak kemudian tambahkan gadget dan pilih popular post. Kemudian setting popular post-nya dengan pilihan hanya thumbnail dan atur jumlah post yang tampilnya ke angka 9 kemudian save gadgetnya.

3. Jika sudah pergi ke Template -> Back-up Template -> Edit HTML

4. Silahkan copy dan paste kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#PopularPosts1 {width:100%;background:none;}
#PopularPosts1 .widget-content {margin: 0 !important; }
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; }
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#PopularPosts1 ul li .item-title{display:none}
#PopularPosts1 li {float:left;list-style:none;}
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;width:90px;height:90px;border:none;transition:all 400ms ease-in-out;}
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

5. Silahkan "jump to widget" pilih popular post untuk menuju kode html popular post. Kemudian cari kode ini  dan geser ke bawah sedikit Anda akan menemukan kode seperti di bawah ini.

<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

6. Silahkan ganti dengan kode di bawah ini.

<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

*Jika thumbnilnya kurang pas dengan lebar widget blog Anda silahkan tambahkan pada angka 90 (yang berwarna merah pada langkah ke-2 dan ke-3).

7. Simpan template dan selamat mencoba

Modifikasi Random Post Menjadi Thumbnails :

1. Buka Blogger

2. Template -> Back-up Template -> Edit HTML

3. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important; padding: 0 !important; }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

2. Jika sudah simpan template, lalu masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.

<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVrR_NT7OBP8HEsIF67Wae2P5Ivcl4jAfMsW3T0szkN27Qh7Q5hmi40mL6oV2LFWvi8r8dxY-LTqVSGqiQGa9Ue_ZEUSRkx7oWPEtv-dUF0M0RWmvg1XE9ItRvHkKGt3pZhnZFZiDgR48/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>

3. Untuk mengatur banyaknya post yang ditampilkan silahkan atur pada kode var rdp_numposts=9; dan untuk mengatur size gambarnya silahkan atur pada angka 90 yang berwarna merah pada kode CSS sama kode javascriptnya. Dan setelah saya cek widget ini valid HTML5 dan CSS3 juga tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.

Sumber : SCH-XP

Pages

Diajar BLOG

Game Reviews

Tech News

New Design

Recent Post

5 Cara Agar Blog Anda Lebih Ringan

Cara Mudah Membuat Semua Link Open New Tab Pada Blog

Cara Membuat Like Fanspage Melayang di Blog Mudah

Modifikasi Popular Post dan Random Post Menjadi Thumbnail di Blogspot