Cara Membuat Efek Lipatan di Pojok Blog- Blogger/ Blogspot Dengan Mudah

Sekarang saya akan berbagi tips untuk anda. Dari teman pastinya menginginkan blog dengan tampilan yang menarikkan. Dan dengan cara yang satu ini mungkin akan bisa membuat tampilan blog anda menjadi lebih menarik. Anda pernah melihat lipatan pada pojok kanan blog seperti itulah tampilannya nanti jika anda berhasil. Untuk anda yang suka dengan ini bisa langsung saja ikuti lagkah – langkahnya berikut ini :

  1. Masuk ke akun blog anda 
  2. Kemudian klik menu template 
  3. Pilih edit html 
  4. Backup dulu blog anda agar agar mudah bila terjadi kesalahan 
  5. Kemudian cari kode </head> ( gunakan ctrl +f agar lebih cepat) 
  6. Kemudian letakkan kode di bawah ini tepat di atas kode </head>

    1. style type="text/css">
      img { behavior: url(iepngfix.htc) }
      #pageflip {
      position: relative;
      right: 0; top: 0;
      float: right;
      }
      #pageflip img {
      width: 50px; height: 52px;
      z-index: 99;
      position: absolute;
      right: 0; top: 0;
      -ms-interpolation-mode: bicubic;
      }
      #pageflip .msg_block {
      width: 50px; height: 50px;
      overflow: hidden;
      position: absolute;
      right: 0; top: 0;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicxGo9SARHnXQ1vCMvw9oxe1Zh8LNrVL9HJcgWxXSNkfyRDhkdw8xGKspstAsjRU5UVtPtDcCGbl0MtOUoP3KsVfZHs-XYo4wSTOfwlGI21FWw0kjhYebEYWruZSoOFajKXYbeHa9BEqP3/s320/Newspaper-Feed-icon.png
      ) no-repeat right top;
      }
      </style>
      <script src="http://youravascript.com/201011143287/Sitelearning-mengelupas.js" type="text/javascript"/>
      <script type='text/javascript'>
      $(document).ready(function(){
      //Page Flip on hover
      $(&quot;#pageflip&quot;).hover(function() {
      $(&quot;#pageflip img , .msg_block&quot;).stop()
      .animate({
      width: &#39;307px&#39;,
      height: &#39;319px&#39;
      }, 500);
      } , function() {
      $(&quot;#pageflip img&quot;).stop()
      .animate({
      width: &#39;50px&#39;,
      height: &#39;52px&#39;
      }, 220);
      $(&quot;.msg_block&quot;).stop()
      .animate({
      width: &#39;50px&#39;,
      height: &#39;50px&#39;
      }, 200);
      });
      });
      </script>

  7. Cari lagi kode <body>
  8. Setelah ketemu, Letakkan kode berikut ini dibawah kode <body>

    1. <div id='pageflip'>
      <a href='http://#############.blogspot.com/feeds/posts/default'><img alt='Belajar bersama Sitelearning' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDiuxGvTK8VLYVJatsuDdcRwE00-EWW8ErSGEGcIJ3gdBcqL7Aoiaw7D_s45kkS9tzAaLLXPw6al0o2u3_dofvVcyJ59oZn_0nAd6c6E1jsMlQ2zhKXAGf4QPFz8W7MzhvUQtPFyxg3dUl/s320/peel-image.png'/></a>
      <div class='msg_block'></div>
      </div>

  9. Setelah itu simpan/ save template
  10. Ketarangan : 
  • Tulisan yang berwarna kuning ganti bias anda ganti dengan tulisan anda 
  • Tulisan yang berwarna merah bisa anda ganti dengan url foto anda dengan ukuran 128 x 128 
  • Dan tulisan yang berwarna biru anda ganti dengan url feed anda
  • jangan ganti url di sebelah tulisan yang berwarna kuning

Postingan terkait:

Comments
0 Comments

Belum ada tanggapan untuk "Cara Membuat Efek Lipatan di Pojok Blog- Blogger/ Blogspot Dengan Mudah "

Post a Comment

Banner adz