Cara membuat comment policy di atas kotak komentar disertai efek dropdown

Apa kabar semua, ya kalian semua mau yang muda atau yang tua sama saja, sama saja kita sedang lagi membaca artikel di blog bagi ilmu. Walaupun saya lagi terkena flu, tetapi saya tetap saja ingin menulis artikel ini, entah kenapa dan apa yang membuat semangat meningkat saya untuk menulis artikel ini. Langsung saja ke topik utama, di artikel kali ini saya akan membagikan script untuk membuat comment policy atau pesan yang menyampaikan komentar yang dilarang. contoh bisa liha sreenshoot di bawah ini atau kalian scroll ke bawah sendiri nanti ada comment policy seperti yang saya akan jelaskan.

Bagaimana sudah melihat screenshootnya, kalian bisa mengisi pesan sesuai yang anda inginkan. Saya akan langsung jelaskan ke caranya yah,biar menghemat waktu. ikuti langkah di bawah ini dengan benar 1. login ke blogger 2. klik "Template/Tema"cadangkan dahulu template anda agar bila gagal bisa dikembalikan, kemudian pilih edit html 3. cari kode ]]></b:skin> dengan cara menekan ctrl+f. 4. setelah itu letakan kode di bawah ini di atas kode ]]></b:skin>

.trigger{margin:3px 10px 0 0; font-weight:bold; color:#A1A1A1; cursor:pointer; float:right; font-size:12px;}.triggeractive {color:rgb(255,5,5)} .toggle_container{overflow:hidden; clear:both; font-size:12px; font-weight:normal; line-height:20px; margin-top:10px}

jangan di save dulu, itu belum selesai, selanjutnya kalian cari kode<div class='comments' id='comments'>; dengan cara yang sama seperti tadi yaitu ctrl+f dan setelah itu copy kode berikut tepat di atas kode <div class='comments' id='comments'>

<div style='padding:7px 7px 7px 7px;overflow: hidden; width: auto; height: auto; text-align: justify;text-size:12;border:2px dotted #CCC;background: #eee;'> <a class='button gray medium' href='#comment-form' style='-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: all 0.25s linear 0s; background-clip: border-box; background-color: #a9adb1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVssl2YJrih-YwbpxFweicbdBmV-DRWD61cJvatDWFe8ZPA9_Rn4F3ExoHrMmthaQSl4GTecnIH3DX8n2-2Dkmq6My87A72TsmuQuXRuUllnjDzrWHIvMZLR21-DV8rhtS14PUEZOrkU/s1600/helperblogger-button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVssl2YJrih-YwbpxFweicbdBmV-DRWD61cJvatDWFe8ZPA9_Rn4F3ExoHrMmthaQSl4GTecnIH3DX8n2-2Dkmq6My87A72TsmuQuXRuUllnjDzrWHIvMZLR21-DV8rhtS14PUEZOrkU/s1600/helperblogger-button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(197, 199, 202)), to(rgba(197, 199, 202, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(197, 199, 202)), to(rgb(146, 152, 156))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(165, 165, 165) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(82, 82, 82) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 18px; line-height: normal; padding: 10px 20px; position: relative;text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap;'><span style='font-family: Verdana, sans-serif;font-size: large;font-weight:bold;color: blue;'>Add a Comment</span></a><a href="http://sobirin.blogspot.com"><span style="color: transparent;font-size: xx-small;">.</span></a> <span class='trigger'><a class='button gray medium' style='-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: all 0.25s linear 0s; background-clip: border-box; background-color: #a9adb1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVssl2YJrih-YwbpxFweicbdBmV-DRWD61cJvatDWFe8ZPA9_Rn4F3ExoHrMmthaQSl4GTecnIH3DX8n2-2Dkmq6My87A72TsmuQuXRuUllnjDzrWHIvMZLR21-DV8rhtS14PUEZOrkU/s1600/helperblogger-button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVssl2YJrih-YwbpxFweicbdBmV-DRWD61cJvatDWFe8ZPA9_Rn4F3ExoHrMmthaQSl4GTecnIH3DX8n2-2Dkmq6My87A72TsmuQuXRuUllnjDzrWHIvMZLR21-DV8rhtS14PUEZOrkU/s1600/helperblogger-button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(197, 199, 202)), to(rgba(197, 199, 202, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(197, 199, 202)), to(rgb(146, 152, 156))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(165, 165, 165) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(82, 82, 82) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 18px; line-height: normal;padding: 10px 20px; position: relative; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap;'><span style='font-family: Verdana, sans-serif;font-size: large;font-weight:bold;color: red;'>Read Comment Policy &#9660;</span></a></span> <div class='toggle_container'> <div class='block' style='padding:7px 7px 7px 15px;overflow: hidden; text-size:13;border-top:2px solid #CCC;'> <font style='color:rgb(255, 0, 0); font-weight:bold;font-family: Kristen ITC, sans-serif;'>Please Note</font> <br/> - No live link<br/> - Pergunakan bahasa baku dan tanpa singkatan serta sesuai dengan topik pembahasan<br/> - Komentar yang relevan akan saya balas dan kunjung balik secara otomatis (tanpa meminta)<br/> - Tekan <strong>&quot;subscribe by email&quot;</strong> untuk mengetahui balasan dari saya<br/> - Untuk mendapatkan BACKLINK, gunakan OpenID. Baca --&gt; <a href='http://sobirinimam.blogspot.com/2013/06/pengertian-dan-cara-mengaktifkan-openid.html' rel='nofollow' target='_blank' title='OpenID'><span style='font-family: Kristen ITC, sans-serif;font-weight:bold;color: red;'><em>Cara mengaktifkan OpenID</em></span></a> </div></div></div><br/>

> syarat untuk menjalankan animasi dropdown adalah memasang jquery terbaru, atau lebih lengkapnya kalian bisa baca di sini. Atau kalian memakai jquery yang sedang saya pakai, jquery ini work, kalian bisa memasangnya dengan cara cari kode jquery, jika sudah ada dengan versi terbaru gak usah dirubah lagi, atau yang masih versi lawas bisa kalian menggunakan jquery yang saya pakai. berikut ini jquerynya.

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

ok, cukup sekian dari saya, semoga artikel yang saya sampaikan kali ini bermanfaat dan menambah wawasan kalian semua. Terima kasih telah membaca, kunjungi selalu blog ini agar mendapatkan info yang menarik lainnya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Forum Bagi Ilmu