Mungkin teman-teman sudah mulai bosan dengan bentuk pointer yang itu itu aja setiap kali anda membuka blog/site anda.
Bagi teman-teman yang ingin mengganti pointer atau cursor mouse untuk blognya saya punya solusinya.
Emang bisa diganti??
tentu saja bisa..asal tau caranya.
oke i will tell you the way to change your blog's pointer.
1. you can find the web serving pointers at google keyword: free cursors, etc.
dengan cara itu pastinya akan ketemu banyak sekali website yang menyediakan pointer untuk dipasang ke dalam blog nantinya.
or
2. visit Totally free cursors or Cursor-4u and find out what you want.
Situs ini menyediakan double base of pointer. So if you are choosing cursor with axtention *.ani (animated cursor) and didnt work for such engine like firefox, it will replaced by the other extention (non-animated).
3. Choose the cursor by the category.
4. click for what you prefer.
5. scroll down and find the html codes thena copy it.
6. sign up blogger
7. Edit HTML
8. Place the code before
9. save changes.
Enjoyyy
Mudah Kan.....
CARA MEMBAGI 2, COLOUM SIDEBAR
Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasih judul postingan ini. Tapi saya yakin anda pun sudah tahu dengan maksud judul postingan diatas. Postingan kali ini seputar otak atik template blog. Jika pada postingan terdahulu saya tulis tentang bagaimana cara memperlebar halaman blog, maka kali ini saya akan coba berbagi tentang cara membagi 2 kolom sidebar blog atau menambahkan kolom di sidebar blog.
Cara ini sudah sering saya aplikasikan di template default blog minima. Tapi walaupun demikian, masih tetap bisa diaplikasikan di template blog lain karena intinya sama saja. Sebelum mulai membahas mengenai cara membagi 2 kolom sidebar blog, ada baiknya jika anda memperlebar dulu kolom sidebar blog anda. Karena jika kolom sidebar blog anda kecil, maka kalo di bagi 2 akan menjadi tambah kecil. Oleh karena itu, anda harus memperlebar dulu sidebar blog anda. Untuk cara memperlebarnya, anda bisa baca di postingan saya tentang bagaimana cara memperlebar halaman blog.
Nah..kalo sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya :
1. Proses editing kode css
Setelah login di blogger, langsung masuk ke menu edit html dan tidak usah kasih tanda centang pada kolom expand template widget. Selanjutnya, cari kode css seperti ini :
#sidebar-wrapper {
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px.
Nah..logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan. Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px. Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 85px.
Setelah kita menentukan lebar masing - masing sidebar, selanjutnya tinggal mendeklarasikannya di kode css. caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah namanya menjadi #sidebar2-wrapper. Misal..untuk kode diatas menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Selanjutnya, ubah width (lebar) masing - masing sidebar seperti yang telah dibahas tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Langkah yang terakhir untuk proses editting kode css yaitu menambahkan jarak antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}
2. Aplikasi di kode html
Nah..untuk proses editting kode css sudah selesai. Kemudian saatnya untuk mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Awas..jangan sampe salah. Jika sudah selesai silahkan klik dulu pratinjau / preview. Apabila hasilnya sudah bagus baru di save. Tapi...apabila masih ada error atau kesalahan, klik bersihkan edit / clear edit, kemudian ulangi langkahnya dari awal.
scroll itu adalah sesuatu yang bisa ditarik ke atas dan ke bawah, seperti pada halaman utama blog ini. Atau Pada arsip di blog ini maupun NEW dan Blogger ter'buwel, Yang mana widgets2 tadi adalah widgets yang berupa bawaan dari blogger atau blogspot. Atau bisa juga widget2 lainnya yang memang pengin diberikan scroll... :-)
Dan Langsung ke cara membuatnya yaitu
1.Sign in seperti biasa di blogger
2.Ke Tata letak---> terus ke Edit Html
3.Cari Kode:
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML6' locked='false' title='Jam' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML7' locked='false' title='Statistik Blog Ini' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Kotak Chatting' type='HTML'/>
4.Lha trus cari nama widgets yang akan anda beri scroll.
Misalkan anda pengin mengasih scrollnya untuk Arsip Blog, maka kodenya kira2 seperti ini
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
Nah kode id yang nanti di pakai untuk Arsip blog ini adalah BlogArchive1
5. Kemudian Pastekan Kode dibawah ini di atas kode ]]></b:skin>
#BlogArchive1 .widget-content{
height:200px; /* Tinggi yang diinginkan */
width:auto;
overflow:auto;
}
Kemudian simpan Templete.
Nah kalo berhasil nggak akan Error, dan Arsip Blog kita akan terscrollkan.
Cara ini bisa juga untuk membuat scroll pada label, Seperti contoh script diatas (script no 3) yang mengambarkan id Label yaitu Label1, maka kita tinggal mengganti kata BlogArchive1 pada script nomer 5 dengan Kata Label1.
Sedang Untuk tinggi scroll bisa diatur sesuai selera yang kalo yang diatas itu tulisan 200px ea...
Udah gitu ajah, moga ada manfaatnya bagi anda.
Ketika Anda memposting kode HTML seperti script ternyata banyak bagian yang hilang? Anda bingung kenapa? Bagaimana cara menampilkannya? Mudah saja.....
Caranya sebagai berikut:
1. Buka
http://centricle.com/tools/html-entities
2. Masukkan script yang akan ditampilkan pada postingan pada kotak yang tersedia
3. klik Encode
4. Tunggu beberapa saat dan script akan berubah
5. Copy script yang telah berubah tersebut dan siap ditampilkan pada postingan... letakkan sesuai tempat yang Andainginkan
silahkan dicoba !!
MENAMBAH SIDEBAR MENJADI DUA
Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan
Langkah pertama
Cari Kode dibawah ini (biasanya berada dibagian atas)
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding-left:10px; (tambahkan kode ini biar tampak ada jarak sela)
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.
Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi
#sidebarbaru-wrapper {
width: 200px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.
#sidebarbaru-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Langkah Kedua
Cari kode HTML dibawah ini pada bagian body
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas ( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !
memiliki suatu blog yang kurang modifikasi akan membuat kita malas blogging.
karna memodifikasi blog memiliki kpuasan tersendiri.maka dari itu saya memberi sedikit inspirasi saya kepada anda tentang memodifikasi blog.
Kali ini saya akan berbagi tentang cara membuat tulisan melingkar pada kursor
- log in ke blogger anda
- pilih tata letak
- tambah gadget anda dan plih java script
- copy paste aja code berikut pad java script anda
<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: #999;
/* 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 = "Gumet GumGum";
/* 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>
ket: ganti tulisan yang berwarna merah dengan text yang anda inginkan
lalu simpan,selesai deh
coba anda lihat hasilnya
anda pengen punya tulisan pada blog and, klu bagi saya sih tulisan kayak gini dapat meyakinkan pengunjung untuk mencobany, soalnya tulisannya tampak lebih meyakinkan. anda pengen coba..!!
Caranya gampang banget anda tinggal menambahkan code <blink>
pda awal text yang anda inginkan dan </blink> pada akhir text di HTML seperti contoh di bawah ini:
<blink><a href="http://blogs-tutorial">blog saya..</a></blink>
anda tinggal simpan deh
jadi deh tulisanya
Bagi Seorang Bloger tak lengkap rasanya bila tak memiliki tulisan berjalan pada taskbar blog, dan pada kali ini saya ingin berbagi dengan rekan blogger tentang cara membuat tulisan tersebut. mari kita memulai
langkah 1 : log in ke blogger
langkah 2 : plih tata letak
langkah 3 : edit HTML
Lalu masukkan code berikut
=================================
<script language='JavaScript'>
var txt=".:: www.http://blogs-tutorial.blogspot.com/ ::.";
var kecepatan=180;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
=================================
Copy di bawah code <head>
ket: tulisan yang berwarna tebal/bergaris bawah anda ganti dengan teks anda sendiri
kemudian save,dan lihat hasilnya
mudah bkan.....????
Panduan membuat Blog di Blogspot
1. Apa itu Blog ? Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai po...