Ana Sayfa CSS HTML jQuery Blog Siteleri için 3D Sayfa Açılış Efekti

Blog Siteleri için 3D Sayfa Açılış Efekti

Arlina Design: Blog Siteleri için 3D Sayfa Açılış Efekti 27.10.16
Adsız
Blog 3D Sayfa Açılış Efekti Blogloader

Blog sitelerinde kullanılan blog sayfa açılış efektleri genellikle ya javaScript dosyası çekerek çalıştırılıyordu. Bu yazımızda blogunuza dışardan javaScript dosyası çağırmadan ve blogunuzun yüklenme hızını etkilemeyecek bir blog sayfa açılış efektini sizlerle paylaşıyorum. Bu eklentinin diğer sayfa yüklenme efektlerinden farkı yukarıda da söylediğimiz gibi dışardan dosya çağımadan 3D efekty olmasıdır. Bir özelliğini daha sizinle paylaşmak istiyorum, bu eklentinin renklerini blogunuzun renklerine uygun olarak da düzenleyebilirsiniz. Aşağıdaki örnek sayfa butonundan eklentiyi inceleyebilirsiniz.


Şimdi aşağıdaki adımları takip ederek 3D blog sayfa açılış efektini blogunuza kurun.

Blog 3D Sayfa Açılış Efekti Nasıl Kurulur?

1. Blogger hesabınıza giriş yapın ve blogunuz kumanda panelinden Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Blogunuzun şablon kodları sayfasında CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin. 
/* blogloader
-------------- */
.blogger-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 99999;
}
.blogloader-container {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
.dice {
position: absolute;
width: 50px;
height: 50px;
animation: rotate 1.5s infinite ease-out;
z-index: 99999;
}
.dice:before {
content: "";
position: absolute;
height: 14px;
width: 50px;
transform: skewX(60deg);
top: -14px;
left: -12px;
}
.dice:after {
content: "";
position: absolute;
width: 25px;
height: 50px;
transform: skewY(30deg);
top: -7px;
right: 100%;
}
.violet {
background-color: #D47BF9;
}
.violet:before {
background-color: #8E44AD;
}
.violet:after {
background-color: #4C1C60;
}
.oranging {
animation-delay: -0.75s;
background-color: #FF8432;
}
.oranging:before {
background-color: #FF7519!important;
}
.oranging:after {
background-color: #863600!important;
}
@keyframes rotate {
25% {
transform: translate(50px, 0px);
}
50% {
transform: translate(50px, 50px);
}
74% {
z-index: 2;
}
75% {
transform: translate(0px, 50px);
z-index: 4;
}
}

2. Yine blogunuzun şablon kodları sayfasında <body> kodunu bulun ve aşağıdaki HTML kodu <body> kodunun bir satır altına ekleyin. 
<div class='blogger-loader'>
<div class='blogloader-container'>
<div class='dice violet'/>
<div class='dice oranging'/>
</div>
</div>
Örnek; 
</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div class='blogger-loader'>
<div class='blogloader-container'>
<div class='dice violet'/>
<div class='dice oranging'/>
</div>
</div>

3. Son olarak </body> kodunu bulun ve aşağıdaki javaScript dosyasını </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin. 
<script type='text/javascript'>
      //<![CDATA[
      $(document).ready(function() {
        $('img').attr('src', function(i, src) {
          return src.replace('s320', 's750')
        });
        $('#header-inner img').attr('src', function(i, src) {
          return src.replace('s1600', 's320')
        });
        $('.portfolio img, .client-item img, .author img').attr('src', function(i, src) {
          return src.replace('s1600', 's640')
        });
        $('img').attr('src', function(i, src) {
          return src.replace('s35', 's120')
        });
        $("#footer-wrapper .widget h2").wrapInner("<span></span>");
      });
      $(window).load(function() {
        $('.blogloader-container').fadeOut();
        $('.blogger-loader').delay(450).fadeOut('600');
      });
      $('.PopularPosts .widget-content ul li').each(function() {
        var $this = $(this);
        var postlink = $this.find('.item-title a');
        var postURL = postlink.attr('href');
        var postimgURL = $this.find('.item-thumbnail a img').attr('src');
        $.get(postlink.attr('href'), function(data) {
          postlink.parent().after('<div class="meta">' + $(
            data).find('.post-meta').html() + '</div>');
        }, "html");
      });
      $(".PopularPosts img").attr('src', function(i, src) {
        return src.replace('w72-h72', 's120');
      });
      $(".PopularPosts .item-snippet").each(function(i){len=$(this).text().length;if(len>110){$(this).text($(this).text().substr(0,72)+'...')}});
      var s=-1,a="",t="";$(".main-menu").find("ul").find("li").each(function(){for(var b=$(this).text(),c=$(this).find("a").attr("href"),d=0,e=0;e<b.length&&(d=b.indexOf("_",d),-1!=d);e++)d++;if(level=e,level>s&&(a+="<ul>",t+="<ul>"),level<s){offset=s-level;for(var e=0;e<offset;e++)a+="</ul></li>",t+="</ul></li>"}b=b.replace(/_/gi,""),a+="<li><a href='"+c+"'>"+b+"</a>",t+="<li><a href='"+c+"'>";for(var e=0;e<level;e++)t+="";t+=b+"</a>",s=level});for(var i=0;s>=i;i++)a+="</ul>",t+="</ul>",0!=i&&(a+="</li>",t+="</li>");$(".main-menu .LinkList").html(t),$(".main-menu ul li ul").parent("li").addClass("parent"),$(".main-menu .widget").css("display","block"),$(".click").click(function(){return $(".main-menu").slideToggle(),!1});
      //]]>
    </script>

Blog 3D Sayfa Açılış Efekti Hakkında Açıklama ve Kısa Bilgiler

Blogger 3D sayfa açılış efektinin blogunuzun renklerine uygun hale getirmek için CSS kodları içerisinde bulunan renk kodlarını değiştirerek yapabilirsiniz. Eğer sadece 3D efektin arkaplan rengini değiştirmek istiyorsanız yokarıdaki CSS kodları arasında bulunan sarı renkli kodu değiştirerek yapabilirsiniz.

 Blogger 3D sayfa efektini beğendiyseniz ve bize destek olmak için ve emeğimize karşılık olarak sayfamıza bir yorum bırakmanız yeterli olacaktır.

Etiketler: Blogger 3D Sayfa Açılış Efeti "Bloglodaer".

Yorum Gönder