Green Hacker Blogger Template

Cari, cari, cari, cari dan trus mencari-cari, ekh gak taunya dapat templates yang lumayan bagus lah dari chenkgelate. Namanya Green hacker (yang empuhnya tuh yang kasih nama). Sobat bisa lihat contoh tampilanya disini. Info XLMnya di bawah ini mas broo:

• Colour " Green "
• 3 Coloumn
• 3 Footer
• Transparant
• Elegant Style

Features:

• Readmore Automatic
• Ads Ready
• Breadcrumb Navigation
• Related Post
• Share button
• and more features

kalau berminat silahkan download file xml-nya DISINI

Read More

Membuat Efek Box Shadow dan Text Shadow di Blog

box-shadow: 1px 2px 3px 4px #000000 inset;

• 1px [horizontal offset] = menunjukan nilai posisi bayangan horizontal
• 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
• 3px [blur amount] = menujukan nilai jarak blur (optional)
• 4px [spread radius] = menunjukan nilai ketebalan bayangan (optional)
• #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.
• Inset = perubahan posisi bayangan (default mengarah keluar tanpa nilai inset) dengan penambahan nilai inset menjadikan shadow mengarah kedalam (optional)

text-shadow: 1px 2px 3px #000000

• 1px [horizontal offset] =menunjukan nilai posisi bayangan horizontal
• 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
• 3px [blur amount] = menujukan nilai jarak blur (optional)
• #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.

Contoh style CSS3 Box-shadow

Box-shadow positive value:

box-shadow: 5px 5px 0px #ccc;

Box-shadow negative value:

box-shadow: -5px -5px 0px #ccc;

Box-shadow with blur:

box-shadow: 0px 0px 20px black;

Box-shadow with inset keyword:

box-shadow: 0px 0px 20px #999 inset;

Box-shadow with under shadow:

box-shadow: 0px 20px 25px -20px #ccc

Box-shadow with inset style 2:

box-shadow:inset 0px 2px 7px #999;

Box-shadow with 2 shadow properties:

box-shadow: inset 5px 5px 0px #ccc,
8px 8px 8px #ff0000;

Box-shadow with 3 shadow properties:

box-shadow:3px 3px 0px #cccccc,7px 7px 0px #bbbbbb,11px 11px 0px #aaaaaa;

Contoh style CSS3 Text-shadow :

Simple Text-shadow:

text-shadow: 5px 10px 0px #999;

Text-shadow with blur:

text-shadow: 5px 5px 5px #999;

Text-shadow style 2 with blur:

text-shadow: 0px 0px 5px #000000;
color:transparent;

Text-shadow - glow effect:

text-shadow: 0px 0px 10px #009CC2;

Text-shadow – multiple shadows:  text-shadow: 12px 13px 1px #FD9213, -5px 8px 1px #009CC2, 10px -8px 1px #B3C734;

Text multiple shadow

Text-shadow – emboss effect:

text-shadow: -1px -1px #fff,
1px 1px #444;

Text-shadow – emboss effect style 2:

text-shadow: 1px 1px #fff,
-1px -1px #444;

Text-shadow – stroke effect:

text-shadow: 1px 1px 0px #444,
-1px -1px 0px #444;

Text-shadow – 3D effect:

text-shadow: 1px 1px 0px #444,
2px 2px 0px #444,
3px 3px 0px #444,
4px 4px 0px #444;

 
Anda bisa mengembangkan sendiri sesuai kebutuhan perasaan dan blog anda. Demikian artikel kali ini, saya Bung Frangki mengucapkan terima kasih atas apresiasi anda. Salam blogger..

Read More

Membuat Artikel Terbaru Thumbnail (Recent Post)

recent post

Bagi yang berkeinginan untuk memasang Recent Post atau Artikel Terbaru Thumbnail di blog, silahkan kopi kode di bawah ini dan paste pada widget sidebar atau footer blog anda.

<div id='bp_recent'></div>
<script style='text/javascript' src='https://btreaders.googlecode.com/files/recentposts3.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 80;
var linkClass = 'masterTooltip';
var imgFloat = 'left';
var myMargin = 2;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://gw.com/feeds/posts/summary?max-results=16&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Kode https://btreaders.googlecode.com/files/recentposts3.js silahkan simpan di hosting pribadi anda, guna menghindari kemungkinan yang tidak diinginkan.
Kode yang berwarna di atas, sesuaikan dengan kebutuhan blog anda.
Selamat mencoba.

Read More

Membuat CSS Jumlah Entri Pada Widget Label

css

Membuat CSS Jumlah Entri Pada Widget Label – Beberapa waktu lalu saya sedikit pontang-panting dalam membuat tampilan label seperti yang tertera pada widget dropdown disamping artikel ini. Di mesin pencari yang ramai dibahas hanyalah “Bagaimana Cara Menghapus Jumlah Nomor Pada Widget Label”, jika anda penasaran silahkan cek dengan keywords yang diberi tanda petik tersebut. Beberapa tutorial yang disuguhkan dari blog hasil blogwalking namun tidak memenuhi keingin saya. Lalu nampaklah sebuah tutorial hasil di mesin pencari dengan sedikit aneh pada bagian judulnya. Lagi-lagi blog Kang Ismet memberikan solusinya, dan kali ini saya share kembali tentunya dengan sedikit tambahan CSS.

Bagi anda yang ingin menerapkannya, silahkan ikuti langkah-langkah di bawah ini:
Langkah 1 : Buat widget Label, lalu centang Tampilkan Jumlah Entri Per Label
Langkah 2 : Simpan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* label css */
#Label1 ul {list-style:none;padding:0;margin:0;color:#999}
#Label1 li {border-bottom:1px solid #222;border-top: 1px solid #444; list-style:none;margin:0;padding:0}
#Label1 li:first-child  {  border-top: 0;  }
#Label1 li:last-child  {  border-bottom: 0;  }
#Label1 li a {color: #eee;text-decoration:none;list-style:none}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#444;color:#eee;line-height:1.2em;margin:2px 0 0;padding:3px 5px;border-radius:4px;text-align: center;font-size:12px;min-width:27px}
#Label1 li:hover .label-counter {background:#20aea6;color:#ddd}

Jika ada beberapa label pada blog Anda silahkan edit sesuai label yang ingin dirubah CSSnya menjadi #label1 atau #label2 atau #label3 dst.

Langkah 3 : Pada label yang dipilih, cari kode

<span dir='ltr'>(<data:label.count/>)</span>

Ganti dengan

<span class='label-counter'><data:label.count/></span>

Langkah 4 : Simpan template Anda, dan lihat hasilnya.

Silahkan rubah warna background dan font sesuai keinginan.
Demikian tutorial Membuat CSS Jumlah Entri Pada Widget Label, mudah-mudahan dapat membuat tampilan template blog anda semakin kren dan unyu.

Read More