Membuat Pesan Selamat Ramadhan di Blog ala Tektanologi

• Demo

Membuat Pesan Ucapan Selamat Ramadhan - Belakangan ini banyak sekali blog yang menggunakan pesan pembuka dengan ucapan "Selamat menunaikan ibadah puasa" atau sejenisnya. Dan saya pun merasa tertarik untuk membuatnya. Walaupun sebenarnya pesan pembuka ini telah cukup lama saya pakai sebelum saya menulis artikel ini. Alasan mengapa saya baru men-share tutorial ini adalah karena kesibukan di dunia nyata, ketika saya harus menentukan pilihan sekolah untuk ke jenjang selanjutnya :)

Tapi kalian tidak perlu khawatir, karena kini saya akan men-share tutorialnya. Dan perlu diketahui pula, Pesan Pembuka ini sudah saya tambahkan fitur responsif sehingga dapat di buka di peralatan mobile (mengingat banyaknya perangkat mobile yang mengakses situs kita belakangan hari ini).

Yasudah, tanpa perlu berbasa-basi lagi, mari kita mulai saja tutorialnya:

• Pertama tama, silahkan kalian login ke Blogger Dashboard, setelah itu kalian klik menu Template > Edit HTML
• Ketika kalian memasuki menu tersebut, silahkan copy kode CSS ini tepat di atas kode ]]></b:skin> atau </style> (untuk memudahkan pencarian, silahkan tekan tombol CTRL + F)

 #welcomebox {position:fixed;top:30%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{background:rgba(255,255,255,0.8);color:#888;box-shadow:0 0 1px rgba(68,68,68,0.06), 0px 30px 0 -20px rgba(0,0,0,0.08);font-family:'Playfair Display';font-size:200%;font-weight:700;line-height:1.6em;margin:-5px 0 50px;padding:20px;padding-top:40px;padding-bottom:40px;border-top:8px solid #edc5a5;border-bottom:8px solid #afc9f1;transition:all 0.4s linear;}
#welcomebox p:hover{color:#666;box-shadow:0px 0 10px 0 rgba(0,0,0,0.08);transition:all 0.1s linear;}
.welcomeclose {background:#fff;color:#444;border-radius:2px;border:1px solid #ddd;border-bottom:4px solid #d9d9d9;padding:10px 25px;text-align:center;margin:0 auto;cursor:pointer;display:inline;box-shadow:0px 7px 0 -5px rgba(0,0,0,0.06);transition:all 0.1s linear;}
.welcomeclose:hover {background-color:#fff;color:#cf5a4b;border-radius:2px;border:1px solid #ccc;border-bottom:4px solid #c9c9c9;box-shadow:0px 0 5px 0 rgba(0,0,0,0.08);}
#welcomeoverlay {position:fixed!important;position:absolute;z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#fff url(http://1.bp.blogspot.com/-Uwkb_2Hc16k/U68JONYydLI/AAAAAAABoYM/0fIfeAol9nU/s1600/wallbg.jpg) no-repeat top center;max-width:100%;max-height:100%;}
@media only screen and (max-width:1024px) {#welcomebox p {font-size:150%}}
@media only screen and (max-width:497px) {#welcomebox p {font-size:100%} .welcomeclose {font-size:10px}} 

• Setelah kalian memiliki struktur CSSnya dalam template kalian, sebenarnya kalian telah Membuat Pesan Pembuka Selamat Ramadhan pada Blog kalian. Namun, untuk menampilkannya, kalian membutuhkan kode pemanggilnya, Yaitu kode HTML yang kalian taruh di atas kode </body>. Berikut kodenya:

 <div id='welcomeoverlay'/>
<div id='welcomebox'>
<div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Lanjutkan menuju Tektanologi &#8594;</div>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, Raihan Sa&#39;di selaku admin dari Tektanologi mengucapkan<br/>
&quot;Selamat menunaikan ibadah shaum bagi  yang menunaikan,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...aamiin.&quot;</p>
  </div>

Tugas terakhir kalian adalah mengganti Raihan Sa&#39;di dengan nama kalian sendiri, dan juga ganti kata-kata Tektanologi pada HTML di atas dengan nama Blog kalian.
Kini kalian telah selesai Membuat Pesan Selamat Ramadhan ala Tektanologi. Semoga bermanfaat dan tidak menghadirkan mudharat di bulan Ramadhan ini, aamiin.

PENTING: Bila kalian menginginkan Pesan Pembuka Selamat Ramadhan ini hanya berada pada halaman utama atau homepage saja, maka silahkan ganti kode HTML di atas dengan yang di bawah ini:

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <div id='welcomeoverlay'/>
<div id='welcomebox'>
<div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Lanjutkan menuju Tektanologi &#8594;</div>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, Raihan Sa&#39;di selaku admin dari Tektanologi mengucapkan<br/>
&quot;Selamat menunaikan ibadah shaum bagi  yang menunaikan,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...aamiin.&quot;</p>
  </div>
    </b:if>

Sekian, dan terima kasih :D