Embed Widget Animasi Kartun Lucu SWF, Gratis

Yuk, pasang widget animasi kartun lucu flash di blogger mu. Kumpulan widget-widget dan gadget animasi ini gratis, tinggal di copy paste kode embed yang telah di sediakan.

Ada beberapa pilihan, widget animasi pilih sesuai selera

#menggo...

Cara pasang ke blog Login dahulu KLIK Tata Letak --- Tambah Gadget --- HTML/Javascript dan copy paste kode script embed di dalamnya beres.


Spiderman Drop

<div style='position: fixed; top: 2px; right: 55px;'><embed src='http://www.swfcabin.com/swf-files/1362593256.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='93' height='300' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Tarik Mang...

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362595213.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='150' height='230' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Kodok Lompat, hip hip horeee!!

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362595608.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='210' height='323' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Tazmania Devil Blazaaahzzzzzhzz!!

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362652901.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='220' height='210' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Jump Loncat Karet Smiley Welcome

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362740638.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='200' height='127' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Note : Jika terjadi masalah, kode embed bentrok atau tertumpuk dengan div dari template milik anda saat di pasang di Tata letak --- Tambah Gadget --- HTML/JavaScript.

Coba cara berikut : KLIK Template --- Edit HTML --- cari kode :

</body>

Jangan lupa kode embed di parse dahulu untuk menghindari error (http://www.blogcrowds.com/resources/parse_html.php) dan selanjutnya copy paste kode embed tepat di atas kode </body> dan simpan template.

Seep enjoy widget animasi lucu ini salam kreatif... Lihat juga kumpulan widget animasi lainnya di : widget animasi bagian 1

Resource : Animasi .gif power by: heathersanimations.com and gifgifs.com. Host by: www.swfcabin.com. Embed and flash converter and software Abode Flash CS3 Profesional. Grab the embed code: www.superblog.info | Kumpulan widget/gadget animasi kartun dan lucu.

Widget Animasi Lucu, mau gratis bro and sis

Kumpulan widget animasi lucu welcome blog dengan kode embed berbasis flash, bisa langsung di pasangkan di blog untuk mempercantik blog.

Widget animasi dengan efek floating di samping kiri bawah blogger anda, kecuali untuk animasi Mr.Bean Mumet muter-muter itu ada persis di sidebar Anda.

Menggo, bisa langsung di pilih kumpulan widget animasi lucu di bawah ini, copy paste kode embed dan tambahkan di blogspot anda: Tata letak --- Tambah Gadget --- HTML/JavaScript.

Mr. Bean Mumet

<center><embed src='http://www.swfcabin.com/swf-files/1362563124.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='229' height='252' pluginspage='http://www.macromedia.com/go/getflashplayer' /></center>

Angel Welcome Blog!

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362570105.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='577' height='157' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Angel Sing a Song la la la

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362570432.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='274' height='123' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Baby Motor Tin.. tinn.. tin

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362571333.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='296' height='116' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Anime Singer ting.. ting.. tingg!

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362573255.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='263' height='159' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Smile melet-melet

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362585716.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='328' height='136' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Hello, ada tamu nih!

<div style='position: fixed; bottom: 2px; left: 5px;'><embed src='http://www.swfcabin.com/swf-files/1362586329.swf' quality='high' type='application/x-shockwave-flash' wmode='transparent' width='314' height='121' pluginspage='http://www.macromedia.com/go/getflashplayer' /></embed></div>

Note : Jika terjadi masalah, kode embed bentrok atau tertumpuk dengan div dari template milik anda saat di pasang di Tata letak --- Tambah Gadget --- HTML/JavaScript.

Coba cara berikut : KLIK Template --- Edit HTML --- cari kode :

</body>

Jangan lupa kode embed di parse dahulu untuk menghindari eror (http://www.blogcrowds.com/resources/parse_html.php) dan selanjutnya copy paste kode embed tepat di atas kode </body> dan simpan template.

Seep enjoy widget animasinya salam kreatif... Lihat juga kumpulan widget animasi lainnya di : widget animasi bagian 2

Resource :  Animasi .gif power by: heathersanimations.com and gifgifs.com. Host by: www.swfcabin.com. Embed and flash converter and software Abode Flash CS3 Profesional. Grab the embed code: www.superblog.info | Kumpulan widget animasi kartun dan lucu.

60 detik, Membuat Komentar Facebook di blogspot

Plugin/widget komentar (comments) facebook, memang salah satu plug in yang paling sering di pakai, plugin sosial ini mengizinkan orang lain berkomentar di sebuah blog dengan akun facebook mereka.

Asik yah! untuk memasangnya sangat mudah sekali, di tips trik dan tutorial ini anda tidak perlu repot-repot menginstalnya, hanya di perlukan satu kali copy paste kode script yang sudah saya siapkan khusus untuk Anda, cieee!.

Oke bagaimana cara pasang komentar facebook pada blogger (blogspot) Anda dalam waktu kurang dari satu menit.. lanjut...

Seperti biasa login terlebih dahulu ke blog yang ingin anda pasangi komentar dari facebook ini...

Sudah login?? oke good...
Beri tanda centang pada Expand Template Widget
Sekarang cari kode :

<data:post.body/>

Gunakan bantuan : KLIK F3 (CTRL+F)

dan paste kode berikut ini

<center><br/><h3 style='background: #f5f5f5; width: 490px; padding: 5px;'>Poskan Komentar</h3><div id='fb-root'/><script src='http://connect.facebook.net/en_ID/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/></center>

tepat di bawah kode <data:post.body/>

Noh, lihat ilustrasi gambarnya seperti ini :

oke terakhir Simpan Template

Beres, lihat blog Anda...
jadinya seperti ini khan

Seep, selamat mencobanya bro, jangan malu kalau ada pertanyaan, langsung tulis saja pada kotak komentar di bawah, barang kali saya bisa menjawabnya, oke enjoy dan salam bro and sis..

Cara Melihat Pengunjung Online di blog mu

Ada beberapa tool yang bisa di manfaatkan untuk melihat user (pengunjung) yang sedang online di blog atau website kita.

Di antaranya dengan google analytics cara memasang atau menginstalnya di blog anda cukup mudah silahkan lihat pula di Pasang Google Analytics 2013 Di Blog - Blogspot.

Kemudian bisa juga dengan bantuan histats.com cara dan tutorial memasangnya silahkan cek di Membuat Widget Mengetahui Jumlah Pengunjung Blog

dan satu lagi yang paling simple dan sederhana yaitu dengan widget amung.us untuk mendapatkan data dari amungus silahkan masuk ke whos.amung.us/showcase

dan pilih salah satu widget, kemudian copy kode script (html) dan pasangkan di blog atau website Anda.

Panduan dan video cara menggunakan tool online di web cara melihat user online pada blog Anda :

Oke cukup mudah bukan?, lumayan dengan bantuan tool online ini kita jadi tahu seberapa banyak pengunjung yang sedang melihat laman ataupun page pada blog atau website.

Oke selamat mencoba, salam bro and sis...

ilustrasi gambar : Online ~ Sword Art Online swordartonline.warsforum.com

Cara Membuat Widget Fungsi Scoll

Selamat malam semua...
kali ini saya mau memberikan sedikit trik, yang juga karena ini permintaan dari salah satu pembaca Republic Of Note. Nah dengan judul ini Cara membuat Widget Fungsi Scroll kalian tentunya sudah tahu bukan apa yang dimaksud?

Nah lihatlah pada gambar di atas yang berkotak merah dan biru, itu adalah salah 1 contoh dari cara bagaimana agar widget kita berfungsi sebagai scroll, banyak manfaat dengan adanya kita memberikan scroll pada widget kita selain menghemat tempat tentu juga mempercepat loading pada blog kita dan lain-lain...

Akan tetapi pasti kalian bingun bagaimana caranya fungsi scroll pada widget-widget tertentu seperti Label, Popular Post, Arsip dan lainnya...
Tetapi saat kita untuk menambahkan widget pada kolom kosong kita bisa langsung otomatis memasukan script fungsi scrollnya...

Ok, pertama kita bahas dulu bagaimana memberikan fungsi scroll pada Label, Popular Post atau bahkan yang lain. SImak dibawah ini :

1. Login akun blogger anda
2. Pilih Template » Edit HTML » Lanjutkan » Checklist Expand Template Widget
3. Cari kode berikut,atau yang mirip seperti ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>

perhatikan kode yang bertulisan berwarna orange, itu adalah kode yang harus kalian cari, INGAT !! contoh diatas hanyalah contoh untuk pada widget Label, jika kalian ingin menggunakan di widget seperti Popular post atau yang lain tinggal Kalian sesuaikan saja id dan titlenya seperti yang bertuliskan kode yang berwarna orange, jika sudah tinggal sisipkan saja kode yang bertulisakan berwarna merah seperti pada contoh diatas, sedangkan yang berwarna biru itu adalah tingginya, sesuaikan saja tinggi yang anda inginkan...

4. Lalu cari kode berikut

 </b:loop>
    </b:if>
  </div></div>
</b:includable>
</b:widget>

Nah lihat kode yang bertuliskan berwarna merah, itu adalah kode yang harus anda tambahkan di akhir...

Penampakan script penuhnya kira-kira seperti ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div></div>
</b:includable>
</b:widget>

Nah itulah sedikit ulasan dari saya,mengenai Cara Membuat Widget Fungsi Scoll semoga berguna dan bermanfaat...

Percantik Blog Dengan Effect Page Peel Join Us On Facebook

Percantik Blog Dengan Effect Page Peel Join Us On Facebook - Banyak cara atau langkah agar blog terlihat semakin dan menarik, disamping lebih menarik memudahkan juga agar visitor mengetahui halaman fans page kita pada facebook, caranya dengan menambahkan efect page peel join us on facebook. Disini saya akan menjelaskan sedikit pengertian dari page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar disamping. Page peel biasanya berada pada bagian sudut atas dari blog anda. Efek page peel ada yang statis juga ada yang dinamik. Page peel ini umumnya digunakan untuk berbagai tujuan salah satunya yaitu untuk mempromosikan iklan. Namun pada trik dan tips kali ini sebenarnya saya buat karena adanya permintaan dari salah seorang visitor di blog saya yaitu bapak +Eyang Anom membuat page peel dengan efek Join US on Facebook. Jadi jika seseorang pada blog anda mengklik page peel tersebut maka dia akan diarahkan ke halaman page facebook anda. Jika anda penasaran bagaimana membuat page peel efek ikuti langkah berikut ini:

1. Login ke akun blogger

2. Klik Template » Edit HTML » Lanjutkan » Centang  Expand Template Widget

3. Cari kode </head>, lalu letakkan kode dibawah ini diatas kode yang tadi

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/RepublicOfNote &#39;</script>

<script src='https://sites.google.com/site/republicofnote/script/page_peel_effect.js/' type='text/javascript'/>

4. Ganti tulisan yang berwarna merah dengan nama fans page facebook anda
5. Klik save atau simpan template. Selesai

Contoh Saat di sorot cursor

Demikian tutorial cara Percantik Blog Dengan Effect Page Peel Join Us On Facebook, semoga bermanfaat..

Trik Membuat Widget Monyet Ngumpet di Blog

Trik Membuat Widget Monyet Ngumpet di Blog - Pernah jaan-jalan di blog orang, eh g sengaja nemu widget yang sesuatu banget, tuh kamu lihat ajah sendiri diatas gambarnya? sudah tau apa belum?

yah itu adalah "widget monyet ngintip" lucu, unyu-unyu banget dah...

ekekek

Nah bagi kamu yang mau pasang widget ini di blognya bisa pasang kodenya sebagai berikut :

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan » Centang Expand Template Widget
3. Cari kode </body>, lalu letakan kode dibawah ini tepat diatas kode tadi

<div id='namanyayoyo' style='position:fixed;bottom:50px;left:0;z-index:1'><embed bgcolor='#FFFFFF' height='125' id='mymovie' name='mymovie' quality='high' src='http://www.cute-factor.com/animation/yoyocici/yoyoduo.swf' style='' type='application/x-shockwave-flash' width='50' wmode='transparent'/></div>

contoh langsungnya ada dibawah neh,,lihat saja
coba kamu sorot kursornya ke arah nyemotnya, dia pasti terkejut dan langsung ngumpet...
hehehe
lucu bukan?

semoga bermanfaat...

Trik Memasang Meta Tag Geotag di Blog, ICBM, Geo Position

Trik Memasang Meta Tag Geotag di Blog- Seketika kalian pernah pasti melihat source atau menyontek meta tag di blog kepunyaan orang lain? yah kan? hehe

Nah apakah kalian pernah melihat meta tag seperti ini?

<meta content='Republic Of Note' name='DC.title'/>
<meta content='ID-YO' name='geo.region'/>
<meta content='Yogyakarta' name='geo.placename'/>
<meta content='-7.797224;110.368797' name='geo.position'/>
<meta content='-7.797224, 110.368797' name='ICBM'/>
<meta content='ID' name='geo.country'/>

Nah apa kalian tahu arti dan maksud dari Metatag Geotag tersebut?
Ok saya jelaskan sedikit dech biar kalian tahu. Yang dimaksud geo tag atau geotagging adalah proses menambahkan metadata identifikasi wilayah kedalam berbagai media, seperti foto, video, website, atau RSS Feed. Data berisi koordinat lintang dan bujur, meskipun dapat juga mencakup ketinggian, bantalan, jarak, akurasi data, dan nama tempat.
Dengan memberikan Geotag, ICBM info pada sebuah situs, maka membuat situs atau blog kita lebih search engine seo friendly. Begitu bro...

Nah mau tau caranya?
Ok ikuti saja langkahnya berikut :
1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Centang Expand Template Widget
3. Klik dulu disini untuk mengisi data penempatan posisi Geo Tag Generator
Conothnya pada gambar

4. Jika sudah kalian isi maka wakutnya anda melakukan pemasangan meta tag pada HTML blog anda, pemasangan bisa berupa memasang metatag dan widget pada sidebar anda

(untuk pemasangan sidebar yang ini hanya sementara artinya bisa dapat kalian hapus setelah anda mendapatkan widget yang sesungguhnya setelah verifikasi)

5. Jika sudah terpasang pada HTML dan widget anda, save saja...

6. Lalu verifikasilah blog/web anda di Validator Geotag

7. Jika pemasangan pada HTML dan widget anda telah benar maka tidak ada pemberitahuan atau tulisan yang berwarna merah, jika tidak ada waktunya anda memasang widget yang sesungguhnya, kodenya ada dibagian bawah, pilih sesuai selera.

8. Selesai

Demikian Trik Memasang Meta Tag Geotag di Blog, ICBM, Geo Position, semoga bermanfaat.

Perubahan Tampilan Like Box Facebook!

Perubahan Tampilan Like Box Facebook! - Tanpa sengaja dan tidak disadari ternyata tampilan like box facebook/widget pada blog kini telah berubah, pasti setiap blog ataupun kamu pasti memasang widget yang 1 ini dan yang bisa dibilang diwajibkan bagi para blogger guna menunjang kepopuleran blognya. Nah hal ini saya sadari kemarin sore saat membuka blog saya dan ternyata sudah berubah tanpa adaya tampilan face, saya sebelumnya telah mencoba untuk membuat scriptnya di developers facebook langsung atau plugin-nya, dan ternyata tetap saja tidak terlihat walau kita sudah men-set/checklist mode show face. Saya tidak tahu alasannya mengapa demikian tapi bagi saya tidak apalah malah lebih bagus dan simple bisa menghemat tempat..hehhe

Demikianlah sedikit tulisan Perubahan Tampilan Like Box Facebook!, tulisan ini hanya semata-mata pemberian info bagi anda yang bingung dengan berubahnya tampilan like box pada blog anda...

Cara Membuat Zombie Berjalan Di Blog

Cara Membuat Zombie Berjalan Di Blog - Blogger semakin banyak dukungan penuh untuk mendapatkan pernak-pernik ataupun widget untuk menambah kesan menarik, keren ataupun bagus agar blog anda terlihat sedemikian menariknya, tapi ingat gunakan widget yang anda butuhkan agar tidak terlalu berat blog anda saat dibuka.

Nah kali ini saya mau share gimana agar zombie berjalan pada blog kita.
Langkahnya :
1. Login akun blogger anda.
2. Klik Template » Edit HTML » Lanjutkan » Centang  Expand Template Widget

3. Cari kode </body>, lalu pastekan kode zombie dibawah ini yang kalian suka diatas kode yang telah dicari tadi.

Zombie 1

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6rnMznbQB4yer-MY1MENORsaJiaLXqgunXOsdNAmhYTj54yqaisiIXICfNFipBbeQJ8QOIgSNgRIuAHso1ekWg5c3u2SBV_TlTbst6rMsPj7_j-esBiHUHXC3t0uhdS6gAI8dcRpKwdA/s120/zombie-1.gif' tyle="border:0; background:none; padding:0; box-shadow: none;"/></marquee>

Zombie 2

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglfkIf0BbTcjXR0UaSrIGXneLW54HhgocReJtYWsjfGIOF4B-VeFG2v2nF-tmE-b6q-_jqE3TCssGy6OgP4B8w8RtAWyJ_tOEt34HnbOZpGM2yKCemIM3BAGmmRe9eNPGleL_QJ8X0jH8/s100/zombie-2.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

Zombie 3

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9z75TQTYO8vaxiZr7EHGD7kYM5qAbhfl9yxA0QYHUdQnRajEnmgSaTzb8tC_NWKxVR1UoIKHic_6I-k6B8hAc84V0pGvc22D9dmrAsDbaoVwydm80hiKsHB6VtWk8NvhK5QksA2P5tM/s117/zombie-3.gif' style='border:0; background:none; padding:0; box-shadow: none;'/></marquee>

Zombie 4

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxesCpQ49XeIkGgCw92uVDwstGJj5FiGWkMMVAWPhNBWujFHZN_5gNko_LVchTexba22Vx3e1LnyyrRurIA2OeXle_QE9fInWLuub3G9_oU3F5XsMfCvIdCFdypixHvISW92ZlVHNfus/s138/zombie-4.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

Zombie 5

<marquee direction='right' scrolldelay='260' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtOpn6Uhs6ZYQF9S88WJvrCaTQlpfi58JsBYko3zZDcarmaX4zuZhUFJ9ykWpFVW_WTsFvffCz28nEt6zw6WR3SyUsWYki7ZPTY-lcWIX3kI3DosgmiuQYyCpjSWnQDx1Vbe-P0_Fjuo/s148/zombie-5.gif' style='border:0; background:none; padding:0; box-shadow: none; width:70px;'/></marquee>

Keterangan :
direction='right' : untuk arah zombie berjalan dari kiri ke kanan.
scrolldelay='260' : kecepatan berjalan zombie
bottom:10px; left:0; width:100%; : letak zombie pada layar monitor

sumber : http://d-copy.blogspot.com/2012/12/zoombie-berjalan-untuk-blogger.html

Santa Clause Terbang Bersama Blogger di Malam Natal

Santa Clause Terbang Bersama Blogger di Malam Natal - Sudah tidak terasa kita sudah menjalani bulan  desember dimana bulan terakhir dalam perkalenderan, tidak lama juga hari Natal akan segera tiba yang akan dirayakan oleh umat kristiani.

Nah dengan datangnya hari natal blogger menghadirkan santa untuk terbang bersamanya...

hehe kayanya seru yah...

ok dah neh ada widgetnya santaclause untuk blogger...

Santa Clause 1

Langkahnya :
1. Login ke akun blogger anda
2. Masuk Template » Edit HTML » Lanjutkan » Checklist  Expand Widget Template
3. Cari kode </head>, Lalu pastekan kode dibawah ini tepat diatas kode tadi

<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" />

4. Save Template

Santa Clause 2

Langkahnya :
1. Masih sama caranya pada cara diatas, langsung saja cari kode </body>, Lalu pastekan kode berikut tepat diatas pada kode tadi.

<marquee scrolldelay='100' style='position:fixed; top:0; right:0; z-index:9999; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUNLmvNN7H-5PXZ8VETago5Z70b40gKTQwCGQ51nncFdZ8k1Kp9i-17BI8_kTUxVHFvrfFWcL_6QxiVdAKZhlSnhk1K9doeHqchbeXUp-6NK8YUtEBGainsgydJS-kXjk-RT6TduKqJE/' /></marquee>

2. Save Template

Semoga membantu dan bermanfaat...

sumber : http://d-copy.blogspot.com/2012/12/2-santa-clause-terbang-untuk-blogger.html

Widget Twitter, Facebook & YouTube 3 in 1, 1Paket

Nah, seru juga ada satu rekomendasi buat Anda, yang punya akun twitter, yang punya akun facebook (pasti punya kalle ye!!), dan yang punya akun YouTube.

Ingin memasang widget tersebut di blognya. Namun permasalahannya. Kalo di pasang semua jadi kebanyakan bro!, ada ngga widget facebook, twitter dan YouTube yang satu paket all in one alias three in one?? (ha ha ha, 3 in one, kaya jalan di Jakarta aja ha ha!).

Gimana cara Install atau menggunakannya? wah guampang banget, tinggal di submit (+ADD) saja URL fb, tweet dan YouTube Anda.

Jika semua URL sudah di ADD, tinggal pilih theme (color, direction, set dan format) yang di sediakan, beri nama widget Anda, dan terakhir copy paste kode HTML ~ dan pasangkan pada blog Anda, guampang..

Monggo silahkan langsung di sambi.. namanya http://zooshia.com/

He, salam...

Source Style CSS Tab Menu Social Media, bag.2

Setelah sebelumnya, sudah siap di download Tab Social Menu bagian pertama : Source CSS Tab Menu Sosial Media.

Sekarang bagian kedua Source Style CSS/HTML Tab Menu Sosial Media. Tab menu untuk meletakkan link media sosial Anda seperti Facebook, Twitter, Google plus, YouTube dan RSS Feed.

Cara menggunakannya, cukup di download pada link yang sudah di sediakan di bawah, lalu buka file dengan text editor Anda. Kemudian pada bagian HTML

<a href="#" target="_blank" style="width:58px;height:23px;line-height:23px;">

Ganti # dengan url profil Media Sosial Anda pada tiap link a

Silahkan langsung di pasangkan di tambah gadget --- HTML/Javascript blogspot Anda dan simpan.

4. Tab Menu Sosial Media 4   ( Lihat Demo | Download Semua File )

5. Tab Menu Sosial Media 5   ( Lihat Demo | Download Semua File )

6. Tab Menu Sosial Media 6   ( Lihat Demo | Download Semua File )

7. Tab Menu Sosial Media 7   ( Lihat Demo | Download Semua File )

Jika ada kesulitan silahkan jangan malu tuk bertanya??

Oke, Enjoy... have a nice day, salam...

Cara Menampilkan Widget Pada Template Seluler Blogspot

Cara Menampilkan Widget Pada Template Seluler Blogspot – Memunculkan widget di tampilan template versi mobile sebenarnya cukup mudah yaitu cukup dengan menambahkan property mobile pada tag widget <b:widget>. Ada 3 input value pada property mobile ini yang mempunyai arti dan tujuan masing-masing. Berikut penjelasannya :

mobile=’yes’  : artinya widget akan ditampilkan pada template versi seluler/mobile dan desktop.

mobile=’no’   : artinya widget hanya akan tampil pada template versi desktop/web.

mobile=’only’: artinya widget hanya akan tampil pada template versi seluler/mobile.

Nah setelah memahami penjelasan diatas, sekarang kita masuk pada cara penerapannya. Langkah pertama kita tentukan dulu widget mana yang ingin ditampilkan pada template seluler. Saran saya sebaiknya cukup pilih 2 widget yang penting saja misalnya widget Artikel Terbaru dan Popular Post. Misalkan saya ingin menampilkan widget Artikel Terbaru dan Paling HOT Minggu Ini pada template seluler, maka caranya adalah sebagai berikut :

1.       Login ke dashboard blogger, kemudian masuk ke menu Template > Edit HTML.

2.       Pada template saya, kode kedua widget tadi adalah seperti dibawah ini :

<b:widget id='HTML12' locked='false' title='Artikel Terbaru' type='HTML'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

<b:widget id='PopularPosts1' locked='false' title='Paling HOT Minggu Ini' type='PopularPosts'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

3.       Tambahkan property mobile=’yes’ pada masing-masing tag widget sehingga kode lengkapnya menjadi seperti dibawah ini :

<b:widget id='HTML12' mobile='yes' locked='false' title='Artikel Terbaru' type='HTML'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

<b:widget id='PopularPosts1' mobile='yes' locked='false' title='Paling HOT Minggu Ini' type='PopularPosts'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

4.       Save/simpan template anda dan selesai.    

Demikian sedikit tips singkat tentang Cara Menampilkan Widget Pada Template Seluler Blogspot ini dan semoga bermanfaat untuk anda.

Cara Membuat Sliding Hover Button

Cara Membuat Sliding Hover Button  – Button atau tombol yang bisa di klik mempunyai banyak kegunaan. Efek sliding (geser) yang ada pada button ini mirip dengan menu Rocking Rolling Rounded dengan jquery yang dulu pernah saya posting. Sobat dapat menggunakan button ini untuk tombol download, subscribe by email atau lainnya, terserah keperluan masing-masing.

Cara Membuat Button dengan Efek Sliding Hover

1. Login ke dashboard blogger Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
4. Backup dulu template anda sebelum melakukan editing.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   
   .a-btn{
   background:#80a9da;
   background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
   background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
   padding-left:20px;
   padding-right:80px;
   height:38px;
   display:inline-block;
   position:relative;
   border:1px solid #5d81ab;
   -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;
   float:left;
   clear:both;
   margin:10px 0px;
   overflow:hidden;
   -webkit-transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
   transition:all 0.3s linear;
   }
   .a-btn-text{
   padding-top:8px;
   display:block;
   font-size:18px;
   white-space:nowrap;
   text-shadow:0px 1px 1px rgba(255,255,255,0.3);
   color:#446388;
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   transition:all 0.2s linear;
   }
   .a-btn-slide-text{
   position:absolute;
   height:100%;
   top:0px;
   right:52px;
   width:0px;
   background:#63707e;
   text-shadow:0px -1px 1px #363f49;
   color:#fff;
   font-size:18px;
   white-space:nowrap;
   text-transform:uppercase;
   text-align:left;
   text-indent:10px;
   overflow:hidden;
   line-height:38px;
   -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -webkit-transition:width 0.3s linear;
   -moz-transition:width 0.3s linear;
   -o-transition:width 0.3s linear;
   transition:width 0.3s linear;
   }
   .a-btn-icon-right{
   position:absolute;
   right:0px;
   top:0px;
   height:100%;
   width:52px;
   border-left:1px solid #5d81ab;
   -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   }
   .a-btn-icon-right span{
   width:38px;
   height:38px;
   opacity:0.7;
   position:absolute;
   left:50%;
   top:50%;
   margin:-20px 0px 0px -20px;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaHCesgpX4b_9eVpMtJ16bEHzDt2HCxoLA4q86B8eHDoFuX4cHI2v3547PMxQYqn-uPkrYW68lediSCbVFIymfnrWuMjFEVf21tNGwP8gmKefXWcI2zYjM1gh_SSulw3fGK57MKfB_n0/s1600/arrow_right.png) no-repeat 50% 55%;
   -webkit-transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
   transition:all 0.3s linear;
   }
   .a-btn:hover{
   padding-right:180px;
   -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   }
   .a-btn:hover .a-btn-text{
   text-shadow:0px 1px 1px #5d81ab;
   color:#fff;
   }
   .a-btn:hover .a-btn-slide-text{
   width:100px;
   }
   .a-btn:hover .a-btn-icon-right span{
   opacity:1;
   }
   .a-btn:active{
   position:relative;
   top:1px;
   background:#5d81ab;
   -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   border-color:#80a9da;
   }
   
   
6. Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya (pilih salah satu saja) :
   
   
   <div class="button-wrapper">
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Register now</span>
   <span class="a-btn-slide-text">It's free!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Become a member</span>
   <span class="a-btn-slide-text">Sign up!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Enter</span>
   <span class="a-btn-slide-text">Log in!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Get an account</span>
   <span class="a-btn-slide-text">For free!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   </div>

   Keterangan :
   
   Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.
   
   
7. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya didalam area posting tanpa perlu di parse :
   
   

   <div class="button-wrapper">
         <a href="Button URL" class="a-btn">
         <span class="a-btn-text">Register now</span>
         <span class="a-btn-slide-text">It's free!</span>
         <span class="a-btn-icon-right"><span></span></span>
         </a>    
   </div>

   Terakhir save dan lihat hasilnya.

Semoga Cara Membuat Sliding Hover Button ini bermanfaat !

Pasang Widget Recent Comments Dengan Avatar

Alhamdulillah bisa kembali update blog setelah hampir sepekan monotise blog karena baru saja berganti domain baru. InsyaAllah pengalaman custom domain baru ini akan saya share diwaktu yang lain. Pada kesempatan kali ini saya ingin berbagi lebih dulu cara memasang widget blog yang apik berikut.

Ya… widget recent comments atau widget komentar terbaru. Sebagaimana widget blogger yang lain yang memiliki banyak versi ataupun modifikasi maka widget recent comments ini juga merupakan versi kesekian kalinya disamping widget serupa yang pernah saya posting. Perbedaaan widget ini dengan pendahulunya, widget recents comment ini dilengkapi dengan avatar atau pic profil komentator dan bisa dimodifikasi lagi dengan penambahan CSS rounded pada avatar.

Baiklah berikut tutorial step by step cara memasang widget recents comments with avatar seperti pada tampilan image diatas.

1. Loggin ke blog anda

2. Pada dasbor >> Pilih Tata Letak >> Add Gadget >> HTML/JavaScript

3. Copy kode berikut dan paste kedalam kolom HTML/JavaScript:

<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script>
<script type="text/javascript" src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/09/pasang-widget-recent-comments-dengan.html" target="_blank" title="Widget Recent Comment">Get This Widget</a></div></small></div>

Sebelum anda save perhatikan kode diatas yang berwarna biru

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)

URL feed comment blog ini ganti dengan blog anda!

4. Klik simpan/ save.

Demikian tutorial membuat recent comment with avatar pada blog. Semoga bermanfaat!

Update, silahkan lihat cara menghiangkan atau menyembunyikan komentar admin pada widget recent comments dengan avatar disini

Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next

Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next – Widget artikel terbaru ini sama saja sebenarnya dengan widget recent post dengan thumbnail. Fitur modifikasi yang ditambahkan pada widget ini adalah adanya tombol fungsi previous dan next dibagian bawah widget. Nah inilah yang menjadi keistimewaan widget artikel terbaru ala Creating Website ini. Dengan tambahan tombol previous dan next ini maka pengguna dapat mengetahui artikel terbaru apa saja yang ada di blog anda tanpa harus repot membuka daftar isi blog. Kebetulan saya memang juga suka dengan karya-karya Maskolis terutama template-template buatannya yang keren banget, maka pada tips blogging kali ini saya kepingin share tutorial cara membuat widget artikel terbaru ini.  

                                           

Cara Membuat Artikel Terbaru dengan Fungsi Previous dan Next :

1. Login ke dashboard blogger Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
4. Backup dulu template anda sebelum melakukan editing.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   
   #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
   #terbaru{margin:0px}
   .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
   .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
   .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
   .mas-elemen:hover{background-color:#c3c3c3}
   .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
   #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjte_9IjKvsGBypK0tEMP1zXpJ4rlZ1FYllNAKRyRhjHmXVbadoODSX1tByhiyHsrzCDkbm16PDEF7mOFntRwNEnhd02E0AlbL4Kv-zESrj8J54x3hA0P0EErQams0znKuQk-yAe46965I/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
   #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
   #mas-navigasifeed:hover{background-color:#c3c3c3}
   #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
   #mas-navigasifeed span{padding:5px 10px}
   #mas-navigasifeed .next{float:right}
   #mas-navigasifeed .previous{float:left}
   #mas-navigasifeed .home{text-align:center}
   #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   
   <script type='text/javascript'>
   //<![CDATA[
   var numfeed = 5;
   var startfeed = 0;
   var urlblog = "http://infoheadline.blogspot.com/";
   var charac = 100;
   var urlprevious, urlnext;
   
   function maskolisfeed(johny,banget){
   var showfeed = johny.split("<");
   for(var i=0;i<showfeed.length;i++){
   if(showfeed[i].indexOf(">")!=-1){
   showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
   }
   }
   showfeed =  showfeed.join("");
   showfeed = showfeed.substring(0,banget-1);
   return showfeed;
   }
   function showterbaru(json) {
   var entry, posttitle, posturl, postimg, postcontent;
   var showblogfeed = "";
   urlprevious = "";
   urlnext = "";
   for (var k = 0; k < json.feed.link.length; k++) {
   if (json.feed.link[k].rel == 'previous') {
   urlprevious = json.feed.link[k].href;
   }
   if (json.feed.link[k].rel == 'next') {
   urlnext = json.feed.link[k].href;
   }
   }
   for (var i = 0; i < numfeed; i++) {
   if (i == json.feed.entry.length) { break; }
   entry = json.feed.entry[i];
   posttitle = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   if ("content" in entry) {
   postcontent = entry.content.$t;
   } else if ("summary" in entry) {
   postcontent = entry.summary.$t;
   } else {
   postcontent = "";
   }
   if ("media$thumbnail" in entry) {
   postimg = entry.media$thumbnail.url;
   } else {
   postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_kRmeyuFWgIpMkQohw7Za8mu-O0xgLlW9nXJ5SB_eyv7jYNt_tbZfi5mQjZYJByVTdpclx6omd4o7VNxZ382_Ss-Pq08-1cs1apl_1vZjzqbFgB5cLfj5FEmQtcHQvYFlRquEuPgKyYQ/s1600/no+image.jpg";
   }
   showblogfeed += "<div class='mas-elemen'>";
   showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
   showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
   showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
   showblogfeed += "</div>";
   }
   document.getElementById("terbaru").innerHTML = showblogfeed;
   showblogfeed = "";
   if(urlprevious) {
   showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
   } else {
   showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
   }
   if(urlnext) {
   showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
   } else {
   showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
   }
   showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
   document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
   }
   
   function navigasifeed(url){
   var p, parameter;
   if(url==-1) {
   p = urlprevious.indexOf("?");
   parameter = urlprevious.substring(p);
   } else if (url==1) {
   p = urlnext.indexOf("?");
   parameter = urlnext.substring(p);
   } else {
   parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
   }
   parameter += "&callback=showterbaru";
   incluirscript(parameter);
   }
   function incluirscript(parameter) {
   if(startfeed==1) {removerscript();}
   document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
   document.getElementById("mas-navigasifeed").innerHTML = "";
   var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
   var terbaru = document.createElement('script');
   terbaru.setAttribute('type', 'text/javascript');
   terbaru.setAttribute('src', archievefeed);
   terbaru.setAttribute('id', 'MASLABEL');
   document.getElementsByTagName('head')[0].appendChild(terbaru);
   startfeed = 1;
   }
   function removerscript() {
   var elemen = document.getElementById("MASLABEL");
   var parent = elemen.parentNode;
   parent.removeChild(elemen);
   }
   onload=function() { navigasifeed(0); }
   //]]>
   </script>

   Keterangan :
   var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
   var urlblog = "http://infoheadline.blogspot.com/"; >> ganti dengan URL blog Anda
   var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

   Terakhir save dan lihat hasilnya.

Lihat D E MO disini

Demikian Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next ini, kalau anda suka tinggal sedot aja kodenya dan pasang disidebar blog anda. Happy blogging..!!       

Sumber : Creating Website