Cara Membuat Dialog Box Keren Di Blog

17:34:00
Cara Membuat Dialog Box Keren Di Blog

Cara Membuat Dialog Box Keren Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips dan trik blogging, yaitu membuat dialog box keren di blog, silakan agan untuk mengikuti beberapa langkah di bawah ini; 



Langkah

1. Login pada dashboard blog Anda masing-masing, lalu pada menu dashboard blog pilih menu template, lalu pilih menu edit html,

2. Copy script di bawah ini lalu cari kode </b:skin> dengan cara
Ctrl
+
F
 
lalu paste tepat di atas kode </b:skin> ,

 #info:before {
content: "Info";
position: fixed;
top: 25px;
left: 175px;
border-radius: 3px;
background-color: #e74c3c;
color: #fff;
padding: 5px 10px;
z-index: 999;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
#dialog-overlay {
position: fixed !important;
position: absolute;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #2c3e50;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #159999;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #e74c3c;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
.ttd:after {
content: "Renaldy Ramadani";
position: relative;
float: right;
}
.closer:after {
content: url('http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png');
position: absolute;
top: -15px;
right: -15px;
background: #e74c3c;
border-radius: 100%;
padding: 8px 12px;
z-index: 999;
cursor: pointer;
border-top: 3px solid #2c3e50;
border-right: 3px solid #2c3e50;

}
 

Silakan sesuaikan script dialog box di atas dengan blog Anda!


3. Setelah itu copy script di bawah ini lalu cari kode </body> dengan cara
Ctrl
+
F
,
 lalu paste tepat di atas kode </body>,



 <script type='text/javascript'>
$(function () {
 $(&#39;#info&#39;).click(function () {
  $(&#39;#info&#39;).fadeOut();
  $(&#39;#dialog-box&#39;).fadeIn();
  $(&#39;#dialog-overlay&#39;).fadeTo(&quot;normal&quot;, 0.4);
});
 $(&#39;.closer&#39;).click(function () {
  $(&#39;#info&#39;).fadeIn();
  $(&#39;#dialog-box&#39;).fadeOut();
  $(&#39;#dialog-overlay&#39;).fadeOut();
 })
});
</script>
 


4. Setelah itu copy script di bawah ini, setelah itu pada menu dashboard pilih menu tata letak lalu pilih tambahkan gadget, setelah itu pilih menu html / javascript, lalu paste script tersebut pada kolom html / javascript,

 <div id="info"></div>
<div id="dialog-overlay"></div>
<div id="dialog-box" style="font-weight:bold;">
<img src="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" original="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" style="" />Kata Anda<br />
Kata Anda<br /> Kata Anda<br />Kata Anda<br /><br />
Terima Kasih <img src="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" original="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" style="" /><br /><br />
<span class="ttd"></span>
<div class="closer" title="Close"></div>
</div> 

Silakan sesuaikan isi kata-kata yang ingin Anda tampilkan pada dialog box!



5. Lalu tambahkan script jquery di blog Anda, tetapi jika di blog Anda sudah terdapat script ini tidak perlu ditambahkan, karena jquery hanya akan bekerja dengan 1 script jquery, jika lebih dari 1 akan terjadi konflik JQuery. Bagi yang belum mempunyai script jquery silkan letakan script JQuery di bawah ini tepat di atas kode </head>,

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 

6. Simpan.


Nah semoga artikel ini bermanfaat, jangan lupa like, share dan google+nya serta komentar dari Anda, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

8 Comments

Annonymous 8 November 2014 at 20:04

gan punya saya udah bisa ada tulisan infonya tapi kok gak bisa di buka ya ,gimana itu?

Renaldy Ramadani 8 November 2014 at 22:07

Mungkin versi JQuery punya agan yang bermasalah, coba cari jquerynya, ganti dengan jquery terbaru.,,,, diatas...

Aghtis Assiddiq 21 January 2015 at 16:43

Kalau Di Screnshoot Berap Ukurannya? :bingung

Renaldy Ramadani 21 January 2015 at 16:51

top: 30%;
left: 17%;
right: 29%;

:kribo

SimBale | Download Software Gratis 14 February 2015 at 17:31

keren sob kunjungan balik ya

Renaldy Ramadani 17 February 2015 at 16:13

:2thumbup yoi gan

Bayu Cakra Aditya 15 May 2015 at 19:49

makasih bro,kunjungi juga http://bayu-tutor.blogspot.com

Renaldy Ramadani 16 May 2015 at 08:36

:2thumbup yoi gan