Cara Membuat Button Dengan Efek Sliding Hover


Caranya :
  1. Login ke blogger
  2. Pilih Template
  3. Masuk ke Edit HTML
  4. Cari kode ]]></b:skin> , tekan Ctrl+F untuk memudahkan pencarian
  5. Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin> :
  6. .a-btn{background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-text{ padding-top:8px; display:block; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-slide-text{ position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .a-btn-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(http://3.bp.blogspot.com/-Gnazmzurcn4/UG5YSSM5DJI/AAAAAAAAEqA/B2M66jPw04o/s1600/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn:hover{ padding-right:180px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{ text-shadow:0px 1px 1px #5d81ab; color:#fff; } .a-btn:hover .a-btn-slide-text{ width:100px; } .a-btn:hover .a-btn-icon-right span{ opacity:1; } .a-btn:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; }
  7. Kemudian klik tambahkan gadget dan pilih HTML/JavaScript
  8. Masukkan kode di bawah ini :
  9. <div class="button-wrapper"><a href="Button URL" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">It's free!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Become a member</span> <span class="a-btn-slide-text">Sign up!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Enter</span> <span class="a-btn-slide-text">Log in!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Get an account</span> <span class="a-btn-slide-text">For free!</span> <span class="a-btn-icon-right"><span></span></span> </a> </div>
  10. Ganti tulisan "Button URL" dengan link URL yang Anda tuju
  11. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya di dalam area posting tanpa perlu di parse :
  12. <a href="Button URL" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">It's free!</span> <span class="a-btn-icon-right"><span></span></span> </a> </div>
  13. Terakhir save dan lihat hasilnya
Semoga Bermanfaat...

Sumber : http://kakashitian.blogspot.com/2013/01/cara-membuat-button-dengan-efek-sliding.html


Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan


Caranya :
  1. Login ke blogger
  2. Pilih Template
  3. Masuk ke Edit HTML
  4. Cari kode </head> , tekan Ctrl+f untuk memudahkan pencarian
  5. Copy kode di bawah ini dan letakkan di atas kode </head> :
  6. <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: #585858; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:#FFFFCC; } #related-posts a:hover{ color:#000000; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://http://demowidget.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/> </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  7. Kemudian cari kode seperti di bawah ini :
  8. <div class='post-footer-line post-footer-line-1'>

    Atau kalau tidak ada cari yang seperti di bawah ini :
    <p class='post-footer-line post-footer-line-1'>

  9. Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang anda temukan :
  10. <!-- Marquee Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop> <h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3> <div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=12; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> <div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div> </div> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> </b:if> </b:if>
    <!-- Marquee Related Posts with Thumbnails Code End-->
  11. Perhatikan tulisan "Baca Juga Artikel Terkait Lainnya:" bisa anda ganti dengan kalimat yang anda kehendaki. #444 untuk warna background kotak. Dan angka 12 menunjukan jumlah related post yang ditampilkan
  12. Klik preview untuk melihat widget berhasil atau tidak, setelah itu save template dan lihat hasilnya
Semoga Bermanfaat...

Sumber : http://varozi.blogspot.com/2013/04/membuat-related-post-dengan-thumbnail.html


Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS