Manusia pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.

My Label Post

Home » Blogging » Widget » Membuat Pesan Pembuka Ketika Masuk Blog

Membuat Pesan Pembuka Ketika Masuk Blog

,
Cetak Sunting



Membuat Pesan Pembuka Keren Ketika Masuk Blog - Kali ini saya akan share Cara Membuat pesan pembuka ketika masuk blog Contoh nya liat gambar diatas, kalau kurang jelas bisa di liat demonya.

Tanpa perlu lama2 lagi, langsung saja ikuti tutorial di bawah ini :

  1. Silahkan Login dulu ke Blogger Dashboard, kemudian pilih menu Template > Edit HTML
  2. Jika sudah masuk ke menu Edit HTML, Silahkan Copy Kode di bawah ini tepat di atas ]]></b:skin> atau </style> ( Untuk memudahkan pencarian silahkan tekan tombol Ctrl + F )
 /*CSS Pesan Pembuka zonayahya.com*/
#welcomebox {position:fixed;top:5%;left:50%;width:70%;height:40%;min-height:30%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{background:#fff;color:#888;font-family:'Playfair Display';font-size:180%;font-weight:700;line-height:1.6em;margin:-5px 0 50px;padding:15px;padding-top:40px;padding-bottom:40px;border-top:60px solid #f35d5c;border-bottom:4px solid #222;transition:all 0.4s linear;}
#welcomebox p:hover{color:#666;transition:all 0.1s linear;}
.welcomeclose {background:#555;color:#fff;border-bottom:4px solid #222;padding:10px 25px;text-align:center;margin:0 auto;cursor:pointer;display:inline;transition:all 0.6s ease-in-out;}
.welcomeclose:hover {background-color:#444;color:#fff;border-bottom:4px solid #202020;box-shadow:inset 181px 0px 0px #f35d5c;}
#welcomeoverlay {position:fixed!important;position:absolute;z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#333;max-width:100%;max-height:100%;}

   3. Setelah CSS diatas sudah terpasang, Kmudian agan Copy kode HTML di bawah ini kemudian taru di bawah kode <body> 

<div id='welcomeoverlay'></div>
<div id='welcomebox'>
<p><b>&#8220;Marhaban Ya Ramadhan&#8221;</b><br/>
      Saya, Yahya Suteja selaku admin Blog All Konfigurasi mengucapkan<br/>
"Selamat Menunaikan Ibadah Puasa Ramadhan 1435 H, Mohon Maaf Lahir dan Batin
Semoga Kita Selalu Diberkahi di Bulan yang Penuh Mahrifah Ini... Amin"</p>
<div class='welcomeclose' onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>Continue Reading &#9658;</div>
</div>

Untuk pesannya silahkan sesuaikan dengan keinginan agan.

   4. Jika agan menginginkan Pesan Pembuka ini hanya ingin muncul saat di Homepage saja, Silahkan ganti kode HTML diatas dengan kode dibawah ini : 

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='welcomeoverlay'></div>
<div id='welcomebox'>
<p><b>&#8220;Marhaban Ya Ramadhan&#8221;</b><br/>
      Saya, Yahya Suteja selaku admin Blog All Konfigurasi mengucapkan<br/>
"Selamat Menunaikan Ibadah Puasa Ramadhan 1435 H, Mohon Maaf Lahir dan Batin
Semoga Kita Selalu Diberkahi di Bulan yang Penuh Mahrifah Ini... Amin"</p>
<div class='welcomeclose' onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>Continue Reading &#9658;</div>
</div>
</b:if>


Untuk pesannya silahkan sesuaikan dengan keinginan agan, Selamat Mencoba.

CSS By : http://aisukablog.blogspot.com

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Facebook Google+ Twitter RSS
  1. Yaumil AkbarJuly 10, 2014 at 6:25:00 PM GMT+7

    top markotop, jago bikin CSSnya :) kreatif

    ReplyDelete
  2. UnknownJuly 11, 2014 at 2:03:00 PM GMT+7

    wahhh bisa di coba nih gan :) nice info

    ReplyDelete
  3. adminJuly 11, 2014 at 2:04:00 PM GMT+7

    keren brow

    ReplyDelete
  4. LiusGeaJuly 11, 2014 at 2:04:00 PM GMT+7

    Waah nice info gan :)
    tinggal di praktekin aja nih

    ReplyDelete
  5. Reza Syahputra RizalJuly 11, 2014 at 2:05:00 PM GMT+7

    Ini Kaya Aisuka Loh Gan :D ,

    ReplyDelete
    Replies
    1. YahyaJuly 11, 2014 at 2:10:00 PM GMT+7

      iya gan kan di atas sudah tertera css by : ........

      Delete
  6. UnknownJuly 11, 2014 at 2:06:00 PM GMT+7

    mantep gan. tapi nambah lemot gak blog saya ?

    ReplyDelete
    Replies
    1. YahyaJuly 11, 2014 at 2:15:00 PM GMT+7

      hah iya gan, kagak gan kagak lemot, contohnya blog ane gak lemot kan heh :D

      Delete
  7. Satriyo76July 11, 2014 at 2:14:00 PM GMT+7

    Jadi kelihatan atraktif pake pembuka gan..

    ReplyDelete
  8. yogatamabasJuly 11, 2014 at 4:37:00 PM GMT+7

    Nice info gan, ijin ke TKP :D

    ReplyDelete
  9. UnknownJuly 19, 2014 at 3:17:00 AM GMT+7

    keren sob, baru tau ternyata ada tips n tricks seperti postingan agan

    ReplyDelete
  10. UnknownAugust 15, 2014 at 7:44:00 PM GMT+7

    Top MArkotop

    ReplyDelete
  11. AnonymousAugust 17, 2014 at 11:10:00 AM GMT+7

    mangsap

    ReplyDelete
  12. AnonymousOctober 25, 2014 at 8:20:00 PM GMT+7

    keren kaya aisuka kalo ane liat sih :D

    ReplyDelete
  13. UnknownJune 13, 2015 at 9:09:00 AM GMT+7

    makasih infonya,
    sangat menarik dan bermanfaat,,
    salam sukses

    ReplyDelete

Silahkan berkomentar sesuai dengan topik artikel di atas, komentar yang menyertakan link, iklan, spam, dan sejenisnya akan di hapus.

Assalamu'alaikum wr.wb

Nama Saya Yahya Suteja . Saya hanya seorang pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.
dan saya hanya seseorang cuma bisa mengaji di ajikan sholat dan disholatkan.

Menghindari zinah
1. Ta'aruf
2. Khitbah
3. Akad
Itulah tips saya buat kalian yang ingin mendapatkan seseorang yang kamu sayang seumur hidup.
Cukup sekian dari saya, mohon ma'af jika ada salah-salah kata.

Wassalamu'alaikum wr.wb

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!
-->