Sahabat Ngonline06, bulan Ramadhan adalah bulan yang penuh berkah. Bulan dimana diturunkannya al-Qur'an dan dilipatgandakan pahala atas orang yang berbuat kebajikan. Maka tak heran jika antusiasme masyarakat, khususnya umat Islam dalam menyambut bulan ini sangatlah tinggi. Ini juga berlaku untuk para blogger.
Dalam menyambut bulan yang penuh berkah itu, para blogger berbeda-beda cara menyambutnya. Ada yang menyambutnya dengan membagi tutorial cara memasang ucapan Marhaban Ya Ramadhan. Perilaku ini biasanya dilakukan oleh para ahlinya, khususnya yang paham akan rumus coding. Sehingga mereka berbagi tutorial tersebut. Berbeda lagi dengan blogger yang mengambil niche lain, dalam menyambut bulan Ramadhan, mereka segera menempel ucapan 'Marhaban Ya Ramadhan', baik dengan gambar, tulisan bergerak, atau lainnya pada blog mereka masing-masing. Dan tentunya masih banyak lagi cara para blogger dalam menyambut bulan Ramadhan.
Maka pada kesempatan ini, Ngonline06 juga akan berbagi cara tentang memasang widget dalam rangka menyambut bulan suci Ramadhan. Silahkan sahabat Ngonline06 memilih salah satu dari yang kami bagikan:
Pada tutorial ini, Ngonline06 akan berbagi 3 bentuk ucapan 'Marhaban Ya Ramadhan' di blog. Tiga bentuk itu adalah berupa gambar, tulisan bergerak, dan tampilan pop-up. Silahkan sahabat memilih sesuai dengan pilihan masing-masing.
Jika ingin memasang gambar selamat berpuasa di blog, sahabat bisa memasangnya di samping header, sidebar, atau bahkan di atas postingan. Untuk umumnya, para blogger memasangnya di samping header atau di atas postingan sehingga terlihat mencolok. Untuk memasangnya, silahkan sahabat masukkan kode berikut pada widget HTML/Java Script.
Untuk memasang teks berjalan yang berisi ucapan 'Marhaban Ya Ramadhan' di blog sangatlah mudah. Sahabat cukup memanfaatkan kode marquee. Silahkan pasang kode di bawah ini pada widget HTML/Java Script.
Untuk tutorial ketiga ini adalah resep dari kang Adhy Suryadi, pemilik kompiajaib. Ucapan 'Marhaban Ya Ramadhan' ini akan terlihat anggun dan keren pastinya. Ucapan Marhaban Ya Ramadhan pada tutorial ini akan muncul setelah pengunjung menekan gambar Admin blog yang memang sudah dirancang melayang di bagian bawah pinggir. Biar semakin tertarik, silahkan lihat demonya di bawah ini [jika belum dihapus....hehe]:
Ngonline06 sendiri sangat merekomendasikan sahabat semua untuk memasang ucapan 'Marhaban Ya Ramadhan' dengan cara nomor tiga ini. Hal itu selain menarik juga terlihat berkualitas.
Untuk pemasangannya, sahabat Ngonline06 cukup memasukkan dua kode pada template sahabat. Untuk lebih jelasnya, perhatikan langkah-langkah berikut ini dengan cermat dan jeli agar hasilnya maksimal.
a. Masuk dashboard blog.
b. Pilih menu Template > Edit HTML.
c. Cari kode </head> dan letakkan kode di bawah ini di atas kode </head>
e. Simpan.
Demikian tutorial tentang cara memasang ucapan 'Marhaban Ya Ramadhan' di Blog dengan lengkap dan tuntas. Semoga bermanfaat. Jika ada kesulitan, silahkan coret-coret saja di kotak komentar di bawah ini.
Perilaku Para Blogger dalam Menyambut Bulan Ramadhan
Dalam menyambut bulan yang penuh berkah itu, para blogger berbeda-beda cara menyambutnya. Ada yang menyambutnya dengan membagi tutorial cara memasang ucapan Marhaban Ya Ramadhan. Perilaku ini biasanya dilakukan oleh para ahlinya, khususnya yang paham akan rumus coding. Sehingga mereka berbagi tutorial tersebut. Berbeda lagi dengan blogger yang mengambil niche lain, dalam menyambut bulan Ramadhan, mereka segera menempel ucapan 'Marhaban Ya Ramadhan', baik dengan gambar, tulisan bergerak, atau lainnya pada blog mereka masing-masing. Dan tentunya masih banyak lagi cara para blogger dalam menyambut bulan Ramadhan.
Maka pada kesempatan ini, Ngonline06 juga akan berbagi cara tentang memasang widget dalam rangka menyambut bulan suci Ramadhan. Silahkan sahabat Ngonline06 memilih salah satu dari yang kami bagikan:
Cara Memasang Ucapan 'Marhaban Ya Ramadhan' di Blog
1. Gambar Ucapan 'Marhaban Ya Ramadhan' di Blog
Jika ingin memasang gambar selamat berpuasa di blog, sahabat bisa memasangnya di samping header, sidebar, atau bahkan di atas postingan. Untuk umumnya, para blogger memasangnya di samping header atau di atas postingan sehingga terlihat mencolok. Untuk memasangnya, silahkan sahabat masukkan kode berikut pada widget HTML/Java Script.
<div class="separator" style="clear: both; text-align: center;">Keterangan: Silahkan ganti LINK Gambar dengan link gambar Ucapan 'Marhadan Ya Ramadhan' yang ingin ditampilkan.
<img src="LINK GAMBAR" width="100%" /></div>
2. Teks Ucapan 'Marhaban Ya Ramadhan' Berjalan di Blog
Untuk memasang teks berjalan yang berisi ucapan 'Marhaban Ya Ramadhan' di blog sangatlah mudah. Sahabat cukup memanfaatkan kode marquee. Silahkan pasang kode di bawah ini pada widget HTML/Java Script.
<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">Keterangan: sesuaikan warna dan kalimat sesuai dengan kebutuhan sahabat.
<marquee direction="left" scrollamount="6" align="center">Ngonline06 mengucapkan Marhaban Ya Ramadhan</marquee>
</div>
- background = warna dasar
- border = warna garis tepi
- color = warna teks
- font-size = ukuran teks
- Sesuaikan teks berwarna merah dengan yang dikehendaki.
3. Ucapan Pop-Up 'Marhaban Ya Ramadhan' di Blog
Untuk tutorial ketiga ini adalah resep dari kang Adhy Suryadi, pemilik kompiajaib. Ucapan 'Marhaban Ya Ramadhan' ini akan terlihat anggun dan keren pastinya. Ucapan Marhaban Ya Ramadhan pada tutorial ini akan muncul setelah pengunjung menekan gambar Admin blog yang memang sudah dirancang melayang di bagian bawah pinggir. Biar semakin tertarik, silahkan lihat demonya di bawah ini [jika belum dihapus....hehe]:
Ngonline06 sendiri sangat merekomendasikan sahabat semua untuk memasang ucapan 'Marhaban Ya Ramadhan' dengan cara nomor tiga ini. Hal itu selain menarik juga terlihat berkualitas.
Untuk pemasangannya, sahabat Ngonline06 cukup memasukkan dua kode pada template sahabat. Untuk lebih jelasnya, perhatikan langkah-langkah berikut ini dengan cermat dan jeli agar hasilnya maksimal.
a. Masuk dashboard blog.
b. Pilih menu Template > Edit HTML.
c. Cari kode </head> dan letakkan kode di bawah ini di atas kode </head>
<style>d. Selanjutnya, cari kode </body>. Letakkan kode di bawah ini di atas kode </body>.
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>
<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='URL FOTO ANDA' width='50' title="Click Me!"/>Keterangan:
<div class="idul_layout animated flip" id="id_fitri">
<div class="idul_message">
<h2>"Marhaban Ya Ramadhan"</h2>
<p>Bulan suci kembali tiba, saat tepat menyucikan diri dari segala dosa, mohon dimaafkan dari segala kesalahan.
<br/><br/> Saya, <b>NAMA ANDA</b> selaku admin blog <b>TITLE BLOG</b> mengucapkan:
<br/>
<b>"Selamat menjalankan ibadah puasa bagi umat yang menjalankannya"</b>.</p>
<img class='profile-idul2' expr:alt='data:post.author' height='200' src='URL FOTO ANDA' width='200' />
<div class="close_idul" onclick='closeIdulfitri()'>&times</div>
</div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>
- Ganti URL FOTO ANDA dengan alamat Url foto sahabat. Sahabat bisa menggunakan foto google+ atau lainnya.
- Sesuaikan NAMA ANDA dan TITLE BLOG yang ada pada kode di atas.
e. Simpan.
Demikian tutorial tentang cara memasang ucapan 'Marhaban Ya Ramadhan' di Blog dengan lengkap dan tuntas. Semoga bermanfaat. Jika ada kesulitan, silahkan coret-coret saja di kotak komentar di bawah ini.
No comments
Silahkan berkomentar dengan baik.