Senin, 28 Juli 2014

0 Artikel Tentang Cara Membuat Widget Recent Post Animasi pada Blog

Fungsi ataupun kegunaan Recent Post adalah untuk menampilkan Artikel terbaru yang telah Anda publikasikan pada Blog Anda. Dengan menggunakan Widget Recent Post pada Blog, maka pengunjung Blog Anda akan lebih cepat dan mudah untuk mengetahui tentang Artikel Terupdate yang telah Anda publikasikan pada blog Anda.

Pada kesempatan ini melalui Blog Berbagai Artikel Menarik ini, kembali saya akan membagi Artikel menarik tentang Bagaimana cara membuat widget recent post animasi pada blog. Dengan Widget Recent Post Animasi ini, tentunya juga  merupakan salah satu trik untuk lebih memperindah tampilan pada Blog Anda.

cara membuat widget recent post animasi
Bagaimana tampilan dari Widget Recent Post Animasi yang saya maksud, Anda bisa melihat tampilan tersebut pada sidebar Blog "Psikologi Komunikasi". Dan apabila Anda ingin membuat atau menampilkan Widget Recent Post Animasi pada Blog Anda , Anda bisa langsung mempraktekkannya dengan mengikuti cara atau langkah-langkah di bawah ini.
  • Sebagai langkah pertama, silakan Login pada akun blogger Anda.
  • Selanjutnya, silakan Anda pilih atau klik "Tata Letak" seperti yang tampil pada gambar di bawah ini:
cara membuat recent post animasi pada blog
  • Setelah Anda mengeklik "Tata Letak", silakan Anda melanjutkan dengan mengeklik "Tambahkan Gadget".
cara membuat recent post animasi pada blog-1
  • Pilih "HTML/JavaScript", pada tampilan yang muncul setelah anda mengklik "Tambahkan Gadget".
  • Copy lalu pastekan kode di bawah ini ke dalam widget "HTML/JavaScript" tersebut. adapun kode tersebut sebagai berikut :
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#7F000000;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;text-align:justify;-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="https://googledrive.com/host/0Bw2UKirhS9JRWldPRDVSRlBwbWM"></script>
<script type="text/javascript" src="https://drive.google.com/uc?export=download&confirm=no_antivirus&id=0Bw2UKirhS9JRUUZHMkpKa1c2R0E"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){rpnewsticker();interval = setInterval(rpnewsticker, pause);});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul><small><a href="http://tutorealsamak.blogspot.com/" target="_blank">get this widget here</a></small>
  • Isikan pada Judul Widget sesuai dengan judul yang Anda inginkan. Misalnya dengan judul "Recent Post".
  • Klik "Save" atau “Simpan” untuk menyimpan perubahan pada Blog Anda.
Apabila semua Cara tersebut di atas Anda telah lakukan dengan baik dan benar, maka "Widget Recent Post Animasi" akan tampil pada Blog Anda.

0 Cara Memunculkan/Mengembalikan Data Yang TerHidden Virus dengan Command Prompt (DOS)

Haha udh lama gk ngepost :D tutorial kali ini udh pada tau yah ? Gak apa”  lah toh saya cuma niat share aja bagi kalian yang belum tau. Memang kita semua sudah pada tahu penggunaan Komputer memang tak luput dari yang namanya Virus (bukan virus cinta) , salah satu dampak Virus komputer adalah membuat komputer kita menjadi error, hang atau jengkelnya lagi  data-data di Komputer kita menjadi tersembunyi (di sumputkeun).
Tak banyak Juga Antivirus” yg dapat memunculkan data yang disembunyikan/terhidden oleh virus tersebut dengan alasan karena database tidak ter-update dsb. Maka dari itu saya ingin memberitahu cara memunculkan data/folder yang terhidden oleh virus secara manual dengan menggunakan Command Prompt (DOS). Gampang kok saya jelasin di bawah secara gamblang :D
Cekidot :  ~sebagai contoh saya ingin mengembalikan data yang terhidden virus di flashdisk ~
  1. Pasang Flashdisk anda dan lihat Letter/ Drive di Flashdisk anda.
    klik gambar untuk memperbesar



  2. Setelah tahu drive flashdisk anda maka buka RUN dengan cara klik Start -> RUN atau bisa menekan shortcut (Windows + R) ketikan cmd tekan OK
    klik gambar untuk memperbesar
  3. Lalu pada jendela command prompt ketikan drive flashdisk anda, karena drive FD saya (d:) maka  tulis “d:” (tanpa tanda kutip) dan tekan Enter maka aktiflah drive (d:)
  4. Tanpa basa-basi ketikan kode berikut :
    • attrib –s –h –r *.* /s /d
    lebih jelasnya  :  attrib(spasi)-s(spasi)-h(spasi)-r(spasi)*.*(spasi)/s(spasi)/d
    tekan Enter
    klik gambar untuk memperbesar
    penjelasan :
    • attrib = attribut 
    • - (min) = unhide / munculkan data,  bisa juga memakai tanda + (plus) jika ingin menyembunyikan file/data, contoh = (attrib +s +h +r *.* /s /d)
    • -s = mengembalikan data dari system / supaya di kenal System/windows anda
    • -h = menampilkan file/data yang ter “hidden”
    • -r = menampilkan file /data read-only
    • *.* = format extension / kode untuk menampilkan suatu file tertentu (bisa diganti jika anda ingin mengembalikan file-file tertentu saja contohnya hanya ekstensi .mp4 maka kode di rubah menjadi *.mp4 dan seterusnya.
  5. Tunggu beberapa saat jangan dulu di close command prompt-nya dan lihat data di FD anda satu per satu akan kembali seperti semula (tekan refresh <F5>  berulang-ulang biar cepet).
  6. Setelah serasa data kembali normal tutup jendela command prompt dengan mengetikan exit pada jendela Command prompt atau di close langsung juga gak apa-apa lah haha :D . satu hal lagi tak jarang setelah data kembali normal biasanya virus meninggalkan duplicate berbentuk shortcut dengan nama yang sama dengan data anda, cara mengatasinya Delete Permanen saja shortcut tersebut dengan menekan (Shift+Delete) dan tekan Ok/Enter. Udah beres .. gampang kan … “selamat untuk anda” 
    klik gambar untuk memperbesar
 *cara ini bisa di lakukan di media penyimpanan yang lain seperti MemoryCard /Hardisk dsb. terima kasih semoga bermanfaat dan maaf apabila ada tutur kata yang salah. " piece "

Jumat, 25 Juli 2014

0 Cara membuat tampilan Blog Archive berbeda dan bergoyang

Cara membuat tampilan Blog Archive berbeda dan bergoyang lebih keren jangan basabasi lagi langsum saja

Dan Cara Masangnya
1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

Selamat mencoba semuga berhasil

0 Cara membuat tampilan Blog Archive berbeda dan lebih keren

Cara membuat tampilan Blog Archive berbeda dan lebih keren jangan basabasi lagi langsum saja

Dan Cara Masangnya
1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

Kamis, 24 Juli 2014

0 Cara Membuat jQuery Transparent Floating Menu

Jquery Transparent floating Menu ini sudah di coba di template BlogSPOT dan hasilnya teramat memuaskan. Jika sampeyan ingin melihatnya silahkan KLIK link DEMO di bawah ini.
D E M O

Pada prinsipnya, jQuery Transparent Floating Menu bekerja mengandalkan JQuery-1.3.2.js. JQuery ini digunakan dengan pertimbangan kemampuannya yang luar biasa sehingga pemanfaatannya tidak hanya dapat dipergunakan untuk sebuah fungsi (desain) tunggal saja. Seandainya sampeyan sebelumnya sudah menggunakan jQuery-1.3.2.js atau JQuery-1.3.2min.js, maka hanya tinggal menambahkan sedikit kode CSS dan javascript saja.

Floating menu dibuat dalam bentuk transparan sehingga beberapa teks yang nantinya tertindih oleh oleh pergerakan floating menu akan tetap akan terlihat dengan baik. Penggunaan efek opacity sama sekali tidak mengganggu atau bahkan merusak penampilannya karena kita menambahkan juga efek opacity pada hover sehingga ketika cursor menyentuh salah satu titik box menu, maka seluruh bagian Transparent Floating Menu akan terlihat dengan amat sempurna. Untuk semakin memperindah bentuk dan penampilan, kita juga menambahkan sebuah background image serta background arrow (panah) pada link menu serta efek rounded corners di sebelah kiri box. Pada bagian sebelah kanan yang bersinggungan di garis tepi blog kita buat tanpa border sehingga terlihat seakan melekat ujung kanan blog.
Kode CSS JQuery Transparent Floating Menu

Javascript JQuery Transparent Floating Menu

xHTML JQuery Transparent Floating Menu

 Langkah Pembuatan jQuery Transparent Floating Menu

1    Login to BloGGeR (login ke BloGGeR) : Gunakan dan Tulis User Name (Nama Pengguna) atau Email Address serta Password (Sandi/Kode Rahasia).
2    Dasboard (Dasbor) : Sesaat setelah login maka kita akan melihat halaman Dasbor. KLIK link Layout/Tata Letak atau Design/Rancangan.
3    Layout/Tata Letak (Design/Rancangan) : KLIK Add Gadget (Tambah Gadget).
4    HTML/Javascript : KLIK pada teks atau gambar yang bertuliskan HTML/Javascript.
5    Copy-Paste : Copy dan Paste Seluruh kode CSS, Javascript dan xHTMl di box yang tersedia.
6    SAVE (Simpan) : KLIK SAVE/Simpan, kemudian buka blog (open your blog) untuk melihat hasilnya.

Keterangan/Catatan :

1    Apabila blog telah ada (menggunakan jQuery-1.3.2.js atau jQuery-1.3.2.min.js, maka <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> tidak usah disertakan.
2    Letakkan seluruh kode secara berurutan dari Kode CSS diikuti Javascript, kemudian baru xHTML.
3    Ganti Link-1 s/d Link-20 dengan URL (alamat) setiap menu yang akan ditampilkan.

    Contoh : http://gubhugreyot.blogspot.com/2010/07/cara-buat-dan-pasang-ticker-2-kolom.html
4    GAnti Nama Menu dengan menu milik sampeyan sendiri :

    Contoh Nama Menu yang harus di ganti : CSS Floating Menu
5    Apabila dikehendaki merubah nilai transparansi menu, silahkan ubah nilai opacity pada syntax

6   Akan lebih baik lagi jika jQuery dan javascript diletakkan (simpan) di atas kode <head>, sedang kode CSS di atas kode]]></b:skin>. Jika penyimpanan dilakukan seperti langkah tersebut, silahkan hilangkan tag pembuka dan penutup "style" pasda kode CSS yang berupa :
<style type="text/css"> dan </style>
7   xHTML tetap dalam posisi seperti sebelumnya dengan disimpan melalui penambahan widget di bagian sidebar.
8   Hal seperti di atas berlaku juga saat template blogger baru (new blogger template) digunakan.
Bagi yang menggunakan template blogger baru, silahkan ganti kode CSS-nya dengan kode CSS berikut ini:

Keterangan tambahan

1    Untuk mengatur posisi floating menu terhadap bagian atas (vertical position), rubah nilai pada top: -100px; dengan memperbesar atau memperkecil. Semakin besar nilai minus, maka akan semakin naik.
2    Untuk mengatur posisi terhadap batas sebelah kanan (horizontal position), rubah nilai pada : right: -30px; Semakin besar nilai minus, maka akan semakin ke kanan.

0 Cara membuat Menu Show hide atau tersembunyi

Cara membuat Menu Show Hide Atau tersembuny animasi Dengan jQuery dan CSS3 dan jugak
 javascript
 Dan Cara Masangnya
1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode   ]]></b:skin>

5.  Coba anda letakkan kode script dibawah ini diatas kode   </head>


6. Tambah Gadget dan copy code di bawah ini dan letakkan code tersebut dan simpan
Tapi ingat Tulisan url anda ubah dengan url kesuka'an agan dan jugak tulisan Well of course, there might be ganti dengan judul ke'inginan agan

Kalau pengen lihat disini Demo

Selamat mencoba Semuga Berhasil

Rabu, 23 Juli 2014

0 Cara Buat Tooltip Melayang (otomatis)




Cara Buat Tooltip Melayang (otomatis)
Cara Pertama:
Login Ke Akun Blogger sobatPilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )Copas KOde Berikut Tepat Diatas KOde </head>
simpan.
Cara Kedua:
Login Ke Akun Blogger sobat
Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
Copas KOde Berikut Tepat Dibawah KOde <body>
selanjutnya cari kode </body>
taruh kode di bawah ini tepat di atas nya
simpan .
dan lihat hasilnya .. sekian artikel tentang cara buat tooltip melayang

0 Tooltip terbang dengan css3

Tooltip? banyak udah yang bahas tooltip tapi sekarang Ada yang baru nih, Tooltip yang dulu terbang-terbang kesana kemari menggunakan Jquery ( javascript ) sekarang bisa dibuat dengan css3 dengan memanfaatkan css3 trasition kita bisa membuat animasi dimana Tooltipnya terbang dari atas. seperti apa sih tuh Tolltipnya, coba aja langsung Sorot Link Dibawah ini.

ZTO CSS3 Tooltip

Dengan mengandalkan Pseudo element tooltip css3 ini bisa tercipta dengan baik. css biasa disimpan diatas ]]></b:skin>

Dan dibawah ini kerangka HTML_nya.

Pada Attribut data-title silahkan ganti keterangannya dengan keterangan dari link anda.

Selasa, 22 Juli 2014

0 Tooltip Terbang Dengan Effect Decoration

B erexperiment dengan kode css3 memang mempunyai tantangan tersendiri,selain bisa membuat tampilan text bisa lebih menarik dan terlihat keren ada kepuasan tersendiri saat kita berhasil melakukan nya ,masih ingat dengan postingan Full Blog Design tentang tooltip terbang beberapa waktu lalu jika belum silahkan review dahulu cara membuat tooltip terbang disini.Banyak sebagian orang berpendapat memasang kode jquery pada sebuah template ada untung ruginya sama halnya dengan tootip terbang yang pernah saya posting,juga menggunakan kode jquery, tampilan nya memang lebih keren tapi sayang akan juga berpengaruh terhadap looding blog tentunya sobat akan berpikir 2 kali untuk memasang tooltip terbang yang pernah saya posting tersebut.Tetapi seperti yang pernah saya bilang pada awal postingan ini bahwa berexsperiment dengan kode css sangat menyenangkan jika kita berhasil membuat sesuatu yang baru,seperti yang akan Full Blog Design Share pada pertemuan kali ini, yaitu Tentang cara membuat Tooltip Terbang Dengan Effect Decoration,silahkankan review dulu demonya di bawah ini .
Seperti yang sobat lihat dari hasil Review tadi bahwa effect tooltip terbang tadi saya kasih Effect Blink (berkedip ) pada decorasi Title nya,bagai mana masih ingin tahu cara membuat nya .
  1. Yang perttama tentunya sobat harus Loggin dulu ke Blogger.com
  2. Setelah masuk ke dasboard pilih template == Edit Html 
  3. Cari kode ]]></b:skin> pasang kode Css3 berikut tepat di atas kode ]]></b:skin>
  4.     a.tooltip {

            position: relative;

            text-decoration: none;

        }

        a.tooltip::before {

            position: absolute;

            content: attr(data-title);

            background: #000;

            width: 200px;

            padding: 5px 10px;

            color: #fff;

            top: -1000px;

            text-align: justify;

            z-index: 99;

            -moz-transition: all 0.5s linear;

            -o-transition: all 0.5s linear;

            -webkit-transition: all 0.5s linear;

            transition: all 0.5s linear;

            border: 5px solid #A52A2A;

            -webkit-border-radius: 10px;

            -moz-border-radius: 10px;

            border-radius: 10px;

            text-decoration: blink;

            visibility: hidden;

            font: normal 12px/20px Arial,sans-serif;

        }

        a.tooltip:hover::before {

            top: 100%;

            visibility: visible;

        }
  5. Lalu Save Template
  6. Untuk Html nya gunakan kode berikut pada postingan atau pada sidebar
  7. <a href="/" class="tooltip" data-title="Effect tooltip dengan decoration blink(-berkedip-)">Silahkan arahkan cursor ke link ini </a>

Silahkan berexperiment dengan bentuk bentuk Decoration yang lain jika ada kesulitan tentang cara membuat Tooltip Terbang Dengan Effect Decoration ajukan pertanyaan di form komentar.

0 Tooltip Terbang Dengan Effect Decoration



B
erexperiment dengan kode css3 memang mempunyai tantangan tersendiri,selain bisa membuat tampilan text bisa lebih menarik dan terlihat keren ada kepuasan tersendiri saat kita berhasil melakukan nya ,masih ingat dengan postingan Full Blog Design tentang tooltip terbang beberapa waktu lalu jika belum silahkan review dahulu cara membuat tooltip terbang disini.Banyak sebagian orang berpendapat memasang kode jquery pada sebuah template ada untung ruginya sama halnya dengan tootip terbang yang pernah saya posting,juga menggunakan kode jquery, tampilan nya memang lebih keren tapi sayang akan juga berpengaruh terhadap looding blog tentunya sobat akan berpikir 2 kali untuk memasang tooltip terbang yang pernah saya posting tersebut.Tetapi seperti yang pernah saya bilang pada awal postingan ini bahwa berexsperiment dengan kode css sangat menyenangkan jika kita berhasil membuat sesuatu yang baru,seperti yang akan Full Blog Design Share pada pertemuan kali ini, yaitu Tentang cara membuat Tooltip Terbang Dengan Effect Decoration,silahkankan review dulu demonya di bawah ini .
Seperti yang sobat lihat dari hasil Review tadi bahwa effect tooltip terbang tadi saya kasih Effect Blink (berkedip ) pada decorasi Title nya,bagai mana masih ingin tahu cara membuat nya .
  1. Yang perttama tentunya sobat harus Loggin dulu ke Blogger.com
  2. Setelah masuk ke dasboard pilih template == Edit Html 
  3. Cari kode ]]></b:skin> pasang kode Css3 berikut tepat di atas kode ]]></b:skin>
  1. Lalu Save Template
  2. Untuk Html nya gunakan kode berikut pada postingan atau pada sidebar

Silahkan berexperiment dengan bentuk bentuk Decoration yang lain jika ada kesulitan tentang cara membuat Tooltip Terbang Dengan Effect Decoration ajukan pertanyaan di form komentar.

0 Cara Membuat Kotak Script Dengan Tombol Select All Atau Kopi Script Otomatis

Tutorial Blog Membuat Kotak Script Dengan Tombol Select All Atau Kopi Script Otomatis - bagaimana membuat Kotak Script / Text Area dengan tombol Highlight di Postingan Blog? Kotak Script atau Text Area merupakan sebuah kolom tempat meletakkan kode HTML maupun tulisan untuk dihidangkan kepada pembaca blog. Kotak Script atau Text area berfungsi untuk merapikan artikel agar mudah dilihat dan dibaca pengunjung Blog.artikel ini dikuti dari blog shareinfo21.blogspot.com.

Membuat Kotak Script atau Text Area sangat bagus jika menggunakan tombol Highlight. Fungsinya untuk menyorot semua isi Kotak Script / Text Area sehingga mempermudah pengunjung blog melakukan Copy Paste isi Kotak Script / Text Area tersebut yang terlalu panjang. Ok, langsung saja kita mempelajari bagaimana membuat Kotak Script / Text Area dengan tombol Highlight berikut prosedurnya dibawah ini :
1. Buatlah Sebuat Postingan
2. Setelah itu ubah mode postingan dari compose ke mode html lalu paste script dibawah ini dengan masih pada mode html
 <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">MASUKKAN ISI TEKS DISINI, AKAN MUNCUL SCROLL JIKA TEKS TERLALU PANJANG</textarea></p></div></form>

3. Masukkan script atau teks pada bagian "MASUKKAN ISI TEKS DISINI, AKAN MUNCUL SCROLL JIKA TEKS TERLALU PANJANG" (silahkan diganti tulisannya sesuka hati, atau bisa masukkan script). Jika teksnya panjang akana muncul scrol secara otomatis
4. untuk mengatur besarnya kotak, silahkan ditarik pada bagian pojok kanan bawah.
5. edit juga pada bagian dibawah ini sesuai selera anda

    Height: 100px : Tinggi Kotak Script / Text Area
    Width: 200px  : Lebar Kotak Script / Text Area

0 Cara Membuat Daftar Isi Sitemap 2 Kolom dengan Navigasi Halaman

2 Kolom


Kali ini saya akan share Cara Membuat Daftar Isi Sitemap 2 Kolom dengan Navigasi Halaman. Tutorial Ini bersumber dari DTE, saya hanya memodifikasi sedikit CSS nya agar bisa tampil menjadi 2 kolom,


oke langsung ketahap pemasangannya :

Pertama tama masuk Blogger dan pilih Laman :


Laman


Setelah itu pilih mode HTML bukan Compose:

TML


Selanjutnya copy paste kode berikut dan paste dikolom HTML nya :



<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}

.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://alamat-blog.blogspot.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script>

 Ganti URL http://alamat-blog.blogspot.com dengan alamat blog Anda dan simpan


showPostDatetrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
false
showCommentstrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
false
idModetrueJika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
false
sortByLabeltrueDigunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
false
labelSorter"JavaScript", "Widget", ... (nama label)Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel"Jumlah posting:", ... (teks)Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel"Halaman", ... (teks)Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel"Komentar", "Comments", ... (teks)Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText"Baca Selengkapnya", "Read More", ... (teks)Digunakan untuk menentukan label link menuju posting asli.
prevText"Sebelumnya", "Previous", ... (teks)Digunakan untuk menentukan label navigasi mundur.
nextText"Berikutnya", "Next", ... (teks)Digunakan untuk menentukan label navigasi maju.
siteUrl(URL Blog)Ganti URL ini dengan URL blog Anda.
postsPerPage10, 30, ... (numerik)Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars100, 200, ... (numerik)Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlankno-image.jpg (URL Gambar)Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Selamat Mencoba.