Tombol Back to Top pada Blog

Apakabar Sahabat blog Aapaaja :) kali ini kita akan membuat suatu tombol tambahan pada halaman blog kita. Nah apa itu tombol back to top dan bagaimana cara kerjanya. tombol back to top adalah tombol yang biasa di gunakan oleh para bloger untuk memberikan kemudahan bagi pembacanya. mengapa begitu? karna setiap kita membaca sampai kebawah halaman artikel seringkali kita akan kembali ke halaman teratas pada blog tersebut. maka ini dia fungsi nya, yaitu membawa para pembaca kembali ke atas halaman hanya dengan menekan tombol back to top ini.

Sekian penjelasan untuk tombol Back to Top mari kita langsung saja prakteknya. Yuk mari...

Tahap pertama tentu saja kita login ke account blog kita. pilih tab Rancangan > berikutnya Edit HTML

Teman-teman lakukan pencariaan untuk kode berikut ]]></b:skin> untuk mempercepat pencarian kita gunakan fasilitas find umumnya dapa mengguankan tombol ctrl + f masukkan kode tersebut. Setelah ditemukan masukkan script ini sebelum kode tersebut :

.gototop {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK49_qUDJKbpnvM7NJOvcMC-wfGLWbjQ-Lfwb1Me4phbse0yRyh1mQ2BuUazZjmQpuYlrvVyqLSfVeT78gz9HiKGA5koX1K9aADl6FB4ezSJyRAxUdJMJ738QP5UxKWLJ-uE-kHEkpqwY/s400/arrowtopdt6.gif)no-repeat;

display:block;

_display:none;

position:fixed;

z-index:9999;

text-indent:-9999px;

width:17px;

height:17px;

overflow:hidden;

outline:none;

right:8px;

bottom:35px

}

.gotobottom {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNawjiFNmPtkVfFQtLrOLRe9mjLvhl_MVTtSmTy6gNTj92daF1k8kW2O1eiIdyBHL8-VaWUv3Qor-lZpWwTg5Yl8AX1eQvjfBJ4z7pZm5JM0HraYNN9hqo18hZKrZj7N1VbbY5IUe49_c/s400/arrowdownqe1.gif)no-repeat;

width:17px;

height:17px;

display:block;

_display:none;

position:fixed;

z-index:9999;

text-indent:-9999px;

overflow:hidden;

outline:none;

right:8px;

bottom:15px

}

Teman-teman dapat mengguankan gambar sesuai dengan selera masing2. caranya upload gambarnya di file hosting ambil alamat letaknya, lalu ganti alamat pada kode di atas yang berwarna biru dengan alamat dimana Teman-teman upload file tadi. diatas ada dua alamat yang pertama untuk tombol top / atas dan yang ke dua untuk tombol botton / bawah.

Selanjutnya kita cari kode </body> letakkan kode berikut diatasnya :

<a class='gototop' href='javascript:scroll(0,0)' title='Go to Top'>Top</a>
<a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>

Terakhir Simpan Template. OK Teman-teman sekian dari Saya Blog Aapaaja semoga pembahasan kali ini dapat menambah ilmu kita dan dapat di ambil manfaatnya.

Membuat Read More Cara ke Dua

Sebelumnya Blog aapaaja telah membahas bagaimana membuat Auto read more. pada pembahasan kali ini kita akan membahas kembali auto Read More pada blogspot, hanya saja pada pembahasan kali ini kita menggunakan script yang berbeda dari pembahasan sebelumnya. Nah selain kita dapat menggunakan cara sebelumnya pembahasan kali ini dapat menambah pengetahuan kita, tidak hanya mengenal satu macam saja. agar tidak banyak basabasi mari kita langsung saja.

Pertama tentu kita login terlebih dahulu ke account blog kita. urutan pemilihannya yaitu pada tab Rancangan>Edit HTML>Centang Expand Template Widget.

Lanjutkan tahap dimana kita akan melektakkan script. Agar cepat Teman-teman dapat menggunakan fasilitas Find pada Aplikasi Browse yang sedang kita gunakan. Maka cari </head>  setelah ketemu lanjutkan dengan meletakkan scriptnya. Ok ini scriptnya..

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Pada script di atas Teman-teman dapat mengubah sesuai selera atau kebutuhan yaitu  :

summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;

Kita lanjutkan dengan meletakkan script berikutnya. Gunakan lagi fasilitas find dan cari <data:post.body/> ganti dengan script yang berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Selanjutnya untuk script yang ini pada Read More >> yang di cetak tebal Teman-teman dapat mengubahnya sesuai dengan keinginan. Sekitan dari Blog Aapaaja semoga bermanfaat.

Membuat Read More Pada Blogs

Apa kabar Teman-teman reader...

Pada kesempatan kali ini Aapaaja memilih judul membuat Read more pada blog, Read more yang dimaksun yaitu pada suatu blog kadang kita menemukan adanya suatu fasilitas yang di berikan kepada reader, yang bertujuan untuk meringkas isi dari artikel. Sehingga pembaca dapat mengetahui isi dengan hanya membaca sebahagian bacaan dari artikel yang akan di baca. Untuk  blog kegunaanya adalah menampilkan beberapa artikel  dengan tidak memenuhi halaman, sehingga halaman dapat di efisienkan.

Baik lah kita langsung saja...

yang perlu kita lakukan dalam membuat read more ini adalah menentukan bentuk tulisan atau dalam bentuk ganbar sepetri ini contohnya

selanjutnya kita masuk ke blog kita polih perancangan > Etid HTML > cari  </head> nah kemudian Teman2 buat script ini atau biar cepat copas aja

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://yourjavascript.com/01241511071/read-moreotomatis.js.txt.js' type='text/javascript'/>

lalu lanjutkan dengan mengubah script <data:post.body/> atau <p><data:post.body/></p> menjadi sepreti di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'><img alt='Read More..' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivGqwXMX-RW9X32uezUJyo8RVd0C95g-64S36o99YZjsh78QbN5igtjup8Nz7HfH4mCf_RBZhOv52JHcfdNA0JqrLJfuSIzx_Yxwh4lhlknjEybGDH6_4cIjiNpUA1wbv0ApjCEBqVHc/s1600/read+more.jpg'/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'> <strong><a href='http://aapaaja.blogspot.com/2011/11/membuat-read-more-pada-blogs.html'></a></strong></p></b:if>

 

nah jika teman-teman ingin menampilkan dalam bentuk tulisan saja gunakan scrip yang ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[ Read More.. ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://aapaaja.blogspot.com/2011/11/membuat-read-more-pada-blogs.html'></a></strong></p></b:if>

 

setelah semua langkah di atas telah di ikuti jangan lupa simpan atau save templatenya.

Sekian dari Saya blogs aapaaja semoga bermanfaat.

Cara Mengganti Cursor Pada Website

Kali ini kita akan memcoba bagaimana cara memberikan cursor. terkadang diantara kita ada yang menginginkan sesuatau yang berbeda pada web atau blog kita, ada pula yang sekedar mengetahuinya sebagai tanmbahan ilmu. sepetri apa sih caranya memberikan kursor yang berbeda itu. Ok kita langsung saja ke intinya....

Pertama yang akan kita lakukan adalah membuka halaman utama (File Utama) kita dalam bentuk edit html dan cari </head> kemudian gunakan script ini..

O iya ada yang ketinggalan letaknya sebelum </head>

Kusus untuk blogspot Login>Rancangan>Edit HTML. nah baru cari </head> 


untuk mempermpermudah gunakan fasilitas find tekan ctrl f

<style type='text/css'>body HTML,BODY{cursor: url(&quot;ALAMAT CURSOR DISIMPAN&quot;), url(&quot;ALAMAT CURSOR DISIMPAN&quot;), auto;}</style>


nah kira-kira bentuk yang sudah di kasih alamatnya seperti ini...


<style type='text/css'>body HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/cursor_files/tail.ani&quot;), url(&quot;http://downloads.totallyfreecursors.com/thumbnails/tail.gif&quot;), auto;}</style>

Satul lagi kalau Teman-teman mau cursor gambar bulu bisa dengan save image dibawah ini

Yap... Seperti itu. Oke teman teman sekian pembahasan tentang modifikasi cursor pada web atau blog. terimakasih atas kunjungannya. semoga bermanfaat.

Kelebihan Dan Kekurangan Website Menggunakan Teknologi Flash

Apakah Anda sedang mempertimbangkan untuk membuat sebuah website berbasis flash? Akhir-akhir ini banyak perusahaan yang menginginkan sebuah website perusahaan yang menggunakan teknologi flash, tetapi mereka tidak tahu apa kelebihan dan kekurangan menggunakan flash untuk sebuah website.

Secara tampilan, website flash sangat menarik karena penuh dengan animasi. Tetapi untuk SEO, website flash memiliki banyak kekurangan. Jadi sebelum Anda menentukan untuk membuat sebuah website flash atau website non-flash, ketahui dulu apa Kelebihan dan Kekurangan Website Menggunakan Teknologi Flash.

Kelebihan / Keuntungan Menggunakan Flash

Kelebihan yang sangat menonjol dari teknologi flash adalah kemampuannya untuk membuat sebuah website yang interaktif dan ekspresif. Mulai dari membuat tampilan yang sederhana hingga membuat sebuah video bahkan sebuah game, website Anda akan terlihat sangat menarik bagi pengunjung situs web Anda.

Kelebihan lain dari menggunakan teknologi flash untuk website adalah tampilan flash kompatibel dengan semua browser (IE, Mozilla, Google Chrome, Opera, dll), tidak seperti tampilan HTML dan CSS yang tiap browser kadang berbeda dalam menterjemahkan kode sebuah halaman web. Jadi tampilan website akan sama persis di semua browser internet kecuali ditentukan versi flash terbaru.

Kekurangan / Kerugian Menggunakan Flash

Kekurangan pertama yang mungkin pengunjung website Anda bisa langsung rasakan adalah waktu loading halaman yang sangat berat dan lambat, karena file flash memiliki ukuran yang besar. Hal ini akan mempengaruhi jumlah pengunjung website Anda. Tidak peduli semenarik apa website Anda, jika harus menunggu terlalu lama maka pengunjung akan segera menutupnya.

Kekurangan berikutnya, untuk bisa mengakses sebuah video di website flash, dibutuhkan software flash player. Jika komputer pengunjung tidak memiliki flash player, maka muncul link untuk men-download software tersebut. Hal ini akan mengurangi kenyamanan pengunjung web Anda.

Masalah lain yang pasti merugikan adalah susahnya mengoptimalkan sebuah website flash pada Search Engine. Hal ini dikarenakan beberapa bahkan hampir semua Search Engine tidak dapat membaca teks yang ada dalam file flash. Akibatnya spider tidak akan mengindeks teks yang ada, dan peringkat search engine pasti rendah.

Kemajuan teknologi saat ini, memudahkan pengunjung mengakses internet melalui cellular phone / mobile phone. Sehingga terjadi peningkatan tajam pengguna internet mobile. Sayangnya untuk website flash, sebagian besar perangkat mobile seperti iPhone dan BlackBerry tidak dapat mengaksesnya.

Untuk itu jika Anda ingin membuat sebuah website, pertimbangkan apakah menggunakan flash atau tidak. Kalau Anda menginginkan sebuah tampilan yang menarik, ada pengganti flash yang tidak kalah menarik dan SEO friendly. Anda bisa menggunakan MooTools, jQuery, JavaScript, dan HTML5.

Sumber : www.naufala.com