telah di uji di widget html/javascript ,
link rell alangkah baiknya diubah ,
silahkan diedit , apabila mempengaruhi tampilan template
.
simpan di google code atau semacamnya isi link rell asli .
<div id='tr-collapse-210' class='tr-collapse-wrapper collapsed collapse-right ease' data-side="right" data-collapsed="1" style="right:-190px">
<div id='tr-collapse-21' class='tr-collapse'>
<div id="tr-section-1" class="tr-section html first-section" style="">
<div class="tr-section-title">
</div>
<div class="tr-section-content tr-panel-html-wrap">
<p>This panel is collapsed towards right and uses a widget to display recent tweets (also <a href="http://codecanyon.net/item/user-profile-widget-for-wordpress-about-me/500932?ref=Elliot" target="_blank">available on CodeCanyon</a></p>
</div></div>
<!-- .tr-panel -->
<div id="tr-section-2" class="tr-section sidebar" style="background-color:#bee677;">
<div class="tr-section-title">Latest Tweets</div>
<div class="tr-section-content tr-panel-sidebar-wrap">
<div id="ilc-about-me-2" class="widget ilc-about-me tr-collapse-widget">
<div class="vcard">
<div class="ilc-about-me-tweets">
<ul class="latest-tweets">
<li><p>jQuery plugin to check if element is in viewport, that is, visible on the screen: <a href="http://t.co/7I16xqgsAM">http://t.co/7I16xqgsAM</a><br/><small><a href="http://twitter.com/eliorivero/status/467136110079258624">Yesterday</a></small></p></li>
<li><p>Did I just die and went to responsive heaven? jQuery Responsive Lazy Loading: load only images within the viewport <a href="http://t.co/l1ZmYNGfXM">http://t.co/l1ZmYNGfXM</a><br/><small><a href="http://twitter.com/eliorivero/status/467090816163643393">Yesterday</a></small></p></li><li><p><a href="http://twitter.com/vickyrubio">@vickyrubio</a> se habla de ello y eso es bueno. Siempre algo es mejor que nada porque va quedando. Bueno disculpá, escribà demasiado, saludos<br/><small><a href="http://twitter.com/eliorivero/status/467065821651800064">Yesterday</a></small></p></li>
</ul>
</div></div></div></div></div>
<!-- .tr-panel -->
<div id="tr-section-3" class="tr-section menu last-section" style="">
<div class="tr-section-title">WordPress Plugins</div>
<div class="tr-section-content tr-panel-menu-wrap">
<div class="menu-links-container">
<ul id="menu-links" class="menu">
<li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55">
<a href="http://codecanyon.net/item/allground-fullscreen-backgrounds-for-wordpress/4819233?ref=Elliot">Allground – Fullscreen Backgrounds</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56"><a href="http://codecanyon.net/item/alldion-responsive-accordion-for-wordpress/4135698?ref=Elliot">Alldion – Responsive Accordion</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57"><a href="http://codecanyon.net/item/allslider-wordpress-responsive-slider-carousel/3745375?ref=Elliot">AllSlider – Responsive Carousel</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-58"><a href="http://codecanyon.net/item/product-slider-carousel-for-woocommerce/2710233?ref=Elliot">Product Slider for WooCommerce</a></li>
<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a href="http://codecanyon.net/item/related-posts-for-wordpress/2427013?ref=Elliot">Related Posts for WordPress</a></li>
</ul>
</div></div></div>
<!-- .tr-panel -->
</div>
<!-- .tr-collapse -->
<div id="hide-panel-wrap">
<a id="hide-panel" href="#">
<span class="hide-panel-label">Hide Panel</span>
<span class="hide-panel-icon">›</span>
</a>
</div>
<div class="clearfix"></div>
<div id="show-panel-wrap">
<a id="show-panel" href="#">‹</a>
</div>
</div>
<!-- .tr-collapse-wrapper -->
<!--CSS JARAK TURUN PANEL-->
<!-- TR Collapse Styling -->
<style type='text/css'>
.tr-collapse-wrapper {
width: 190px;
height: 80%;
top: 0%;
}
body {
background-color: #8CD0D3;
}
.main-navigation ul.nav-menu {
text-align: center;
}
#tr-collapse-650 {
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23), inset 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23), inset 0 0 20px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23), inset 0 0 20px rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
padding: 10px 0;
border-radius: 1em 0 0 1em;
border: 1px dashed #999;
border-right: none;
margin-right: -2px;
}
#tr-collapse-650 .tr-section {
border-bottom: 1px dashed #999;
}
#tr-collapse-650 .tr-section.last-section {
border-bottom: none;
}
#tr-collapse-650 #hide-panel-wrap {
padding: 10px 10px 0;
position: fixed;
top: 10%;
right: 0;
margin-bottom: 10px;
margin-top: -40px;
}
#tr-collapse-650 #hide-panel {
border-radius: 5px;
}
#tr-collapse-650.tr-collapse-wrapper.collapsed #show-panel-wrap {
display: none !important;
}
#tr-collapse-650 .tr-section img, #tr-collapse-650 .tr-section iframe {
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
border-radius: 9px;
}
#tr-section-7 {
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
-webkit-box-shadow: inset 0 0 40px rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 0 40px rgba(255,255,255,0.5);
box-shadow: inset 0 0 40px rgba(255,255,255,0.5);
}
#tr-collapse-650 .tr-section-content a{
color: #c30
}
</style>
<!--LINK PANEL-->
<link rel='stylesheet' id='tr-collapse-css-css' href='http://demo.themesrobot.com/collapse/wp-content/plugins/tr-collapse/css/tr-plugin-style.css?ver=1.0.5' type='text/css' media='all' />
<!--SCRIPT SLIDE-->
<script type='text/javascript' src='http://demo.themesrobot.com/collapse/wp-content/plugins/tr-collapse/js/scroll.js?ver=1.0.5'></script>
<script type='text/javascript' src='http://demo.themesrobot.com/collapse/wp-content/plugins/tr-collapse/js/tr-plugin-script.js?ver=1.0.5'></script>
Tambahkan komentar Komentator
Konversi KodeOOT