Bagaimana Cara Menambah Ucapan Selamat Datang di Blog

Welcome screen atau tampilan ucapan selamat datang adalah display yang muncul saat pertama kali pengunjung membuka blog. Biasanya berisi ucapan selamat datang, ucapan terima kasih telah mengunjungi blog, ajakan untuk memberikan komentar, ajakan untuk ikut mengshare artikel dan sebagainya. Untuk posisinya, biasanya terletak di atas, dekat header, atau di tengah dan bisa pula di bawah dekat footer. Bentuknya bisa berupa teks ataupun dalam bentuk gambar.

Tutorial kali ini, saya akan membagikan cara mudah membuat welcome screen ini untuk sahabat blogging semua. Tampilannya berupa teks maupun gambar. Display mode welcome screen seperti ini tidak begitu mengganggu tampilan blog dan tidak pula menghambat loading page, sebab tidak menggunakan script yang terlalu berat. Disediakan tombol close atau Oke untuk menutup display ini. Sehingga aman dan tidak perlu khawatir bahwa visitor akan lari gara-gara display ini.

Artikel pilihan Alexa Rank Meluncur Drastis dalam 21 Hari.

Baiklah berikut tahap-tahap pembuatan welcome screen atau ucapan selamat datang di blog.

Cara membuat ucapan selamat datang di blog

Mode teks

1. Masuk ke dasboard blogger.

2. Klik Add a gadget pada menu Layout.

3. Pilih HTML/Javascript, lalu isi kode berikut ke dalam area HTML.

4. Lalu Save.

Keterangan: Silakan ganti kata-kata berwarna biru dengan kalimat sahabat sendiri. Hasil akhirnya akan tampak seperti gambar berikut.

Artikel rekomendasi 7 Cara Optimalisasi Image agar Lebih SEO Friendly.

Mode gambar

1. Masuk ke dasboard blogger.

2. Klik Edit HTML pada menu Template.

3. Cari kode ]]></b:skin>.

4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.

</style></head>
<script language="javascript" type="text/javascript">
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}

function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}

function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center>
<img src="URL GAMBAR"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

Keterangan: Ganti tulisan URL GAMBAR dengan URL image buatan sahabat sendiri.

5. Akhiri dengan Save template.

Selesai. Dan lihat hasilnya. Kini blog sahabat telah memiliki tampilan awal untuk menyapa para pengunjung blog.

Widget pilihan Membuat Widget Tags Label dengan Mode Animasi Berputar.

Demikian trik membuat ucapan selamat datang di blog. Semoga bermanfaat dan selamat mencoba. Jika ada yang perlu ditambahkan, silakan masukkan dalam komentar.

Bagaimana Cara Menambah Ucapan Selamat Datang di Blog

Cara membuat ucapan selamat datang di blog

Mode teks

Mode gambar

8 comments

Popular Posts

Tags Label

Tutorial Blogging on Smartphone

Bagaimana Cara Menambah Ucapan Selamat Datang di Blog

Cara membuat ucapan selamat datang di blog

Mode teks

Mode gambar

Share this Article

Berlangganan Artikel

Related Post

8 comments

Popular Posts

Tags Label