Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Membuat Popular Post dengan Animasi Gambar Berputar

Pagi sob, pada kesempatan kali ini saya mau berbagi sebuah tutorial tepatnya Membuat Popular Post dengan Animasi Gambar Berputar. Ok, bagi sobat yang ingin mecobanya atau hanya sekedar ingin membacanya silakan simak artikelnya. Nih, saya kasih Screenshootnya. Untuk lebih jelasnya silakan sobat lihat widget popular post di sidebar blog ini.
popular
  • Pertama sobat login ke blogger.com.
  • Kemudian sobat pindah ke Tata Letak Tambah Gadget Pilih Entri Populer.
  • Untuk lebih jelas dengan settingannya silakan lihat gambar dibawah.
artikel popular
  • Setelah itu Simpan.
  • Selanjutnya kita pindah ke Template Edit HTML Lanjutkan.
  • Jangan lupa sobat centang Expand Widget Template.
  • Kemudian Sobat cari kode ]]></b:skin> (  Gunakan tombol F3 untuk memudahkan pencarian ) dan  copy/paste kode dibawah ini tepat diatas kode ]]></b:skin>.
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #000;} .popular-posts ul li img:hover {border:2px solid #000;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
  •  Selanjutnya sobat cari kode Popular Post, atau lebih tepatnya kode seperti dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <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>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (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>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
  • Lalu sobat hapus kode tersebut dan ganti dengan kode dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://2.bp.blogspot.com/-zYw4vFbjMlc/T_UK1UyEc5I/AAAAAAAAA84/fNGjML8shHc/s1600/Saeful13.png'/> </b:if> </a> </div> </div> <b:else/> <!-- (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> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
  • Langkah terakhir sobat Simpan dan lihat hasilnya.
Semoga bermanfaat..
Previous
Posting Lama

52 Komentar

avatar

. . lumayan ribet juga ya?!? he..86x . .

BalasHapus
avatar

akh si agan bukan dari kemaren posting ininya ..
hahah thanks gan..!!

BalasHapus
avatar

@Raden Aryahehe. maaf baru bisa diposting sekarang. Sama - sama.

BalasHapus
avatar

Ijin nyoba.... :)
Nice share...

BalasHapus
avatar

wah, mantaaap kalo gambarnya bisa berputar, bisa ikutan nih .. :)
nice post Sobatku

BalasHapus
avatar

sdh sy coba, tp hasilnya tdk seperti yg sobat punya,,

BalasHapus
avatar

cukup simpel dan menarik sob, trims sharingnnya

BalasHapus
avatar

bisa dipindahkan ke gambar thubmnail postingan tidak ya,..kayak punya plakton blog,..dan beberapa lagi,...

BalasHapus
avatar

mksh share info nya sob...mantap nih :)

BalasHapus
avatar

@zulhamgk bisa sob, ini cuma untuk Popular Post, Kalau dibwah postingan itu Namanya Related Post sob. Coba aja pake Linkwithin.

BalasHapus
avatar

Ada pengaruhnya gak sob terhadap kecepatan loading blog kita,,,,?

BalasHapus
avatar

wahhh ini ya codenya....

makasih ya sob.. udah share.....

BalasHapus
avatar

@oboylumayan sih sob ada pengaruhnya pada loading blog..

BalasHapus
avatar

berguna sekali untuk memperbagus tampilan blog, selamat pagi dan salam hormat

BalasHapus
avatar

Kunjungan perdana sob...

jadi ijin jalan-jalan liat artikel dilu...
:D

BalasHapus
avatar

Wahhhh Keren Niee Sobb... MAu Coba Ahhh... Bolehnga Sobb

BalasHapus
avatar

Keren Keren Sobb

Suport me yaa

BalasHapus
avatar

Mantap makasi banyak infonya sob....

BalasHapus
avatar

Balik Lagi nie Sobb.. Numpang lewat aja yaa

BalasHapus
avatar

sob coba punyaku juga :)
http://azka-veiro.blogspot.com/2012/07/cara-posting-tampilan-postingan-dengan.html

BalasHapus
avatar

manatp nih..tapi bikin lemot loading blog gk nih??
hehe thanks info gan..

BalasHapus
avatar

@galedegsebelum lewat bayar dulu sob.. hehehe..

BalasHapus
avatar

@tovalumayan sih sob ngaruhnya juga terhadap loading blog,

BalasHapus
avatar

Ada gak tutorial buat pasang widget langganan via email yang seperti punya sobat? ?
bagi dong kodex sob :D

BalasHapus
avatar

kayaknya saya udah pake nih. hehe :D

BalasHapus
avatar

contohnya donk gan, penasaran nih :D

BalasHapus
avatar

@Full Software Mediafiredulu juga sudah pernah pasng tapi sya cbut dengan alasan loading. Kalau penasaran coba aja.

BalasHapus
avatar

sob, di blog saya nggak bisa menampilkan tumbnalis gambar pada populer post...
kenapa ya....

BalasHapus
avatar

@blog pendidikansobat pastinya sudah centang thumbnail gambar kan. Kalau masih tetap td thumbnail gambar maaf, sob saya tidak bisa menjawab. Sekali lagi minta maaf sob.

BalasHapus
avatar

berhasil sob.... makasih infonya....

BalasHapus
avatar

mas berderetnya kesamping? di blog saya sempit pinggirnya,. apa akan otomatis ke bawah ??

BalasHapus

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved