4 Haziran 2014

Floating Social Media Widget Mouse Hover Effect

sosyal medya

Sitenizde kullanabileceğiniz sosyal medya eklentisi sitenizin solunda örnek resimde`de gördüğünüz gibi sabit bir şekilde.

Sosyal  medyanın ne kadar önemli olduğunu biliyoruz bu sebepten buna benzer bir çok eklenti görebilirsiniz. Ben  genelde göze hoş ve pek göze batmayan  eklentileri seçmeye çalışırım ve beğendiğim eklentileri arşiv olarak saklarım eminimki birgün lazım olur diye :) bunu sizede tavsiye ediyorum beğendiğiniz eklentileri arşiv olarak  bir köşeye ekleyin.  bu eklentimizide sizinle paylaşalım istedik umarım işinize yarar

Bu eklentiyi sadece Html/Javascript olarak ekliyoruz yani yerleşim bölgesinden gadget ekle diyip sonra html/javascript olarak  sitemize ekliyoruz.
<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNzd02nEcg-pOgNGPhA2ZzGwFoQf2Hms4vnqT6F1JBNe91lmwnSPdvs0SWbma_q-b2OzRA44fXibGB-fjA0yvIwfeepi2Wk_Yju0uqBLkY9AITDUSgfLo0Z0viNEpaDQ6_We8jj7qo1M/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiB0g2J5zu-1tKY4B3dIEFy2c14u_Lli_NGJRU0nUAoEjitH5sD5aUVKL3A7ZIpMb0YC9uZA9cs2Jm19DjAzoGaGGituHM6dhcjLTQTOZ3oCtDB1M58tHfu_9e7Ewt7yE3y6FQ0QG6Qvg/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0lNyT9ZVdE6RaQ2wDta81g7b640N6sjj33d73ohxMPv5drlePKkgfjGmDU-kCt5c8x62eVTqeslz__qMu0j0tzzcY28rSigRdhA1gR9QYv-kRTnh5nNjDLvRv_-16-D-ICkZZxptMYM/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rzjl-XxZnSYEWDMzM3FszLrfk1kiEFnE55Ez_BAcbBd9XeTe8zLsuwmIBtNVmI2exa3MXPLCHQCZ7EE6jG2Pi3KNO_3S9m8SN_JPUTud29-k4dhKfYCEjfO_jZDWYO-UxOhrwNJgTv4/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLkoJEgwMZR9eE7E5FzqRWcDSLbl1-sGc0emkNreaQkMmPXHws9DMuReaS1-AX723PzR4cnLD-i7emY57sJkkUU_jPL4Gwe0AbiGWKJjUgxh7QZ3pcM4x5joy0XjRdsuM_DaK8YFFzbE/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>
Not: yukardaki kodlarda KIRMIZI ile belirttiğim
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> bu kod daha önceden sitenizde ekliyse bu kodu eklemiyorsunuz ekli değilse o zaman bu kodu olduğu gibi ekliyoruz.

Etiketler: ,

6 Nisan 2014

Professional Social Menü Hover efektli

sosyam menü

Profosyonel bir şekilde hazırlanmış hover eketli sosyal menü sitenizin  sağında veya solunda istediğiniz bir şekilde ayarlıyabiliyorsunuz.eklentimizin kullanımı çok basittir. tek yapmanız gereken  blogger`den yerleşim gölgesinden gadget ekle diyip açılan sayfada HTML/Javascript olarak eklemektir.

Demo

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/digitalhubinc' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='http://dribbble.com/digitalhubinc' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/digitalhubinc' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.net/digitalhubinc' target='_blank'>
<span>facebook</span>
</a>
</li>
        <li>
<a class='entypo-rss' href='http://feeds.feedburner.com/digitalhubinc' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

Etiketler: , ,

12 Kasım 2013

Addthis Smart Sosyal paylaşım Eklentisi

sosyal



Yine bir sosyal paylaşım eklentisiyle karşınızdayıs :) solda sabit bir şekilde ayarlanmış güzel bir eklenti bu eklentiyi sitenize eklemek için öncelikle sitemize giriş yapıyoruz

Sonrasında şablonu genişletip </head> kodunu bulup aşağıdaki eklentiyi üstüne eklemeniz hepsi bu kadar.







Etiketler: , ,

3 Haziran 2013

kullandığım Sosyal Medya Wigdetini paylaşıyorum


sosyal medya

Kendi sitemdede kullandığım sosyal medya  kodunu paylaşıyorum eminim çok işinize yarıyıcaktır benim yarıyo çünki :) hepsini bi yerde yayınlıyabiliyon tabber  hep fazla dağınık bir sidebar olmuyo herneyse kod aşağıdadır  değiştirmeniz gereken yerleri kırmızıyla yazdım kendinize göre ayarlıya bilirsiniz.
Demosunu sitemde  göre bilirsiniz.. bu kodu nasıl ekliceksiniz. yerleşim bölümünden  gadget html/javascript olarak ekliceksiniz. hepsi bu kadardır..



<a href='https://www.facebook.com/Blog.SohbetcHe'><img class="" alt="facebook" src="http://cdn1.iconfinder.com/data/icons/inFocus_social_media/40/facebook-logo-square.png" /></a>
  <a href='https://twitter.com/SohbetcHe_BLog'><img class="" alt="twitter" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/twitter-logo-square.png" /></a>
 
    <a href='https://plus.google.com/u/0/102333023600349452965/posts'><img class="" alt="google" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/google-logo-square.png" /></a>
 
  <a href='http://feeds.feedburner.com/SohbetcheNet'><img class="" alt="rss" src="http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/rss-cube.png" /></a>







<div class='tabber'>

<div class='tabbertab section' id='tab1'>
<h2>Twitter</h2>

<!-- eryweb.blogspot.com kod başlangıcı -->
<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("sohbetche_blog");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 280px !important; /* Ancho */
height: 350px !important; /* Alto */
}
</style>
<!-- eryweb.blogspot.com kod sonu -->


</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Facebook</h2>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblog.sohbetche&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;show_border=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowtransparency="true"></iframe>

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab3'>
<h2>Google+</h2>

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/102333023600349452965/posts" data-source="blogger:blog:followers" data-width="300"></div>


</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab4'>
<h2 class='title'>Rastgele</h2>

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Yorum Var';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYcHleZQH1HL2MBHMmjXGxg9N8FBSVCetqzaqNrmvw3O8HGMZ7gfgLfC3x0BnSojesEbn4NLv9bKWf8N34qSwEZYy7X0qxoTYj5MNb4DNMEqbNwmPx7Yak0CFsS1IuGz9tk292o0UKw0/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

</div>


<div class='clear'></div>

</div>


**************************************************************
javascript kodu
   
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
  t.headingText.replace(/<br>/gi," ");
  t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}

DOM_li = document.createElement("li");

t.li = DOM_li;

DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);

DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);

e.className = e.className.replace(this.REclassMain, this.classMainLive);

this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i;

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();

div = this.tabs[tabberIndex].div;

div.className = div.className.replace(this.REclassTabHide, '');

this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);

divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#fff;
border:1px solid #fff;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #fff;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #fff;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #fff;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #fff;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #fff;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>

Etiketler: , , , ,