tag:blogger.com,1999:blog-29536060545513873282024-12-18T19:31:06.886-08:00izoravAnonymoushttp://www.blogger.com/profile/14431430234642151979noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-2953606054551387328.post-37022690570782840312013-06-22T02:14:00.001-07:002013-06-22T07:54:46.394-07:00Cara Membuat Button Dengan Efek Sliding Hover<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSDDTqeLDhUC1lyORpyIKgH5zesPjDn_GaGJxs1PCALV5s0oJ9QBDHx4TcykTi3hnHQO23kAuJZNQBQH7VAUexAWvD8jRCquvgJsk6wlcN6fuDgJenqhhFBYfI37bzeZ23DFDqhMyCMpY/s200/buttonhover.jpg" /><br />
<b style="text-align: justify;">Caranya :</b><br />
<div style="text-align: justify;">
<ol>
<li>Login ke blogger</li>
<li>Pilih Template</li>
<li>Masuk ke Edit HTML</li>
<li>Cari kode <span style="color: red;">]]></b:skin> </span>, tekan Ctrl+F untuk memudahkan pencarian</li>
<li>Copy kode di bawah ini dan letakkan di atas kode <span style="color: red;">]]></b:skin></span> :<span style="font-size: x-small;"><br /></span></li>
<div style="margin: 5px 0px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="font-style: italic;"><span style="font-style: italic;"></span></span>
<div style="font: 12px/22px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 100%;">
<span style="font-style: italic;"><span style="font-style: italic;"><span style="color: red; font-size: x-small;">
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiu38dPLY3yaFbmdiLRVF8-uSOvjGU9Xb9gVFvkrxRdkJTY1bRuNm1chhaLyhBvJBfQ0KebECyukhuIYCAQDJcpWLy25mio5CVMpbZCligaoFQm279dc_YTzhAsu2y9_WxqCc3b8eTgM/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; }
</span>
</span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;">
</span></span>
</div>
</div>
</div>
<li>Kemudian klik tambahkan gadget dan pilih HTML/JavaScript</li>
<li>Masukkan kode di bawah ini :</li>
<div style="margin: 5px 0px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="font-style: italic;"><span style="font-style: italic;"></span></span>
<div style="font: 12px/22px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 100%;">
<span style="font-style: italic;"><span style="font-style: italic;"><span style="color: red; font-size: x-small;">
<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>
</span>
</span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;">
</span></span>
</div>
</div>
</div>
<li>Ganti tulisan "<b>Button URL</b>" dengan link URL yang Anda tuju</li>
<li>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 :</li>
<div style="margin: 5px 0px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="font-style: italic;"><span style="font-style: italic;"></span></span>
<div style="font: 12px/22px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 100%;">
<span style="font-style: italic;"><span style="font-style: italic;"><span style="color: red; font-size: x-small;">
<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>
</span>
</span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;">
</span></span>
</div>
</div>
</div>
<li>Terakhir save dan lihat hasilnya</li>
</ol>
</div>
<div style="text-align: justify;">
Semoga Bermanfaat...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: left;">
Sumber : http://kakashitian.blogspot.com/2013/01/cara-membuat-button-dengan-efek-sliding.html</div>
</div>
<br />
<br />Anonymoushttp://www.blogger.com/profile/14431430234642151979noreply@blogger.com0tag:blogger.com,1999:blog-2953606054551387328.post-51320091621210613322013-06-22T01:47:00.004-07:002013-06-22T02:16:48.862-07:00Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan<img border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSaPlnH5zi9imlyL1AZU_FDySTm4DNCdM37DXTbfJOE5arSdNgttosH4O6NcLPSgxJmVvouaNQ69lyGoWPzyPZxlhnW8HNCzmhlFaWZAVdyqDVVOPQCSRrm50Be670EvWxBhZ0hVdJps/s320/a.jpg" width="320" /><b><br /></b>
<b>Caranya :</b><br />
<div>
<ol>
<li>Login ke blogger</li>
<li>Pilih Template</li>
<li>Masuk ke Edit HTML</li>
<li>Cari kode <span style="color: red;"></head> </span>, tekan Ctrl+f untuk memudahkan pencarian</li>
<li>Copy kode di bawah ini dan letakkan di atas kode <span style="color: red;"></head></span> :</li>
<div style="margin: 5px 0px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="font-style: italic;"><span style="font-style: italic;"></span></span>
<div style="font: 12px/22px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 100%;">
<span style="font-style: italic;"><span style="font-style: italic;"><span style="color: red; font-size: x-small;">
<!--Related Posts with thumbnails Scripts and Styles Start--><br />
<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><br />
<!--Related Posts with thumbnails Scripts and Styles End-->
</span>
</span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;">
</span></span>
</div>
</div>
</div>
<li><span style="text-align: justify;">Kemudian cari kode seperti di bawah ini :</span></li>
<div class="alt2" style="border: 1px inset; font-size: small; margin: 0px; padding: 6px;">
<span style="color: red;"><div class='post-footer-line post-footer-line-1'></span></div>
<br />Atau kalau tidak ada cari yang seperti di bawah ini :<div class="alt2" style="border: 1px inset; font-size: small; margin: 0px; padding: 6px;">
<span style="color: red;"><p class='post-footer-line post-footer-line-1'></span></div>
<br />
<li><span style="text-align: justify;">Lalu copy kode di bawah ini dan paste </span><b style="text-align: justify;">SETELAH</b><span style="text-align: justify;"> salah satu kode di atas yang anda temukan :</span></li>
<div style="margin: 5px 0px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="font-style: italic;"><span style="font-style: italic;"></span></span>
<div style="font: 12px/22px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 100%;">
<span style="font-style: italic;"><span style="font-style: italic;"><span style="color: red; font-size: x-small;">
<!-- Marquee Related Posts with Thumbnails Code Start--><br />
<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><br />
<!-- Marquee Related Posts with Thumbnails Code End-->
</span>
</span></span></div>
<span style="font-style: italic;"><span style="font-style: italic;">
</span></span>
</div>
</div>
</div>
<li><span style="text-align: justify;">Perhatikan tulisan "</span><span style="color: red; text-align: justify;"><b>Baca Juga Artikel Terkait Lainnya:</b></span><span style="text-align: justify;">"</span><span style="text-align: justify;"> bisa anda ganti dengan kalimat yang anda kehendaki. </span><span style="color: red; text-align: justify;">#444</span><span style="text-align: justify;"> untuk warna background kotak. Dan angka </span><span style="color: red; text-align: justify;">12</span><span style="text-align: justify;"> menunjukan jumlah related post yang ditampilkan</span></li>
<li><span style="text-align: justify;">Klik preview untuk melihat widget berhasil atau tidak, setelah itu save template dan lihat hasilnya</span></li>
</ol>
</div>
<div style="text-align: justify;">
Semoga Bermanfaat...</div>
<br />
Sumber : http://varozi.blogspot.com/2013/04/membuat-related-post-dengan-thumbnail.html<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/14431430234642151979noreply@blogger.com0