Cara Membuat Smooth Scroll Back To Top di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iDbiQrl-k7zl5tJ2U0Xgpls7iC_upMlG9SDaLuU3TogLiKev7IfqXUs_SZc6-KKCmVoTd__szQlfw0B-SH_ng-hiQuiPig3WRe49m6c6J1sHGT0LNkaFME0AMENxlkKhuNic_bUlzuc/s400/smooth+back+to+top+.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iDbiQrl-k7zl5tJ2U0Xgpls7iC_upMlG9SDaLuU3TogLiKev7IfqXUs_SZc6-KKCmVoTd__szQlfw0B-SH_ng-hiQuiPig3WRe49m6c6J1sHGT0LNkaFME0AMENxlkKhuNic_bUlzuc/s400/smooth+back+to+top+.jpg" width="400" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><u><i><b>Tutorial Belajar Blog</b></i></u> - <a href="http://tutorialbelajarblogger.blogspot.com/2013/07/cara-membuat-smooth-scroll-back-to-top.html" target="_blank"><u><i>Cara Membuat Smooth Scroll Back To Top di Blog</i></u></a>. Bagi sebagian sobat mungkin sudah familiar dengan kata-kata <i>smooth </i><i><i>scroll </i>back to top / kembali ke atas</i>. <i>Smooth</i> sendiri berarti <i>lembut</i>. Jadi <i>smooth scroll </i>artinya <i>menggulung dengan lembut</i>. Untuk membuat Tombol <b>Back to Top</b> biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.</div><br /><div style="text-align: justify;"><i>Smooth <u>Scroll </u>Back To Top</i> ini dimaksudkan sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. <i>Smooth <u>Scroll </u>Back To Top</i> ini menggunakan Jquery mungkin pada tutorial selanjutnya lebih praktis</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><a class="tombol" href="http://seputarinformasiterbaru.blogspot.com/" rel="" style="-webkit-box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 2px; -webkit-transition: all 0.1s linear 0s; background-color: #2d2d2d; background-image: none; border-color: rgba(255, 255, 255, 0.0392157) rgba(255, 255, 255, 0.027451) rgb(66, 128, 238); border-image-source: none; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 0, 0.701961) 0px 0px 4px; color: #e6e6e6; display: inline-block; font-family: Coda, cursive; font-size: 0.7em; line-height: 2em; margin: 0.5em 1em 0.5em 0px; padding: 0px 1.5em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline; white-space: nowrap;" target="_blank">KLIK DISINI DEMO SCROLL bACK TO TOP</a> </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Tidak lupa saya ucapkan terima kasih untuk <a href="http://www.mdf-blog.blogspot.com/" target="_blank">Mas Abdul</a><a href="http://www.mdf-blog.blogspot.com/" target="_blank"> Rahman</a> yang sudah berbagi tips ini kemudian saya share kembali karena Tutorial Blog ini Merupakan request dari teman blogger.</div><br />Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut :<br /><br />1. Login akun Blogger anda.<br />2. Pada Dashboard pilih <span style="color: blue;"><b>Template</b></span> � <span style="color: blue;"><b>Edit HTML</b></span><br />3. Letakkan kode berikut ini dibawah kode <span style="color: #cc0000;"><b>]]></b:skin></b></span><br /><br /><pre><code class="xml"><br /><span class="tag"><<span class="title">style</span>></span><span class="undefined"><br /><br />#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;<br /><br />-moz-border-radius-topleft: 30px;<br /><br />border-top-left-radius: 30px;}<br /><br />#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #<span style="color: red;">f7f7f7</span> transparent;}<br /><br /></span><span class="tag"></<span class="title">style</span>></span> </code></pre><br />4. Kemudian letakkan kode berikut ini diatas kode <span style="color: #cc0000;"><b></body></b></span><br /><br /><pre><code class="xml"><br /><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">'backtop'</span>></span>Back to Top<span class="tag"></<span class="title">div</span>></span><br /><br /><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">'text/javascript'</span>></span><span class="javascript"><br /><br /><span class="comment">//<![CDATA[</span><br /><br />$(window).scroll(<span class="keyword">function</span>(){<span class="keyword">if</span>($(<span class="keyword">this</span>).scrollTop()><span class="number">100</span>){$(<span class="string">"#backtop"</span>).removeAttr(<span class="string">"href"</span>);$(<span class="string">"#backtop"</span>).stop().animate({bottom:<span class="string">"-3"</span>,right:<span class="string">"0"</span>},{duration:<span class="number">800</span>,queue:<span class="literal">false</span>})}<span class="keyword">else</span>{$(<span class="string">"#backtop"</span>).stop().animate({bottom:<span class="string">"-50"</span>,right:<span class="string">"0"</span>},{duration:<span class="number">1000</span>,queue:<span class="literal">false</span>})}});$(<span class="keyword">function</span>(){$(<span class="string">"#backtop"</span>).click(<span class="keyword">function</span>(){$(<span class="string">"html, body"</span>).animate({scrollTop:<span class="number">0</span>},<span class="string">"slow"</span>);<span class="keyword">return</span> <span class="literal">false</span>})});<br /><br /><span class="comment">//]]></span><br /><br /></span><span class="tag"></<span class="title">script</span>></span> </code></pre><br />5. Simpan Template<br /><br />Selamat Mencoba dan semoga Bermanfaat Silahkan anda sesuaikan sendiri Baca Juga <a href="http://tutorialbelajarblogger.blogspot.com/2013/07/cara-memberikan-pesan-aktifkan.html" target="_blank">Cara Memberikan Pesan Aktifkan JavaScript Pada Blog</a><br /><br /><span style="font-size: x-small;"><i>Thanks To MDF </i></span>

Cara Membuat Smooth Scroll Back To Top di Blog

Tutorial Belajar Blog - Cara Membuat Smooth Scroll Back To Top di Blog . Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth...

Baca selengkapnya »

Cara Membuat Animasi Loading Page Blog dengan jQuery

<br /><div itemprop="articleBody"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkoY3jO29F0SKf2P8ivHTiULUaMZD6pYAEnB8rCrrEN5iQqc4CLiVRHj7FnS1HaJpME9iVTS6qX7eHbLl6S-v5Hrro2sspBOHuT8NhCqQfVE1ug0F3wY1fMbdtnrxNmcvTx2ayghH5lHg/s1600/12028_funny_loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkoY3jO29F0SKf2P8ivHTiULUaMZD6pYAEnB8rCrrEN5iQqc4CLiVRHj7FnS1HaJpME9iVTS6qX7eHbLl6S-v5Hrro2sspBOHuT8NhCqQfVE1ug0F3wY1fMbdtnrxNmcvTx2ayghH5lHg/s400/12028_funny_loading.jpg" width="400" /></a></div><br />Tutorial Belajar Blog - <u>Cara Membuat Animasi Loading Page Blog dengan jQuery,</u>Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum nya <a href="http://tutorialbelajarblogger.blogspot.com/2013/01/cara-membuat-animasi-loading-page-di.html" target="_blank">Cara Membuat Animasi Loading Page di Blog</a> dan <a href="http://tutorialbelajarblogger.blogspot.com/2013/01/langkah-membuat-animasi-loading-blog.html" target="_blank"><span class="post-labels">Langkah Membuat Animasi Loading Blog Lebih Menarik</span></a> , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada.</div><div itemprop="articleBody"><br /></div><div itemprop="articleBody">Sekilas Tentang  Animasi loading page memberikan tampilan yang penuh dan sesuai, artinya setelah loading page selesai, maka animasi loading juga selesai. Waktu loading page bisa diukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.</div><div itemprop="articleBody"><a href="http://www.blogger.com/blogger.g?blogID=2898925829537670161" name="more"></a><br /><br /><a href="http://www.blogger.com/blogger.g?blogID=5649142411227587577" name="more"></a>Script animasi loading page ini saya dapat dari om Google yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog Anda, langsung saja ikuti tutorial/panduan di bawah.<br /><br /><ol><li>masuk ke Design > Edit HTML lalu cari kode <b>]]></b:skin></b> dan letakan kode berikut ini diatas <b>]]></b:skin></b>.</li><span style="color: lime;">/* ---------------</span><br style="color: lime;" /><span style="color: lime;">jquery animation loading page</span><br style="color: lime;" /><span style="color: lime;">---------------------------------- */</span><br style="color: lime;" /><span style="color: lime;">.QOverlay {</span><br style="color: lime;" /><span style="color: lime;">background-color: #000000; /* background color loading */</span><br style="color: lime;" /><span style="color: lime;">z-index: 9999;</span><br style="color: lime;" /><span style="color: lime;">}</span><br style="color: lime;" /><span style="color: lime;">.QLoader {</span><br style="color: lime;" /><span style="color: lime;">background-color: #CCCCCC; /* color bar loading */</span><br style="color: lime;" /><span style="color: lime;">height: 10px;</span><br style="color: lime;" /><span style="color: lime;">}</span><br style="color: lime;" /><span style="color: lime;">.QAmt {</span><br style="color: lime;" /><span style="color: lime;">color:#FF530D; /*loading Color number*/</span><br style="color: lime;" /><span style="color: lime;">font-size:50px;</span><br style="color: lime;" /><span style="color: lime;">font-weight:bold;</span><br style="color: lime;" /><span style="color: lime;">line-height:50px;</span><br style="color: lime;" /><span style="color: lime;">height:50px;</span><br style="color: lime;" /><span style="color: lime;">width:100px;</span><br style="color: lime;" /><span style="color: lime;">margin:-60px 0 0 -50px;</span><br style="color: lime;" /><span style="color: lime;">}</span><br /><li>kemudian cari kode <b></head></b> dan letakan kode berikut ini di atasnya.</li><span style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></span><br /><span style="color: lime;"><script src='http://tutorialbelajarblogger.googlecode.com/files/loadingpage.js' type='text/javascript'/></span><br /><li>Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).</li><li>Selanjutnya cari kode <b></body></b> dan letakankode berikut ini di atasnya.</li><span style="color: lime;"><script></span><br style="color: lime;" /><span style="color: lime;">QueryLoader.selectorPreload = &quot;body&quot;;</span><br style="color: lime;" /><span style="color: lime;">QueryLoader.init();</span><br style="color: lime;" /><span style="color: lime;"></script></span><br /><li>Save template Anda dan coba buka blog Anda untuk melihat hasilnya.</li><li>Bila script tidak berfungsi silakan cek ulang apakah Anda sudah mengukuti langkah di atas dengan benar. Jika Anda sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti script tersebut bentrok dengan script yang lain.</li></ol></div>

Cara Membuat Animasi Loading Page Blog dengan jQuery

Tutorial Belajar Blog - Cara Membuat Animasi Loading Page Blog dengan jQuery, Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum...

Baca selengkapnya »

Membuat Menu Sidebar Melayang dengan Efek Jquery Lebih Menarik

<div dir="ltr" style="text-align: left;" trbidi="on">Tutorial Belajar Blog | Trik Blog | Tips Blog - Sekedar Berbagi Tutorial Seputar Blogging , <b>Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery,</b> untuk Conoth bisa di lihat tampilan scrensot blog ini.<br /><div style="text-align: center;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEu87hazXUM087jpya1gh0sQ97JlY3td9rZ5pwgNRRCHqCLXr3iamv4P4iT8gVpyfXhEtxyLVAkuDa3LzLd0wLb2_8kcb1jipCyRhWFwGKut3hdjCLTH2-nMYn48fOtZ9gcIuIFzfzKmU/s320/side+melayang.jpg" width="320" /> </div><b>Membuat Menu Sidebar Melayang dengan Efek Jquery Keren</b><br />1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML<br />2. Cari Kode <span style="color: lime;">]]></b:skin></span> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode <span style="color: lime;">]]></b:skin></span><br /><br /><br /><blockquote class="tr_bq"><br />/* Starts Menu Sideabr Jquery melayang by tutorialbelajarblogger.blogspot.com Starts*/<br />ul#navigation {<br />position:fixed;<br />margin: 0px;<br />padding: 0px;<br />top: 55px;<br />left: 0px;<br />list-style: none;<br />z-index:9999;<br />}<br />ul#navigation li {<br />width: 100px;<br />}<br />ul#navigation li a {<br />display: block;<br />margin-left: -2px;<br />width: 100px;<br />height: 50px;<br />background-color: #ffffff;<br />background-repeat:no-repeat;<br />background-position:center center;<br />border:1px solid #fff;<br />-moz-border-radius:0px 10px 10px 0px;<br />-webkit-border-bottom-right-radius: 10px;<br />-webkit-border-top-right-radius: 10px;<br />-khtml-border-bottom-right-radius: 10px;<br />-khtml-border-top-right-radius: 10px;<br />-moz-box-shadow: 0px 4px 3px #000;<br />-webkit-box-shadow: 0px 4px 3px #000;<br />opacity: 0.9;<br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);<br />}<br />ul#navigation .home a{<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5zqoyWSfCanKTIIQBgiDfH8v4cNF2AQm8pWBGgG2xS9-GRRhShr5jNhKIlaO3xhN6bAbCcq6_nczQVKZv2ALaSCdi3VZIBmWNu_E335tOm2TlJtIHjspgUAVTwrrPEgnzWSShyF71-o/s1600/home.png);<br />}<br />ul#navigation .about a      {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUKIoEzjeVaihXr1OZdSY-mynBV1BRoPNGvCJoaHsqEJrEw8HquyPwnKfw_Hi4MOnN5oMJMQxDfjwzU6HwUMdEZ_aOvSuOf146em6sBWpjwTtG33SLvg_R1YqbNk_42u-Or7bIPHLRLGc/s1600/konco.png);<br />}<br />ul#navigation .rss a      {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSUa0QFmzPAN7V6_Booj2ISpV_l5EJWtPYeJ2uF4sCOcWUK2nDvfpt45tl1eNjFAyK-r_PV3PqWKlIUa3Gt4a12MRoiLqJGranLISPpqhKZZQS14CUtKrVzZLscofeTE6cB4t-MwnbKjg/s1600/rss.png);<br />}<br />ul#navigation .mail a      {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjweNdce6HINMbR4VeiS62IyHtPF91Uro37GV-q2g7NRKWAkUJLmsnQwrVbA5_AVT2nO7WDkA_VMyK-9JT0-VQYJqFSC3N_LGHJ4a1bzcONMs16s2WY0mSLFCYZ-HoKIgKGi-Zm5LQsjj4/s1600/mail_receive.png);<br />}<br />ul#navigation .facebook a   {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz72JSDgmyrE-_7O7Y5UmRmitiXv9mIM9J-DEHYSdDaOnLZJbMA6I7Wq8rw3RkKjO-zl7usRDNWaX_yyS3ggSk4o2t6WzJ5WbR4ov2hMOIJCDbMgp_ZohPcf1VA6ON2Ejc5xpbeCDzhUE/s1600/about.png);<br />}<br />ul#navigation .twitter a     {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgsUJi-xMMD7o3lwrkf-mZieU0sS2gdhTNxbes3U417r7XnLeSuMganMFuxy-Pfql4IuxoNgSQ1WffLOhuP3shgNbfjKn_kQVzsBhWs70I885IKdKh4ZpQAS6XOuhyphenhyphenf1lpQOfhb5FW0k/s1600/twitter.jpg);<br />}<br />ul#navigation .youtube a    {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiProuE8JDDZY2O1ab4AGGKqO8ATp_ToAT_B0KZ3kEXEiSKVL7Pq9bLTy7U5TW4QIZQ3iWDetsKTHuYwhPyVbdIWGP4Nm23BsAJFdBS_WWJ3M97WI3HnQ5h5R0BFbxbHKN-g2M5BCqxBcg/s1600/You+Tube.png);<br />}<br />ul#navigation .googleplus a    {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNigpi9lAfkJ3GRrfPw-iD96t-KJapZJ_Npdn8PPMYbt_UZ7srZTRpnTXbv18OvVYxNFxaX3dMFyns9MzzUVPCrbr4T5LPxkltqjY7Vi0FUXAUWbROafOiLTVM92IJ2Fn_nLHcP_Pj-g/s1600/google+plus+circle.jpeg);<br />}<br />ul#navigation .yahoo a    {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlCiWC348xktVYoHrya6Vcg6HKjhWs-8PFcj1pnz4fGmAIbbm6QvuiDo1ISxrieF_D4HAELbz4bGKxaLovlq7-PIYRLW-l0LVxz6UyvnkiAFa4o_FIVRH22RG3CdPXkAi6wuVcvg0OjY/s1600/yahoo+icon.jpg);<br />}<br />/* End Menu Sideabr Jquery melayang by tutorialbelajarblogger.blogspot.com End*/</blockquote><div><br /></div><br />3. Cari kode <span style="color: lime;"></body></span> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode <span style="color: lime;"></body></span> tadi<br /><br /><blockquote class="tr_bq"><script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(function() {<br />$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);<br />$(&#39;#navigation &gt; li&#39;).hover(<br />function () {<br />$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);<br />},<br />function () {<br />$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);<br />}<br />);<br />});<br /></script></blockquote><br />4. Klik Simpan Template<br /><br />5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:<br /><br /><blockquote class="tr_bq"><div class='header'></div><br /><div class='scroll'></div><br /><ul id='navigation'><br /><li class='home'><a href='tutorialbelajarblogger.blogspot.com' title='Home'></a></li><br /><li class='about'><a href='tutorialbelajarblogger.blogspot.com<span style="color: yellow;"></span>' target='_blank' title='About us'></a></li><br /><li class='rss '><a href='<span style="color: yellow;">http://feeds.feedburner.com/</span>' target='_blank' title='Rss feed'></a></li><br /><li class='mail'><a href='<span style="color: yellow;">http://mail.google.com</span>' target='_blank' title='Contact Me'></a></li><br /><li class='facebook'><a href='<span style="color: yellow;">http://fb.com/oktri.darmadi</span>' target='_blank' title='Add Me on facebook'></a></li><br /><li class='twitter'><a href='<span style="color: yellow;">http://twitter.com/oktri.darmadi</span>' target='_blank' title='Follow us on twitter'></a></li><br /><li class='youtube '><a href='<span style="color: yellow;">http://youtube.com/</span>' target='_blank' title='Follow Me on Youtube'></a></li><br /><li class='googleplus '><a href='<span style="color: yellow;">https://gplus.to/xgen</span>' target='_blank' title='Follow Me on google plus'></a></li><br /><li class='yahoo'><a href='<span style="color: yellow;">http://yahoo.com/</span>' target='_blank' title='YM With Me'></a></li><br /></ul></blockquote>#Ganti link yang <a href="http://www.blogger.com/#">saya</a> beri warna <span style="color: yellow;">kuning</span> dengan link kamu, Lalu klik simpan<br /><br />Selesai, sekarang buka blog kamu dan lihat hasilnya, <b>Menu Sidebar dengan Efek Jquery Keren </b>sudah ada diblogmu :)<br /><br />keyword: <b>cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, </b><b>cara membuat menu sidebar melyang dengan efek jquery keren</b></div>

Membuat Menu Sidebar Melayang dengan Efek Jquery Lebih Menarik

Tutorial Belajar Blog | Trik Blog | Tips Blog - Sekedar Berbagi Tutorial Seputar Blogging , Trik Cara Membuat Menu Sidebar Melayang dengan E...

Baca selengkapnya »

Cara Membuat Vertical Sliding Info Panel With jQuery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUTmFGr4Ih0NNG9pxw-4ycrhjN1bu3LZh_uzxAnL-XN7xfy8S690IwRhNANb19_xUvqS6UtHWSYM0cNtCnS2QqRB5iGxzikHfHzpZUHKTcFZ7eRlwp7N7eQZsTvWSUZIu9TNKX_Y-V8s/s1600/Vertical+Sliding+Info.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUTmFGr4Ih0NNG9pxw-4ycrhjN1bu3LZh_uzxAnL-XN7xfy8S690IwRhNANb19_xUvqS6UtHWSYM0cNtCnS2QqRB5iGxzikHfHzpZUHKTcFZ7eRlwp7N7eQZsTvWSUZIu9TNKX_Y-V8s/s320/Vertical+Sliding+Info.jpg" width="320" /></a></div>TUTORIAL BLOG | TIPS TRIK BLOG - tutorial seperti ini saya juga mendapatkanya dari sang master Hendriono dari <a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a>. salam tengkyu lah buat beliau,.. he, hampir mirip dengan punya beliau namun saya rombak sedikit hingga menjadi seperti yang q punya,...<br /><br />Yap oke, langsung aja ke tutorialnya, :<br /><br />Login di blogger Anda <br />    * Masuk ke Dasbor <br />    * Pilih Tata Letak / Rancangan Dan Edit HTML <br />    * Klik "Expand Template Widget"<br />    * Jangan lupa untuk memback-up template anda terlebih dahulu (very recomended)<br /><br />      Kemudian<br /><br />1. Cari code : <span style="color: red;">]]></skin></span><br />Sisipkan code berikut di Atas-nya :<br /><pre rel="css" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;">.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px<br /> solid <br />#940000;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px<br /> 30px 30px 100px}<br /><br />.panel p{color:#ffffff;margin:0 0 15px;padding:0}<br /><br />.panel a,.panel a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}<br /><br />.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}<br /><br />a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,<br /> helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333<br /> <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrqKrFqTL7rXrC01WLmsM7EvGy8kU8FSCYaXmYV7ElIuUAr-L14mbfYd_tkqzql999bpwpUF6gj001Y7XdoQPkM5GY4nvvcgBDol8BLdN5pQEcu1Mx21SUKLfY0f134wg0tzBahBHPR0/)<br /> 85% 55% no-repeat;border:2px solid <br />#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px<br /> 35px 10px 10px}<br /><br />a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,<br /> helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222<br /> <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wjEPu4VDjmB7Y1LJ2VrU-druLX17ocZ3Wy4moHhyN3Yab1VOEzzelChsI1VGdQek1zcPTW3Ev75e5Iutc07n7qo2MAiaoeUEFUqI0UaF-fKfpQSPVmVaRloOTDYh1it62wLw388s0iE/)<br /> 85% 55% no-repeat;border2px solid <br />#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px<br /> 40px 10px 10px}<br /><br />a.active.trigger{background:#222 <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wjEPu4VDjmB7Y1LJ2VrU-druLX17ocZ3Wy4moHhyN3Yab1VOEzzelChsI1VGdQek1zcPTW3Ev75e5Iutc07n7qo2MAiaoeUEFUqI0UaF-fKfpQSPVmVaRloOTDYh1it62wLw388s0iE/)<br /> 85% 55% no-repeat}<br /><br />.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}<br /><br />a:focus{outline:none}<br /><br />.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}<br /><br />.panel h3{border-bottom:1px solid <br />#FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#940000;font-size:13px;font-weight:700}<br /><br />.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}</pre><br />2. Dilanjutkan dengan mencari code : <span style="color: red;"></head></span><br />dan taruh code berikut di Atas nya :<br /><pre rel="jQUERY" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />$(document).ready(function(){<br /><br />$(&quot;.trigger&quot;).click(function(){<br /><br /> $(&quot;.panel&quot;).toggle(&quot;fast&quot;);<br /><br /> $(this).toggleClass(&quot;active&quot;);<br /><br /> return false;<br /><br />});<br /><br />});<br /><br /></script></pre><br />3.  Yanag terakhir cari code :  <span style="color: red;"></body></span><br /> Dan masukan code berikut di Atas-nya juga :<br /><pre rel="Script Panel" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;"><div class='panel'><br /><h3>---TUTORIAL BLOG---</h3><br /><p style='text-align:justify'>Sebuah blog edukasi, seputar Tips dan Trik Blogger &quot; ada disini. Ini adalah diary kecil dari manusia yang selalu ingin belajar dan belajar, berbagi informasi , sharing dan belajar bersama mengenai Blog, Facebook <a href='http://tutorialbelajarblogger.blogspot.com/' title='Prolog Gue'>Baca Kelanjutannya</a></p><br /><br /><h3>About Me</h3><br /><br /><img height='73px' src='http://images.zaazu.com/img/devil-animated-animation-devil-smiley-emoticon-000386-large.gif' width='73px'/><p style='text-align:justify'>Seorang bloger pemula yang selalu ingin berbagi informasi, dan sekarang ini sedang proses pencarian jati diri</p><br /><br /><div style='clear:both;'/><br /><br /><div class='columns'><br /><br /> <div class='colleft'><br /><br /> <h3>Social Stuff</h3><br /><br />  <ul><br /><br />   <li><a expr:href='data:blog.homepageurl + &quot;feeds/posts/default&quot;' title='rss'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeRI98VHG_VCWTLfkCyIpAlPcYEc3kKsPn4FOC4Mda2_FRf1KSE5fy_1EJ2L_JaUEJnlwGZ5V6WeleZ8iDGDKzxUJod3x-f79KY2cKqwRTN22Ar4P_Tg8ZDyrgQ8RwS989NDTks6L9YY/'/></a></li><br /><br />   <li><a href='<span style="color: red;">http://twitter.com/@oktridarmadi'</span> title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKxFfIMBvKQ8RNTq6ShWPSKNAm49wjvgje1G5XAEK37xubMdg9guy2WQZ4gyeQFL1-pI8Qe2_Bw7FLeRlMMDOyekcyJ8tIk7Twpv80rKqKFL9z1v-B_XmBq-5zcM7zqwjzanqvz7qsCg/'/></a></li><br /><br />   <li><a href='<span style="color: red;">http://www.facebook.com/oktri.darmadi</span>' title='facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWzwxCSYqzllpF3se1cz6P5iM-IWPFnVMkrmE4YyFrN-JJ8KBQJc7p6I_xA-pGtfTzUU8aPBOwZc215-zzRTcmTuyJ7DJkmgJzJraJqXAKM154nJooCvi-V4kSLrlU9Xdhkuy2itHSKG8/'/></a></li><br /><br />   <li><a href='<span style="color: red;">http://tutorialbelajarblogger.blogspot.com/</span>' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KoNQR3Jlxr_tH7050luMDv7eyzvEBjFS7LREXqjaernCjp_6EENLd-YKn6YP1WZX-TZNrUfoRilf67mIm_7qhFkEBxGAlutJpEpavKlNDn5GqYbzFVl_CIrc948gyfjtsBK5lI0zrhI/'/></a></li><br /><br />  </ul><br /><br /> </div><br /></div><br /><div style='clear:both;'/><br /><br /></div><br /><br /><a class='trigger' href='#'>About</a> </pre>* Yang berwarna <span style="color: red;">merah</span> , bisa sobat sesuai dengan keinginan,..

Cara Membuat Vertical Sliding Info Panel With jQuery

TUTORIAL BLOG | TIPS TRIK BLOG - tutorial seperti ini saya juga mendapatkanya dari sang master Hendriono dari Blogger Tune-Up . salam teng...

Baca selengkapnya »

Buku Tamu Panel Slide Vertikal Jquery

TUTORIAL BLOG | BELAJAR BLOG | TIPS TRIK BLOG -Membuat buku tamu Panel Slide Vertikal jquery, dengan ini akan memudahkan kita untuk saling sapa dengan para bloger lainya. Memang kita di susahkan dengan berbagai macam cara yang unik untuk menampilkan buku tamu itu sendiri. Nah, sekarang ini gue akan buat artikel tentang cara membuat Buku Tamu Slide Vertikal Dengan Jquery yang akan tampil jika  diKlik.<br /><br />Contoh hasil bisa Anda lihat seperti dibawah ini :<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirvre-BNiy1-xCEKcRMmNmtrMj_-gMXaEaUO4fay58eNR-zVisxcPAWwQRFPaagYsnLSLANKrH3SfhfZBa5lIZmJnDH_osQuqaLIjXhLHzMpUe4XYbb6SRnUDXlW33_UTQNkE4vY5d4Jg/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirvre-BNiy1-xCEKcRMmNmtrMj_-gMXaEaUO4fay58eNR-zVisxcPAWwQRFPaagYsnLSLANKrH3SfhfZBa5lIZmJnDH_osQuqaLIjXhLHzMpUe4XYbb6SRnUDXlW33_UTQNkE4vY5d4Jg/" width="296" /></a></div>Dan untuk demonya anda bisa lihat di blog saya, Tepat pada pojok kanan<br />Caranya membuatnya sebagai berikut :<br />Login di blogger Anda <br />    * Masuk ke Dasbor <br />    * Pilih Tata Letak / Rancangan Dan Edit HTML <br />    * Klik "Expand Template Widget"<br />    * Jangan lupa untuk memback-up template anda terlebih dahulu<br /><br />      Kemudian<br /><br />1. Cari code : <span style="color: red;">]]></skin></span><br />Sisipkan code berikut di Atas-nya : <br /><pre rel="CSS" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;">    <br />.panel2{position:fixed;top:20px;right:0;background:#000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;border:1px<br /> solid <br />#940000;width:350px;height:350;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px<br /> 60px 10px 30px}<br /><br />.panel2 p{color:#ffffff;margin:0 15px 0 0;padding:0}<br /><br />    .panel2 a,.panel2 a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}<br /><br />    .panel2 a:hover,.panel2 a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}<br />    <br />a.trigger2{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,<br /> helvetica, arial, <br />sans-serif;color:#fff;font-weight:700;background:#333 <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrqKrFqTL7rXrC01WLmsM7EvGy8kU8FSCYaXmYV7ElIuUAr-L14mbfYd_tkqzql999bpwpUF6gj001Y7XdoQPkM5GY4nvvcgBDol8BLdN5pQEcu1Mx21SUKLfY0f134wg0tzBahBHPR0/)<br /> 85% 55% no-repeat;border:2px solid <br />#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px<br /> 35px 10px 10px}<br />    <br />a.trigger2:hover{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,<br /> helvetica, arial, <br />sans-serif;color:#fff;font-weight:700;background:#222 <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wjEPu4VDjmB7Y1LJ2VrU-druLX17ocZ3Wy4moHhyN3Yab1VOEzzelChsI1VGdQek1zcPTW3Ev75e5Iutc07n7qo2MAiaoeUEFUqI0UaF-fKfpQSPVmVaRloOTDYh1it62wLw388s0iE/)<br /> 85% 55% no-repeat;border2px solid <br />#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px<br /> 40px 10px 10px}<br /> a.active.trigger2{background:#222 <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wjEPu4VDjmB7Y1LJ2VrU-druLX17ocZ3Wy4moHhyN3Yab1VOEzzelChsI1VGdQek1zcPTW3Ev75e5Iutc07n7qo2MAiaoeUEFUqI0UaF-fKfpQSPVmVaRloOTDYh1it62wLw388s0iE/)<br /> 85% 55% no-repeat}<br /> .columns2{clear:both;width:330px;line-height:22px;padding:0 0 0 20px}<br /><br />    a:focus{outline:none}<br /><br />    .panel2 img{background-color:#262626;border:1px solid #333;float:left;margin:3px 3px 6px 8px;padding:5px}<br /><br />    .panel2 h3{border-bottom:1px solid <br />silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}</pre>2. Cari code : <span style="color: red;"></head></span><br />Sisipkan code berikut di Atas nya :<br /><pre rel="jQUERY" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />$(document).ready(function(){<br /><br />$(&quot;.triger2&quot;).click(function(){<br /><br /> $(&quot;.panel2&quot;).toggle(&quot;fast&quot;);<br /><br /> $(this).toggleClass(&quot;active&quot;);<br /><br /> return false;<br /><br />});<br /><br />});<br /><br /></script></pre><br />3.  Selanjutnya cari code :  <span style="color: red;"></body></span><br /> Dan masukan code berikut di Atas-nya juga :<br /><pre rel="script Panel" style="background-color: #222222; background-image: -webkit-linear-gradient(top, rgb(45, 45, 45) 0%, rgb(42, 42, 42) 25%, rgb(39, 39, 39) 50%, rgb(36, 36, 36) 75%, rgb(34, 34, 34) 100%); border: 0px; color: #cccccc; font-family: Monaco, monospace; font-size: 12px; font: inherit; line-height: 14px; margin-bottom: 10px; margin-top: 10px; max-height: 500px; overflow: auto; padding: 32px 15px 10px; position: relative; text-align: justify; vertical-align: baseline; white-space: pre-wrap; width: 606.7833251953125px; word-wrap: break-word;"><div class='panel2'><br /><br /><h3><span style="color: lime;">Buku Tamu</span></h3><br /><br /><span style="color: lime;"><= Isikan dengan Buku Tamu Anda =></span><br /><br /></div><br /><br /><a class='triger' href='#'><span style="color: lime;">SHOUT</span></a></pre>. Warna yang di block hijau, bisa anda ganti shout box  milik anda.<br />. Selamat mencoba, dan semoga berhasil . . .

Buku Tamu Panel Slide Vertikal Jquery

TUTORIAL BLOG | BELAJAR BLOG | TIPS TRIK BLOG -Membuat buku tamu Panel Slide Vertikal jquery, dengan ini akan memudahkan kita untuk saling ...

Baca selengkapnya »