Membuat Back To Top Berefek (Smooth)
Bagaimana Membuat Back To Top / Kembali ke Atas pada Blogger?
Setelah beberapa waktu lalu sharing seputar bagaimana membuat link anchor back to top dalam satu halaman posting blog,dengan konsep yang sama namun dengan sentuhan jQuery (bahasa javascript) dapat kita ciptakan sebuah tombol back to top yang berfungsi untuk mempermudah pengunjung dalam melihat semua konten blog dalam halaman tersebut.
Biasanya,back to top button ini sangat berguna sekali untuk blog atau situs yang memiliki konten sangat panjang hingga memaksa pengunjung harus menggulung scroll window dalam melihat konten yang ada.
Nah,seperti yang sudah Pelajaran Blog terapkan,scroll back to top ini sobat dapat lihat di sebelah kanan bagian bawah saat scroll window sobat gulung ke bawah:
Biasanya,back to top button ini sangat berguna sekali untuk blog atau situs yang memiliki konten sangat panjang hingga memaksa pengunjung harus menggulung scroll window dalam melihat konten yang ada.
Nah,seperti yang sudah Pelajaran Blog terapkan,scroll back to top ini sobat dapat lihat di sebelah kanan bagian bawah saat scroll window sobat gulung ke bawah:
Dan saat ada eksekusi klik pada tombol backtotop tersebut maka membawa kita pada halaman atas dengan sedikit efek smooth (cari aja dengan google translate apa itu arti 'smooth' ya hihihi)
Langkah dan Cara Membuat Back To Top Button jQuery
Pertama,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar:
Kemudian letakkan kode berikut,lalu simpan.Selesai.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9T1B1T3BU1SQmwucAlldz6Xx_pGhHSAmmQmGHOAUGKCSYp1QBmZkX2TZcD_JFI_dC7uhkhrFvv-kL5IRvVpjHqqQSYNDdpMl4BZsQvcG3FURpZ8UYnLTQG63iiweBO4prSdrdb_hTM0/s400/Back-to-top.png"
/>', //HTML for control, which is auto wrapped in DIV w/
ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws &&
document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not
IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute',
bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx,
opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest &&
mainobj.$control.text()!='') //loose check for IE6 and below, plus
whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>Sumber Cara Membuat Read More Otomatis di Blogger
Read More Otomatis pada Template Blogger
Seperti janji minggu lalu ya sob,kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.
Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.
Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.
Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.
Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D
Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript
Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.
Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.
Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.
(1)
(2)
(3)
Selanjutnya,cari kode
</head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>
Kemudian cari kembali kode
<data:post.body/> atau <p><data:post.body/></p>Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:
Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>
<data:post.body/> atau <p><data:post.body/></p>tersebut dan gantilah dengan kode berikut:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual,tinggal hapus kode:
<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>Selengkapnya...</strong></a></p>
</b:if>
Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil.....good luck//!!!
Sumber
cara Memasang Iklan Disamping postingan
Langsung saja yah ikuti langkah-langkah berikut:
1.Log in ke blogger dengan akun yang anda punya.
2.pilih rancangan » edit Html » jangan lupa centang kotak Expand Template Widget.
3.Carilah kode
<b:if cond='data:blog.pageType == "item"'>*untuk iklan yang berada di seblah kiri posting
<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>
<--Simpan Kode Iklan Disini--></div></b:if>
<b:if cond='data:blog.pageType == "item"'>*untuk iklan yang berada disebelah kanan posting
<div style='float:right;width:300px;height:250px;padding:0 0px 0px 0;'>
<--Simpan Kode Iklan Disini--></div></b:if>
5.save template..selesai...Happy blogging ya...!!
keterangan
width:300px dan height:250px adalah ukuran iklan anda.Cara Membuat Kotak SEO Permalink Di Blogspot
Di bagian bawah postingan, sobat blogger pasti sering melihat HTML <a> Tag dari beberapa blog yang menampilkan link dan judul postingan
dalam sebuah kotak. Link dan Judul postingan yang ditampilkan adalah
link dan judul postingan yang sedang di baca oleh pengunjung blog.
Berikut ini contoh dalam bentuk gambar:
Banyak orang yang meyebut fitur blog yang seperti itu dengan sebutan SEO Permalink atau SEO Permanent Link. Kalau sobat blogger mau tahu penjelasan Google tentang Permalink, sobat blogger bisa membaca postingan Google yang berjudul How do I create permanent links to my posts?.
Apa mamfaat yang kita peroleh dengan memasang SEO Permalink di blog? Mamfaat yang kita peroleh dengan memasang SEO Permalink di blog adalah untuk mempermudah rekan-rekan kita sesama blogger untuk memasang tag permalink yang sudah kita siapkan ketika mereka melakukan copy paste postingan yang kita buat di blog mereka. Jadi mereka tidak capek-capek untuk membuat tag permalink.
SEO Permalink yang saya share buat sobat blogger kali ini, memiliki tampilan yang sangat simple tetapi tidak akan mengurangi keindahan blog sobat blogger. Kotak SEO Permalink ini bila diarahkan cursor, maka HTML <a> Tag yang terdapat di dalamnya secara otomatis di blok.
Cara Membuat Permalink Seo Di Blogspot
Banyak orang yang meyebut fitur blog yang seperti itu dengan sebutan SEO Permalink atau SEO Permanent Link. Kalau sobat blogger mau tahu penjelasan Google tentang Permalink, sobat blogger bisa membaca postingan Google yang berjudul How do I create permanent links to my posts?.
Apa mamfaat yang kita peroleh dengan memasang SEO Permalink di blog? Mamfaat yang kita peroleh dengan memasang SEO Permalink di blog adalah untuk mempermudah rekan-rekan kita sesama blogger untuk memasang tag permalink yang sudah kita siapkan ketika mereka melakukan copy paste postingan yang kita buat di blog mereka. Jadi mereka tidak capek-capek untuk membuat tag permalink.
SEO Permalink yang saya share buat sobat blogger kali ini, memiliki tampilan yang sangat simple tetapi tidak akan mengurangi keindahan blog sobat blogger. Kotak SEO Permalink ini bila diarahkan cursor, maka HTML <a> Tag yang terdapat di dalamnya secara otomatis di blok.
Cara Membuat Permalink Seo Di Blogspot
- Sign In di blogger.com
- Pada menu drop down, pilih template
- Backup template sobat terlebih dahulu
- Klik Edit HTML dan klik Proceed
- Cari kode <data:post.body/> dan letakkan kode berikut di bawahnya
<b:if cond='data:blog.pageType == "item"'>
<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Jika anda ingin Copy Paste postingan ini, jangan lupa mencantumkan HTML <a> Tag berikut di postingan anda.</span><br />
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'><a href="<data:post.url/>"><data:post.title/></a></textarea><br/>
</div><br />
</b:if>
- Simpan template sobat