telah di uji di widget html/javascript ,
silahkan diedit .
link rell alangkah baiknya diubah ,
silahkan diedit .
alamat link script / css alangkah baiknya di ubah.
<div id='tr-collapse-520' class='tr-collapse-wrapper collapse-left easeout' data-side="left" data-collapsed="0" >
<div id='tr-collapse-52' class='tr-collapse'>
<div id="tr-section-1" class="tr-section embed first-section toggle" style="background: url(http://demo.themesrobot.com/collapse/files/2013/08/pinku.jpg);">
<div class="tr-section-title">
<a class="tr-section-toggle" href="#">Spontaneous Me - Lindsey Stirling
<span class="tr-toggle-down">▼</span>
<span class="tr-toggle-up">▲</span>
</a></div>
<div class="tr-section-content tr-panel-embed-wrap">
<iframe width="625" height="352" src="http://www.youtube.com/embed/pRPOztxXWlQ?feature=oembed" frameborder="0" allowfullscreen></iframe>
<div class="tr-panel-embed-caption">This is a caption: original song by violinist Lindsey Stirling</div>
</div></div>
<!-- .tr-panel -->
<div id="tr-section-2" class="tr-section embed" style="">
<div class="tr-section-title">Some Dubstep</div>
<div class="tr-section-content tr-panel-embed-wrap">
<iframe width="625" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F47970784&show_artwork=true&maxwidth=625&maxheight=938"></iframe>
<div class="tr-panel-embed-caption">Wait · AdventureClub</div>
</div></div>
<!-- .tr-panel -->
<div id="tr-section-3" class="tr-section embed toggle section-closed" style="background: url(http://demo.themesrobot.com/collapse/files/2013/08/wood_pattern.png);color:#662500;">
<div class="tr-section-title">
<a class="tr-section-toggle" href="#">Video from Vimeo <span class="tr-toggle-down">▼</span>
<span class="tr-toggle-up">▲</span>
</a>
</div>
<div class="tr-section-content tr-panel-embed-wrap">
<iframe src="http://player.vimeo.com/video/70149174" width="625" height="352" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="tr-panel-embed-caption">This video can be toggled and when the panel starts, it's closed</div>
</div></div>
<!-- .tr-panel -->
<div id="tr-section-4" class="tr-section embed last-section" style="">
<div class="tr-section-title">Instagram Photo</div><div class="tr-section-content tr-panel-embed-wrap">
<a href="http://instagram.com/p/cPQL9VNNB2/">
<img src="http://distilleryimage2.ak.instagram.com/a5665d5ef61c11e29b2522000a9f13d5_7.jpg" alt="Crazy Ones. Zulia Pro." width="612" height="612" />
</a>
<div class="tr-panel-embed-caption">Zulia Pro typeface by Sudtipos</div>
</div></div>
<!-- .tr-panel -->
</div>
<!-- .tr-collapse -->
<div id="hide-panel-wrap">
<a id="hide-panel" href="#">
<span class="hide-panel-icon">‹</span>
<span class="hide-panel-label">Hide Panel</span>
</a>
</div>
<div class="clearfix"></div>
<div id="show-panel-wrap">
<a id="show-panel" href="#">›</a>
</div></div>
<!-- .tr-collapse-wrapper -->
<!-- TR Collapse Styling -->
<style type='text/css'>
.tr-collapse-wrapper {
background-image: url(http://demo.themesrobot.com/collapse/files/2013/08/binding_dark.png);
color: #ffffff;
width: 300px;
height: 80%;
top: 10%;
}
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>
<!-- TR Collapse Styling -->
<!--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 type='text/javascript'>
/* <![CDATA[ */
var wc_cart_fragments_params = {"ajax_url":"\/collapse\/wp-admin\/admin-ajax.php","fragment_name":"wc_fragments"};
/* ]]> */
</script>
<script type='text/javascript' src='//demo.themesrobot.com/collapse/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.1.2'></script>
<script type='text/javascript' src='http://demo.themesrobot.com/collapse/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0'></script>
<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