Web Development Blog Shannenpio

Pada konfigurasi widget Posting Populer , pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template . Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style> : /* Custom CSS for Blogger Popular Post Widget */ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; } .PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight...

Style Switcher Blog Style Switcher adalah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini diharapkan pengunjung tidak akan bosan dengan artikel yang dia baca karena dia bisa memutuskan desain situs yang sedang dia kunjungi melalui Style Switcher. Versi asli yang lebih besar sebenarnya cenderung mengambil konsep penggantian file CSS secara keseluruhan: Style Switcher pada Yahoo! Mail Di sini Saya hanya akan mengambil beberapa perubahan kecil saja seperti warna latar, warna huruf, jenis huruf dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, karena versi ini sudah Saya lengkapi dengan JavaScript Cookies . Kelebihannya adalah, saat pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan: Lihat Sampel Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML template And...

Menambahkan tooltip pada widget AddThis Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis . Saya iseng membuatnya beberapa menit yang lalu :p Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini: <!-- AddThis Button BEGIN --> <div class='addthis_toolbox addthis_default_style'> <a class='addthis_button_preferred_1'></a> <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a> <a class='addthis_button_preferred_4'></a> <a class='addthis_button_compact'></a> <a class='addthis_counter addthis_bubble_style'></a> </div> <!-- AddThis Button END --> Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini: <!-- AddThis Button BEGIN -->...

Di bawah ini adalah daftar tema untuk widget daftar isi Blogger dengan navigasi halaman . Untuk menerapkannya, caranya cukup dengan mengganti kode <link rel='stylesheet' media='screen' href='style.css' type='text/css' /> dengan kode ini: Minima Brown Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css" type="text/css" /> Elegant Black Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css" type="text/css" /> Facebook Theme Lihat Demo <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" /> CSS3 Diary Book Th...

Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini » Tambahkan State Aktif untuk JQuery Accordion . Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari potongan kode tersebut . Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut? Mari kita coba mengambil sudut pandang ini: Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion. Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini: <div id='sidebar-wrapper'> <h2>Blogger templates</h2> <div class='widget-content'> .... </div> <h2>Blo...

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini: Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja. Pertama-tama, masuklah ke halaman editor HTML template mu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil. Temukan kode ini: <div class='post-footer'> TIP: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencaria...