Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

Trik Membuat Popular Posts Effects Spin

Trik Membuat Popular Posts Effects Spin


Dimana ada kemauan disitu ada jalan, seperti di hari ini ada kesempatan
Waktu luang,  untuk berbagi  tutorial yang  sederhana dan ringan,  tentang
Popular posts dengan effects  berputar,  dan sudah valid html 5, css3 jadi
Buat sobat yang berminat dengan widget ini, silahakan simak dibawah ini

Effects Blogger
Trik Membuat Popular Posts Effects Spin

Sebelum anda simak artikel  ini lebih lanjut,  sebelumnya  saya  publikasi  tentang
Menghapus Batas Tabel Gambar Postingan,   dan  pada  kali  ini saya akan share
Trik Membuat Popular Posts Effects Spin,   di  mana   widget   Popular  Posts  ini
Berperan penting pada artikel anda,  manakala  postingan tersebut yang sering  di
Kunjungi oleh pengunjung blog anda, jika di blog anda belum ada atau sudah ada
Dan ingin mencoba  Trik  popular post yang ini,  silahkan  berapresiasi  di sini sob

Cara memasangnya :

Masuk blog anda dan sign in, kemudian pilih dasboard dan pilih template
Lalu pilih edit template, selanjutnya anda cari kode ]]></b:skin> tekan
Ctrl + f untuk memudahkan pencarian anda, setelah ketemu kode yang
Anda cari copy kode di bawah ini dan paste tepat di atas 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: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-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);}

Masih di edit html Kemudian Cari koode <b:section class='sidebar'
Atau lengkap cari kode nya seperti di bawah ini
<div id='sidebar-wrapper'>
          <div style='clear: both;'/>
          <b:section class='sidebar' id='sidebar' preferred='yes'>
Setelah ketemu copy kode di bawah ini dan pastekan tepat di bawah kode
<b:section class='sidebar' id='sidebar' preferred='yes'>

Di bawah ini kode yang harus anda copy :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
              <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></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='' 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='' 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>
  </div>
</b:includable>
            </b:widget>

Keterangan :

Setelah penempatan kode nya,  terpasang dengan benar,  silahkan klik save - simpan
Dan buka  blog anda,  dan cek popular  posts nya,  bekerja  dengan oftimal atau  tidak
Jika belum tampil di blog anda, silahkan baca kembali dengan seksama artikel diatas
Dan jika anda, ingin mengatur jumlah pos t yang tampil pada   popular posts  silahkan
Anda atur ulang menurut jumlah yang di inginkan,  dengan membuka halaman  layout
Pilih  tata letak  dan edit widget popular post,  silahkan  atur  jumlah posts atau  lainya
Menurut yang anda kehendaki, sekian semoga tutorial sederhana ini bisa bermanfaat

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

58 komentar

maaf kang Karris, ditengah post tulisannya "Cara Memasanya" maksudnya memasangnya kan ? hehehe :D

saya takut ikut muterin visitor yang datang kang :D

hihihi betul Mas.. maaf nulis nya keburu-buru
Balapan sama waktu Mas, segera di perbaiki
Terima kasih Mas atas pemberitahuanya.

Keren kang...pakai efek zoom juga ya (scale) jadi nambah keren ya :-bd

Betul Kang Kompi, semoga trik sederhana tapi bisa
Bermanfaat hatur nuhun ntos Berkunjung nya Kang?

bagus tutorialnya.. saya lebih suka effect yang statik..

kereh ihh, pasti thumbnailnya bisa melarrr yah kang :)
cakep dong pake transitions pula jadi lebih halus ehehe..

Oke siip Mas Andes terima kasih juga yah Mas..? :)

Sip Mbak terima kasih atas kunjunganya
Yah betul tinggal memilih selera yang kita
Ingin kan, yang pakai effects statik juga oke Mbak Mizz..

Yuffsh betul sekali Mas Andes, terima kasih
atas penuturan nya Mas..

Asyik juga ya image nya bisa muter-muter getu. Jadi ada variasinya ya Mas Karis untuk widget popular post :)

Untung aja nggak memesan ya mas. Kalau memesan, saya pengen nya pesan buah semangka mas hehe :)

Mantep bisa muter gambar artikelnya Kang
Sukses deh simak lagi Kang, hatur nuhun

Pagi mas!script nya saya simpan dulu,kapan2 bisa di coba.trims!

Kunjungan siang hari Mas Karis. Mudah-mudahan masih sehat-sehat saja dan selalu semangat dalam menjalankan aktivitas. Dan selalu aktif blogging. Sukses untuk Mas Karis :)

Barrakahallah walakhirallah, Mbak Wahyu Eka Prasetiyarini (Mbak Rin)
Berkat doa dari sobat dan saudara blogging semua termasuk Mbak Rin
Alhamdllilah saya baik-baik saja semoga Sobat semua juga Mbak Rin
Pun demikian, (Amien allah humma amien)
Wah Religius euy...hkhkkhhk

Pagi juga jelang siang, Silahkan Mas Agus dengan senang hati
Semoga bermanfaat Mas. sukses selalu Mas Agus.

Betul Mbak Rin, silahkan semoga bermanfaat

Wah bermanfaat sekali ini :)
izin follow blog ini ^_^ biar saya mampir tiap hari hehe

Oke sip Mas Muhammad dengan senang hati, Terima kasih
atas kerja sama nya Mas, follow langsung melesat. di blog anda

salam knal mas
blognya keren
foll back ya :)

Salam kenal kembali Mas Muhammad Zacky
Sip Mas Terima kasih atas kerja samanya
Follow back segera ke TKP Wusssst.....hhhh

Mas saud pasti keserimpet keybord nih nulisnya...apa keselek semangka...hehe :)

Ndak cuma karet ya mas..yg bisa melar..hehe :)

Mumpung masih hanget kuku...hehe :)

Kolom adem :)
Ikut mengaminkan...

Wah..jd nambah semakin populer aja ya mas ...artikel kita nantinya...
Kalo di pasangin widget keren kayak di atas... :)
Mantapppp mas...hehe

tutorial yang bagus sekali

Yah begitulah Mas Budi semoga Bermanfaat,
Terima kasih atas kunjunganya Mas, sukses terus

Terima kasih atas pendapat nya Mas Khairul Zamri
yah hanya tutorial sederhana saja Mas,. salam sukses

heheheh Mas Budi, apa kabar Mas
Amien lagi akh...hkhkhkhkhkhk

soalnya pas nulis matanya mas Saud ikut muter-muter jadi keserimpet dikit mas hehe...

Keren nih mas Saud tutorialnya, bikin tampilan popular postnya jadi lebih hidup, makasih banyak mas :)

Iya Mas Budi,, Kaya Balon tet tot-tet tot hkkhkhkh

Gara-gara ngetawain tulisanya Mas Budi di artikel Mbak Rin
Ehhh saya jadi ikut-ikutan Kesrimped, Papan tulis eehh Keyboard
Het dah Mas Budi sampai Bawa semangka kesini satu gandengan

Mas Anthonie , Mbak Rin, Mas Andes mau gak nih..? hhhhh
Hati-hati makanya jangan buru-buru nanti kesrimped.hhhh gkkg

oot nih kang.. kang itu itu pada widget author boxnya biar rapi coba cari kode .titlebox h3:before {... top: 57px; ...} dan h3:after {... top: 47px; ...} dua2nya ganti menjadi top: 55px; ato gak 54px biar pas :)

masih belum paham maksud mba Eka di atas? maksudnya apa memesan? :D

Kaya nya Mbak Rin diatas memesan Semangaka Mas Budi
Atau Perut Buncit nya Mas Anthonie, atau script nya Mas Andes
Atau Artikel saya yang Kesrimped, tuh Mas Intan..? tt3tt3tt3tt3..

Iyah Mas Budi mumpung, kukunya masih hangat
Kaya wedang Ronde,,tt3tt3tt3...

Demo nya ada tadinya Mas apkprime, cuma sudah saya hapus
Tinggal, screnshoot nya doang di atas. terima kasih Pendapat
Nya Mas,. salam sukses.

Mas Andes Joly juga yah.? eeh maaf Jeli maksudna ttt3t3tt3
Coba saya cek yah Mas? soal penyakit malas bongkar
Template lagi kumat, entar Mas Minta Ramuan dulu sama
Mas Anthoni, biar semangat dan sigap. terima kasih masukanya

artikelnya sangat membantu gan, saya newbe. follow back yah gan

http://freshtrikinternet.blogspot.com/

Oke terima kasih atas pendapat nya Mas Brando Mewo
Silahkan follow blog saya Mas Brando, secepatnya saya
Foll back, terima kasih atas kunjungan nya salam sukses

Oke Mas Anthonie sama-sama Mas. semoga walau triks
Sederhana, sedikit banyaknya bisa bermanfaat buat sobat
Terima kasih atas tanggapan nya Mas Anthonie.

Mumpung masih gratis ya mas bud, jadi harus segera di praktekkan. Siapa tahu besok udah nggak gratis lagi hehehe :D

Amin amin amin. Berkat nya mana kang hehehe ;D

Loading blog nya mas karis ngebut banget. Saya betah kalau berlama-lama di blognya mas karis :)

Yah betul Mbak, Rin sama mirip punya blog nya Mbak Rin
Saya lebih betah lagi, di blog nya Mbak Rin tar kapan2 kalau
Kesrimped saya berkunjung sekalian mondok di
Beranda Blognya Mbak Rin...tt3tt3tt3tt3tt3...

Iya nih Mas Andes sama Mas Anthonie Bawa berkat gak
Nyampe-nyampe dari kemaren, jangan-jangan habis di
Makan Mas Budi, wah Rempong deh...tt3tt3tt3tt3

wah triknya mantep2, bertahap bisa diterapin diblog supaya lebih indah, trims mas

Oke Mas Wong terima kasih atas pendapat juga kunjunganya.

mau nambahin dikit kang, itu kalo di chkme masih ada masalah pada title link dan image. caranya pada kode

<a expr:href='data:post.href'>

ganti dengan

<a expr:href='data:post.href' expr:title='data:post.title'>

dan pada kode

<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'
expr:width='data:thumbnailSize'/>

ganti dengan

<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>

Eta geuning nu di antos teh sumping oge script obat error
Untuk blog, dari Mas Andes mah, kalau obat kesehatan
Buat Badan saya minta na ka Mas Anthonie,. Kurang kumaha
Eta Mas Andes bageurna nya, udah Kasep baik hati Mas Budi
eeeh maaf murah Budi, sanes Mas Budi nu Murahan tt3tt3t3t
Maaf Mas Bud.. duh jangan Marah yah.. becanda koq?

Terima kasih Mas atas obat Error na.

Kode di atas di cari template saya kok gak ada Mas Andes
gimana yah Mas,.. solusi nya apalagi Mas..?

Efek Spin dan Scale nya bagus banget. Boleh nih kang abdi kopi,.. srupuut wae. ngeunah eui.

Terima kasih nya kang Saud, mantap Effect Spin na.

hehe nyarinya bukan di templatenya kang karrysta tapi saya saya maksud buat kode popular post yang di posting di atas kang

keren banget,, ijin save scrif nya ya mas

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger