Tutorial dan Free Download

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

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

Untuk menempatkan dihalaman item/posting saja digunakan code

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

Dan untuk pada halaman pages atau static page blogger digunakan

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

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Cara Menghilangkan Widget Attribution Blogger

Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Sekian dan terima kasih

Widget Recent Posts Dan Recent Comments Dari Blogger

Recent posts dan recent comments atau widget komentar dan posting terakhir adalah widget yang sering digunakan para blogger, karena kedua widget ini sangat berguna untuk mengetahui komentar terakhir dan posting terakhir di blog kita.

Dulu saya pernah mencoba menulis tentang cara membuat recent comments dan recent posts dengan javascript, namun sekarang kita tidak perlu susah-susah lagi untuk membuat widget tersebut dengan menggunakan javascript karena blogger sudah menyediakan widget ini di widget featured blogger.

Bagi Anda yang belum tau tentang cara menggunakan widget ini silahkan ikuti panduan dibawah ini.

Cara menggunakan widget ini cukup mudah yaitu :

Masuk pada "Design→ Page Elements"
Lalu Klik tombol "Add a Gadget"
Dan klik tombol "Featured"
Cari gadget Recent Comments, untuk menggunakan widgetnya klik tombol (+)

Setelah muncul kotak dialog seperti diatas kemudian isi konfigurasi widgetnya dan tekan tombol "SAVE"
Dan untuk widget Recent Post pada langkah nomer 3 cari gadget "Recent Posts" dan klik tombol (+) maka akan muncul kotak konfigurasi seperti dibawah ini

Nah setelah muncul kotak konfigurasi seperti diatas, lalu isi konfigurasinya sesuai keinginan Anda lalu "SAVE"
Selesai dan lihat hasilnya.

Okkey inilah bukti kemajuan blogger yang bisa Anda rasakan, semoga blogger lebih canggih lagi dan kita pun lebih mudah menggunakan blogger. Salam blogger

Tampilan Komentar Owner Berbeda (Template Baru)

Tampilan Komentar Owner atau pemilik blog berbeda ini sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.
Sebelumnya Saya sudah pernah membahas tentang bagaimana cara membuat kotak komentar pemilik blog berbeda dengan user, namun perkembangan blogger pun membuat tutorial tersebut tak bisa dipakai pada template yang baru, karena template yang baru codenya berbeda dengan yang lama. Dan saya pun juga pernah menulis tentang bagaimana cara mengubah komentar lawas menjadi yang baru, lalu pada kesempatan kali ini Saya akan mencoba menulis tutorial tentang cara membuat tampilan kotak komentar pemilik blog berbeda di template baru.

Yuk langsung saja ke tutorialnya

Masuk pada menu Design -> Edit HTML dan centang "Expand Widget Templates"
Taruh Code CSS dibawah ini diatas code ]]></b:skin>

.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}
Kemudian cari code yang berwarna hitam lalu sisipkan code yang berwarna merah, seperti dibawah ini.

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>

Perhatikan betul-betul penempatanya
SAVE dan lihat hasilnya.

Okkeylah sekian dulu. semoga bermanfaat bagi Anda dan jangan malu-malu bertanya jika ada kesulitan karena Saya akan mencoba membantu Anda.

Mengubah Komentar Lama Menjadi Baru

Komentar sudah menjadi hal yang tak bisa dipisahkan dengan postingan, seperti ibarat motor dengan bensin, tetapi pada postingan saya kali ini akan membahas bagaimana cara mengubah bentuk komentar lama blogger menjadi komentar baru blogger yang lebih canggih dengan ada photo author disebelah post comments.

Apabila Anda menggunakan template lawas photo author ini tidak muncul selayaknya yang ada pada template baru blogger yang ada photo author disebelahnya.

Coba lihat gambar dibawah ini untuk membedakan komentar lawas dengan komentar baru.

Nah terlihat skema di atas ada perbedaan dengan ditambahi foto komentator.

Apakah Anda ingin mengubahnya ?

Langkah pertama masuk pada menu "Settings" lalu "Comments" dan pastikan pilih "YES" untuk pertanyaan "Show profile images on comments?" lalu SAVE

langkah kedua masuk menu Edit HTML dan centang box "Expand Widget Templates"

Lalu cari kode dibawah ini

Pahami dan sesuaikan codenya untuk template Anda.

Lalu Ganti code diatas dengan code dibawah ini

Nah tinggal SAVE dan lihat hasilnya deh.

Dan apabila ada pertanyaan silahkan lontarkan saja komentar disini, mulai sekarang saya semangat untuk membalas komentar-komentar Anda.

Terima Kasih.

Blogger Meluncurkan Fitur Stats (Statistics Blog)

Blogger meluncurkan fitur barunya di draft blogger yaitu statistics, nah apa guna statistics ini?. Gunanya adalah untuk memantau dan menghitung pengunjung blog kita, seperti berapa pengunjung hari ini, minggu ini bahkan bulan ini dan juga ada yang lain yaitu dari negara mana pengunjung, postingan yang paling banyak dikunjungi, traffic source, OS dan browser statistics.

Seperti dulu halnya saya sudah pernah menulis tentang statistics blog dengan shinystat dan fitur blogger ini lebih canggih dan gratis Anda gunakan di blogger karena ini fitur original dari blogger.

Nah bagaimana cara menggunakan fitur stats blogger ini ?

Pertama-tama masuk draft.blogger.com

Nah pada Dashboard draft blogger Anda akan menemukan menu Stats seperti gambar diatas.

Dan lihat dan amati statistics blog Anda.

Nah diatas adalah overview dari Stats Blogger dan pada halaman diatas terdapat sub menu yang sesuai fungsinya, seperti : Posts, Traffic Source dan Audience.

1. Stats posts

Pada bagian ini berfungsi untuk melihat halaman post dan pages yang sering di kunjungi dan juga hitungan kunjunganya.

2. Traffic Source

Traffic Source berguna untuk melihat dari situs dan URL apa visitor mengunjungi blog kita dan juga apa keyword yang dipakai di search engine untuk masuk ke blog kita.

3. Audience

Audience ini berfungsi untuk melihat dari mana pengunjung blog kita dan presentasi pengunjung dari browser dan OS.

Nah sedikit info bagi Anda semoga bermanfaat. Dan ingat fitur ini baru ada pada draft.blogger.com