Pasang Dialog/Pesan Pembuka Ketika Masuk Blog

Kode Iklan Di Sini

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog - tips ini saya ambil dari blog Kompi Ajaib, dimana sangat berguna untuk memberitahukan para pengunjung tentang suatu hal yang penting. Tips ini juga bisa di terapkan pada hari raya tertentu, misalnya pada saat lebaran,dan hari besar keagamaan lainnya. Hal ini tergantung kreatifitas Anda kembali.

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog

Tanpa basa-basi, silahkan Anda ikuti tips dan cara pasang dialog atau pesan pembuka saat masuk blog :

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog

  •  Buka akun blog anda , pilih menu edit html dan cari kode ]]></b:skin> atau</style> (tekan CTRL+F)
  • Anda Copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>.
Anda pilih salah satu css di bawah ini :
CSS 1
/* Pesan Pembuka Homepage */
#welcomebox {position: fixed;top: 10%;left: 50%;width: 70%;margin-left: -37%;z-index: 1000000;text-align: center;background: rgba(0, 0, 0, 0.5);padding: 20px 2%;}
#welcomebox p{color: #FFF;font-size: 150%;line-height: 1.6em;margin: -5px 0 50px;font-family: cursive;}
.welcomeclose {background: #FFF;color: #06F;border-radius: 3px;padding: 4px 10px;text-align: center;margin: 0 auto;cursor: pointer;display: inline;font-weight: bold;}
.welcomeclose:hover {background-color:#DDD}
#welcomeoverlay, #welcomeoverlay2 {position:fixed !important;z-index:999999;margin: auto;top:0px;right:0px;bottom:0px;left:0px;background: linear-gradient(#000, #09F);}
#welcomeoverlay2 {background: url(http://goo.gl/ftdBGk) no-repeat top center;}

CSS 2
#welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
.welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
.welcomeclose:hover {background-color:#aaa}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://1.bp.blogspot.com/-19vOQibfxVQ/U6f5ZZfFtdI/AAAAAAAAdIA/-3kB-n9pUkA/s1600/Wallpaper.jpg) no-repeat top center;}

  • Pengaturan kode css ( style 1)
1. Untuk mengganti font-nya silahkan ganti cursive dengan font yang sobat inginkan.
2. Untuk mengganti warna background silahkan ganti kode (#000, #09F) dengan warna yang sobat inginkan.
3. Untuk mengganti gambar silahkan ganti url http://goo.gl/ftdBGk dengan url gambar yang sobat inginkan.

  • Lalu Anda copy kode html di bawah ini ( pilih sesuai style) dan letakan di bawah kode <body> atau tepat di atas kode </body>
Style 1

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='welcomeoverlay'>
<div id='welcomeoverlay2'>
<div id='welcomebox'>
  <p><b>&#8220;Marhaban Ya Ramadhan&#8221;</b><br/>
      Saya, Nama Anda selaku admin blog Anda mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa, semoga kita selalu diberkahi di bulan yang penuh mahrifah ini... Amin...&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
  </div></div></div>
</b:if>
Silahkan Anda edit sesuai dengan kalimat masing-masing.
Style 2

<div id='welcomeoverlay'/>
<div id='welcomebox'>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, NAMA ANDA selaku admin BLOG ANDA mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin.&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
  </div>
silahkan edit kalimat yang berwarna merah.

  • terakhir silahkan save template Anda .
sumber: Blog Kompi Ajaib dan Delogin Zone

You Might Also Like:

Disqus Comments