SANG RADJA COPAS

Tampilkan postingan dengan label Design. Tampilkan semua postingan

Home > Posts filed under Design

Widget Komentar + Efek Animasi Blogspot

Widget Komentar Efek Animasi Blogspot, MaxTrick akan berbagi Tips dan Trick bagaimana membuat widget untuk menampilkan komentar komentar di blog agan. Disini MaxTrick berbagi Widget komentar dengan dilengkapi 2 tema, yaitu Light Theme + Dark Theme, tinggal pilih mana yang paling sobat blogger suka. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hLdlaWAtvJVJwDlF7FFLAWQ5wD2iaMR-gQUak9_CtKZwqcSnu7NnHDzLtDR0arrC4ALGdNbyRhwR0ZtcDelJHwbkaobVlVK239BzLXVmyGCAKcrPL1GD7sEyDR9HlvlgUPHqtgZUxiE/s1600/Widget+Komentar+++Efek+Animasi+Blogspot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Komentar + Efek Animasi Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hLdlaWAtvJVJwDlF7FFLAWQ5wD2iaMR-gQUak9_CtKZwqcSnu7NnHDzLtDR0arrC4ALGdNbyRhwR0ZtcDelJHwbkaobVlVK239BzLXVmyGCAKcrPL1GD7sEyDR9HlvlgUPHqtgZUxiE/s1600/Widget+Komentar+++Efek+Animasi+Blogspot.jpg" title="Widget Komentar + Efek Animasi Blogspot" /></a></div><div style="text-align: center;">Widget Komentar + Efek Animasi Blogspot</div> <div style="background-color: white; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Kriteria Post Hari Ini :</div><div style="background-color: white; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;"><ul><li>Goal : Membuat Widget Komentar yang Menampilkan Komen Komen Di Blog</li><li>Tujuan : Meningkatkan Popular Site di pandangan Visitor Blog</li><li>Fitur : Dilengkapi dengan 2 Theme, dan tidak memberatkan akses Blog kita</li></ul></div><h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">Tutorial :</h2> 1. Pertama-tama masuk ke setting Layout Blogger (Tata Letak) : <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXXMwq1qLBUJI1kZVcIAo4aIz86aHHr07TRbT7OPnn25h21MgDfymkPgmRbtNEf_POamMj-rV2Mvyzk4wiPychYkQIDRzFeJ6zBs5jsbjoGBMGM1fBAR-4ETZ_kOoFouIXRt23UPg4CQ/s1600/Setting+Layout+Blogger.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Setting Layout Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXXMwq1qLBUJI1kZVcIAo4aIz86aHHr07TRbT7OPnn25h21MgDfymkPgmRbtNEf_POamMj-rV2Mvyzk4wiPychYkQIDRzFeJ6zBs5jsbjoGBMGM1fBAR-4ETZ_kOoFouIXRt23UPg4CQ/s320/Setting+Layout+Blogger.PNG" title="Setting Layout Blogger" width="210" /></a></div> Note : Lihat Gambar sebelah untuk lebih jelas Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya: <pre data-codetype="CSS+HTML+JQuery" style="-webkit-transition: all 0.4s ease-in-out; background-color: #e9dddd; border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; color: #333333; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; transition: all 0.4s ease-in-out; word-wrap: normal;"><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script> <div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:10, url_blog:"URL_blogmu", adminBlog:"nama_akun blogger/google+" }); }); //]]> </script> </code></pre> NB: Jika di template anda sudah ada jQuery library maka kode ini : <div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> tidak perlu dicopy. <h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">Themes (CSS)</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnLtd0dltpa5ss-WbrDplQ5lE0kSgPkCSC8peq2DgNiluvSLjQZJh5saqneAXaSE7mXaVbV2uKb1hRr1PPgjkJVFfsSIBB7ljBSskrsvrkeBJJrQb-2hqW0Ok3xUqQp0m-aLhyBU4msM/s1600/Widget+Komentar+Efek+Animasi+Blogspot.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Komentar Efek Animasi Blogspot" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnLtd0dltpa5ss-WbrDplQ5lE0kSgPkCSC8peq2DgNiluvSLjQZJh5saqneAXaSE7mXaVbV2uKb1hRr1PPgjkJVFfsSIBB7ljBSskrsvrkeBJJrQb-2hqW0Ok3xUqQp0m-aLhyBU4msM/s400/Widget+Komentar+Efek+Animasi+Blogspot.PNG" title="Widget Komentar Efek Animasi Blogspot" width="400" /></a></div><div style="text-align: center;"><b style="background-color: white; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;"> </div><div style="text-align: center;"><b style="background-color: white; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Widget Komentar Efek Animasi Theme</div> Selanjutnya ke Blogger > Settings > Template. <div>NB: BackUp terlebih dahulu Template Anda lalu klikEdit HTML > Proceed. Kemudian letakkan salah satu kode CSS di bawah sebelum ]]></b:skin>. <div><ul><li>Dark Theme :</li></ul></div><div><pre data-codetype="CSS+HTML+JQuery" style="-webkit-transition: all 0.4s ease-in-out; background-color: #e9dddd; border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; color: #333333; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; transition: all 0.4s ease-in-out; word-wrap: normal;"><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;">.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black} ul#kmtranimasi p{margin:15px 0 0}</code></pre></div><div><ul><li>Light Theme :</li></ul></div><div><pre data-codetype="CSS+HTML+JQuery" style="-webkit-transition: all 0.4s ease-in-out; background-color: #e9dddd; border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; color: #333333; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; transition: all 0.4s ease-in-out; word-wrap: normal;"><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;">.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}</code></pre></div><div><div style="text-align: center;"> </div><div style="text-align: center;"> </div><div style="text-align: center;">NB: Sebaiknya file JS disimpan di google code anda sendiri. Jika ingin tahu cara menyimpannya di google code silahkan ke tutorial Menyimpan file di Google Code.</div><div style="text-align: center;"> </div><div style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; padding: 10px; text-align: justify;"><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;"><div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKikrKE8nS5IyS1mClsx0MRSg_nox6g9yVHfeLjrNxiQymJjdRZ3ZxAulZZ27WlyLjv-vyl6E56SUduK_0vDZILrcKn-2YSHjiIJ1toahMXvPb57eZNggM-PCVn7qaoSoRFQHphBKYT_k/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="78" /></div></div>Bila merasa keksusahan dalam setting Tag Heading ini, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua How To Order to us To Setting Your Tag Heading : <ol><li>Just comment in post below and said that you want to order.</li></ol>Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div><div> </div></div></div></div>

Widget Komentar Efek Animasi Blogspot, MaxTrick akan berbagi Tips dan Trick bagaimana membuat widget untuk menampilkan komentar komentar di ...

Baca selengkapnya »

Memasang Emoticons Smiley Pada Form Komentar

Label: Blogger Tips, Design

<div style="background-color: white; border: 0px; padding: 0px 0px 15px;">Memasang Emoticons Smiley Pada Form Komentar, MaxTrick akan membagikan bagaimana cara memasang Emoticons Smiley Pada Form Komentar Blogspot. Tidak perlu menjadi sarjana untuk melakukan setting ini, cukup dengan niat dan mengikuti petunjuk di blog ini, sobat sobat blogger dah pada bisa menambahkannya sendiri.</div><div style="background-color: white; border: 0px; padding: 0px 0px 15px;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6li_kGrfPOsLTmXjNCkqTpWAsQ1dQYOYiVzs0AuGm1dgI3Py5jTFgFEv_HZTykIXcEDVIztmmtLcciMc8kb59RJGDxJGoUvFk_l1uc9_kwx98Cp4CrgTMCO7LOualjrqtGKk_qbcrcA/s1600/Memasang+Emoticons+Smiley+Pada+Form+Komentar.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6li_kGrfPOsLTmXjNCkqTpWAsQ1dQYOYiVzs0AuGm1dgI3Py5jTFgFEv_HZTykIXcEDVIztmmtLcciMc8kb59RJGDxJGoUvFk_l1uc9_kwx98Cp4CrgTMCO7LOualjrqtGKk_qbcrcA/s400/Memasang+Emoticons+Smiley+Pada+Form+Komentar.PNG" width="400" /></a></div><div style="background-color: white; border: 0px; padding: 0px 0px 15px; text-align: center;">Memasang Emoticons Smiley Pada Form Komentar</div><div class="separator" style="background-color: white; border: 0px; clear: both; font-family: 'Lucida Grande', Verdana, 'Lucida Sans Regular', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px; text-align: center;"></div><h2 style="background-attachment: scroll; background-color: white; background-image: url(http://4.bp.blogspot.com/-yaOMmRUQuvI/UC54DkP5bPI/AAAAAAAAAiU/suCIBO3pbcw/s1600/MBT+PostTitle+1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">CARA MENAMBAHKAN EMOTICONS SMILEY KE BLOG</h2><span class="fullpost" style="background-color: white; border: 0px; display: inline; font-family: 'Lucida Grande', Verdana, 'Lucida Sans Regular', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px;"><ul style="background-color: white; border: 0px; font-family: 'Lucida Grande', Verdana, 'Lucida Sans Regular', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; line-height: 18px; list-style: none; margin: 0px; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Setelah login, pada dasbor masuk ke menu template kemudian klik edit HTML dan lanjutkan:</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Klik <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd>+<kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> dan cari kode ]]></b:skin></li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Tambahkan kode CSS berikut diatasnya;</li></ul><span class="fullpost" style="background-color: white; border: 0px; display: inline; font-family: 'Lucida Grande', Verdana, 'Lucida Sans Regular', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px;"><pre data-codetype="CSS" style="-webkit-background-size: 30px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-linear-gradient(top, rgb(245, 245, 245) 50%, white 50%); background-repeat: repeat repeat; background-size: 30px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 2px solid rgb(123, 153, 12); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #4b5d08; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold; line-height: 15px; margin: 10px 5px; overflow: auto; padding: 29px 1em 7px; position: relative; word-wrap: normal;">.emoWrap { background-color:#fff; border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center; } img.emo, input.emoKey { display:inline-block; /* Penting! */ *display:inline; vertical-align:middle; } input.emoKey { border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black; }</pre><ul style="border: 0px; list-style: none; margin: 0px; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">kemudian tambahkan script JQuery berikut diatas kode </head></li></ul><pre data-codetype="JQuery" style="-webkit-background-size: 30px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-linear-gradient(top, rgb(245, 245, 245) 50%, white 50%); background-repeat: repeat repeat; background-size: 30px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 2px solid rgb(57, 85, 64); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #2e2e27; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold; line-height: 15px; margin: 10px 5px; overflow: auto; padding: 29px 1em 7px; position: relative; word-wrap: normal;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script></pre><div class="notice" style="background-attachment: scroll; background-color: #fff6bf; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySKTcGoAqPCTbScYiQRoahCOlA678CRPDWWAUnr-11qOf_emuP10SBeyf6AjcaGLMl-pluutD_JRAtzDPY-662ZrEv5wZ3q61DYhtaD39P2UgHe1z74UsjeFKqCt5ipHAT2Wj87NkQDM/s1600/TTB+notice.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 2px solid rgb(255, 211, 36); color: #514721; margin: 0px 0px 1em; padding: 0.8em 0.8em 0.8em 3.6em;">Untuk anda yang sudah memiliki atau menginstal script JQuery pada template anda maka langkah diatas abaikan saja!</div><ul style="border: 0px; list-style: none; margin: 0px; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">tambahkan lagi Script berikut dibawah script JQuery tadi</li></ul><pre data-codetype="JavaScript" style="-webkit-background-size: 30px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-linear-gradient(top, rgb(245, 245, 245) 50%, white 50%); background-repeat: repeat repeat; background-size: 30px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 2px solid rgb(84, 84, 72); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #1f2e24; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-weight: bold; line-height: 15px; margin: 10px 5px; overflow: auto; padding: 29px 1em 7px; position: relative; word-wrap: normal;"><script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap",     putEmoAbove = "iframe#comment-editor",     emoMessage = "To insert emoticon you must added at least one space before the code."; //]]> </script> <script src='<a href="http://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js'" style="border: 0px; color: #93005b; margin: 0px; padding: 0px; text-decoration: none;">http://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js'</a> type='text/javascript'/></pre><ul style="border: 0px; list-style: none; margin: 0px; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCIut7FqDSRKumLn2FBv1gHog0puu8gy0ftGhbIaDz32iFWGyh6TIsSqUSBU1FMZHpah0BXKQVKnvTLm91GyKPP0qBwdGsvJDYucclB0YMI63hKkeDPgxgHtI5IFdd1uuDNhfZvTruxM/s1600/TTB+Arrow1.png); background-position: 0px -2px; background-repeat: no-repeat no-repeat; border: 0px; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; line-height: normal; list-style: none; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Simpan template dan lihat hasilnya diblog anda!</li></ul><div style="color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: center;">Blog Tested : www.premiumgame.info</div> <div style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; padding: 10px; text-align: justify;"><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;"><div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKikrKE8nS5IyS1mClsx0MRSg_nox6g9yVHfeLjrNxiQymJjdRZ3ZxAulZZ27WlyLjv-vyl6E56SUduK_0vDZILrcKn-2YSHjiIJ1toahMXvPb57eZNggM-PCVn7qaoSoRFQHphBKYT_k/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="78" /></div></div>Bila merasa keksusahan dalam setting Tag Heading ini, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua How To Order to us To Setting Your Tag Heading : <ol><li>Just comment in post below and said that you want to order.</li></ol>Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div><div> </div>

Memasang Emoticons Smiley Pada Form Komentar, MaxTrick akan membagikan bagaimana cara memasang Emoticons Smiley Pada Form Komentar Blogspot....

Baca selengkapnya »

Membuat Sidebar Accordion dengan jQuery

Label: Blogger Tips, Design, JQuery

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian akan dibahas pada post ini. Apa itu Sidebar Accordion mungkin teman teman akan lebih jelas pembahasannya bila searching di google, tapi untuk contohnya, sobat blogger bisa lihat di sidebar Blog ini.<div> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aQqzF-IbJUbRx0J3nkbdrxea4GB4ZMxIL0gMdkAvcdzxz1jvKcui9cYLZK1pO72gQEmZtPJ4Ej5ro6yqzbDiLA0uam9GGdXMhnu8N7MltouOyaKJ0d3pvuPb2nOiEq6mfW2R7cdcttY/s1600/Membuat+Sidebar+Accordion+dengan+jQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sidebar Accordion dengan jQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aQqzF-IbJUbRx0J3nkbdrxea4GB4ZMxIL0gMdkAvcdzxz1jvKcui9cYLZK1pO72gQEmZtPJ4Ej5ro6yqzbDiLA0uam9GGdXMhnu8N7MltouOyaKJ0d3pvuPb2nOiEq6mfW2R7cdcttY/s1600/Membuat+Sidebar+Accordion+dengan+jQuery.jpg" title="Membuat Sidebar Accordion dengan jQuery" /></a></div><div><div style="text-align: center;">Sidebar Accordion dengan jQuery</div><div> </div><div>Kriteria Post Hari Ini :</div><div><ul><li>Goal : Sidebar kuno kita akan berubah tampilan menjadi lebih elegant</li><li>Tujuan : Memperindah Blog kita sehingga visitor akan betah</li><li>Harapan : Theme Blog kita lebih user friendly</li></ul></div><div>How To Make Sidebar Accordion With JQuery :</div></div><div> </div><div>Berikut lengkap Membuat Sidebar Accordion dengan jQuery : <ul><li>Masuk pada bagian Template » Edit HTML </li></ul>Kemudian Letakkan kode berikut ini atas kode ]]></b:skin> </div><div> <blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">#sidebar-wrapper h2 { margin: 0 2px; padding:3px 7px 3px 13px;  text-shadow:0 1px 0 black; background-color:#AD3000;  border:1px solid #ccc;  font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;  color:#fff;  text-transform:uppercase;  }  #sidebar-wrapper h2:hover {  margin: 0 2px;  padding:3px 7px 3px 13px;  background:#860000;  font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;  color:#fff;  text-transform:uppercase;  border-bottom:1px solid #404040;  }  #sidebar-wrapper h2.active {  background-color:#B60000;  color:#FFF;  }  #sidebar-wrapper .widget {  margin:0 0;  padding:0 0;  }  #sidebar-wrapper .widget-content {  padding:5px 5px 5px 13px;  max-height:auto;  overflow:auto;  }  #sidebar-wrapper1 .widget-content ul li {  border-top:1px solid #444;  border-bottom:1px solid #222;  }</blockquote>- Selanjutnya Letakkan kode berikut ini diatas kode <span style="background-color: white; border: 0px; box-sizing: border-box; color: blue; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></head> <blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(function() {     $('#sidebar-wrapper .widget-content').hide();     $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');     $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {         if($(this).next().is(':hidden')) {             $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');             $(this).toggleClass('active').next().slideDown('slow');         }     }); }); //]]> </script> </blockquote> - Simpan Template Keterangan: <div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna merah merupakan background pada judul widget. </div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna hijau merupakan ID sidebar.</div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna ungu merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.</div></div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> </div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><div style="color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; line-height: 19.59375px; text-align: center;">Blog Tested : <a href="http://maxtrick.blogspot.com/">MaxTrick.blogspot.com</a></div> <div style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; line-height: 19.59375px; padding: 10px;"><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;"><div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKikrKE8nS5IyS1mClsx0MRSg_nox6g9yVHfeLjrNxiQymJjdRZ3ZxAulZZ27WlyLjv-vyl6E56SUduK_0vDZILrcKn-2YSHjiIJ1toahMXvPb57eZNggM-PCVn7qaoSoRFQHphBKYT_k/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px;" width="78" /></div></div>Bila merasa keksusahan dalam setting Tag Heading ini, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua How To Order to us To Setting Your Tag Heading : <ol><li>Just comment in post below and said that you want to order.</li></ol>Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div><div> </div></div>

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian ...

Baca selengkapnya »