tomodachi for blogger

Wah lumayan lama juga ngga di update neh :D

And thanks buat idotkontji yang sudah memberikan award buat saya. but akan saya kumpulkan dulu award-nya.hehheh

Seperti sudah saya post sebelumnya tentang free template “ tomodachi “ dari mr. RamblingSoul yang saya convert ke blogcepot. Alhamdulillah setelah melalui berbagai kendala akhirnya bisa saya share template tersebut. – walaupun untuk ie 6 tampilanya tidak sebagus seperti pada browser ie 7 atau 8, opera dan firefox.

Template ini pada halaman depanya di bagi ke dalam 3 kolom, sedangkan pada halaman postingan di bagi ke dalam 2 kolom.

lihat demo : tomodachi-template

Ganti Logo Header.

Untuk menganti logo, cari saja code/ url ini. – tulisan warna merah

#logo {
display:block;
background:url(http://i120.photobucket.com/albums/o190/jaloewig/tomodachi/logo.png) no-repeat;
height:58px; padding: 5px 0 0 62px; font-family:"Trebuchet MS", Verdana, sans-serif; font-size:24px; width: 175px;
margin:35px auto 0 auto;
color: #F3F3F3;
}

dan ini

#logo:hover {background:url(http://i120.photobucket.com/albums/o190/jaloewig/tomodachi/logo2.png) no-repeat;}

Gunakan pengolah gambar semisal photoshop untuk mengedit atau membuatnya, kemudian save dengan format png transparent.

kemudian cari kode html  di bawah, ganti tulisan Tomodhaci dan A free Css Template

<h1 id='logo'><a expr:href='data:blog.homepageUrl'>Tomodachi</a><span class='slogon'>A Free CSS Template</span></h1>

Style Post

Blockquote, ol dan ul. lihat demo.

Untuk membuat Blockquote gampang koq, jika biasa postingan mengunakan editor di blogspot gunakan tool yang bergambar seperti ini.

Sedang untuk menambah sumber reference dari blockqouite, tambahkan saja tag city pada penulisan Edit Html – editor blogspot, contoh.

<blockquote>   <p>Dan perjuangan adalah pelaksanaan kata-kata, … pelaksanaan kata-kata <cite>- Iwan Fals dan Kantata Taqwa </cite></p>

hasilnya akan seperti ini.

Dan jika ingin seperti ini.

gunakan tag blockquote blockquote class="extract”  seperti ini.

<blockquote class="extract">   <p> tulisan yang di blockquito <cite>- Blockquote with .extract class</cite> </p>

Shopping Cart

Yang menarik dari template ini adanya tab “shopping-cart”, pasilitas untuk menjajakan sebuah produk. lihat demo.

Untuk donlot templatenya silahkan lihat di c-templates ( red. sekalian promosixxxx )

Blockquote dan Pullquote

Pastinya dalam membuat sebuah postingan, kita tidak asing lagi dengan tag html <blockquote>, atau Sintaksnya  adalah

<blockquote><p> kutipan disini atau Kalimat yang di-quote</p> </blockquote>.

Maka yang akan terlihat di browser untuk tag <blockquote> standar, di tandai dengan tampilan text yang agak masuk ke dalam paragraph ( indent baik kiri maupun  kanan).

Dalam Editor Post Blogger view Compose, elemen html ini telah di sediakan toolnya, yang di wakili dengan gambar berbentuk tanda kutip (“ ).

Tujuan mengunakan blockquote sendiri pada dasarnya untuk memblock tulisan yang kita kutip dari sumber lain. Namun tak jarang ,  blockquote juga di gunakan oleh sebagian besar orang hanya untuk menonjolkan penekanan atau menarik  fokus sang pembaca pada  tulisan  yang dianggap manis oleh penulisnya.

Style Blockquote

Yang  sering saya dapati , ketika mendonwload sebuah free template, free blogger template atau mengunjungi sebuah blog teman. Banyak sekali gaya yang unik untuk menampilkan tag html <blockquote>  ini.

seperti :

Tanda kutip mengunakan sebuah background-gambar di samping kiri, font-style  italic, agar kutipan masuk kedalam paragraf di gunakan property padding-left  dengan nilai kurang lebih 60px.

Tanda kutip mengunakan dua buah gambar, pembukaan dan penutupan. property padding-left dengan nilai kurang lebih 50px.

 

Blockquite mengunakan sebuah border-left sekitar 2px.

 

Blockquite mengunakan sebuah border-kiri dengan ukuran yang sangat ektrem.

 

Super kreatifiti.

 

Pullquotes

Sebenarnya selain Blockquote adalah  istilah lagi dalam reperence web, yaitu  yang dinamakan dengan “ Pullquotes “.

Pada dasarnya antara Blockquote dan Pullquotes hampir mirip dalam tampilannya, cuman  perbedaannya terletak pada;  jika blockquite di gunakan untuk mengutip atau mengambil teks dari sumber , blog dan  web lain, maka pullquoites di gunakan untuk  menarik fokus pembaca dengan memberikan sebuah frame  pada tulisan, biasanya dalam media cetak sangat jelas sering kita temukan.

contonya seperti ini.

Dan Pullquotes tidak memiliki tag html seperti <blockquote>. Walaupun demikian, dalam prakteknya sering kali saya tidak bisa membedakan tampilan mana blockquote  mana Pullquotes. dan sering kali juga saya mengunakan tag blockqoute pada tulisan saya sendiri ( bukan di sumber lain… ya gitu dech :D ) .

Bagaiaman cara membuat gaya blockquote

But untuk kali, saya hanya bisa memberikan reperence tutorial tentang membuat style blockquites yang menurut saya sangat bangus untuk di pelajari. yaitu di mempercantik-blockquote-dengan-css.

atau untuk tutorial bulenya bisa di lihat di

simple-css-blockquotes-and-pullquotes,

six-ways-style-blockquotes,

block-quotes-and-pull-quotes-examples-and-good-practices ,

atau cari saja sendiri via abah google :D.

Ayo ! Promosikan Artikel kamu Di blog ini

Adanya " community link feed "  sudah sejak lama saya rindukan keberadaanya di blog ini. Awalnya sih saya lihat fitur “ community link feed “ tersebut adanya di www.psdtut.com . cuman dulu saya masih binggung cara bikin form-nya, karena ia membutuhkan juga sebuah database yang hanya di miliki oleh blog cms. namun saat  saya lihat form  dengan pengertian dan tujuan yang  sama ada juga di work.blogspot.com, saya langsung bergairah ingin memasang nya pada blog ini.

( red. bisa anda lihat di bagian bawah sidebar kanan blog ini )

Apa arti community link feed ?

Secara harpiah community link feed mudah di terjemahkan, namun untuk arti yang sesungguhnya, secara jujur saya pun belum memahaminya. dan seperti saya jelaskan di atas,  idiom " community link feed " ini saya dapatkan di psdtut.com. dan bila kita tengok di work.blogspot.com , lain lagi penggunaan  istilahnya, walaupun tujuan dan maksudnya sama.

Terus apa kegunaannya ?

Kegunaanya yang paling terasa sih pada pemilik blog yang ingin blognya melakukan promosi , agar mudah di temukan dan banyak di kunjungi. Dengan cara mendaftarkan atau mengirimkan judul artikel, link url artikel dan sedikit keterangan artikel, maka otomatis saya akan menambahkan-nya pada elemen atau fitur  “ Community link feed “ tersebut.  ( lebih ampuh dari pada tukeran link , karena artikel anda ter -bookmark di delecio dan terdaftar di feedburner.  )

Dengan menyediakan space seperti itu, siapapun yang ingin melalukan promosi tulisannya tidak perlu lagi nyepam di komentar D.

Namun ada aturannya, atau mesti saya batasi artikel singkat apa saja yang boleh di daftarkan. karena kalau tidak demikian, saya takut nanti ada yang daftarin artikel cerita cabul , menghasut , sara, atau artikel jualan. :)

Link Artikel apa saja yang boleh di daftarkan ?

Ya tentunya artikel yang bisa mencerdaskan saya.. hehehe, yaitu tutorial ; Blogger, Adsense, trik seo, wordpress, photoshop, web desain, gadget for blog , facebook , free ebook .

Dan yang pastinya tidak boleh artikel bajakan :D .

Ayo buruan jangan sampai artikel anda basi dan di baca sendiri..  daftarin saja di   “Community link feed qu”.

Inga ! link langsung ke artikel anda.

Walaupun bukan yang terbaik, tapi pastikanlah jadi yang pertama

Membuat Halaman Blog Dinamis, bag kedua

Ini kasus lama yang pernah saya posting pada tahun 2007 lalu. Dan akhir-akhir ini mulai di pergunakan lagi semenjak banyak template blogcepot nyadur dari theme wordpress, terutama untuk layout berinisial “ M “.

Kalau dulu trik ini untuk menyembunyikan atau mengontrol gadget dari halaman depan dan halaman content page, maka perkembangan selanjutnya trik ini di gunakan untuk menyembunyikan atau mengontrol ukuran kolom dan sifatnya.

teorinya yang saya hapal dan pahami begini.

Pada dasarnya blogcepot itu terdiri dari beberapa halaman.

1. Halaman Depan  Atau FrontPage

2. Halaman Index Label

3. Halaman Archives Page

4. Halaman Postingan atau Item Pages ( red. readmore mengunakan hal ini ).

contoh :

A . Kolom, ukuran kolom  atau widget, di tampilkan pada  halaman depan namun disembunyikan atau ( berubah ) pada halaman Item Pages – Postingan. scriptnya mengunakan ini.

<b:if cond="data:blog.url == data:blog.homepageUrl"> di tutup dengan </b:if>

B. kolom atau elemen yang tampil pada halaman depan dan indek label, namun tidak tampil atau ( berubah ) pada halaman Item Pages – Postingan.

<b:if cond='data:blog.pageType != &quot;item&quot;'> dan di tutup dengan </b:if>

C. Pada halaman depan,  kolom atau elemen widget-nya tidak tampil namun akan tampil atau ( berubah ) pada halaman Item-Pages – Postingan.

<b:if cond='data:blog.pageType == "item"'> dan di tutup dengan </b:if>

Note :

Untuk kasus gadget atau widget dinamis pernah saya bahas pada bikin-blog-lebih-dinamis

Sekarang yang akan saya bicarakan adalah merubah ukuran kolom atau menyembunyikan kolom.

Ilustrasi halaman content.

Ilustrasi halaman depan atau front page

Yang perlu kita lakukan adalah menambah script untuk  ukuran kolom yang akan di tampilkan pada halaman depan , dan menyembunyikan untuk kolom Sidebar 1.

caranya.

Setelah script  ]]></b:skin> 

Tambahkan di antaranya ( kira-kira ) , script seperti ini.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {
width:400px;
}
.post-body img{
width:….px;
}
.post-body {text-align:justify;}
.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 .5em 1.5em 0;
  padding:0 0 1.5em;
}
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#Sidebar 1 { display:none;}
</b:if>
</style>

 

Yang artinya kira-kira begini.

Pertama : Hai kolom content ( main-wrapper ) saya tahu di Css –nya ( red. css atas ), ente sudah saya beri ukuran lebarnya 600 px, namun saya kepingin untuk halaman depanya ente tampil lebarnya 400 px.

Kedua : Hai Sidebar 1, ente cuman tampil pada halaman depan saja, untuk halaman content ente mesti sembunyi.. kacihan deh lu.

kalau kurang puas bisa  baca juga artikel dari  : ahn-bidikcom

Freemium-Theme

Template lagi. kali ini seperti janji kemarin, saya coba belajar mengconvert dari theme wordpress ke blogcepot. walaupun  belum tahu atau mencari  via abah google, apakah Theme freemium dari freebiesdock yang saya convert dan sedikit saya modifikasi ini sudah ada dan tersedia untuk kelamin blogcepot.

Special thank buat Bcom yang telah mengajari saya cara membuat page dinamis ala magazine, dan juga untuk tante amanda fazany yang template hack scriptnya saya copy paste :) dan modifikasi.

View : Freemium-Theme.