Pos

Menampilkan postingan dari Juli, 2014

Download Template Jelasinblog Blue Jeans

Gambar
Seorang pengunjung -Demo İçin- meminta saya untuk membagikan template Jelasinblog yang bernuansa "blue jeans". Bagi Anda sobat blogger yang baru-baru berkunjung silahkan lihat DEMO template tersebut. Ini adalah template modifikasi.

Fitur-fitur:
- Full responsive
- Notifikasi komentar
- Page Navigation
- Komentar bertingkat ala Wordpess
- Highlight js
- dll

Silahkan kunjungi halaman demo untuk mencoba fitur-fitur lainnya.
Download Template Jelasinblog Blue Jeans

Untuk menampilkan tombol berbagi "Suka Artikel ini? Bagikan".

<div class='share'> <span style='float:left;margin-right:15px;margin-top:3px'>Suka artikel ini? Bagikan :</span> <div style='clear: both;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div align='left'> <table border='0' cellpadding='5' cellspacing='10'><tbody> <tr> <td style=…

Efek Loading Page Blogger dengan JavaScript Jam

Gambar
Sebelumnya sudah dimuat artikel CSS Animasi Loading Blog. Artikel tersebut memberikan contoh efek page loading atau efek "sedang memuat halaman" untuk menambah cantik tampilan blog.

Kalau dalam artikel tersebut efek loadingnya murni menggunakan CSS plus JavaScript sedangkan artikel kali ini menggunakan CSS plus JavaScript yang diperkaya gambar (*.gif) dan menampilkan jam, tentu akan lebih cantik.

Bagaimana cara membuatnya? Ikuti langkah-langkah berikut (artikel dibuat sebagai jawaban atas pertanyaan jenong jellek).

Copy-paste CSS berikut di atas /]]></b:skin>

#clockdate-full { position:fixed!important; top:0px; left:0px; width:100%; height:100%; background:#333 url(http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/s90/ajaxloader.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; ma…

Membuat show hide konversi kode dan emoticon

Gambar
Teman kita Fajar Januriawanmenanyakan cara konversi kode untuk komentar. Artikel kali ini menjelaskan cara membuat konversi kode yang bisa show hide (muncul-hilang) dan emoticon pada komentar blogger.

Mul-mula bukalah editor template, kemudian masukkan CSS berikut,

.box-konvert-kode { width:100%; height:410; margin:10px 0px; }
tambahkan beberapa hal yang Anda inginkan untuk mempercantik tampilan seperti backgraund, padding, atau efek lain dan sesuaikan pula nilai height sesuai template Anda.

JavaScript yang digunakan.

<script> $(document).ready(function() { $('.konvert').click(function() { $('.box-konvert-kode').show(); $('.close-show').show(); $('.konvert').hide(); }); $('.close-show').click(function() { $('.box-konvert-kode').hide(); $('.close-show').hide(); $('.konvert').show(); }); $('.show-emo').click(function() { …

Widget Label Blogger Warna-warni

Gambar
Artikel ini menunjukkan cara menerapkan CSS agar Label Blogger menjadi warna-warni. Hal ini tentu akan mempercantik tampilan widget label blogger. Label akan memiliki warna background berbeda pada setiap link label tergantung dari warna yang kita terapkan di dalam CSS. Contohnya dapat Anda lihat pada blog ini atau perhatikan screenshot berikut.


Bagaimana membuat background label warna-warni? Ikuti langkah-langkah sederhana berikut.

1. Masuk ke Dasboard Blogger Anda
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas tag </b:skin> atau </style>:
.sidebar .label-size { position:relative; text-transform: uppercase; text-decoration:none; font-size:11px; font-family:Oswald, Arial, Sans-Serif; color:#fff!important; } .sidebar .label-size a { color:#fff!important; font-weight:300; padding:8px 10px; margin:0 6px 6px 0; float:left; display:block; -moz-transition: all 0.4s ; -o-transition: all 0.4s; -webkit-transition: all 0.4s ; -ms-transition:…

Background Warna-Warni Berdasarkan Label

Gambar
Sesuai janji saya kepada Rifky umami, bagaimana membuat bakcground warna-warni thumbnail pada blog, artikel kali ini menunjukkan cara dimaksud. Agar sobat bisa mengikuti tutorial ini sebaiknya ikuti tutorial sebelumnya: Tutorial Clone Template KangIsmet, karena tutorial ini dinisbatkan pada tutorial tersebut.



Agar background warna-warni atau berbeda berdasarkan label atau kategori, temukan CSS berikut,

.dp-thumbnail span{font-size:26px;line-height:90px;font-weight:bold;color:#eee} .dp-thumbnail.CSS {background:#a9d86e} .dp-thumbnail.Komentar, .dp-thumbnail.HTML5 {background:#f1c40f} .dp-thumbnail.Request {background:#ff6c60} .dp-thumbnail.Opini, .dp-thumbnail.template {background:#ff6c60} .dp-thumbnail.Tutorial {background:#5f90b4} .dp-thumbnail.Widget {background:#82a5ce} .dp-thumbnail.SEO {background:#dfbc42} .dp-thumbnail.Font {background:#98cdca} .dp-thumbnail.jQuery, .dp-thumbnail.Javascript{background:#24887B} .dp-thumbnail.Lain-lain {background:#80aac9}

ganti dengan CSS ini.

.war…