Tampilan Huruf Besar di Awal Posting Artikel Blog

Setiap Anda membaca koran, Anda pasti menjumpai penggunaan huruf besar/drop cap di awal kalimat. Bagaimana jika Anda menerapkannya untuk blog Anda. Pasti akan sangat menarik dan membuat artikel Anda jadi tidak membosankan. Nah…pada Tips Blogger kali ini kita akan membahas cara membuat membuat tampilan huruf besar di awal posting.

Langsung saja kita mulai tutorialnya…..

1. Login ke akun blogger Anda
2. Pada dashboard, pilih Tata Letak kemudian pilih Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Kemudian cari kode ]]></b:skin> .

TIPS : Untuk mempermudah menemukan kode tersebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin Anda cari.

4. Copy paste kode di bawah ini diatas kode ]]></b:skin> tersebut.

/* huruf besar
----------------------------------------------- */
.besar {
float:left;
color: #000000;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

5. Setelah selesai kemudian klik “Simpan Template”.

Untuk membuat artikel Anda dimulai dengan huruf besar/dropcap, pada waktu memposting setelah selesai menulis artikel pada editor pilih “Edit HTML”. Kemudian tambahkan kode ... , diantara huruf awal yang ingin Anda tampilkan sebagai huruf besar. Selanjutnya klik "Terbitkan Entri".
1. Ketika kamu melakukan posting (buat), silakan ketik tulisan kamu sampai selesai.

2. Masih dalam "buat posting", klik pilihan "Edit HTML". Letaknya di atas sebelah kanan form "buat posting". Hasilnya kamu akan melihat postingan kamu dalam kode HTML.

3. Tambahkan kode <span class="besar"> ... </span>, diantara huruf awal postingan.

4. Terakhir pilih "Terbitkan Entri".
Contoh :

<span class="besar">M</span>elalui tips sederhana ini Anda akan mengetahui cara mudah menghasilkan jutaan backlink blog Anda dalam waktu yang tidak terlalu lama? Bagaimana caranya? Pada prinsipnya tips ini memanfaatkan metode Multi Level Marketing? Dan dalam postingan kali ini saya ingin mengajak Anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.

Hasil :

Melalui tips sederhana ini Anda akan mengetahui cara mudah menghasilkan jutaan backlink blog Anda dalam waktu yang tidak terlalu lama? Bagaimana caranya? Pada prinsipnya tips ini memanfaatkan metode Multi Level Marketing? Dan dalam postingan kali ini saya ingin mengajak Anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.


Semoga Bermanfaat…

Cara Membuat Kursor Animasi Ular di Blog

Berbagai upaya kita lakukan demi membuat blog kita tampil cantik dan menawan. Namun terkadang perubahan yang kita lakukan pada blog terlalu berlebihan sehingga bukanya blog menjadi lebih cantik namun malah membuat loading blog semakin lambat. Dan pengunjungpun berkurang.

Untuk itu Anda perlu selektif dalam menampilkan widget/animasi di blog agar tidak menjadi berlebihan. Nah, dalam Tips Blogger kali ini saya akan membahas tentang cara mempercantik blog dengan membuat tampilan kursor animasi di blog kita. Animasi kursor tersebut tampil setiap kali pengunjung menggerakan kursornya di halaman blog kita.

Jangan khawatir, tips membuat animasi kursor ini tidak berdampak terhadap kecepatan loading blog Anda. Langsung saja kita bahas satu persatu cara membuat animasi kursor di blog :


1. Langkah pertama login dahulu ke akun blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.


3. Jika sudah, cari kode </head> dan Copy-Paste kode berikut di atasnya :

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: regular;
font-weight: bold;
font-family: 'bell mt', tahoma, arial;
color: #0080FF;
/* 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'>
//<![CDATA[
/* 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 = "Ketik Teks Anda di Sini";

/* 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 = 16;

// 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>

Tips : Untuk mempermudah menemukan kode tersebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin Anda cari.

PENTING :
a. Ganti kode
- font-style: regular; (ganti dengan underline untuk gaya teks bergaris atau italic untuk teks miring)

- font-weight: bold; (ganti dengan bold untuk gaya teks tebal atau normal untuk teks normal)

- font-family: 'bell mt', tahoma, arial; (ganti dengan jenis font yang Anda inginkan)

- color: #0080FF; (ganti dengan kode warna yang Anda inginkan, untuk melihat kode warna klik di sini Kode HTML Warna Untuk Blog)

b. Ganti tulisan yang berwarna merah Ketik Teks Anda di Sini dengan teks yang Anda inginkan
c. Ganti kode var size = 16 sesuai dengan ukuran teks yang Anda inginkan.


4. Jika sudah selesai kemudian klik “Simpan Template”



Contoh hasilnya bisa Anda lihat sekarang di blog Supardi Punya ini

Cara Membuat Buku Tamu Blog Dengan ShoutBox

Salah satu kriteria blog yang baik adalah blog yang senantiasa menjaga hubungan timbal balik dengan para pengunjungnya. Oleh karena itu kita perlu membuat blog kita menjadi interaktif sehingga memudahkan interaksi kita dengan pengunjung blog. Salah satu cara untuk membuat blog/website kita semakin interaktif adalah dengan membuat buku tamu/guest book di blog.

Dengan demikian hubungan baik antara pemilik blog dengan pengunjung blog dapat senantiasa terjlin. Langsung saja dalam tips blogger kali ini kita akan belajar membuat widget guest book/buku tamu dengan memanfaatkan layanan dari ShoutMix. Layanan dari ShoutMix ini bersifat gratis, jadi Anda tidak perlu ragu untuk mencobanya. Untuk dapat memanfaatkan layanan dari ShoutMix terlebih dulu Anda harus melakukan pendaftaran, lakukan pendaftaran dengan cara sebagai berikut :

1. Kunjungi www.shoutmix.com

2. Kemudian klik Create shoutbox

3. Isi dengan lengkap pada form yang disediakan,

Shoutbox ID : isi dengan username yang Anda inginkan
Choose password : isi dengan password yang Anda inginkan
Retype password : ulangi isi password Anda sama seperti sebelumnya
Name : isi dengan nama lengkap Anda
Email : isi dengan alamat email Anda

4. Setelah semua form telah terisi, segera lakukan Login ke dalam akun shoutmix yang telah Anda buat sebelumnya,

5. Sekarang Anda dapat mulai membuat widget shoutmix sesuai keinginan dengan mengatur warna dan ukuran yang sesuai dengan blog Anda

6. Setelah selesai kemudian klik “save setting” kemudian pilih “grab code”
7. Copy seluruh kode HTML yang tersedia
8. Kemudian masuk ke akun blogger Anda dan buat sebuah elemen/gadget baru lalu pilih HTML/JavaScript - ADD TO BLOG
9. Kemudian Paste kode HTML yang telah Anda Copy dari shoutmix sebelumnya
10. Setelah selesai klik “Simpan”



Selamat, sekarang blog Anda menjadi semakin interaktif dan menyenangkan……

Membuat Efek Buram / Blur Pada Gambar Artikel Blog

Untuk menambah kejelasan isi artikel di blog tidak jarang kita menyisipkan satu atau beberapa gambar di sela-sela isi artkel. Anda dapat membuat tampilan gambar menjadi lebih menarik dengan memberi efek buram(blur) pada gambar Anda. Dalam tips blogger kali ini kita akan membahas cara membuat efek buram(blur) pada gambar di artikel/posting blog.
Ada dua tipe tampilan yang bisa Anda pilih untuk menampilkan gambar dengan efek buram(blur). Tipe pertama adalah menampilkan gambar dengan tampilan buram terlebih dahulu kemudian menampilkan tampilan gambar sesungguhnya ketika kursor menyentuh gambar (Gambar 1). Tipe kedua adalah menampilkan tampilkan gambar sesungguhnya terlebih dahulu kemudian menampilkan tampilan gambar buram ketika kursor menyentuh gambar (Gambar 2).

Gambar 1

Gambar 2

Berikut cara untuk membuat efek buram pada gambar artikel/posting blog :

1. Seperti biasa Log In dahulu ke akun Blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Pada menu Edit HTML carai kode ]]> , lebih mudah apabila Anda menggunakan CTRL+F.

4. Letakkan kode dibawah ini tepat di atas kode ]]>

.blur-before {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.blur-before:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after:hover {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}

5. Setelah selesai kemudian klik “Simpan Template”

Selanjutnya setiapAnda ingin menampilkan gambar dengan efek buram pada artikel yang Anda buat, pada opsi penulisan artikel Edit HTML tambahkan atribut kode <a href="#go" class="linkopacity"> untuk hasil seperti Gambar 1 di atas dan atribut kode <a href="#nogo" class="linkopacity"> untuk hasil seperti Gambar 2 di atas. sebagai contoh lihat kode di bawah ini untuk setiap masing-masing gambar di atas.

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#go" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/" />

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#nogo" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/" />

Cara Mudah Membuat Teks Berjalan di Address Bar

Bagi Anda yang sudah mulai bosan dengan tampilan blog yang biasa-biasa saja bisa menerapkan tips blogger kali ini. Dalam tips blogger kali ini kita akan membuat teks berjalan di addres bar browser saat blog Anda di buka. Tutorial blogger ini sangat bermanfaat untuk mempercantik blog atau untuk menyampaikan pesan-pesan tertentu kepada para pengunjung blog.

Langsung saja kita mulai tutorialnya. Berikut langkah-langkahnya :

1. Seperti biasa Log In dahulu ke akun Blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Pada Edit HTML cari kode </head>, lebih mudah apabila menggunakan fasilitas find di browser dengan cara menekan CTRL+F.

4. Copy Paste kode di bawah ini di atas kode tadi </head>.

<SCRIPT language='JavaScript'>
var txt=":::Tulis teks Anda di sini::: ";
var kecepatan=170;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</SCRIPT>

Ganti teks berwarna biru dengan teks yang ingin Anda masukkan sesuai keinginan Anda.

5. Setelah selesai jangan lupa Simpan Template Anda


Mudah bukan ? Sekarang coba refresh browser Anda dan lihat perubahanya….