21.08 | 0
komentar
Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan
Membuat Efek Expose
Written By Munazat on Rabu, 07 Desember 2011 | 21.08
Label:
Tutorial Blogspot
Membuat efek lampu Berjalan di Teks
Mungkin ada yang belum paham maksud dari judul yang saya tulis,maksud saya seperti teks yang di blog saya di tabberTentang Blog Ini, kan tulisanya ada sinarnya yang lari lari tuh ...
biar lebih jelas maksudnya teksnya bisa ada efeklampu berjalanya seperti ini, terserah kawan mau menamainya apa tapi kalaumenurut saya si lebih suka menamainya efek lampu berjalan :) , terus gimana carabikinya mas izoel ??, caranya gimana yah ??, begini saja, kopykan kode di bawah inidi posting blog kamu atau di mana saja tapi bukan di cangkir kopi, di wordpad jugabisa, berikut kodenya
.<b><script language="JavaScript1.2">
var message="TULISAN DI DALAM TANDA PETIK INI ADALAH TULISAN YANG BEREFEK LAMPU BERJALAN"
var neonbasecolor="gray"
var neontextcolor="orange"
var neontextcolor2="#3300ff"
var flashspeed=1
var flashingletters=10 // jumlah huruf yang tersorot oleh flash
var flashingletters2=3 // jumlah warna di ekor flash
var flashpause=1
///
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script> </b>
Ganti teksnya yang bertuliskan "TULISAN DI DALAM TANDA PETIK INI ADALAH TULISAN YANG BEREFEK LAMPU BERJALAN" dengan teks yang kamu inginkan.
Nah silakan mencoba...
21.02 | 0
komentar
Label:
Tutorial Blogspot
Membuat Warna Kolom komentar Berbeda
Kali ini saya dapet satu lagi trik mempercantik blog membuat kolom komentar admin blog berbeda dengan komentar pengunjung, jadi setiap ada balasan komentar, background komentar balasan itu warnanya akan berbeda, tujuanya sudah tentu untuk membedakan komentar pengunjung dan admin.
Cara membuatnya ikuti langkah berikut ...
Masuk ke Blogger
Pilih tab Design
Pilih Edit HTML beri tanda centang di kotak expand widget template
Selanjutnya cari kode ]]></b:skin>.
kalau sudah ketemu, kopikan kode berikut di atas kode ]]></b:skin>.
.comment-body-author {
border: 1px solid #87CEEB;
background: #ddfeeb;
width: 500px;
margin: 10px 10px 10px 10px;
padding-left: 20px;}
Catatan : warna background dan warna garis tepi bisa di ganti sesuai dengan warna latar belakang blog kamu.border: 1px solid #87CEEB;
background: #ddfeeb;
width: 500px;
margin: 10px 10px 10px 10px;
padding-left: 20px;}
Langkah selanjutnya cari kode seperti berikut
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
Tambahkan kode berikut di atasnya
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
Dan kode ini di bawahnya
</b:if>
Sehingga menjadi seperti berikut
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
Selanjutnya simpan template kamu.
Selamat mencoba
20.58 | 0
komentar
Label:
Tutorial Blogspot
Tampilan Baru Dashboard Blogger
Assalamualaikum
Saya ingin bikin posting tentang tampilan dashboard blogger draft baru saya, karena ini berkaitan dengan posting saya sebelumnya yang judulnya menu pengaturan di blogger, dan semua settingan yang berhubungan dengan menu menu blogger. Karena bagi blogger yang dashboardnya sudah berganti maka tutorial ini tidak begitu membantu, sebenarnya tampilan dashboard baru ini sama hanya saja sepertinya tampilanya saja yang lebih menarik dan fiturnya juga di lengkapi.
Gambar paling atas adalah tampilan dashboarnya :
Kolom sebelah kiri adalah daftar blog kita dan kolom sebelah kanan adalahblog yang kita ikuti (follow)
Kalau sebelumnya kita bisa langsung masuk menu setting dari dashboard, sekarang kita masuk dulu ke blog yang akan kita setting dengan memilih salah satu blog pada daftar di kolom sebelah kiri pada dashboard.
Kalau sudah masuk kamu akan melihat tampilan seperti di bawah ini
Lihat di kolom sebelah kiri, semua pengaturanya berpindah tempat dan di awal halaman blog (overview) sudah di tampilkan statistik pengunjung blog kita (tengah) beserta jumlah komentar blog kita (kanan atas).
Menu daftar posting ada di bawah overview, yang ini menurut saya sangat membantu karena langsung masuk ke daftar posting jadi mempermudah kalau mau mengedit atau menghapus posting di bandingkan dengan tampilan sebelumnya dimana kita harus masuk ke halaman buat posting baru terlebih dahulu.
Dan di bawahnya itu setting static page blog namanya (kalau ngga salah :D )
Di bawahnya lagi ada daftar komentar, dan selanjutnya adalah data statistik lengkap blog kita.
Dan kita tidak susah lagi kalau mau ngganti favicon blog kita karena sudah ada menunya.
Bahkan tampilan halaman new postnya juga jadi bagus...
Bagus kan ?, keren kan ?, tapi sayangnya saya ko ga nemuin editor HTML nya yah ??, editor HTMLnya kemana ???, kalau ada yang tau letak editor html di blogger draft bantulah saya yang tidak tahu ini kasih tau saya "dimana letak editor HTML di blogger draft ", heuft ga jadi seneng deh....ckckckck
Tapi sebelum terlambat untungnya saya sempat menyimpan alamat url waktu saya ngedit HTML, agar bisa ngedit HTML di draft blogger, pertama kamu loggin nah kalau sudah loggin kamu ganti urlnya dengan url editor HTML draft blogger "http://draft.blogger.com/html?blogID=(nomor ID blogger kamu)"
Silakan mencoba semoga berhasil
Saya ingin bikin posting tentang tampilan dashboard blogger draft baru saya, karena ini berkaitan dengan posting saya sebelumnya yang judulnya menu pengaturan di blogger, dan semua settingan yang berhubungan dengan menu menu blogger. Karena bagi blogger yang dashboardnya sudah berganti maka tutorial ini tidak begitu membantu, sebenarnya tampilan dashboard baru ini sama hanya saja sepertinya tampilanya saja yang lebih menarik dan fiturnya juga di lengkapi.
Gambar paling atas adalah tampilan dashboarnya :
Kolom sebelah kiri adalah daftar blog kita dan kolom sebelah kanan adalahblog yang kita ikuti (follow)
Kalau sebelumnya kita bisa langsung masuk menu setting dari dashboard, sekarang kita masuk dulu ke blog yang akan kita setting dengan memilih salah satu blog pada daftar di kolom sebelah kiri pada dashboard.
Kalau sudah masuk kamu akan melihat tampilan seperti di bawah ini
Lihat di kolom sebelah kiri, semua pengaturanya berpindah tempat dan di awal halaman blog (overview) sudah di tampilkan statistik pengunjung blog kita (tengah) beserta jumlah komentar blog kita (kanan atas).
Menu daftar posting ada di bawah overview, yang ini menurut saya sangat membantu karena langsung masuk ke daftar posting jadi mempermudah kalau mau mengedit atau menghapus posting di bandingkan dengan tampilan sebelumnya dimana kita harus masuk ke halaman buat posting baru terlebih dahulu.
Dan di bawahnya itu setting static page blog namanya (kalau ngga salah :D )
Di bawahnya lagi ada daftar komentar, dan selanjutnya adalah data statistik lengkap blog kita.
Dan kita tidak susah lagi kalau mau ngganti favicon blog kita karena sudah ada menunya.
Bahkan tampilan halaman new postnya juga jadi bagus...
Bagus kan ?, keren kan ?, tapi sayangnya saya ko ga nemuin editor HTML nya yah ??, editor HTMLnya kemana ???, kalau ada yang tau letak editor html di blogger draft bantulah saya yang tidak tahu ini kasih tau saya "dimana letak editor HTML di blogger draft ", heuft ga jadi seneng deh....ckckckck
Tapi sebelum terlambat untungnya saya sempat menyimpan alamat url waktu saya ngedit HTML, agar bisa ngedit HTML di draft blogger, pertama kamu loggin nah kalau sudah loggin kamu ganti urlnya dengan url editor HTML draft blogger "http://draft.blogger.com/html?blogID=(nomor ID blogger kamu)"
Silakan mencoba semoga berhasil
20.52 | 0
komentar
Label:
Tutorial Blogspot
Following Star Pada Cursor
Written By Munazat on Selasa, 06 Desember 2011 | 15.15
Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript (more info)
2. Copy dan paste kod berikut dalam html/javascript yang anda buka.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>
Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.
3. Save dan lihat hasilnya.:)
15.15 | 2
komentar
Label:
Tutorial Blogspot
Animated Top Navigation Menu
Written By Munazat on Minggu, 04 Desember 2011 | 22.42
Cara membuat top navigasi yang seperti itu di butuhkan struktur kode sebagai berikut
Struktur HTMLnya seperti berikut
/*--HTML--*/
<ul id="topnav">Ini adalah menu yang nantinya akan tampil di blog kamu, jadi bisa kamu ganti isinya sesuai blog kamu
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Selanjutnya adalah struktur CSS, CSS ini gunanya untuk mengatur background gambar, background hover dan warna huruf dari menu kita nanti.
/*--CSS--*/
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: white;
background: url(*) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: white;
background-position: left bottom;
background: url(http://i1191.photobucket.com/albums/z464/izoel1/topnav.png) repeat-x;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}
Pada struktur CSS di atas warna background saya samakan dengan blog contoh, kamu bisa mengganti warna backgrounnya dan warna hurufnya.
Animation JQuery, ini di butuhkan untuk mengatur efek animasi menu kamu nantinya
/*--jquery--*/
<script src='http://izoel.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>.
Dan yang terakhir adalah pengaturan script di template kamu :
/*--javascript--*/
$(document).ready(function() {.
$("#topnav li").prepend("<span/>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
Sekarang saya akan menjelaskan pemasangan pada blogger, caranya kamu masuk ke blogger >>Design >> Edit HTML >> beri tanda centang di opsi expand widget template.
Sekarang cari kode <head> letakan kode /*--jquery--*/ setelah atau di bawahnya kode <head>.
Selanjutnya kamu cari kode ]]></b:skin> dan kamu letakkan struktur css *--CSS--*/ tepat di atas atau sebelum kode ]]></b:skin>.
Selanjutnya kamu cari kode </body> lalu kamu letakan kode javascript /*--javascript--*/ di atas atau sebelum kode </body>. "dimasukkan" di dalam <script></script>
Simpan template kamu.
Langkah terakhir kamu keluar dari edit HTML dan masuk ke page elements, pilih add a gadget, kemudian kamu pilih menu HTML/JavaScript dan kamu masukkan struktur kode /*--HTML--*/di dalam kotak, kemudian simpan.
Sekarang lihat blog kamu.
Selamat mencoba, semoga berhasil.
22.42 | 0
komentar
Label:
Tutorial Blogspot
Kelopak Bunga Berguguran
Written By Munazat on Jumat, 02 Desember 2011 | 04.21
Ingin menampakkan blog anda kelihatan lebih menarik dengan objek yang berguguran selain daripada salji.?
Apa kata kalau hiaskan blog anda dengan kelopak bunga yang berguguran seperti gambar di bawah.
Anda boleh melihat contoh kelopak bunga yang berguguran di blog demo ini.
Tutorial yang ringkas adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka
Apa kata kalau hiaskan blog anda dengan kelopak bunga yang berguguran seperti gambar di bawah.
Anda boleh melihat contoh kelopak bunga yang berguguran di blog demo ini.
Tutorial yang ringkas adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
3. Save dan lihat hasilnya.:)
04.21 | 0
komentar
Label:
Tutorial Blogspot
Sembunyikan Shoutbox Pada Blog
Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)
Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.
Tutorial sembunyikan shoutbox seperti di bawah
1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.
2. Copy dan paste kod berikut ke ruangan html/javascript
Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.
Tutorial sembunyikan shoutbox seperti di bawah
1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.
2. Copy dan paste kod berikut ke ruangan html/javascript
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
KOD SHOUTBOX DISINI
<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
00.27 | 0
komentar
Label:
Tutorial Blogspot
Membuat Rating Pada Blog
Written By Munazat on Kamis, 01 Desember 2011 | 22.52
Adakah anda rasakan pengunjung blog anda menyukai entri yang anda post dalam blog anda.?
Bagaimana anda menentukan samada mereka suka atau tidak entri pada blog.? Adakah semata² melalui komen yang di hantar.?
Kini dengan menggunakan sistem rating, anda dapat menilai tahap 'kesukaan' pengunjung blog anda terhadapa entri yang anda taip dengan lebih stylo.:)
Contoh sistem ini telah diletakkan di test blog
Cara untuk letak sistem ini agak senang kerana tidak memerlukan anda untuk ubah code html anda, semuanya tersedia dan anda hanya perlu ikuti beberapa langkah berikut.
1. Login akaun blogger anda.
2. Buka web http://www.outbrain.com
3. Pada paparan pilih option yang anda.
-->Digalakkan untuk mendaftar untuk mendapatkan maklumat rating dan juga (paling penting bagi aku) untuk membuang 'related post' yang didatangkan secara automatic dalam sistem ini.
4. Klik install dan paparan baru akan muncul
5. Pada paparan, pilih blog anda kemudian klik 'add widget'.
6. Selesai. (Anda boleh buat pengubahsuaianan daripada akaun yang anda telah buat sebelum ini)
Bagaimana anda menentukan samada mereka suka atau tidak entri pada blog.? Adakah semata² melalui komen yang di hantar.?
Kini dengan menggunakan sistem rating, anda dapat menilai tahap 'kesukaan' pengunjung blog anda terhadapa entri yang anda taip dengan lebih stylo.:)
Contoh sistem ini telah diletakkan di test blog
Cara untuk letak sistem ini agak senang kerana tidak memerlukan anda untuk ubah code html anda, semuanya tersedia dan anda hanya perlu ikuti beberapa langkah berikut.
1. Login akaun blogger anda.
2. Buka web http://www.outbrain.com
3. Pada paparan pilih option yang anda.
-->Digalakkan untuk mendaftar untuk mendapatkan maklumat rating dan juga (paling penting bagi aku) untuk membuang 'related post' yang didatangkan secara automatic dalam sistem ini.
4. Klik install dan paparan baru akan muncul
5. Pada paparan, pilih blog anda kemudian klik 'add widget'.
6. Selesai. (Anda boleh buat pengubahsuaianan daripada akaun yang anda telah buat sebelum ini)
22.52 | 0
komentar
Label:
Tutorial Blogspot
Membuat Facebook "Like" Button
Meletakkan button 'like' dalam blog dapat memberi gambaran secara kasar samada penunjung anda menyukai entri yang ada di blog anda. Selain itu, penggunaan button 'like' ini juga sedikit sebanyak dapat meningkatkan trafik blog anda.
Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.
Cara-cara untuk meletakkan button like ini adalah seperti berikut.
1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod berikut.
3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
contoh:
4. Save dan lihat hasilnya.:)
Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.
Cara-cara untuk meletakkan button like ini adalah seperti berikut.
1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod berikut.
<data:post.body/>
3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
contoh:
4. Save dan lihat hasilnya.:)
22.24 | 0
komentar
Label:
Tutorial Blogspot
