Blogger Araçlar Menüsü Eklentisi

Blogger Araçlar Menüsü Eklentisi - Blogger sitelerinde çok ziyaret edilen online editör sayfaları veya sabit sayfalara daha hızlı erişim sağlamak için Blogger akordeon araçlar menüsü ve kurulumu hakkında ipuçları paylaşacağım. Blogunuzda veya başka bir blog sayfasına doğrudan erişim sağlamaya yarayan, blogunuzda alan işgal etmeyen ve sadece bu amaç için değil istediğiniz gibi kullanabileceğiniz bir blog eklentisidir.

Blogger Akordeon Araçlar Menüsü

Blogger araçlar menüsünü blogunuza eklemek için Blogger hesabınıza giriş yapın blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki kodları sırasıyla ekleyin.

1- Blogunuzun şablon kodları sayfasında CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
.tool-menu {
    text-transform: inherit;
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
    color: #757575;
    cursor: default;
    padding: 0 0 15px;
    margin: 0;
    min-width: 220px;
    outline: 0;
    position: absolute;
    top: 40px;
    right: 0;
    text-align: left;
    white-space: nowrap;
    z-index: 100000
}
.tool-menu ul {
    margin: 0;
    padding: 0
}
.tool-menu li a,
.tool-menu li span {
    text-decoration: none;
    color: rgb(119, 119, 119);
    !important
}
.tool-menu li a:hover {
    color: #566fbf!important
}
.tool-menu li {
    padding: 10px 10px 5px
}
.tool-menu li:first-child {
    padding: 10px!important;
    margin-bottom: 5px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.12)
}
.makesticking2 .openmenu {
    display: inline-block!important
}
.openmenu {
    height: 48px;
    display: none!important
}
.openmenu .fa {
    font-size: 28px!important;
}
.openmenu a {
    vertical-align: -7px!important;
}
.makesticking2+.open-menu {
    position: fixed;
    top: 52px;
    width: 100%;
    z-index: 100000;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
}
.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
</style>

2- CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.

<script type='text/javascript'>
//<![CDATA[
function openToolmenu() {
        document.getElementById("tool-menu").style.display = "block";
    };
var boxArray = ["tool-menu"];
    window.addEventListener("mouseup", function(e) {
        for (var r = 0; r < boxArray.length; r++) {
            var o = document.getElementById(boxArray[r]);
            e.target != o && e.target.parentNode != o && (o.style.display = "none")
        }
    });
function openMenuheader() {
        document.getElementById("menu-open").classList.toggle("open-menu");
    };
//]]>
</script>

3- Aşağıdaki HTML kodu blogunuzun header bölümü içerisinde görünmesini istediğiniz yere ekleyin.

<div class="menu-tool">
    <div class="menu-toolicon" onclick="openToolmenu()"><i aria-hidden="true" class="fa fa-ellipsis-v"></i>
    </div>
    <div class="tool-menu slideInUp" id="tool-menu" style="display: none;">
        <ul>
            <li><span>Araç Menüsü</span>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-adjust fa-fw"></i> Renk kodu</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML editör</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-paint-brush fa-fw"></i> Photoshop</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-eye fa-fw"></i> Vitrin</a>
            </li>
            <li><a href="#" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS sıkıştırma</a>
            </li>
            <li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML format</a>
            </li>
            <li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS format</a>
            </li>
            <li><a href="#" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> Google drive</a>
            </li>
        </ul>
    </div>
</div>

Ön İzleme

HTML kod içerisinde işaretlenmiş renkli yerlere bağlantılarınızı ekleyin. Eğer bağlantı blogunuzda dahili bir bağlantı değilse yani dışarıdan çağrılan bir bağlantı ise rel="nofollow" etiketini ekleyin. Blogunuzdaki iç bağlantıları eklemek istiyorsanız rel="nofollow" etiketini eklemeyin, hatta varsa kaldırın. Bağlantıların yeni sekmede açılmasını istiyorsanız bağlantılara target="_blank" etiketini ekleyin.

Bu yazımızda Blogger araçlar menüsü ile ilgili CSS, jQuery ve HTML kodlar hakkında ipuçları paylaşarak kurulumunu anlattık. Basit ve kullanışlı menü, buton ve  bir çok fonksiyonel eklentilerden haberdar olmak için blogumuza abone olun.