Header Ads

  • Widget Popular Post Blogger Dengan Efek Animasi Slider

    Widget Popular Post Blogger Dengan Efek Animasi Slider


    Saat menjelajahi web, Anda mungkin menemukan situs web yang memiliki bagian artikel populer. Menampilkan posting populer membantu pengunjung situs web Anda menemukan konten terbaik anda dan meningkatkan tampilan halaman situs web atau blog. Jika anda ingin menambahkan bagian posting populer di situs blog anda, maka anda berada di tempat yang tepat. Pada artikel ini, admin akan membagikan artikel unik yaitu Widget Popular Post Blogger Dengan Efek Animasi Slider untuk pengguna blogger (blogspot).

    Popular post merupakan widget standar yang ada pada blog berbasis Google Blogspot, Wordpress atau blog lainnya, jika pada website biasanya fitur popular post ada pada template yang sudah menggunakan CMS seperti Joomla, biasanya dalam bentuk plugin tambahan. Lebih lanjut widget popular post ini akan menampilkan informasi halaman situs web atau artikel blog yang sering dilihat oleh pengunjung atau halaman situs web / artikel blog yang memiliki pageview terbanyak. Dengan terpasangnya widget popular post maka pengunjung dapat mengetahui halaman situs web / artikel blog mana yang paling populer yang ada pada situs web atau halaman blog tersebut.

    Widget Popular Post Blogger Dengan Efek Animasi Slider bisa diterapkan pada situs web, blogger blogspot, wordpress atau blog lainnya. Widget ini menampilkan popular post dengan efek animasi slider yang unik dan menarik dengan beberapa fitur menarik. Adapun beberapa fitur unik dan menarik dari widget ini adalah sebagai berikut.

    FITUR UTAMA
    • Mampu multi widget - Anda dapat memasang beberapa widget Populer Post pada situs web / halaman blog Anda, masing-masing dengan pengaturannya sendiri.

    • Rentang Waktu - Daftar posting-posting blog Anda yang telah menjadi yang paling populer dalam rentang waktu tertentu misal untuk rentan waktu 24 jam terakhir, 7 hari terakhir, 30 hari terakhir, dll.

    • Dukungan untuk jenis post khusus - Ingin menampilkan hal-hal lain selain popular post dan halaman, mis. Recent Post, Widget Feed, Recent Comments dan lain sebagainya, juga bisa sesuai dengan konfigurasi yang anda inginkan.

    • Menambahkan Animasi Thumbnail! - Tampilan thumbnail bisa ditambahkan animasi agar lebih unik dan menarik.

    • Opsi Style - Selain animasi anda juga bisa menggunakan style khusus pada widget popular post agar tampilan bisa disesuaikan dengan penggunaan tema pada situs web / halaman blog anda.

    • Opsi share to social media - Tambahan tombol share to social media juga bisa anda terapkan.

    • Tema khusus - Out of the box, Widget popular post yang admin bagikan menyertakan beberapa tema default yang bisa langsung anda gunakan.

    • Gunakan tata letak Anda sendiri! - Widget popular post ini cukup fleksibel untuk memungkinkan anda menyesuaikan tampilan dan nuansa dari widget popular post yang akan anda gunakan.

    • Fitur caching canggih! - Widget popular post ini mencakup beberapa opsi untuk mengoptimalkan kode script yang digunakan dan memastikan kinerja situs anda tetap sebaik mungkin.

    • Menggunakan plugin jQuery terbaru - Widget popular post ini dapat mendukung penggunaan plugin jQuery terbaru tanpa perlu penyesuaian kode script yang dihasilkan.


    Secara default widget popular post biasanya mengikuti tampilan dari tema yang digunakan atau dalam bentuk tampilan list biasa. Pada artikel ini widget popular post akan dibuat menjadi tampilan animasi slide. Contoh tampilan bisa dilihat di bawah ini.



    Selain dari tampilan animasi slide yang unik, widget ini dapat memberikan daya tarik yang unik sehingga akan membuat blog menjadi semakin dinamis dan menarik. Tampilan animasi slide widget popular post ini juga bisa di render dengan baik pada browser mobile tanpa ada kendala, sehingga widget popular post dapat terlihat dengan baik pada berbagai perangkat modern.

    Pemasangan widget popular post dengan tampilan animasi slide ini sangat mudah, tinggal copy-paste kode script atau tekan tombol Add to Blogger bagi pengguna blogspot untuk mempermudah proses pemasangan kode, maka tampilan animasi slide sudah bisa digunakan. Buat anda yang tertarik dengan tampilan animasi slide widget popular post silakan disimak tutorialnya.

    Informasi Singkat
    Animasi adalah metode di mana gambar dimanipulasi untuk tampil sebagai gambar bergerak. Dalam animasi tradisional, gambar digambar atau dilukis dengan tangan pada lembaran seluloid transparan untuk difoto dan dipamerkan di film. Saat ini, sebagian besar animasi dibuat dengan citra yang dihasilkan komputer (CGI). Animasi komputer dapat menjadi animasi 3D yang sangat terperinci, sedangkan animasi komputer 2D dapat digunakan untuk alasan gaya, bandwidth rendah atau rendering waktu-nyata yang lebih cepat. Metode animasi umum lainnya menerapkan teknik stop motion pada objek dua dan tiga dimensi seperti guntingan kertas, boneka atau tokoh tanah liat.

    Umumnya efek animasi dicapai oleh suksesi cepat gambar sekuensial yang minimal berbeda satu sama lain. Ilusi — seperti dalam film umumnya — dianggap mengandalkan fenomena phi dan gerakan beta, tetapi penyebab pastinya masih belum pasti. Media animasi mekanis analog yang mengandalkan tampilan cepat dari gambar sekuensial termasuk phénakisticope, zoetrope, flip book, praxinoscope dan film. Televisi dan video adalah media animasi elektronik populer yang awalnya analog dan sekarang beroperasi secara digital. Untuk tampilan di komputer, teknik seperti animasi GIF dan animasi Flash dikembangkan.

    Animasi lebih meresap daripada yang disadari banyak orang. Selain film pendek, film layar lebar, serial televisi, animasi GIF, dan media lain yang didedikasikan untuk tampilan gambar bergerak, animasi juga lazim dalam permainan video, grafik gerak, antarmuka pengguna, dan efek visual.

    Pergerakan fisik bagian gambar melalui mekanika sederhana - misalnya, memindahkan gambar dalam pertunjukan lentera ajaib - juga dapat dianggap sebagai animasi. Manipulasi mekanis boneka tiga dimensi dan objek untuk meniru makhluk hidup memiliki sejarah yang sangat panjang dalam automata. Automata elektronik dipopulerkan oleh Disney sebagai animatronik.
    Sumber : Wikipedia



    Widget Popular Post Lainnya :


    DAFTAR ISI
    1. Cara Pemasangan Widget Popular Post
    2. Cara Pemasangan Kode Javascript
    #1 Cara Pemasangan Widget Popular Post


    Langkah pertama adalah dengan memasang widget popular post terlebih dahulu sebelum memasang kode javascript untuk tampilan animasi slider. Bagi yang sudah memasang widget popular post diblognya silakan disesuaikan pilihan konfigurasi dari widget popular post agar tampilan animasi slider bisa berjalan dengan baik. Contoh konfigurasi bisa dilihat pada tutorial di bab ini.

    Bagi anda yang belum memasang widget popular post silakan disimak tutorialnya langkah demi langkah, untuk mempermudah saya sertakan gambar dengan tampilan blogspot terbaru, bagi anda yang masih menggunakan tampilan blogspot lama caranya hampir sama tinggal disesuaikan aja.

    • Silakan login dahulu ke blog Anda.

    • Klik tombol Tema untuk masuk ke tema editor.


    • Setelah masuk ke akun blog anda kemudian klik tombol Tata Letak untuk melihat konfigurasi tata letak template blog, kemudian pilih Tambahkan Widget untuk menampilkan pilihan widget box.


    • Pilih widget Popular Post kemudian klik tambahkan untuk menampilkan kotak konfigurasi dari widget yang dipilih.


    • Sesuaikan konfigurasi widget popular post seperti yang terlihat pada gambar di bawah ini.


    • Selesai, kemudian klik tombol Simpan. Pastikan anda menaruh widget ini nantinya selalu di atas widget yang akan difungsikan untuk menaruh kode javascript animasi slider.

    #2 Cara Pemasangan Kode Javascript


    Cara pemasangan kotak widget untuk menaruh kode javascript, caranya sama seperti cara di atas cuma pada pilihan widget silakan anda pilih HTML / Javascript. Setelah itu akan terlihat widget box yang berfungsi untuk menaruh kode HTML atau javascript. Silakan anda copy-paste kode di bawah ini dan masukan ke dalam widget box tersebut atau lebih mudahnya tinggal tekan tombol Add to Blogger yang ada di bawah code-box berikut ini.

    • Pilih widget HTML/Javascript.


    • Masukan kode script pada kotak widget, untuk judul widget dikosongkan saja.


    <style>
    .PopularPosts ul {
    position:relative;
    box-sizing: border-box;
    list-style-type:none;
    width:100%;
    margin:0!important;
    top:0;
    left:0;
    overflow:hidden;
    background-color:#356aa0;
    }
    .PopularPosts ul li {
    text-align: left;
    overflow: hidden !important;
    margin:2px 5px !important;
    padding:5px !important;
    box-sizing:border-box;
    border-radius:5px;
    border:1px solid #ccc !important;
    transition-timing-function: ease-in-out;
    background: #fcfff4;
    background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
    background: linear-gradient(to bottom,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0);
    }
    .PopularPosts ul li:hover > div div a img{
    animation: rotate-scale-up-hor 0.65s linear both;
    }
    .listedWrap{
    position: relative;
    box-sizing: border-box;
    border:1px solid #ccc;
    cursor:pointer;
    }
    .listedCredit{
    text-align:center;
    padding:2px 0;
    margin:0;
    color:#fff;
    font-size:10px;
    background-color:#356aa0;
    display:block !important;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width:100%;
    box-sizing:border-box;
    }
    .listedCredit a{
    text-decoration:none;
    color:#fff;
    background:none;
    font-size:10px !important;
    }
    .listeadShare a{
    float:left;
    font-size:10px !important;
    font-weight:400 !important;
    font-family:Roboto,Arial, Helvetica, sans-serif;
    margin:5px 1px 0 0 !important;
    padding:4px !important;
    border-radius:2px !important;
    text-decoration:none !important;
    color:#fff !important;
    display:inline;
    }
    .FB-Btn a:hover:before,.TW-Btn a:hover:before,.TB-Btn a:hover:before,
    .LI-Btn a:hover:before,.PI-Btn a:hover:before,.WA-Btn a:hover:before,
    .EM-Btn a:hover:before{color:#ddd;border-right:1px solid #ccc;margin-right:2px;padding:0 5px 0 0;}
    .FB-Btn a:hover,.TW-Btn a:hover,.TB-Btn a:hover,
    .LI-Btn a:hover,.PI-Btn a:hover,.WA-Btn a:hover,
    .EM-Btn a:hover{width:auto;}

    .TW-Btn a:before,.LI-Btn a:before,
    .WA-Btn a:before,.EM-Btn a:before{
    font-family:fontawesome;
    padding:0 10px 0 0;
    }
    .FB-Btn a:before,.TB-Btn a:before,.PI-Btn a:before{
    font-family:fontawesome;
    padding:0 10px 0 2px;
    }
    .FB-Btn a,.TW-Btn a,.TB-Btn a,
    .LI-Btn a,.PI-Btn a,.WA-Btn a,
    .EM-Btn a{
    width: 10px;
    overflow: hidden;
    white-space: nowrap;
    transition:.5s;
    }
    .FB-Btn a{background-color: #395794;}
    .FB-Btn a:before{content:"\f09a";}
    .TW-Btn a{background-color:#1da1f2;}
    .TW-Btn a:before{content:"\f099";}
    .TB-Btn a{background-color:#333;}
    .TB-Btn a:before{content:"\f173";}
    .LI-Btn a{background-color:#1b75bb;}
    .LI-Btn a:before{content:"\f0e1";}
    .PI-Btn a{background-color:#e6001a;}
    .PI-Btn a:before{content:"\f231";}
    .WA-Btn a{background-color:#11ba19;}
    .WA-Btn a:before{content:"\f232";}
    .EM-Btn a{background-color:#ffd000;}
    .EM-Btn a:before{content:"\f003";}
    </style>

    <script>
    //<![CDATA[
    var _0x458b=["\x73\x6C\x69\x64\x65\x64\x6F\x77\x6E","\x6C\x69\x73\x74\x65\x64\x53\x6C\x69\x64\x65\x72","\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x75\x6C","\x66\x6E","","\x6D\x61\x74\x63\x68","\x63\x68\x61\x72\x41\x74","\x3C\x6C\x69\x3E","\x68\x74\x6D\x6C","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x63\x6C\x65\x61\x72\x3A\x62\x6F\x74\x68\x3B\x22\x2F\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x46\x42\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x73\x68\x61\x72\x65\x72\x2F\x73\x68\x61\x72\x65\x72\x2E\x70\x68\x70\x3F\x75\x3D","\x68\x72\x65\x66","\x61\x74\x74\x72","\x2E\x69\x74\x65\x6D\x2D\x74\x69\x74\x6C\x65\x20\x61","\x66\x69\x6E\x64","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x66\x61\x63\x65\x62\x6F\x6F\x6B\x22\x3E\x46\x61\x63\x65\x62\x6F\x6F\x6B\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x54\x57\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x74\x77\x69\x74\x74\x65\x72\x2E\x63\x6F\x6D\x2F\x69\x6E\x74\x65\x6E\x74\x2F\x74\x77\x65\x65\x74\x3F\x74\x65\x78\x74\x3D","\x74\x65\x78\x74","\x2E\x69\x74\x65\x6D\x2D\x74\x69\x74\x6C\x65\x3A\x66\x69\x72\x73\x74\x20\x61","\x25\x30\x41","\x2E\x69\x74\x65\x6D\x2D\x73\x6E\x69\x70\x70\x65\x74","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x25\x30\x41\x25\x30\x41","\x23","\x72\x65\x70\x6C\x61\x63\x65","\x20\x23","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x74\x77\x69\x74\x74\x65\x72\x22\x3E\x54\x77\x69\x74\x74\x65\x72\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x54\x42\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x6D\x62\x6C\x72\x2E\x63\x6F\x6D\x2F\x77\x69\x64\x67\x65\x74\x73\x2F\x73\x68\x61\x72\x65\x2F\x74\x6F\x6F\x6C\x3F\x73\x68\x61\x72\x65\x53\x6F\x75\x72\x63\x65\x3D\x6C\x65\x67\x61\x63\x79\x26\x63\x61\x6E\x6F\x6E\x69\x63\x61\x6C\x55\x72\x6C\x3D","\x26\x70\x6F\x73\x74\x74\x79\x70\x65\x3D\x6C\x69\x6E\x6B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x74\x75\x6D\x62\x6C\x72\x22\x3E\x54\x75\x6D\x62\x6C\x72\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x4C\x49\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x6C\x69\x6E\x6B\x65\x64\x69\x6E\x2E\x63\x6F\x6D\x2F\x73\x68\x61\x72\x65\x41\x72\x74\x69\x63\x6C\x65\x3F\x6D\x69\x6E\x69\x3D\x74\x72\x75\x65\x26\x75\x72\x6C\x3D","\x26\x74\x69\x74\x6C\x65\x3D","\x26\x73\x75\x6D\x6D\x61\x72\x79\x3D","\x26\x73\x6F\x75\x72\x63\x65\x3D","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x6C\x69\x6E\x6B\x65\x64\x69\x6E\x22\x3E\x4C\x69\x6E\x6B\x65\x64\x69\x6E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x50\x49\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x2E\x63\x6F\x6D\x2F\x70\x69\x6E\x2F\x63\x72\x65\x61\x74\x65\x2F\x6C\x69\x6E\x6B\x2F\x3F\x75\x72\x6C\x3D","\x26\x6D\x65\x64\x69\x61\x3D","\x73\x37\x32\x2D\x63","\x73\x31\x36\x30\x30","\x73\x72\x63","\x2E\x69\x74\x65\x6D\x2D\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x20\x61\x20\x69\x6D\x67","\x26\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x3D","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x22\x3E\x50\x69\x6E\x74\x65\x72\x65\x73\x74\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x57\x41\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x61\x70\x69\x2E\x77\x68\x61\x74\x73\x61\x70\x70\x2E\x63\x6F\x6D\x2F\x73\x65\x6E\x64\x3F\x70\x68\x6F\x6E\x65\x3D\x26\x74\x65\x78\x74\x3D","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x77\x68\x61\x74\x73\x61\x70\x70\x22\x3E\x57\x68\x61\x74\x73\x41\x70\x70\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x61\x64\x53\x68\x61\x72\x65\x20\x45\x4D\x2D\x42\x74\x6E\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x6D\x61\x69\x6C\x74\x6F\x3A\x65\x6D\x61\x69\x6C\x40\x61\x64\x64\x72\x65\x73\x73\x2E\x63\x6F\x6D\x3F\x26\x73\x75\x62\x6A\x65\x63\x74\x3D","\x26\x62\x6F\x64\x79\x3D","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\x68\x61\x72\x65\x20\x6F\x6E\x20\x65\x6D\x61\x69\x6C\x22\x3E\x45\x6D\x61\x69\x6C\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x2F\x6C\x69\x3E","\x65\x61\x63\x68","\x3E\x20\x6C\x69","\x6F\x75\x74\x65\x72\x48\x65\x69\x67\x68\x74","\x70\x75\x73\x68","\x6C\x65\x6E\x67\x74\x68","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x70\x61\x72\x65\x6E\x74","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x64\x57\x72\x61\x70\x22\x20\x2F\x3E","\x77\x72\x61\x70","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x73\x74\x65\x64\x43\x72\x65\x64\x69\x74\x22\x3E\x50\x6F\x77\x65\x72\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x3E\x43\x6F\x64\x65\x46\x6C\x61\x72\x65\x20\x5B\x44\x4E\x41\x5D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x61\x70\x70\x65\x6E\x64","\x31\x30\x30\x25","\x61\x62\x73\x6F\x6C\x75\x74\x65\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74","\x63\x73\x73","\x72\x65\x6D\x6F\x76\x65","\x3A\x67\x74\x28","\x29","\x66\x69\x6C\x74\x65\x72","\x73\x6C\x69\x64\x65\x75\x70","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x6E\x6F\x6E\x65","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x3E\x20\x6C\x69\x3A\x66\x69\x72\x73\x74","\x61\x6E\x69\x6D\x61\x74\x65","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x3E\x20\x6C\x69\x3A\x6C\x61\x73\x74"];$(function(){$(_0x458b[2])[_0x458b[1]](4,10000,_0x458b[0],null)});(function(_0x47cax1){_0x47cax1[_0x458b[3]][_0x458b[1]]= function(_0x47cax2,_0x47cax3,_0x47cax4,_0x47cax5){var _0x47cax2=_0x47cax2|| 4;var _0x47cax3=_0x47cax3|| 10000;var _0x47cax4=_0x47cax4|| _0x458b[0];var _0x47cax5=_0x47cax5|| null;return this[_0x458b[49]](function(){var _0x47cax6=_0x47cax1(this),_0x47cax7=[],_0x47cax8=_0x47cax2,_0x47cax9=0,_0x47caxa=0;var _0x47caxb=_0x458b[4];var _0x47caxc=0;var _0x47caxd=function(_0x47caxe){var _0x47caxf=0;while(_0x47caxf>= 0){if(_0x47caxe[_0x458b[6]](_0x47caxf)[_0x458b[5]](/\w/)){break}else {_0x47caxf++}};return _0x47caxf};_0x47cax6[_0x458b[14]](_0x458b[50])[_0x458b[49]](function(){_0x47caxb+= (_0x458b[7]+ _0x47cax1(this)[_0x458b[8]]()+ _0x458b[9]+ _0x458b[10]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[15]+ _0x458b[16]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]())+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()[_0x458b[21]](_0x47caxd(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()),200))+ _0x458b[22]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]()[_0x458b[24]](/ /g,_0x458b[25])[_0x458b[24]](_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]()[_0x458b[21]](0,0),_0x458b[23]))+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[26]+ _0x458b[27]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[28]+ _0x458b[29]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[30]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]())+ _0x458b[31]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]())+ _0x458b[32]+ escape(window[_0x458b[33]][_0x458b[11]])+ _0x458b[34]+ _0x458b[35]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[36]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[40])[_0x458b[12]](_0x458b[39])[_0x458b[24]](_0x458b[37],_0x458b[38]))+ _0x458b[41]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]()[_0x458b[24]](/ /g,_0x458b[25])[_0x458b[24]](_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]()[_0x458b[21]](0,0),_0x458b[23]))+ _0x458b[42]+ _0x458b[43]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]())+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()[_0x458b[21]](_0x47caxd(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()),200))+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[44]+ _0x458b[45]+ _0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]()+ _0x458b[46]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[18])[_0x458b[17]]())+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()[_0x458b[21]](_0x47caxd(_0x47cax1(this)[_0x458b[14]](_0x458b[20])[_0x458b[17]]()),200))+ _0x458b[19]+ escape(_0x47cax1(this)[_0x458b[14]](_0x458b[13])[_0x458b[12]](_0x458b[11]))+ _0x458b[47]+ _0x458b[48])});_0x47cax6[_0x458b[8]](_0x47caxb);_0x47cax6[_0x458b[14]](_0x458b[50])[_0x458b[49]](function(){_0x47caxc+= _0x47cax1(this)[_0x458b[51]](true)});_0x47cax6[_0x458b[14]](_0x458b[50])[_0x458b[49]](function(){_0x47cax7[_0x458b[52]](_0x458b[7]+ _0x47cax1(this)[_0x458b[8]]()+ _0x458b[48])});_0x47cax9= _0x47cax7[_0x458b[53]];if(_0x47cax5== _0x458b[4]|| _0x47cax5== null|| _0x47cax5== _0x458b[54]){_0x47caxa= _0x47caxc/ _0x47cax9}else {_0x47caxa= _0x47cax5};_0x47cax6[_0x458b[57]](_0x458b[56])[_0x458b[55]]();_0x47cax6[_0x458b[55]]()[_0x458b[55]]()[_0x458b[59]](_0x458b[58]);_0x47cax6[_0x458b[62]]({height:_0x458b[60],'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0x458b[61]});_0x47cax6[_0x458b[55]]()[_0x458b[62]]({height:(_0x47caxa* _0x47cax2)});_0x47cax6[_0x458b[14]](_0x458b[50])[_0x458b[66]](_0x458b[64]+ (_0x47cax2- 1)+ _0x458b[65])[_0x458b[63]]();function _0x47cax10(){if(_0x47cax4== _0x458b[67]){var _0x47cax11=_0x47cax1(_0x47cax7[_0x47cax8])[_0x458b[62]]({display:_0x458b[69]})[_0x458b[68]](_0x47cax6);_0x47cax6[_0x458b[14]](_0x458b[71])[_0x458b[72]]({opacity:0},1000)[_0x458b[72]]({height:0},1000,function(){_0x47cax11[_0x458b[70]](1000);_0x47cax6[_0x458b[14]](_0x458b[71])[_0x458b[63]]()})};if(_0x47cax4== _0x458b[0]){var _0x47cax11=_0x47cax1(_0x47cax7[_0x47cax8])[_0x458b[62]]({opacity:0,display:_0x458b[69]})[_0x458b[73]](_0x47cax6);_0x47cax6[_0x458b[14]](_0x458b[74])[_0x458b[72]]({opacity:0},1000)[_0x458b[72]]({height:0},1000,function(){_0x47cax1(this)[_0x458b[63]]();_0x47cax11[_0x458b[70]](1000,function(){_0x47cax1(this)[_0x458b[72]]({opacity:1},1000)})})};_0x47cax8++;if(_0x47cax8>= _0x47cax9){_0x47cax8= 0};setTimeout(_0x47cax10,_0x47cax3)}_0x47cax10()})}})(jQuery)
    //]]>
    </script>

    Ingat ! posisi widget popular post harus berada di atas posisi dari kotak widget yang digunakan untuk menaruh kode script efek animasi slider. Fungsinya agar kode HTML dari widget popular post di render terlebih dahulu oleh browser baru setelah itu merender kode scriptnya.


    Posisi widget popular post tidak harus sama dengan yang ada di gambar yang penting adalah posisi widget box HTML/Javascript yang di gunakan sebagai tempat untuk menaruh kode script efek animasi slider harus berada di posisi bawah dari widget popular post.

    Tenang mas bro dan mba sis, ga usah panik lihat kode script di atas karena konfigurasi script sudah disesuaikan otomatis untuk langsung bisa digunakan. Apabila ada penyesuaian maka cukup dari kode CSS (style) saja yang di sesuaikan pengaturannya. Kode style juga sebenarnya sudah diatur sedemikian rupa agar bisa langsung diterapkan tanpa ada masalah, tapi dikarenakan penggunaan template blog memiliki konfigurasi style yang berbeda-beda maka kemungkinan widget popular post dengan efek animasi slider ini tidak berjalan dengan semestinya pasti ada.

    Biasanya permasalahan yang timbul adalah pada tampilan widget untuk itu anda cukup mengatur kode stylenya saja agar bisa disesuaikan dengan template blog yang anda gunakan. Jika masih ada kendala dalam menerapkan widget popular post dengan efek animasi slider ini, silakan anda tanyakan di kotak komentar.

    Bagi anda yang mahir dengan kode HTML, CSS dan Javascript silakan anda modifikasi lagi agar tampilannya bisa lebih unik lagi dan jangan lupa untuk di share di artikel ini agar kita semua bisa saling belajar dan membuat komunitas blog yang positif.

    Demikian artikel blog tentang Popular Post Slider Animation Blog Widget terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


    Keyword


    blog, blogger, blogspot, widget, popular, post, posts, effect, efek, 3D, slider, animation, animated, animasi, cube, kubus, berputar, rotasi, 360, derajat, otomatis, box, code, kode, html, css, javascript, jquery, cara, how-to, membuat, buat, tampilan, menampilkan, unik, menarik, simple, mudah, custom, kustom, modifikasi, modif, keren

    Incoming Search Term


    Cara baru membuat popular post dengan efek animasi slider ke bawah atau atas, cara membuat tampilan unik popular post untuk blogger, widget blog membuat slider tampilan popular post, Efek slider widget popular post blog, popular post blogspot dengan animasi berputar slider, cara pasang widget popular post pada halaman blog, tutorial membuat efek slider widget popular post pada blogger, cara mudah membuat tampilan slider dengan kode html css javascript, animasi slider kubus buat widget popular posts, pasang animasi slider blogspot, gambar slider popular post blogger, slider animated popular post blog, how to make slide animation effect for blog, kode javascript animated slide down, fix error slide down or slide up animation effect, update script slider animation down or uppopular post, random popular post in 3D slide, slide rotation up or down degree blogger, popular post unik menarik keren super premium blog blogger blogspot

    No comments

    Post Top Ad

    Post Bottom Ad