21 Temmuz 2013 Pazar

MyBB SideMenu Sosyal Panel .


Evet Arkadaslar. Yapmanız Gerekenler.

Admin KP -Temalar - Şablonlar - Temalar - Temanız -Global.css Altına Kodu Ekleyiniz

<!-- start: sidemenu_css -->
<style type="text/css">
.sidemenu,
.sidemenu * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #CC6600;
    vertical-align: baseline;
}
.sidemenu,
.sidemenu > li > ul {
    list-style-type: none;
}
.sidemenu {
    position: fixed;
   top: 400px;
left: 0;
    background-color: #CC6600;
    background-color: rgba(240, 240, 240, 0.75);
    border: 1px solid #CC6600;

    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    width: 25px;
    overflow: visible;
    z-index: 90000;
}
.sidemenu-left {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid #CC6600;
}
.sidemenu > li {
    position: relative;
}
.sidemenu > li > a {
    display: block;
    width: 16px;
    height: 16px;
    padding: 4px;
    background-color: #CC6600;
    background-color: rgba(240, 240, 240, 0.75);
    background-position: 4px 4px;
    background-repeat: no-repeat;
}
.sidemenu > li:hover > ul {
    display: block;
    float: left;
}
.sidemenu.sidemenu-js > li:hover > ul {
    display: none;
}
.sidemenu > li > ul > li {
    border-bottom: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;  
    border-top: 1px solid #ccc;
    min-width: 180px;
    text-shadow: 1px 1px 1px #fff;
}
.sidemenu > li > ul > li:first-child {
    border-top: 1px solid #f7f7f7;
}
.sidemenu > li > ul > li:last-child {
    border-bottom: 1px solid #f7f7f7;
}
.sidemenu > li > ul > li {
    border: none !ie;
}
.sidemenu > li > ul > li > a {
    display: block;
    padding: 8px 10px 8px 32px;
    background-color: #f0f0f0;
    background-color: rgba(240, 240, 240, 0.75);
    background-position: 10px;
    background-repeat: no-repeat;
    color: #555;
    min-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent !ie;
}
.sidemenu > li > ul > li > a:hover {
    background-color: #eaeaea;
}
.sidemenu-arrow {
    position: absolute;
    right: 25px;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #b7b7b7;
    border-left: none;
}
.sidemenu-right .sidemenu-arrow {
    right: auto;
    left: 25px;
    border-left: 5px solid #b7b7b7;
    border-right: none;
}
.icon-face {
    background-image: url(http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/16/Facebook-icon.png);
}
.icon-flickr {
    background-image: url(http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/16/Flickr-icon.png);
}
.twit {
    background-image: url(http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/16/Twitter-2-icon.png);
}

.rss {
    background-image: url(http://u1306.hizliresim.com/1b/f/p3gdf.png);
}
</style>
<script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function(){
            jQuery('#dobar').sidemenu({
            showOn        : 'hover'
            });
        });
</script>

Kaydedip Cıkalım 

Admin KP - Temalar - Şablonlar -Şablonlar -Temanız -Header Şablon -header Altına Kodu Ekleyin. 

<div class="sidemenu">
       
        <
li style="text-align:left;">
           
<
a href="https://facebook.com/" class="icon-face" title="Facebook"></a>
            <
a href="https://twitter.com/" class="twit" title="Twitter"></a>
            <
a href="http://www.flickr.com/" class="icon-flickr" title="Flickr"></a>
            <
a href="/misc.php?action=syndication" class="rss" title="Rss Takip"></a>
        <
li style="text-align:right;"></li></div


Ve bu Kadar Kaydetip Cıkalım .

0 yorum:

Yorum Gönder