Recent post
Archive for Juli 2012
Pada Postingan sebelumnya mengenai Cara Membuat Cursor Bertabur Bintang, kali ini masih berhubungan dengan cursor juga yaitu Cara Membuat Tulisan Bergerak Mengelilingi Cursor yang dapat mempercantik blog sobat tentunya.
Dimana jika Cursor (Pionter) kita geser baik ke kiri kanan bawah atas kemana saja maka tulisan itupun akan ikut bergerak mengikuti arah cursor tersebut dan mengelilingi cursor sobat pada saat berhenti. Oke yang penasaran langsung saja ikuti langkah - langkah berikut :
1. Masuk ke blogger / dasboard anda.
2. Klik > Tata Letak, klik > Tambah Gadget
3. Pilih > HTML/JavaScript
4. Klik pada > Edit HTML
5. Masukkan script / kode berikut.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999999;
/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = " Welcome To My Blog ";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
6. Klik Simpan
Keterangan :
Kode yang berwarna biru adalah warna tulisannya sedangkan tulisan yang berwarna merah adalah tulisan yang nanti muncul bisa sobat ganti sesuai keinginan sobat.
Semoga Bermanfaat
Kali ini saya akan share Cara Membuat Cursor Bertabur Bintang. Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang.
Sobat bisa lihat contohnya seperti gambar disamping, warna bintang-bintang nya juga bisa diganti sesuai keinginan sobat. Cara membuatnya mudah hanya tinggal memasukkan kode saja .Jika sobat tertarik langsung saja ikuti langkah-langkah berikut :
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:
<scriptsrc="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>
5. Kata warna biru bisa diganti dengan hijau, merah, ungu, silver, kuning, hitam
6. Simpan jika sudah selesai.
Semoga Bermanfaat
Menampilkan kotak iklan di blog sobat akan memberikan peluang bagi advertiser / pemasang iklan ingin memasang iklannya di blog sobat apalagi kalau blog sobat mempunyai banyak traffic setiap harinya serta rank di google yang tinggi, pastinya akan banyak para advertiser yang menginginkan iklan nya dipasang di blog sobat.
Kali ini saya akan share Cara Membuat Banner Iklan Di Blog yang dapat ditempatkan di sidebar blog sobat dengan banner iklan yang berukuran 125 x 125 ( 4 kotak ).
Kali ini saya akan share Cara Membuat Banner Iklan Di Blog yang dapat ditempatkan di sidebar blog sobat dengan banner iklan yang berukuran 125 x 125 ( 4 kotak ).
Ikuti langkah - langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan / Layout
3. Lalu add gadget > HTML/Javascript, copas kode berikut, Edit sesuai keinginan sobat, Kemudian Save
<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="auto" bgcolor="#ffffff">
<tbody><tr>
<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img title="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan"border="0" height="125" width="125" /></a></center></td>
<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img title="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan"border="0" height="125" width="125" /></a></center></td></tr>
</tr><td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img title="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan"border="0" height="125" width="125" /></a></center></td>
<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img title="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan"border="0" height="125" width="125" /></a></center></td></tr>
</tbody></table>
</div>
Pengaturan Kotak Banner Iklan:
1. Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan
2. Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting
3. Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan.
Catatan :
Pastikan ukuran sidebar blog sobat sudah sesuai dengan kotak banner iklan ini.
Semoga Bermanfaat
Kali ini saya akan share Cara Mengganti Favicon Blog Dengan Mudah, sedikit mengenai Favicon / Favorit Icon.
Favicon adalah sebuah gambar kecil di address bar. Terletak disebelah kiri nama blog ataupun judul posting blog yang sedang kita buka. favicon bawaan blogspot biasanya dilambangkan dengan huruf B dalam kotak berwarna orange. Oke bagi sobat blogger yang bosan sama favicon default langsung saja ikuti langkah - langkah berikut :
1. Login ke Blog Sobat
2. Klik Template --> Edit HTML
3. Centang Expand Widget Templates lalu search Ctrl+f "</head>"
4. Kemudian Copy kode berikut dan Paste tepat di atas </head>
<link href='link favicon sobat' rel='icon' type='image/x-icon'/>
5. Simpan dan lihat hasilnya
Hosting image www.postimage.org ---> Recommended
Semoga Bermanfaat
Bagi sobat blogger yang lagi mencari menu horizontal atau yang bisa juga disebut menu drop down mungkin ini bisa menjadi solusinya.
Kali ini saya akan share Cara Membuat Menu Horizontal Drop Down CSS3 dengan tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya juga tidak begitu sulit. Baiklah bagi sobat yang ingin membuat menu CSS3 ini ikuti langkah-langkah berikut :
1. Login ke blogger
2. Pilih Rancangan > Add Gadget > HTML JavaScript.
3. Dan copy kode di bawah ini.
<style>
#css3pic{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3wrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#css3bar{width:100%}
#css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#css3bar a.trigger{padding:8px 13px 8px 9px}
#css3bar li{float:left;position:static;width:auto}
#css3bar li ul,#css3bar ul li{width:140px}
#css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;}
#css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
#css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block}
#css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0}
#css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none}
</style>
<div id='css3pic'>
<div id='css3wrapper'>
<ul id='css3bar'>
<li><a href='#'>Home</a></li>
<li><a class='trigger' href='#'>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Tips Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Widget</a></li>
<li class='hr'/>
<li><a href='#'>CSS</a></li>
<li class='hr'/>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Lifestyle</a>
<ul>
<li><a href='#'>Health</a></li>
<li class='hr'/>
<li><a href='#'>Travel</a></li>
<li class='hr'/>
<li><a href='#'>Food</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Web</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
</ul>
<li><a class='trigger' href='#'>Technology</a>
<ul>
<li><a href='#'>Handphone</a></li>
<li class='hr'/>
<li><a href='#'>Gadget</a></li>
<li class='hr'/>
<li><a href='#'>Computer</a></li>
</ul>
<li><a class='trigger' href='#'>Sports</a>
<ul>
<li><a href='#'>Tennis</a></li>
<li class='hr'/>
<li><a href='#'>Moto GP</a></li>
<li class='hr'/>
<li><a href='#'>Bulu Tangkis</a></li>
</ul>
<li><div id='coom'><a class='trigger' href='#'>Community</a></div></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Ganti kode yang berwarna biru (width atau lebar) sesuaikan dengan blog sobat.
Ganti tanda # dengan URL yang dituju.
Semoga Bermanfaat
Kali ini saya akan share Cara Menghilangkan Tanggal Postingan Pada Blog yang lebih tepatnya menghidden atau menyembunyikan tanggal dari postingan pada blog.
Tanggal postingan merupakan salah satu tampilan default dari blogspot yang digunakan untuk menunjukkan tanggal publikasi suatu postingan. Namun bagi beberapa orang yang tidak ingin diketahui kapan suatu tulisan dipublikasikan, dapat menghilangkan tanggal setiap postingan yang ada di blog nya.
Bagi sobat yang ingin menghilangkannya langsung saja ikuti langkah - langkah berikut :
Tanggal postingan merupakan salah satu tampilan default dari blogspot yang digunakan untuk menunjukkan tanggal publikasi suatu postingan. Namun bagi beberapa orang yang tidak ingin diketahui kapan suatu tulisan dipublikasikan, dapat menghilangkan tanggal setiap postingan yang ada di blog nya.
Bagi sobat yang ingin menghilangkannya langsung saja ikuti langkah - langkah berikut :
1. Masuk ke Edit HTML, kemudian centang Expand Template Widget.
2. Cari kode berikut h2.date-header { maka akan tampil kira-kira seperti dibawah ini :
.main-inner .widget h2.date-header {
border-bottom: 1px solid $(widget.title.border.bevel.color);visibility: hidden;
}
3. Simpan dan lihat hasilnya..
Kalau sobat ingin menghilangkan tanggal postingan di Serp Google juga caranya mudah tinggal Masuk Blog lalu Klik Layout / Rancangan kemudian klik Edit pada "Posting Blog" lalu hilangkan tanda centang pada tanggalnya dan simpan, tinggal nunggu google bot crawl blog sobat. Selesai
Kalau sobat ingin menghilangkan tanggal postingan di Serp Google juga caranya mudah tinggal Masuk Blog lalu Klik Layout / Rancangan kemudian klik Edit pada "Posting Blog" lalu hilangkan tanda centang pada tanggalnya dan simpan, tinggal nunggu google bot crawl blog sobat. Selesai
Semoga Bermanfaat
Mungkin ada diantara sobat yang ingin menghias blog dengan membuat label berputar atau menambah tag berputar ketika pointer mouse diarahkan ke tag atau label tersebut maka tag akan berputar, jika mengklik salah satu tag akan membuka sebuah halaman sesuai tag tersebut.
Kali ini saya akan share Cara Membuat Tag Cloud Comulus Berputar. Caranya mudah, silahkan ikuti langkah - langkah berikut :
1. Login
2. Klik Layout / Rancangan
3. Lalu Tinggal Klik Add Gadget / Tambah Gadget pada sidebar blog sobat
4. Lalu Copy dan Paste kode di bawah ini, kemudian tinggal Edit sesuai keinginan sobat
<embed quality= "high" allowscriptaccess= "always" flashvars= "tcolor= 0x00aadc&mode= tags&distr= true&tspeed= 100&tagcloud= <tags>
<a href = 'http://tn-robby.blogspot.com/'target ='new'style= '14'color= '0x00cc00'hicolor= '0x11111ff'> Tn Robby</a>
<a href = 'http://tn-robby.blogspot.com/p/daftar-isi_29.html'target= 'new'style= '14'color= '0xff0000'hicolor= '0x6600cc'> Contents</a>
<a href = 'http://tn-robby.blogspot.com/p/my-playlist.html'target= 'new'style= '14'color= '0xff0000'hicolor= '0x6600cc'> My Playlist </a>
</tags>" type= "application/x-shockwave-flash" src= "http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id= "tagcloud" name="tagcloud" wmode= "transparent" height= "250" width= "180"></embed>
Keterangan : Untuk yang berwarna MERAH silahkan ganti dengan URL sobat, sedangkan yang berwarna BIRU silahkan ganti dengan label sesuai dengansobat inginkan. Dan sobat juga bisa mengatur ukuran Tag Cloud Comulus tersebut beserta kecepatan berputarnya dengan menganti angka pada Height, Width dan Tspeed nya.
<a href = 'http://tn-robby.blogspot.com/'target ='new'style= '14'color= '0x00cc00'hicolor= '0x11111ff'> Tn Robby</a>
<a href = 'http://tn-robby.blogspot.com/p/daftar-isi_29.html'target= 'new'style= '14'color= '0xff0000'hicolor= '0x6600cc'> Contents</a>
<a href = 'http://tn-robby.blogspot.com/p/my-playlist.html'target= 'new'style= '14'color= '0xff0000'hicolor= '0x6600cc'> My Playlist </a>
</tags>" type= "application/x-shockwave-flash" src= "http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id= "tagcloud" name="tagcloud" wmode= "transparent" height= "250" width= "180"></embed>
Keterangan : Untuk yang berwarna MERAH silahkan ganti dengan URL sobat, sedangkan yang berwarna BIRU silahkan ganti dengan label sesuai dengansobat inginkan. Dan sobat juga bisa mengatur ukuran Tag Cloud Comulus tersebut beserta kecepatan berputarnya dengan menganti angka pada Height, Width dan Tspeed nya.
Semoga Bermanfaat
Kali ini saya akan share Cara Mengatur Tata Letak Menu Horizontal Template Standar yang berada di bawah header blog. Menu horizontal adalah menu yang paling penting dari sebuah blog / web untuk memudahkan pengunjung menelusuri blog tersebut.
Tutorial ini adalah untuk mengatur tab baik merapatkan maupun merenggangkan teks tab secara horizontal maupun vertikal pada menu horizontal tersebut.
Cara mengatur tata letak tab Menu Horizontal dalam blog dapat dilakukan dengan langkah-langkah sebagai berikut :
1. Login
2. Klik Rancangan --> Edit HTML
3. Backup dahulu Template (Recommended)
4. Cari Kode .tabs-inner .widget li a { untuk memudahkan menemukannya pakai Ctrl F
Lalu akan tampil kira-kira seperti di bawah ini :
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
margin-right: 1px;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
background-color: $(tabs.background.color);
Keterangan:
6em : untuk mengatur jarak teks tab vertikal (atas bawah)
1.5em : untuk mengatur jarak teks tab horizontal (sejajar)
1.5em : untuk mengatur jarak teks tab horizontal (sejajar)
6. Kemudian ganti angka di atas sesuai dengan letak yang diinginkan.
7. Klik Simpan Template untuk menyimpan perubahan tampilan blog.
Semoga Bermanfaat
Kali ini saya akan share Cara Membuat Smooth Back to Top Button. Smooth Back to Top Button adalah sebuah tombol yang berfungsi untuk kembali ke awal atau atas halaman blog / web dengan nyaman.
Sobat bisa lihat Smooth Back to Top Button di blog ini, coba scroll ke bawah. ketika sampai di bawah halaman akan muncul sebuah tanda panah keatas.
Cara membuatnya silahkan ikuti langkah-langkah berikut :
Pertama Masukkan terlebih dahulu kode dibawah ini di atas <head> (jika belum ada)
Kedua Klik Add a Gadget (untuk menambah Gadget baru)
Ketiga Copy+Paste script dibawah ini ke dalam gadget
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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/AVvXsEhnqmGODRsMo2PXBY3VtGv-Wt4PEG04y9VZzo-M4Gqy7LAc-1LjwgBv8m3Wa663udKYQVvA1xeQCtAGE-2Gp5kh5GqsB__W8Vb05P6BcY_7AxRFA9dIXx1KQkixqb0BHQMv4FPrGmW8gFk/s1600/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
inobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Kedua Klik Add a Gadget (untuk menambah Gadget baru)
Ketiga Copy+Paste script dibawah ini ke dalam gadget
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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/AVvXsEhnqmGODRsMo2PXBY3VtGv-Wt4PEG04y9VZzo-M4Gqy7LAc-1LjwgBv8m3Wa663udKYQVvA1xeQCtAGE-2Gp5kh5GqsB__W8Vb05P6BcY_7AxRFA9dIXx1KQkixqb0BHQMv4FPrGmW8gFk/s1600/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
inobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Terakhir Save dan Lihat hasilnya
Gambar icon Back to Top nya bisa sobat ganti sendiri kalau tidak suka bisa searching di google dengan keyword "back to top" lalu uploud gambarnya dan copas kodenya ke script yang berwarna "merah" tsb.
Semoga Bermanfaat
Gambar icon Back to Top nya bisa sobat ganti sendiri kalau tidak suka bisa searching di google dengan keyword "back to top" lalu uploud gambarnya dan copas kodenya ke script yang berwarna "merah" tsb.
Semoga Bermanfaat
Pada postingan sebelumnya saya ada share cara membuat scroll pada Artikel Terkait dan Arsip Blog yang dapat menghemat ruang blog sobat, sekarang saya akan share Cara Membuat Scroll Pada Kotak Komentar yang sangat membantu supaya komentar para pengunjung blog sobat tidak memanjang ke bawah dan membuat blog sobat menjadi tidak nyaman dilihat.
Caranya cukup mudah dan simple, sobat blogger silahkan ikuti langkah-langkah berikut :
Caranya cukup mudah dan simple, sobat blogger silahkan ikuti langkah-langkah berikut :
1. Login dulu di Blogger
2. Pilih tab Rancangan (Design) > Edit HTML
3. Jika sudah cari kode berikut #comments-block{
4. Tambahkan kode css berikut supaya kotak komentar tersebut mempunyai fungsi scroll
max-height:300px;border:1px solid #eee;overflow:auto;
Sehingga akan menjadi seperti ini
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;
Save dan lihat, kotak komentar blog sobat sudah ditampilkan dengan fungsi scroll.
Atau kalau tidak ada kode di atas bisa cari kode di bawah ini
<div class='comments' id='comments'>
Ditambahkan beberapa kode sehingga jadi seperti ini
<div class='comments' id='comments' style='max-height:300px;overflow:auto;'>
5. Save, Reload dan lihat hasilnya..
Semoga Bermanfaat
Kali ini saya akan share Cara Membuat Share Buttons Tweet | Facebook Like | Google +1 dengan mudah. Sedikit mengenai apa yang dimaksud dengan Share Buttons ini.
Share buttons adalah tombol-tombol yang dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yang mereka sukai ke jejaring sosial, baik Facebook, Twitter, Google+, dll.
Banyak Blogger yang memasang Share buttons ini karena bentuknya yang simple tapi bagus dan tidak memakan tempat di blog sobat.
Sebelum memasang Share Buttons, perhatikan beberapa hal berikut :
1. Jika anda sudah memasang widget Facebook like atau Google +1, khususnya yang saya share di blog ini, hapus atau ambil terlebih dahulu kode / scriptnya.
2. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut :
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
3. Jika belum, pasang script plugin API Google +1 tersebut di atas </head>pada edit HTML/Edit Template.
Setelah yang di atas sudah selesai kemudian ikuti langkah-langkah berikut :
1. Copy script / kode di bawah ini :
<b:if cond='data:blog.pageType == "item"'>
<table border='0'><tbody><tr><td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="tn_robby">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table></b:if>
<table border='0'><tbody><tr><td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="tn_robby">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table></b:if>
Ganti "tn_robby" dengan Akun twitter anda,
2. Buka halaman edit HTML/Edit Template:
"Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates"
3. Jika ingin memasang di bawah judul posting:
3. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat dibawahnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script / kode tepat diatasnya.
4. Jika ingin memasang di bawah posting/artikel:
4. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script / kode tepat dibawahnya.
5. Save template dan lihat hasilnya.
Semoga Bermanfaat
5. Save template dan lihat hasilnya.
Semoga Bermanfaat
Postingan kemarin saya ada share Cara Membuat Artikel / Related Post tapi tidak memakai Thumbnail. Namun sekarang saya akan share Cara Membuat Artikel Terkait / Related Post Dengan Thumbnail supaya blogger sobat lebih menarik dan nyaman dilihatnya serta ini juga termasuk trik untuk menambah PagesView blog sobat.
Fungsinya masih sama yaitu menampilkan beberapa artikel atau postingan sobat yang berkaitan sesuai label / kategorinya. Oke tidak pake lama langsung saja ikuti langkah-langkah berikut :
Fungsinya masih sama yaitu menampilkan beberapa artikel atau postingan sobat yang berkaitan sesuai label / kategorinya. Oke tidak pake lama langsung saja ikuti langkah-langkah berikut :
2. Cari kode </head> (gunakan ctrl+F untuk mencarinya), lalu ganti/replacekode tersebut dengan kode ini
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8lnKVvFk6eGHXBq5r2jW74PJ11DsXP37OXEkFqusI2oS78LoHa_IkOioT1EVJAnyZjqcxCgLLOa8uLAJiTpHdUziFHhNQU45C0xfh2sg-eR67PsEQUtvb2i4H6DoxvC3KYCGCJNfSD8/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3. Selanjutnya sobat cari kode berikut :
<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>
pilih salah satu dari kode diatas
4. Lalu tepat dibawah kode yang kamu pilih diatas, pastekan kode berikut
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
5. Save dan lihat hasilnya.
Tambahan :
untuk yang warna merah bisa di edit sendiri atau tetap dibiarkan seperti itu.
Semoga Bermanfaat
Kalau biasanya Arsip Blog itu memanjang, tidak bisa di tentukan ketinggiannya dan menghabiskan tempat di blog. Kali ini saya akan share Cara Membuat Arsip Blog Dengan Fungsi Scoll yang akan membuatnya menjadi lebih pendek, bisa mengatur ketinggiannya dan dengan fungsi Scroll jadi tidak akan menghabiskan tempat di blog sobat.
Contohnya bisa lihat gambar di samping kiri ini. Oke langsung saja yang ingin tahu caranya silahkan ikuti langkah-langkah berikut :
1. Login ke blogger sobat.
2. Sebelumnya sobat harus memasang wigets Arsip Blog sobat jika sobat belum memasangnya.
3. Jika sudah selanjutnya pada menu pilih Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.
4. Sekarang kita akan menambahkan atau menyipkan kode <div style='overflow:auto; width:ancho; height:300px;'>dan </div> untuk mengatur ketinggian Arsip Blog, jadi coba sobat cari kode <h2><data:title/></h2>
Keterangan; setiap template berbeda-beda jadi detailnya dan penyisipan kode <div style='overflow:auto; width:ancho; height:300px;'> dan </div>seperti ini:
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
nah seperti itulah sobat harus menyisipkan kodenya.
5. Jika sudah klik pertinjauan terlebih dahulu, jika sudah berhasil baru klik simpan template.
Keterangan;
Untuk mengatur tinggi rendahnya Arsip Blog, sobat tinggal rubah height:300px sesuai selera sobat, seperti height:250px dan lain sebagainya.
Semoga Bermanfaat
Semoga Bermanfaat
Bagi sobat blogger yang lagi ingin menambahkan widget atau gadget Menu Horizontal atau yang disebut Drop Down pada blogger pasti bingung kenapa Menu Horizontal tersebut bentuknya berbeda dengan yang sebenarnya.
Solusinya kita harus terlebih dahulu menambahkan "add a gadget" lagi , dengan cara mengubah settingan default di bloggernya.
Kali ini saya akan share caranya silahkan ikuti langkah-langkah berikut :
Solusinya kita harus terlebih dahulu menambahkan "add a gadget" lagi , dengan cara mengubah settingan default di bloggernya.
Kali ini saya akan share caranya silahkan ikuti langkah-langkah berikut :
1. Login ke blogger. Klik Layout -> Edit HTML
2. Cari kode:
<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
atau
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Keterangan:
Maxwidgets: jumlah widget yang bisa ditambahkan
Showaddelement: menampilkan fungsi add a element atau add a gadget.
3. Kalau sudah ketemu, ganti kode diatas dengan kode berikut ini
<div id='header'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
atau
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Itu berarti kita bisa menambahkan maksimal 3 widget pada bagian header. Sobat bisa mengganti angkanya dengan nilai lain sesuai kebutuhan.
4. Jika sudah, klik Save Template selesei lalu sobat bisa menambahkan widget Menu Horizontal tersebut dengan buat di sidebar dahulu lalu di drag ke headernya lalu save dan lihat hasilnya.
Untuk bagian Blog Post cari kode:
<div id='main'>
<b:section class='main' id='main' showaddelement='no'>
Sedangkan untuk bagian Footer cari kode:
<div id='footer'>
<b:section class='footer1' id='footer1' showaddelement='yes'>
Semoga Bermanfaat
Artikel Terkait atauRelated Post adalah posting atau artikel sobat yang berhubungan dengan artikel-artikel lainnya, atau yang berdasarkan atas label yang diberikan sobat blogger. Yang akan tampil tepatnya dibawah artikel yang dibuka.
Kali ini saya akan share Cara Membuat Artikel Terkait atau Related Post dengan Scroll, yaitu related post yang ditampilkan dalam bentuk menu scroll. Untuk lebih jelasnya, silahkan ikuti langkah-langkah berikut ini :
1. Login ke akun Blogger anda.
2. Klik Rancangan, kemudian pilih Edit HTML.(backup dahulu template --> recommended)
3. Centang Expand Template Widget
4. Cari kode seperti ini: <data:post.body/>
* Jika sobat sudah memasang script Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 (lebih tepatnya di bawah tag </b:if>).
5. Jika sudah ketemu, maka copy paste-kan kode di bawah ini persis berada dibawahnya :
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
6. Cari kode ini : ]]></b:skin>
7. Copy kode di bawah ini dan paste diatasnya.
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
8. Klik Simpan Template.
Semoga Bermanfaat
Kali ini saya akan share Cara Menghilangkan Tulisan Diberdayakan Oleh Blogger pada blogspot dengan mudah.
Jika sobat blogger memakai template bawaan atau standar yang sudah ada di blogger pasti di footer blog sobat akan ada tulisan "diberdayakan oleh blogger".
Kalau sobat tidak suka dan ingin menghilangkannya ikuti langkah-langkah dibawah ini :
1. Login Blogger
2. Template -> Klik Edit HTML
3. Setelah itu centang "Expand Template Widget"
4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian
5. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin :
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
6. Klik Simpan Template
Selesai ..
Lihat hasilnya tulisan "diberdayakan oleh blogger" nya sudah hilang tapi bukan dihapus cuma di hidden saja kalau dihapus takutnya blog sobat akan kena banned sama bloggernya. Sekian
Semoga Bermanfaat