Tampilkan postingan dengan label tutorial untuk blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial untuk blog. Tampilkan semua postingan

Selasa, 24 September 2013

Membuat Template Blog Sendiri Dengan Software Artisteer 4


Free Download Artisteer 4 Terbaru Full Version

Download Artisteer 4 Terbaru Full Version
Dengan Software Artisteer 4 Terbaru ini kalian dapat membuat template blog dengan simple & mudah. Software ini sangat mudah untuk digunakan, semua tampilan GUI dan tidak memerlukan kemampuan melakukan Coding pemograman HMTL dan CSS karena Artisteer 4 ini bersifat WYSIWYG.

Free Download Artisteer 4 Terbaru Full Version

Minimal System yang dibutuhkan :
  • Microsoft Windows XP, Vista, Windows 7
  • Intel or AMD processor 1500 MHz or higher
  • Disk Space: 100 MB
  • RAM : 512 MB
  • .Net Framework 2.0

Download Artisteer 4.0 Full Version + Patch 100% Work



Download Artisteer 4.0 Full Version, Crack, Patch, Keygen, Serial Number
Download Artisteer 4.0 Full Version + Patch 100% Work :
Artisteer 4.0 | Download [ 114 Mb ]
Patch 100% Work | Download [ 6,1 Kb ]

Support Me : www.nurfahmiakhmad96.blogspot.com

  Artisteer ini mempunyai fitur sebagai berikut : 
  • Desain blog mengagumkan dan web template cool dalam hitungan menit
  • Ekspor ke Blogger, Joomla, Wordpress dan produk CMS lainnya
  • Tidak perlu belajar Photoshop, CSS, HTML atau teknologi lainnya
  • Menyenangkan dan mudah digunakan!
  • Membuat website yang lengkap dan blog, mengedit halaman, menulis konten, dan mempublikasikan secara online!
  • Preview,  download dan mengedit website online dan sampel Template!
Berikut adalah SecreenShotnya :
Artisteer 4.0 Full Version ScreenShotnya
Selamat Mendownload dan Berkreasi.

Senin, 23 September 2013

Cara Mengatur Format Waktu Dan Tanggal Pada Blog




Pada suatu ketika saya sedang berkunjung kepada sebuah blog sahabat,ternyata masih ada saja yang belum mengatur waktu dan tanggal yang terdapat pada blog yang di kelolanya,dan ternyata tidak hanya satu atau dua blog saja belum mengatur settingan waktu nya pada bagian tanggal publikasi postingan,dan yang paling sering saya lihat adalah tanggal dan waktu yang terdapat pada bagian kolom komentar,awalnya saya tidak sengaja melihat tanggal publikasi komentar,yang pada hari itu juga komentarpun muncul (komentar tanpa moderator) dan sampai akhirnya saya melihat tanggal dan waktu yang berbeda dengan hari dimana komentar tersebut di publikasikan,misalnya saya komentar pada jam 19.00 tanggal 24 maret 2013,ternyata yang muncul jam 21.30 23 maret 2013,terpaut hampir satu hari sendiri perbedannya.

Untuk mengatasi masalah itu sebenarnya sangatlah sederhana,dan saya yakin hampir setiap blogger sudah bisa melakukannya,hanya saja admin blog tersebut lupa untuk mengatur waktu dan tanggal pada blog mereka,terutama pada bagian komentar,.Dan jika memang masih ada sahabat yang belum bisa men setting nya,silahkan ikuti cara-caranya yang sudah saya tuliskan di bawah ini:


Cara Mengatur Format Waktu Dan Tanggal Pada Blog
  • Pertama masuk ke akun blog sobat,selanjutnya pilih setelan >> bahasa dan performatan (lihat kotak merah pada gambar)
  • Langkah selanjutnya silahkan lihat gambar yang sudah saya beri tanda dengan nomor 1-4 yang masing-masing bisa sobat setting sendiri sesuai dengan keadaan:
  1. Zona Waktu = Atur zona waktu tersebut sesuai dengan zona kawasan negara kita,pilih saja yang jakarta dengan waktu yang di sesuaikan sendiri dengan keadaan.
  2. Format Header Tanggal = Atur bagian ini untuk menyesuaikan waktu dan tanggal pada saat postingan di terbitkan.
  3. Format Timestamp = Sesuaikan dengan jam yang sedang berlangsung saat itu juga
  4. Format Stempel Waktu Komentar = Atur waktu dan tanggal untuk komentar yang muncul ketika di publikasikan sehingga waktu tersebut cocok dengan keadaan yang sedang berlangsung

Kamis, 12 September 2013

Cara Menyulap Blog Menjadi Mesin Uang

Bagaimana Blog Biasa Mampu Menjadi Mesin Uang Otomatis. Ebook ini akan menjelaskan kepada anda gambaran lengkap bagaimana seorang blogger mampu mengubah blognya yang awalnya hanya diary online menjadi mesin uang online. Ditulis oleh Lutvi Avandi berdasarkan pengalaman berbisnis online selama bertahun-tahun.
Blog adalah website yang isinya disusun berdasarkan urutan kejadian atau urutan waktu penerbitan. Jadi mirip dengan diary tapi versi online. Dan memang awalnya blog ditujukan sebagai diary online yang menceritakan pengalaman2 pemiliknya. Sampai saat ini, masih banyak blogger yang memanfaatkan blog sebagai diary onlinenya.
Jadi bisnis online menggunakan blog adalah bisnis online dengan memanfaatkan diary? Pertanyaan tersebut akan dijawab di ebook setebal 44 halaman ini.
Download
  Menyulap Blog Menjadi Uang

Panduan Dasar Membuat Blog WordPress



WordPress adalah salah satu mesin blog atau CMS terpopuler di muka bumi, dengan jumlah pengguna mencapai lebih dari 10 juta orang dari seluruh penjuru dunia. Ia dikembangkan untuk pertama kalinya leh Matt Mullenweg pada tahun 2002, dengan berbasis pada mesin blog b2 yang tidak lagi dikembangkan penciptanya, Michel Valdrighi.
Dalam perjalanannya hingga kini, WordPress telah menjadi salah satu CMS yang dikembangkan komunitas yang fanatik, yang tidak hanya mendukung dengan cara menngunakan WordPress, melainkan juga menyumbang kritik, saran serta kode-kode pengenmbangan bagi CMS yang mereka cinta tersebut.
Ebook ini berisi 38 halaman dan ditulis oleh Cosa Aranda, Salah seorang Internet Marketer Indonesia.
Download
  Panduan Dasar Membuat Blog WordPress

38 Tips Sakti

Ebook SaktiDi tengah-tengah jutaan website yang ada di Indonesia, Apakah Website Anda termasuk dalam 1% website yang menghasilkan PROFIT untuk Anda?
Jika Website Anda belum menghasilkan keuntungan, maka buku ini adalah solusi dan petunjuk mudah & sederhana agar Anda bisa memperbaiki poin poin masih kurang & lemah sehingga akhirnya website tersebut menjadi lebih efektif & SAKTI.
Dan, jika Website Anda memang sudah menghasilkan, gunakan tulisan ini sebagai ‘check list’ atau acuan karena perubahan sekecil apapun di Website Anda, pasti meningkatkan efektivitas dan Profit dari Website Bisnis Anda.
JANGAN Buang-Buang Uang – bayar Domain & Hosting & Web Designer, tapi Website Anda tidak menghasilkan Banyak Profit untuk bisnis Anda.
Gunakan 38 Tips SAKTI agar:
• Website Anda akan makin efektif
• Website Anda akan makin optimal
• Website Anda akan menghasilkan lebih banyak pengunjung
• Website Anda akan lebih memberikan Profit/Keuntungan
• Website Anda akan …SAKTI & Perkasa.
Download Ebook 38 Tips Sakti.

  38 Tips Sakti

6 Cara Paten Mendapatkan Uang Dari Blog




Ada banyak sekali jenis media di internet, tapi mengapa blog ? Yah, Anda mungkin memiliki satu dua alasan untuk meragukannya, tapi di ebook yang ditulis oleh seorang pakar bisnis internet, Cosa Aranda ini punya ENAM alasan untuk membantah keraguan tersebut.
Alasan
(1) Blog mudah untuk di buat.
(2) Blog mudah untuk digunakan.
(3) Blog (relatif) mudah untuk dimodifikasi sesua kebutuhan.
(4) Berkesan Personal.
(5) Interaktif.
(6) Biaya perawatan (relatif) murah.
Lantas bagaimana cara mendapatkan uang dari blog. Tenang, Di Ebook ini akan di bahas tuntas 6 cara paten mendapatkan uang dari blog.


  6 Cara Paten (3.4 MB)

Minggu, 25 Agustus 2013

Cara Membuat Tombol Next Page Dengan Angka 1,2,3,4



Assalamualaikum dan selamat malam semua para sahabat blogger,,oy pada kesempatan lalu saya baru saja memposting tentang bagaimana cara Membuat Tombol Prev , Home dan Next di Blogspot dan pada kesempatan kali ini saya akan membagikan cara memasang next page dengan angka,,sebenarnya antara (Membuat Tombol Prev , Home dan Next di Blogspot) dan (Memasang Next Page Dengan Angka) kegunaan dan tujuan sama,, yang berbeda hanyalah tampilan dan pastinya cara pemasangannya,, untuk contoh silahkan lihat gambar di bawah ini :


Okey sobat,,kita langsung saja masuk ke cara membuatnya.
1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>
 
 .showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
 
6.  Setelah itu cari kode </body>
7. Copy lalu paste kode di bawah ini tepat si atas kode </body>
 
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://js-rezdown7.googlecode.com/files/rd7page.js' type='text/javascript'/>
 
8. Save Template Dan Lihat Hasilnya
 
Sekian Dulu Dari Saya

Cara mudah Membuat page previous 1,2,3,4,5 Next Di Blog Agan

Cara membuat Navigasi Page Number di blogspot atau cara membuat nomor pada bagian bawah posting untuk menuju ke halaman sebelumnya atau selanjutnya cara ini berfungsi untuk memudahkan pengunjung untuk melihat lihat setiap postingan pada blog anda dan tentunya akan lebih mantab ya khan? awalanya berbagai kode script yang akang V-Bolt coba kebanyakan tidak berhasil namun setelah google akang V-Bolt berhasil menemukan kode script yang sukses buat akang V-Bolt sendiri, dan untuk itu akang V-Bolt akan memberikan kepada agan agan sekalian  Cara mudah Membuat page previous 1,2,3,4,5 Next Di Blog Agan
 
Contoh Gambar :
 
 
 Baiklah Mari kita mulai sekarang :

1. Login ke blogger.

2. pilih dan klik Tata Letak dan pilih Edit HTML

3. Kalau sudah, klik Expand Template Widget

4. Lalu cari kode berikut (Ctrl + F) : ]]></b:skin>

5. Kemudian masukan kode script dibawah ini tepat di atas kode: ]]></b:skin> 

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

6. Selanjutnya kita cari lagi kode berikut: </body>

7. Kemudian masukan kode script berikut tepat di atas kode: </body> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Keterangan :
Kode pageCount di atas menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
Kode displayPageNum menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu).
Kode upPageWord mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
Kode downPageWord mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

8. Terakhir kita cari kode script berikut: 'data:label.url'

9. Gantilah kode script diatas dengan kode dibawah ini:
'data:label.url + &quot;?&amp;max-results=5&quot;'    


Keterangan :
Fungsi dari script ini adalah untuk mengganti default (standar) Blogspot yang akan menampilkan 20 posting setiap halamannya, karena pada pageCount di atas kita isi 5, maka pada script ini pun juga diisi dengan 5 (menampilkan 5 posting per halaman).

10. Simpan template, dan lihat hasilnya.

Jumat, 02 November 2012

Website untuk download template blog


Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan untuk blognya.

Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis yang dirasakan sesuai untuk blog anda.
Website untuk download template blog


Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file dalam bentuk zip/rar, anda extract dahulu file tersebut.)
Website untuk download template blog


Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara percuma.

http://btemplates.com/
Website untuk download template blog

http://www.ourblogtemplates.com/
Website untuk download template blog

http://www.deluxetemplates.net/
Website untuk download template blog


http://blogtemplate4u.com/
Website untuk download template blog

http://www.bloggertemplatesfree.com/
Website untuk download template blog

http://www.btheme.info/
Website untuk download template blog

http://www.blogspottemplate.com/
Website untuk download template blog


http://www.freebloggertemplate.org/
Website untuk download template blog


http://www.bloggertemplateplace.com/
Website untuk download template blog


Anda juga boleh mendapatkan pelbagai lagi template untuk blog dengan hanya menggunakan fungsi search pada google.

Tips: Anda tidak perlu risau jika anda gunakan banyak masa untuk memilih template yang sesuai untuk anda. Kerana itu adalah perkara biasa. Pastikan template yang anda pilih betul-betul memenuhi citarasa anda.:)

Cara Buat Bubble Cursor Pada Blog



Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.


Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)



<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();



window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";



document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}



function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}



function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}



document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }



window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}



window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}



function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>


3. Save dan lihat hasilnya.:)

Tutorial Gerakkan Title Blog


Title blog secara default adalah dalam keadaan statik. Anda boleh tukarkan title blog anda dengan mudah dan juga anda boleh membuatkan ianya bergerak dari kanan ke kiri.



Tutorial untuk buatkan title blog bergerak adalah seperti berikut.


1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript


<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>


Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.

3. Save dan lihat hasilnya.:)

Tutorial Tukar Warna Text Highlight


Apabila seseorang highlight text dalam blog, warna yang akan keluar adalah biru, itu default.
Tetapi ada juga tutorial yang membolehkan anda menukar warna text selection ini seperti contoh di bawah.

Default.


Selepas tukar warna text selection



Tutorial untuk tukar warna text selection adalah seperti berikut.


1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find, cari code body {

3. Selepas jumpa code body {, pastekan kod di bawah di atas body {


::-moz-selection {
background: #CC3399;
color: #ffffff;
}


Contoh:


Note: Anda boleh menukar warna text highlight dengan menggantikan warna kod yang dihighlight di atas.

4. Save dan lihat hasilnya..:)

Following Star Pada Cursor


Adakah anda suka kalau cursor yang anda guna untuk blog ada beberapa bintang kecil berwarna yang mengikutinya.? Contoh macam gambar di bawah.



Kalau anda suka, ini ada tutorialnya.:)



1. Dari dashboard > design > add a gadget > HTML/javasrcript [link]

2. Copy code di bawah mengikut kesukaan anda dan paste ke dalam HTML/javascript

i) Following star warna warni

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/rainbows.js"></script>


ii) Following star warna biru

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>


iii) Following star warna purple

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>



3. Save dan lihat hasilnya.:)

Tutorial Perkataan Ikut Cursor


Ingin perkataan mengikut cursor anda semasa melayari blog.?

Contohnya seperti di bawah.


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.:)


Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

1.Tukar style

font-style: normal; (pilihan lain italic, oblique, atau inherit)

2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

Letak Emotion Icon Dalam Komen


Kebiasaannya komen dalam blog anda adalah dalam bentuk perkataan semata-mata. Tetapi mahukah kalau komen untuk blog anda juga boleh diletakkan emotion.?
Tentu lebih menarik dengan adanya emotion.

Contoh seperti gambar di bawah, dan anda juga boleh mencubanya sendiri di test blog.


Tutorial untuk letakkan emotion icon dalam komen adalah seperti berikut.

1. Dari dashboard > design > edit HTML > Expand widget template



2. Backup template (download full template) anda untuk langkah berjaga². (more info)

3. Menggunakan fungsi find,(ctrl + F) cari </body> dan letakkan kod di bawah sebelum </body>


<script src='https://sites.google.com/site/unwanted86/javascript/emotionicon.js' type='text/javascript'/>

contoh:


4. Menggunakan fungsi find lagi, (ctrl + F), cari <b:if cond='data:post.embedCommentForm'> dan letakkan kod di bawah selepas kod <b:if cond='data:post.embedCommentForm'>


<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) <a href='http://tutorialuntukblog.blogspot.com/2011/05/letak-emotion-icon-dalam-komen.html'target="_blank"><small>Grab tutorial here</small></a>
</b>
</div>


contoh:


5. Save dan lihat hasilnya di ruangan komen anda.:)

Cara Unfollow Blog | Stop Following Blog Posted by unwanted


Bagi seseorang blogger, biasa untuk istilah follow sesebuah blog. Walau bagaimanapun, ada ketikanya kita akan terasa untuk berhenti daripada follow blog tersebut mungkin disebabkan beberapa perkara yang mungkin kita tidak suka dengan blog tersebut



Tutorial kali ini akan menunjukkan cara untuk unfollow blog, ataupun stop following blog.


1. Dari dashboard, scroll ke bawah sehingga jumpa tab blogs i'm following, kemudian klik pada Manage



2. Senarai blog yang anda follow akan keluar, kemudian klik pada settings



3. Jika diminta akaun, masukkan akan google anda. Jika sudah login, teruskan pada langkah 4.



4. Pada sebelah kanan, klik pada stop following this site



5. Bila keluar pengesahan, klik pada Stop following.




Tambahan: Jika anda mempunyai banyak blog untuk unfollow pada satu masa, pilih tab sites you've joined, dan anad boleh pilih terus sahaja untuk stop following

Tukar Gambar Apabila Dilalukan Cursor


Memasang gambar yang boleh bertukar semasa dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.



Contohnya, cuba lalukan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)





Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.

<a href="Target link" target="_blank"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" /></a>



Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>


2. Anda boleh post di dalam entri blog anda seperti biasa ataupun boleh letakkan di sidebar.


Senang dan mudah bukan.?.:)


Nota: Jika mahu gambar sahaja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />


Selamat mencuba.:)

Kesan Khas Pada Gambar Apabila Dilalukan Cursor


Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.



Anda boleh lihat kesannya secara real di test blog ini.:)


Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.


1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.

-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}



Contoh:
Sebelum



Selepas


4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {,
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header


a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Postingan Lama Beranda