BREAKING NEWS

10/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Cara menambahkan postingan melayang di Blog


Untuk mempermudah melihat- lihat Blog. Banyak cara bisa dilakukan dengan cara menambahkan postingan melayang di Blog.

Ikuti panduan Tutorial Blog ;

Bagaimana cara membuat postingan melayang dalam blog kamu,
bisa ikuti panduan dibawah ini;

Buat beberapa postingan favorit di layout





Tahap 2 dimulai dengan ;

1. Masuk ke Template » Edit HTML » Centang Expand Template Widget

2. Letakkan kode berikut ini diatas kode ]]>


.tooltip-pp { position:relative; display:block }
.tooltip-pp span { visibility:hidden; position:absolute; bottom:30px; left:50%; z-index:999; width:230px; margin-left:-127px; padding:10px; border:2px solid #0F83A0; opacity:.9; background-color:#A6CED8; background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); -moz-border-radius:4px; border-radius:4px; -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; text-shadow:0 1px 0 rgba(255,255,255,.4) }
.tooltip-pp:hover { border:0 }
.tooltip-pp:hover span { visibility:visible }
.tooltip-pp span:before,.tooltip span:after { content:""; position:absolute; z-index:1000; bottom:-7px; left:50%; margin-left:-8px; border-top:8px solid #A6CED8; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:0 }
.tooltip-pp span:before { border-top-color:#0F83A0; bottom:-10px 


3. Cari kode dibawah ini

 <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>


4. Untuk kamu mudah menemukannya cari saja kode
       <!-- (4) Show snippets and thumbnails -->

Lalu ganti semua kode tersebut dengan kode berikut ini ;


<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        </b:if>
<a class='tooltip-pp' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a></div>
</div>



Jika semua sesuai tutorial blog  diatas maka akan berjalan dengan baik


Selamat mencoba
Bacalah Juga

Post a Comment

0 Comments