widget ini sebenarnya hanya untuk wordpress , namun kali ini kalian dapat pakai di blogger .
saya hanya memperlihatkan susunannya bagaimana dia bekerja di widget ; HTML/JAVASCRIPT
untuk melihat demonya silahkan copy semua abjab nya dan simpan di widget kalian .
apabila susunan widget ini kalian ingin masukkan ke dalam template , maka silahkan saja , tempuh bagaimana caranya .OK?.
kelebihan widget ini kalian dapat edit , disamping fiturnya yang mantap! .
isi widget kalian dapat ganti sesuka hati , misal ; masukkan seluruh video favorit , mp3 , label , atau terserah yang penting jangan masukkan air ,,hahhahaha. OK , langsung saja 12 pas .
periksa widget lain , jangan sampai ada yang tak berfungsi .
alangkah baiknya link rell kalian alihkan sendiri , karna jangan sampai saya hapus , PAHAM? .
<div class="tr-collapse-wrapper collapse-left easeout" data-collapsed="0" data-side="left" id="tr-collapse-520"> <div class="tr-collapse" id="tr-collapse-52">
<div class="tr-section embed first-section toggle" id="tr-section-1" style="background: url(http://demo.themesrobot.com/collapse/files/2013/08/pinku.jpg);">
<div class="tr-section-title">
<a class="tr-section-toggle" href="https://www.blogger.com/blogger.g?blogID=8445439372249226229#">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 allowfullscreen="" frameborder="0" height="352" replaced="true" s3126794740133811674="true" src="http://www.youtube.com/embed/pRPOztxXWlQ?feature=oembed" width="625"></iframe><br />
<div class="tr-panel-embed-caption">
This is a caption: original song by violinist Lindsey Stirling</div>
</div>
</div>
<!-- .tr-panel -->
<br />
<div class="tr-section embed" id="tr-section-2">
<div class="tr-section-title">
Some Dubstep</div>
<div class="tr-section-content tr-panel-embed-wrap">
<iframe frameborder="no" height="166" replaced="true" s3126794740133811674="true" scrolling="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F47970784&show_artwork=true&maxwidth=625&maxheight=938" width="625"></iframe><br />
<div class="tr-panel-embed-caption">
Wait · AdventureClub</div>
</div>
</div>
<!-- .tr-panel -->
<br />
<div class="tr-section embed toggle section-closed" id="tr-section-3" 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="https://www.blogger.com/blogger.g?blogID=8445439372249226229#">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 allowfullscreen="" frameborder="0" height="352" mozallowfullscreen="" replaced="true" s3126794740133811674="true" src="http://player.vimeo.com/video/70149174" webkitallowfullscreen="" width="625"></iframe><br />
<div class="tr-panel-embed-caption">
This video can be toggled and when the panel starts, it's closed</div>
</div>
</div>
<!-- .tr-panel -->
<br />
<div class="tr-section embed last-section" id="tr-section-4">
<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 alt="Crazy Ones. Zulia Pro." src="http://distilleryimage2.ak.instagram.com/a5665d5ef61c11e29b2522000a9f13d5_7.jpg" height="612" width="612" /></a><br />
<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 href="https://www.blogger.com/blogger.g?blogID=8445439372249226229#" id="hide-panel"><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 href="https://www.blogger.com/blogger.g?blogID=8445439372249226229#" id="show-panel">›</a></div> </div>
<!-- .tr-collapse-wrapper -->
<!--LINK PANEL-->
<link href="http://demo.themesrobot.com/collapse/wp-content/plugins/tr-collapse/css/tr-plugin-style.css?ver=1.0.5" id="tr-collapse-css-css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
var wc_cart_fragments_params = {"ajax_url":"\/collapse\/wp-admin\/admin-ajax.php","fragment_name":"wc_fragments"}; /* ]]> */
</script>
<script src="https://googledrive.com/host/0B6NRsLHpHmOvZW53ZVROWE5HYVE" type="text/javascript"/></script>
<script src="https://googledrive.com/host/0B6NRsLHpHmOvV1ZmTE1fSXhrN00" type="text/javascript"/></script>
<!-- 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 -->
CODECANYON
silahkan diedit
0 Comments:
Posting Komentar