Create Animations on Blogger Profile using CSS3 Transition-Transformation

Semakin banyak kreatifitas bisa kita ciptakan dengan datangnya CSS 3, terutama CSS 3 Transition - Transformation. Hal-hal yang sebelumnya begitu sulit diciptakan, dan kalaupun bisa harus menggunakan javascript atau jQuery dan Motool, kini cukup menggunakan kode CSS terbaru yang kita kenal sebagai CSS 3. Masih cukup terbatas memang, namun cukuplah untuk sementara ini sambil menunggu para browser berlomba untuk melengkapi diri pada dukungannya terhadap CSS 3. Tak lama lagi bila opera (Opera 1062)) dan Mozilla (Segera download Mozilla Firefox 4.0 beta 6! Biar nggak ketinggalan kereta!) juga sudah mempercepat dukungannya terhadap semua kode CSS 3, seperti CSS3 animation, pasti akan lebih banyak lagi desain yang lebih menarik akan tercipta. Saat ini cukup kita manfaatkan semaksimal mungkin CSS3 transition dan transformation yang sudah didukung dengan cukup baik oleh Mozilla dan Opera, serta Google Chrome dan Safari (webkit).

Membuat sebuah tampilan profile blogger-blogspot dalam bentuk animasi tentulah akan sangat menarik sebagai penyegar wajah blog. Kita akan buat sebuah transparansi pada gambar profil, hingga profil blogger ini mampu membuat penasaran pengunjung karena gambar/image yang terlihat samar-samar. Melalui kondisi ini diharapkan mampu membuat pengunjung menyentuhkan cursornya ke salah satu bagian box blogger profile yang terdapat di sidebar widget (umumnya dipasang di sini!). Apabila kondisi ini terpenuhi, maka dengan segera akan terjadi reaksi pada photo yang terpajang untuk bergerak ke arah kiri dan dilanjutkan sebuah putaran untuk sedikit menciptakan keatraktifan dan baru kemudian secara perlahan gambar yang terlihat suram menjadi kelihatan tajam karena efek transparansi hilang. Animasi ini dengan sengaja memang kita buat dengan melibatkan margin supaya gerak yang tercipta lebih dinamis dan bikin mata melotot serta nafas ngos-ngosan (memangnya lagi ngapain pakai ngos-ngosan? Ah ... bikin pikiran kotor jadi muncul di batok kepala. He ... he ... emang kamu suka yang pakai ngos-ngosan?!). Bagaimana bentuk sebenarnya dari animasi di profile blogger ini? Anda bisa melihatnya dengan melihat profile blogger "About Me" melalui link DEMO di bawah ini!

D E M O

Kode CSS Animations on Blogger Profile

Show - Hide Navbar with Animation using CSS3: Cara Menhilangkan Navbar Blogspot

Show Hide Navbar with Animation ini mungkin akan menjadi jalan tengah bagai beberapa sobat blogger yang tidak suka navbar ikutan nongol di halaman blog. Dengan menggunakan CSS3, kita akan membuat navbar tersembunyi (hilang) dan akan nongol lagi ketika cursor diarahkan pada satu titik tertentu. Tentu saja desain ini telah kita rancang secantik mungkin sehingga penampilan blog tetap terjaga. Dengan menyertakan kode CSS3 Transition, maka sebuah bentuk animasi gerak memungkinkan navbar sembunyi dan nongol dengan cara yang halus (tidak sruntal-sruntul kayak kalian, he ... he ...!). Saat blog dibuka navbar tidak akan terlihat. Di bagian atas blog (top bar) hanya akan terlihat sebuah image (gambar) yang kita gunakan sebagai "semacam swith" pembuka navbar. Saat cursor menyentuhnya, maka secara perlahan-lahan "si navbar" terlihat turun untuk memperlihatkan diri. Untuk menghilangkan navbar tersebut cukup lakukan dengan melepaskan cursor dari semua bagian navbar. Secara perlahan dia akan kembali pulang untuk bersembunyi ke habitatnya semula di di bagian atas blog. Sampeyan bisa coba melihat DEMO-nya dengan KLIK link di bawah ini. Carilah di bagian atas blog sebuah gambar (image) yang bertuliskan "Navbar (bertanda -panah-)".

D E M O

Kode CSS

Create Text Resizer using CSS3 Transition - Perubah Ukuran Teks dg CSS3

Text Resizer ini amat sangat simple tetapi mampu memberikan fungsinya secara penuh sebagai sebuah "alat perubah ukuran teks". Kembali CSS3 transition kita manfaatkan sebagai pelengkap membentuk sedikit animasi tatkala perubahan ukuran teks terjadi. Javascript tetap dibutuhkan dan hanya berfungsi sebagai "saklar" atau "switch" hingga pergeseran pergantian ukuran font bisa dilakukan. Hal yang hingga saat ini masih terlalu sulit untuk dapat dilakukan oleh kode CSS.

Javascript yang digunakan untuk mendukung kinerja Text Resizer ini juga amat sederhana. Sampeyan bisa melihatnya di kode HTML yang akan disertakan di bawah. Script hanya difungsikan untuk merubah "class" pada kode CSS hingga setiap kali "KLIK" terjadi perubahan "class" yang berkorelasi dengan "perubahan ukuran font". Supaya memenuhi syarat sebagai sebuah Text Resizer, desain ini menyertakan 4 (empat) ukuran teks yang berbeda dengan system konversi ukuran dalam skala persen (90%-small, 100%-normal, 105%-big dan 110%-bigger). Jika dikehendaki ukuran atau skala berbeda, sampeyan bisa merubah nilai dalam persen tersebut dengan besaran yang lain.

Text Resizer dapat dipasang di blog sebagai sebuah fungsi permanen (pasang langsung di template pada bagian body) hingga secara otomatis muncul di halaman posting, atau digunakan secara temporer dengan hanya menggunakan di saat-saat tertentu ketika diperlukan (di halaman posting atau lewat Add Gadget).

Bukalah link DEMO di bawah ini untuk melihat bentuk "Text Resizer dan fungsi yang mampu dilakukannya".

D E M O

Cara menggunakan Text Resizer

Cara Ganti Template - Blogger Lama Blogger Baru

Posting tentang cara mengganti template sebenarnya telah terpostingkan berbulan-bulan yang lalu. Setelah aku coba cek kembali apa yang tersampaikan melalui posting tersebut, eh ...., ternyata isi dalamnya benar-benar sudah "kedaluarsa" alias "ketinggalan sepur" (ketinggalan kereta) bin wayu (basi, broer!). Untung saja, dah, ada satu sobat kita yang menanyakan tentang cara mengganti template di blogger baru! Yap ..., bagaimana aku ndak merasa beruntung sekaligus bersyukur, wong akibat apa yang disampaikan sobat kita ini aku jadi "nge-cek" ke posting-posting lama yang memang ternyata beberapa di antaranya harus di update supaya nggak justru malah membingungkan para sobat blogger. Lha masa ... katanya tutorial kok justru malah bikin posing yang baca. Itu namanya bukan tutorial tapi Toto Royal! Iya, nggak?! Hayo siapa yang punya nama Toto dan suka royal atau kelayapan ke tempat-tempat pembangkit gairah! Ha ... ha... pasti kamu, to?

Mengganti template di blogger baru sebenarnya tidaklah terlalu jauh berbeda dengan cara mengganti template "di blogger lama". Perbedaan yang ada hanyalah pada bertambahnya jumlah pilihan template yang bisa dipergunakan. Yah ...., saat ini para blogger mungkin menjadi lebih beruntung karena punya banyak pilihan untuk mengganti template.

3 (tiga) Pilihan Template Blogspot

Image on Center of Position-Cara Buat Gambar Center (di Tengah)

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:

<img style="display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVC4JbdRA8Cngqs8fr6GDqUZLNXZjInON26C7mT9RDyzmr-o3avQnwTUedyR0HgHJ-FC5djndpGKsUj_yIJ6Ffcklr027sLYBMENMrgQBGBd0JTOccAKp0X3qmn5V9kG5333aZk9kZnE/s320/Pantai-1.jpg" />

Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.

Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position

Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. Sampeyan bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik. Silahkan buka link DEMO di bawah ini:

D E M O

Kode CSS dan xHTML

Using Transition Property, Transition Delay, Transition Duration, Transition Timing Function in Mozilla, Opera, Safari

Standart penulisan kode CSS3 yang hingga saat ini masih belum terwujudkan, membuat sebuah desain HTML menjadi begitu banyak memerlukan kode yang sebenarnya berfungsi sama. Satu hal yang sebenarnya dapat dimaklumi juga karena dukungan browser terhadap CSS3, terutama CSS3 animaton, transition, transformation, border-radius dan box shadow masih belum dapat direalisasikan secara maksimal. Kondisi ini masih diperparah dengan tingkat kompabilitas dimasing masing browser. Seperti di Opera misalnya. Penulisan CSS3 transition dalam bentuk :
-o-transition: all 2s ease-in 700ms
akan mampu membentuk sebuah fungsi secara sempurna, termasuk perubahan yang diharapkan pada border (border-width, border-color, border-style). Hal yang berbeda akan terjadi ketika penulisan kode dibuat dalam bentuk :
-o-transition: border 2s ease-in 700ms
. Dengan cara ini maka bentuk transisi yang diterjadi tak akan sesuai dengan bentuk yang diharapkan. Pada transisi yang lebih kompleks, dengan melibatkan beberapa transition-propery, transition, delay, transition-timing-function dan transition duration (multiple transition), bahkan justru akan merusak desain yang coba kita tampilkan. Untuk mengatasi permasalahan-permasalan seperti ini, alngkah baiknya apabila kita memahami terlebih dahulu cara penggunaan setiap kode transisi serta seberapa dukungan browser terhadapnya.

Untuk lebih memahami beberapa cara penulisan CSS3 transition, silahkan gunakan metode penulisan seperti di bawah ini :

Opera

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-o-transition-property: width, height, background-color, color, opacity, -o-transform;
-o-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-o-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-o-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-o-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background-color 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -o-transform 2s linear 2s;

Mozilla

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-moz-transition-property: width, height, background, color, opacity, -moz-transform;
-moz-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-moz-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-moz-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-moz-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -moz-transform 2s linear 2s;

Safari-Google Chrome

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-webkit-transition-property: width, height, background, color, opacity, -webkit-transform;
-webkit-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-webkit-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-webkit-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-webkit-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -webkit-transform 2s linear 2s;

Cara paling sederhana menuliskan kode transisi

Tanpa menyebutkan transition property dan timing function:

-o-transition: 1s 700ms;
-moz-transition: 1s 700ms;
-webkit-transition: 1s 700ms;

Transisi berlaku untuk semua property:

-o-transition: all 0.5s ease-in 0.8s;
-moz-transition: all 0.5s ease-in 0.8s;
-webkit-transition: all 0.5s ease-in 0.8s;

Transisi berlaku untuk semua property tanpa delay:

-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;

Catatan - Khusus Opera

• Untuk sementara ini penulisan property border dan border-radius sebaiknya tidak dilakukan di Opera (CSS3 Transition-property), karena justru merusak desain yang telah dirancang.
• Background property ditulis sebagai: background-color.
  contoh:
  -o-transition: background-color 2s ease-out 400ms;

DEMO berikut Kode CSS dan xHTML

Beberapa bentuk transisi dengan memanfaatkan seluruh komponen dan property di CSS3 transition seperti transition-delay, transition-timing-function, transition-property dan transition-duraton telah aku siapkan dalam bentuk demo beserta kode CSS dan xHTMl-nya. Silahkan buka link di bawah ini untuk melihat dan copy kodenya:

D E M O

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «

Drop-in Content DIV-Box with Animation Using CSS3 Transition-Transformation

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

rgba Collapsible using CSS3 Transition-Transformation

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Image Gallery and Hidden Descriptions with Animation using CSS3 Transition-Transformation

Bagi yang sering menampilkan gambar berikut deskripsinya sebagai materi posting, images gallery and hidden description with animation using CSS3 transition-transformation menjadi amat menarik untuk digunakan. Mini images gallery ini sangat selain dapat digunakan sebagai sebuah images gallery dapat juga digunakan untuk menampilkan gambar dalam bentuk tunggal (satu gambar) dan amat kompatible untuk browser yang sudah mengakomodir CSS3 untuk memberikan berbagai efek terbaru seperti Mozilla Firefox, Opera, Google Chrome dan Safari serta beberapa browser yang lain. Disamping gambar ditampilkan dalam bentuk animasi, deskripsi juga ditampilkan secara tersembunyi sehingga halaman blog menjadi terlihat amat minimalis. Deskripsi gambar dibuat tersembunyi secara rapi dibagian bawah gambar dengan memanfaatkan tag p berikut span. Deskripsi gambar akan terlihat hanya dibagian judul ketika mouse berada di atas gambar, baru kemudian seluruh deskripsi menjadi terlihat secara keseluruhan ketika mouse diarahkan di atas judul deskripsi. Untuk membuat gambar dan deskripsi ini menjadi lebih menarik, sampeyan bisa memberikan judul deskripsi menggunakan kata atau kalimat yang membuat pengunjung blog secara otomatis mengarahkan cursor ke bagian judul. Pasti akan menjadi sangat menarik dan membuat kita tertantang untuk memunculkan kreatifitas yang membuat semua orang mungkin penasaran menyimak deskripsi secara total.

Supaya lebih jelas memahami bagaimana sebenarnya bentuk gambar serta deskripsi yang semuanya terangkai sebuah animasi ini, silahkan sampeyan lihat dengan membuka link demo di bawah ini.

D E M O

Untuk membuatnya silahkan lakukan prosedur berikut.

• Login : Login to Blogger (login ke blogger)
• Dasboard (Dasbor) : Setelah halaman dasboard terbuka, KLIK link "Design" atau "Rancangan".
• Design (Rancangan) : KLIK ""Edit HTML".
• Find Code : Cari kode CSS ]]></b:skin>.
• Copy-paste : Copy dan pastekan kode CSS di atas ]]></b:skin>.
  Catatan : Gunakan Ctrl + F (pada keyboard) untuk mencari kode HTML atau CSS dan Javascript stiap kali melakukan pencarian kode supaya lebih mudah dan cepat.
• SAVE (Simpan) Template : KLIK SAVE Template dan lanjutkan dengan menggunakan xHTML di bagian body atau di ruang posting blog.
• Open Blog : Buka blog untuk melihat hasil sekaligus pengecekan hasil.

Kode CSS Image and Hidden Descriptions

Tips Cara Membuat Gambar-Image Berderet Horizontal

Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang! (He ... he ... memang ada otak bertulang?! Otak DinoPatiSaurus kali, ya?!). Ha ... ha ... rajin pangkal pandai, hemat pangkal kaya, rapi dan teliti bukan saja milik anak TK, namun juga menjadi milik ABRI (Asyiknya Blog Rajin dan Indah).

Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.

Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.

Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:

Bedah Posting gambar dan photo ; fungsi margin

Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.

D E M O

Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:

How to Install The Latest Widget from Blogspot: Popular Posts Widget

Cara Pasang Widget Popular Posts. Sebuah Widget Baru dari Blogger-Blogspot

Hari demi hari rupanya blogger terus berpacu untuk menggapai kesempurnaan dengan memberikan layanan yang semakin memberikan banyak kenyamanan bagi para penggunanya. Yah .., layanan ini sebenarnya memang sesuatu yang sudah teramat lama ditunggu dan memang sudah seharusnya menjadi prioritas utama blogger untuk tetap bisa bersaing dengan wordpress, misalnya. Bersyukur kiranya menjadi sesuatu yang wajib kita ungkapkan, disamping harapan lain yang masih kita tunggu. Sebuah harapan besar yang aku kira bukanlah sebuah angan semata. Satu pengharapan bagaimana supaya daya dongkrak popularitas para blogger di blogspot bisa lebih "mampu memberikan sedikit daya saing yang nyata terhadap blogger-blogger Wordpress dan beberapa yang lain". Sesuatu yang jelas amat kita butuhkan hingga mampu membuat para "blogger-blogspot" merasa nyaman, kerasan (enjoy karena makmur, mbul!! He ..., he ...) karena bisa setara dengan mereka-mereka".

Setelah "Template Blogger Baru" atau "New Blogger Template" secara resmi disyahkan sebagai template terbaru blogger, kini sebuah layanan baru telah juga mulai diberikan. Masih dengan bentuk embel-embel "Blogger Dalam Konsep" seperti halnya sebelum "New Blogger Template" secara resmi digunakan sebagai template "syah". Layanan terbaru ini berupa beberapa fitur diantaranya "Popular Posts dan Stats (Statistics)" yang tersertakan sebagai sebuah widget serta sebuah fitur statistics yang bersifat internal dan terpadu. Fitur Stats internal memberikan data statistik yang hanya dapat dimonitor oleh si-empunya blog, sedang fitur stats dan popular posts dalam bentuk widget memberikan keleluasaan bagi pembaca blog untuk mengetahui data statistik blog sekaligus posting terpopuler yang terdata.

Menampilkan ke dua widget di atas tentunya akan memberikan banyak keuntungan baik bagi blogger khususnya dan pembaca pada umumnya. Untuk memasang widget ini juga dengan mudah dan cepat dapat kita lakukan. Sampeyan hanya perlu login ke blogger dengan cara yang sedikit berbeda. Jika selama ini selalu menggunakan https://www.blogger.com/start, maka untuk bisa mendapatkan widget "Popular Posts dan Stats", loginlah dengan membuka http://bloggerindraft.blogspot.com. Langkah selengkapnya adalah sebagai berikut.

• Login : Login to Blogger(login ke blogger) dengan menggunakan link baru di bawah ini:
  
  http://bloggerindraft.blogspot.com
  .
  
• Lihat di ujung kanan atas halaman. KLIK link "Masuk (Sign-in)".
• • Lanjutkan dengan menuliskan User Name (Nama Pengguna). Sampeyan bisa juga menggunakan Email Address untuk menggantikan User Name.
  • Tulis Password (Sandi).
  • KLIK "login"
• Dasboard-1 (Dasbor-1) : Setelah halaman dasboard terbuka, gulung halaman dasboard ke bawah hingga sampeyan temukan:
  "Other Stuff - Tools and Resources - Blogger in Draft"
  atau:
  "Item Lainnya - Alat dan Sumberdaya - Blogger dalam Konsep". KLIK pada "Blogger in Draft" atau "Blogger dalam Konsep". Tunggu beberapa saat.
• Dasboard-2 (Dasbor-2) : Kembali sampeyan akan masuk ke halaman dasboard. Dasboard ini merupakan "Blogger in Draft Dasboard" atau "Dasbor Blogger dalam Konsep".
  KLIK "Design (Rancangan)".
• Design (Rancangan) : KLIK "Add Gadget (Tambah Gadget)". Untuk mudahnya pilih yang dibagian "Sidebar". Tunggu beberapa saat.


• Setelah muncul window baru dengan judul "Add a Gadget" atau "Tambahkan Gadget", silahkan pilih dan KLIK widget " Popular Posts New!" atau "Entri Populer (Baru!)". Akan ada beberapa pilihan:
  Most viewed:
  - All time, Last 30 days, Last 7 days.
  - Show Post title and: image thumbnail, snippet,
  
  atau dalam bentuk:
  
  Paling banyak dikunjungi:
  - Setiap saat, 30 hari terakhir, 7 hari terakhir.
  - Tampilkan Judul entri dan: thumbnail gambar, cuplikan
  
  Silahkan sampeyan sesuaikan dengan selera kemudian lanjutkan dengan KLIK "SAVE atau Simpan".
• Open Blog (buka Blog) untuk melihat hasilnya!

Untuk melihat bentuk "Popular Posts" yang sudah terpasang, silahkan sampeyan buka di link berikut:

D E M O

Popular posts in this demo has been modified using CSS3 code. If you want to make it, please follow the next tutorial!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «

Image Enlarger with Animation for Image post using CSS3

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Simple Javascript to Select all and Copy DIV (Code, Text and everything)

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.