Motif Bunga, Daun, Tenun Dan Rajut

Gambar background bermotif bunga, daun dan rajut serta tenun tradisional bergaya tempo dulu yang khas dapat juga digunakan sebagai wallpaper :)

Conditional Tags Blogspot

Saya Sedang Belajar Komponen Blogspot

Gambar ini diambil dari: www.linickx.com

Conditional tags pada blogspot adalah bagian-bagian dari template blogspot yang secara spesifik menentukan posisi suatu komponen dari tempalate blogger ini. ( he... he... he... deskripsi ini saya karang sendiri dan mungkin saja salah).

Bagian-bagian dari tema blogspot tersebut diantaranya:

Halaman Berdasarkan Jenis
Halaman Index termasuk halaman beranda, halaman label, halaman arsip
<b:if cond='data:blog.pageType == "index"'>

Halaman Artikel
<b:if cond='data:blog.pageType == "item"'>

Halaman Statis
<b:if cond='data:blog.pageType == "static_page"'>

Halaman Arsip
<b:if cond='data:blog.pageType == "archive"'>



Halaman Berdasarkan URL
Beranda
<b:if cond='data:blog.url == data:blog.homepageUrl'>


Halaman Artikel dan Halaman Statis
<b:if cond='data:blog.url == data:post.url'>


Halaman khusus dengan penargetan url
<b:if cond='data:blog.url == "PUT_URL_HERE"'>



Halaman Berdasarkan Konten Data
Halaman Search Label
<b:if cond='data:blog.searchLabel'>


Halaman Awal dari sebuah artikel dengan banyak halaman
<b:if cond='data:post.isFirstPost'>

Contoh aplikasinya Conditional Tags Blogspot:

Menampilkan suatu konten pada condisional tags halaman artikel blogspot
<b:if cond='data:blog.pageType == "item"'>
ISI DARI PERINTAH YANG DIINGINKAN ATAU KONTEN(Akan Ditampilkan Jika Kondisinya Tepat)
</b:if>


Menampilkan suatu konten pada condisional tags halaman artikel blogspot dan memberikan alternatif lain pada bagian conditional tags lainnya
<b:if cond='data:blog.pageType == "item"'>
ISI DARI PERINTAH YANG DIINGINKAN ATAU KONTEN(Akan Ditampilkan Jika Kondisinya Tepat)
<b:else/>
ISI DARI PERINTAH YANG DIINGINKAN ATAU KONTEN(Akan Ditampilkan Jika Kondisinya Tepat)
</b:if>


Tidak menampilkan suatu konten pada conditional tags halaman artikel blogspot dan menampilkannya pada pada bagian conditional tags lainnya (memberikan pengecualian)*
<b:if cond='data:blog.pageType != "item"'>
ISI DARI PERINTAH YANG DIINGINKAN ATAU KONTEN(Akan Ditampilkan Jika Kondisinya Tepat)
</b:if>

*untuk memberikan pengecualian pada conditional tag; maka tanda == diganti dengan != dan hal ini tidak dapat diterapkan pada conditional tag searchLabel dan isFirstPost

Background Bergaya Damaskus

Background sederhana namun indah untuk berbagai keperluan baik menjadi background blog maupun background website juga dapat dijadikan sebagai latar belakang dari jenis-jenis tulisan lainnya.

Sumber: DeviantArt

Garis Syntax Highlighter Pre Dan Code

Cara membuat garis strips pre dan code seperti tampilan syntax highlighter pada blogspot ini sangat mudah sekali diterapkan. Cukup sisipkan css pada baris style dan setiap penulisan pada html writing area dengan diawali kode <pre> dan diakhiri kode </pre> atau <code> isi </code> maka akan ditampilkan format tulisan yang berbeda pada halaman blogspot.

Gambar diatas ini diambil dari: http://www.office.am

pre,code{
font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;
font-size:100%;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
margin-left:1em;
margin-right:1em;
padding-left:1em;
padding-right:1em;
border-radius:5px;
border:1px solid rgba(0,0,0,.3);
box-shadow:inset 0 0 5px #000;
-moz-box-shadow:inset 0 0 5px #000;
-webkit-box-shadow:inset 0 0 5px #000;
color:#444;
background-color:#f0f0f0;
background-image:linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-image:-moz-linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-image:-webkit-linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size:50px 50px;line-height:25px;
}

Widget Popular Post Blogspot Warna-warni

Cara membuat artikel populer dengan baris warna yang berbeda dan efek gambar yang berputar beberapa kali 360 derajat, ditampilkan tersusun rapi pada sidebar.

Kode widget artikel populer ini dikutib dari sumber asal yaitu:

Bagaimana cara memberi warna yang berbeda pada widget artikel populer dengan efek hover di blogspot

atau

How to Add Different/Multi Colored Popular Post With Hover Effect Widget In Blogger

Caranya, cukup letakkan kode css ini pada baris css template blogspot dan kemudian buatlah sebuah widget popularposts pada sidebar dan lihat hasilnya.

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
sumber: http://www.lifebeyondlimits.info/2012/05/how-to-add-differentmulti-colored.html

Background Berwarna Tekstur Lembut

Background berwarna dengan tekstur yang lembut  kadang disebut juga dengan light-colored textured background atau apalah yang pantas Bahasa Inggrisnya :-)

Tombol CSS Back To Top Tanpa Gambar

Cara membuat shortcut back to top pada blog baik blogspot, wordpress, ataupun dengan cms lainnya cukup gampang, tanpa widget khusus, tanpa plugin, tanpa memberatkan dan membebani server.

Cukup copy css dibawah ini dan paste pada baris css:

.Top{
border-bottom:15px solid #000000;
border-left:15px solid transparent;
border-right:15px solid transparent;
position:fixed;
bottom:0;
right:10%;
width:0;
height:0;
z-index:1;
}

Kemudian copy script dibawah ini dan letakkan pada widget atau letakkan langsung pada template blogspot dan wordpress; posisi tepatnya pada sidebar atau pada footer. Maka cara membuat back to top pada blog pun selesai.

<a class='Top' href='#header' title='scrollTop'></a>