Bikin Blog Lebih Dinamis

kali ini saya akan menulis bagaimana blog kita biar lebih dinamis lagi, atau sedikit merasakan pengelola-an  halaman blog gaya website berbasis content manajemen sistem (CMS). 

terutama mengelola elemen  yang ada di halaman depan blog  berbeda penampilanya dengan halaman yang di buka.

Untuk lebih jelasnya silahkan saudara pilih  salah satu judul tulisan yang ada pada blog ini.kemudian saudara perhatikan perubahan tampilan di bagian sidebarnya. Maka elemen profile, shoutbox dan recent komentar akan menghilang. Sedang elemen lain, yaitu elemen feed yang saya beri judul Template, tiba-tiba Tampak pada halaman yang di buka.

Coba kembali kebagian halaman utama tekan tab menu bertuliskan Home di bagian atas.
Berbeda bukan ? pada hal saya lakukan ini pada satu blog, dan tak perlu membuat blog baru lagi.

Gaya page dinamis ini sangat cocok sekali, bagi blog yang contentnya ingin menampilkan banyak link seputar ilmu pengetahuan, kumpulan tutorial dsb. juga sangat cocok bagi saudara yang ingin menampilkan diri anda dan kesukaannya.- artinya dari pada bernafsu memasang semua  elemennya pada halaman muka, lebih baik jika di bagi pada halaman lainnya.- tinggal kita pandai-pandai memilah dan memilah, elemen mana yang cucok di tampilkan pada halaman depan, dan elemen mana yang pas buat tampil di halaman selanjutnya.

Cara Install.

untuk menginstall-nya ke dalam blog sangatlah mudah, kita hanya menambahkan dua baris kode pada setiap halaman elemen yang di tambahkan atau yang terpasang.

Pertama : Menampilkan elemen hanya ada pada halaman frontpage atau halaman depan.

Pilih salah satu elemen yang hanya tampil di halaman depan blog, misalkan saya memilih elemen text  kemudian buka Template->Edit Html dan jangan lupa tandai kotak kecil di samping tulisan Expand Template Widget. kemudian cari tulisan atau kode elemen Text1. setelah ketemu tambahkan dan letakan dua baris kode pada posisi seperti tulisan yang saya  beri warna.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>
</b:if>

<b:include name="quickedit">  

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

Kedua : Menampilkan elemen hanya ada pada halaman selanjutnya.

Setelah kita memilih elemen mana yang akan tampil pada halaman selanjutnya, lakukan seperti langkah pertama. kemudian tambahkan dan letakan dua baris kode pada posisi seperti di bawah ini.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>

<b:include name="quickedit">

</b:if>   

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

Mencari kode elemen atau widget.

Perlu saudara ketahui setiap menambahkan sebuah elemen   secara default blogger telah memberi nama sesuai dengan elemennya. misalkan elemen Html/javascript di namai Html, elemen Daftar Link di namai LinkList, elemen Teks di namai text, Label di namai label. dst.
Dan setiap menambahkan elemen yang sama misalkan elemen text, maka blogger menemainya dengan Text1, Text2, Text3 dst. Html/javascript jadi Html1, Html2,Html3 dst.

Atau agar mudah mencari elemen yang kita tambahkan, bagusnya saudara memberikan judul pada setiap elemen. misalkan untuk elemen daftar liks atau linklist dengan judul bloggrol dst.

Mudah bukan

Sumber tulisan dari :

1. adding-front-page-to-your-blog by Hoctro's place

2. related-posts by purplemoggy

Technorati tags: Blogs, New Blogger

Pasang Tab Menu di Bagian Top BAr

V r.Beta Yok kita lanjutin lagi tentang membuat tab menu, namun sekarang tab menu-nya kita taruh di bagian top bar- bagian atas halaman blog . seperti tab menu yang ada di atas blog Coretan Dingding ini.

Model gambar Tab Menu di atas, kodenya saya dapatkan dari cssplay.co.uk  sedangkan Template yang saya gunakan adalah MINIMA sebagai korbanya.

hasil akhirnya bisa kamu lihat di blog WS Rendra ini DEMO

INSTALL TAB MENU TOP BAR

Pertama : Biar seragam kita mesti install dulu New blogger baru dengan template Minima  atau Minima black .

Kedua  : Setelah beres meng-installnya, buka Template-> Edit Html. kemudian tambahkan kode di bawah ini,
di atas tag body.

lihat yg di pertebal sebagai kode tambahan.

#outer-wrapper{
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/* Use this with templates/template-twocol.html */

body {
background:#000000

Ketiga :
Kemudian geser kebawah, dan cari kode ini.

/* Outer-Wrapper
----------------------------------------------- */
#Outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

Setelah ketemu ganti dengan kode di bawah ini.

/* Content-Wrapper
----------------------------------------------- */
#content-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

Keempat :
Geser lagi ke bawah cari kode ini.

]]></b:skin>

Setelah ketemu masukan kode di bawah,
setelah kode ]]></b:skin> tersebut.

<style type="text/css">
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */
.menu1 {padding:0 0 0 155px; margin:0; list-style:none; height:35px;
background:#fff url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;} .menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px;
color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif);}
.menu1 li.current a b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button2.gif);}
.menu1 li a:hover b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif) no-repeat right top;}
</style>

Kelima :
Geser lagi ke bawah kemudian cari kode ini.

<!-- skip links for text browsers -->
   <span id='skiplinks' style='display:none;'>
     <a href='#main'>skip to main </a> |
     <a href='#sidebar'>skip to sidebar</a>
   </span>

Setelah ketemu masukan kode di bawah ini. setelah kode di atas tersebut.

<ul class="menu1">
<li><a href="#nogo"><b>Home</b></a></li>
<li class="current"><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>

Keterangan :
Ganti tulisan #nogo, dengan alamat link Url yang kamu inginkan. Misalkan http://blogkamu.blogspot.com/

Keenam:
Geser lagi ke bawah kemudian cari kode ini.

<div id='content-wrapper'>

Setelah ketemu ganti dengan kode ini.

<div class='clearfix' id='content-wrapper'>

Ketujuh :
Geser lagi kebawah kemudian cari kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->

Setelah ketemu ganti dengan kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
     <div style='clear:both;'/></div> <!-- end content-wrapper -->

Setelah beres coba tekan tulisan PRATINJAU. kalau telah sukses kemudian klik SIMPAN TEMPLATE.

PENJELASAN

Sorry ngga ada penjelasan apapun, karena saya juga ngga ngerti kenapa mesti seperti itu.

Jika gagal dalam pengeksekusiannya, coba periksa lagi semua kodenya, dan perhatikan tulisan peringatan dari pihak blogger. 

Adapun untuk tab menu-nya sendiri jika tampilannya kurang puas . kamu bisa mendapatkannya di blog-nya Kolom-Tutorial milik Kang Rohman.

Atau koleksi lainnya bisa kamu lihat di cssplay.co.uk

Technorati tags: Ngeblog, New Blogger

related post

V r.Beta Sebenarnya code tentang related post ini sudah ada dan ramai orang memakainya sejak tahun 2006 lalu, namun pada blog ini saya baru memakainya tiga hari yang lalu ...hiksss.. emang gaptek..

Akan tetapi biarpun terlambat, namun akhirnya aku pakai juga dan hasilnya sukses dan sangat senang sekali, karena blog ini ada penambahan "ehem" =)) , seperti pemilik blog lainnya yang sudah pada jago-jago ngeblog.

Cara kerja Related post sendiri, secara default bekerjanya  hiden alias tersembunyi dalam fronpage ( halaman depan ) blog kita, namun ketika pengunjung menekan salah satu judul pada postingan ( atau read more / pemengalan artikel ) maka  otomatis  Related Post dengan label yang sama akan menampakan dirinya ( hixhixhix hantu kale ).

Kalau masih binggung dengan tulisan saya ini coba tekan judul postingan  atau tulisan read more di bawah ini.

Dan coba lihat di bagian sidebar blog saya ada sebuah elemen baru dengan judul VR RELATIF.

kita pun bisa menaruh elemen Related Post-nya di bawah postingan atau di atasnya. terserah kita dan suka-suka kita untuk menaruhnya.

Install Related Post

Pertama :
buka halaman Template -> Edit Html dan jangan lupa tandai kotak di samping tulisan Expand Template Widget. Kemudian simpan kode di bawah ini sebelum tag </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Kedua :
Setelah memasukan kode di atas, kemudian cari kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Jika Susah mencarinya, gunakan pencarian pada browser yang kita pake. untuk FireFox dan Ie tekan berbarengan Tab Ctrl+F.

Setelah ketemu kode di atas ganti dengan kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Kemudian tekan tulisan Simpan Template.

Ketiga :
Sekarang masuk ke  Template -> Elemen Halaman, kemudian tambahkan sebuah widget atau elemen Html/JavaSricpt. dan masukan kode di bawah ini.
Namai atau beri judul Related Post.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Keempat :
Setelah beres pekerjaan di atas, sekarang kita Kembali buka  Template -> Edit Html dan jangan lupa tandai juga kotak di samping tulisan Expand Template Widget. Kemudian kita cari code widget atau halaman elemen yang kita tambahkan yang di namai Related Post tadi, atau dengan bantuan kotak pencarian cari tulisan Related Post.

dan setelah ketemu kode-nya, kita hanya perlu menambahkan dua baris kode yang saya tandai dengan huruf tebal dan di beri warna.

misalkan kode widget-nya seperti di bawah dan penambahan dua baris kode yang hurufnya di pertebal juga di beri warna.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<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>

Kemudian Simpan Template.

Pekerjaanya sudah selesai, coba kita periksa apakah berjalan dengan benar dan sesuai.

Note:
Sedangkan untuk jumlah yang akan di perlihatkan oleh RRelated Posts ini.Kita bisa merubahnya sesuai dengan jumlah yang kita inginkan.  kalau kita ingin merubahnya cari saja kode dalam langkah kedua di atas yakni tulisan ini ,  max-results=10. secara default akan tampil sebanyak 10 post, gantilah angkanya sesuai dengan yang kita inginkan.

Perhatian.

Tulisan di atas merupakan hasil terjemahan. Jika merasa kesusahan untuk di mengerti cobalah masuk pada sumber aslinya di blog purplemoggy ini. mudah-mudahan lebih simple dan cepat di pahami.

Sumber dari :

purplemoggy

Technorati tags: Blogs, New Blogger

Mengenal Margin dan Padding

V r.BetaSetiap kali mengedit halaman css blog kita , sering kita menjumpai tulisan margin dan padding. apa sih arti margin dan padding, dan apa kegunaan dan perbedaan antara margin dan padding untuk halaman blog kita.

Postingan ini atau pertanyaan ini, sebenarmya terlalu berat buat saya, karena telah memasuki wilayah teori, sedangkan saya tahu ngeblog dan ngedit-edit ala kadarnya, itupun template orang lain bukan buatan sendiri, dan seratus persen hasil dari otodidak.
Do you know otodidac ? seseorang yang mengandalkan insting ke timbang ilmu yang pasti, seorang yang bersandar dan berlindung di bawah KUHP trial dan error.

Akan tetapi saya akan coba tulis ini, dengan meng-gadaikan kemaluan saya,... eh rasa malu saya.

Untuk memudahkan pemahaman saya telah membuat ilustrasi berupa gambar seperti di bawah. ( jika ada yang tidak setuju harap acungkan tangan ).

Dalam hikayat lain :

Margin : Digunakan untuk mengatur batas atas (top), Kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen/kolom halaman web. atau The CSS margin properties define the space around elements.

Sintaks :

selector { property : value }
atau
Body {
     margin-top : value;
     margin-right: value;
     margin-bottom: value;
     margin-left: value;
}

bisa juga di singkat seperti ini.
contoh:

Body {
     margin:10px 5px 10px 5px;
}

/* menurut yang saya ketahui dari w3school.com urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung ) */

Untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk margin.

Lihat juga di www.w3schools.com 

PADDING : Padding mengatur batas antara garis border dan content ( isi ). atau padding hanya untuk mengatur batas atas, kanan, bawah dan kiri pada properti border saja.
The CSS padding properties define the space between the element border and the element content.

Sintaks :

selector {properti: value}
atau
.Class {
     padding-top:value;
     padding-right: value;
     padding-bottom:value;
     padding-left:value;
}

bisa juga di singkat seperti ini.
contoh:

.Class {
   padding:10px 5px 10px 5px;
}

/* sekali lagi urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung atau protes, demi kebaikan bersama ) */

Note :
biasanya kalau saya bingung mengatur nilai margin atau padding, saya langsung saja menyebutkanya. misal Margin-top: value; atau mengatur jarak sebelah kiri Padding-left:value;

sama seperti margin, untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk padding.

  Lihat juga di www.w3schools.com

SUMBER

1. Kupas Tuntas Css oleh Dominikus Juju

2. www.w3schools.com

Technorati tags: Belajar Css/Html

Kumpulan Software GRatis

V r.Beta Kalau lagi mumet, ngga ada ide dan inspirasi, kebiasaan sy dan mungkin anda juga, biasanya main-main ke blog na orang bule.

karena tidak  di sangkal lagi, jika informasi seputar teknologie dan internet, hampir 75 persen mereka masih menguasainya.

Seperti kemarin malem saya mendapatkan beberapa informasi yang manarik, dan sayang jika info ini, saya bookmark dan simpan sendiri. akan lebih baik jika di share, terutama bagi saudara yang belom mengetahuinya, diantaranya :

1. Free Online Image Editing : ini sangat cocok bagi kita yang ingin mengedit gambar, misalkan meng-crop atau resizer (mengedit ukuran) gambar untuk header kita, atau optimize images secara instan dll, secara online. karena banyaknya free online image editing ini, anda bisa memilihnya di snap2objects.com. mana yang lebih mudah dan sesuai dengan kebutuhan kita. ( info ini salah satunya, saya dapatkan juga di kujie2.blogspot.com )

2. Online Coloring : atau kita sebut saja program mewarnai gambar secara online. ini cocok bagi yg lagi jenuh atau bete, dan cocok sekali sebagai hadiah untuk anak, keponakan, adik kita untuk berlatih mewarnai gambar, karena beberapa gambar yang ada bisa kita donlot dengan cara klik kanan mouse pada gambar kemudian save image as. myfreecolouringpages.com

3. Best Freeware Desain Programs : kumpulan program desain grafis free yang saya pribadi recomendasikan. diantaranya, program image editing, ilustration, animation, 3d modeling & Cad, dan flash tools. untuk mengetahui lebih jauh tentang program di atas atau ingin mendonlotnya silahkan saja saudara pilih-pilih di  snap2objects.com . 

Technorati tags: Software Gratis

Website group band indonesia

V r.Beta Seberapa pentingkah bagi group band indonesia memiliki sebuah website dan sejauh mana kepedulian mereka dalam mengelola websitenya ?

Pertanyaan di atas sempat terlontar dalam pikiran ini, dan sebenarnya juga dink gwe lagi nyari untuk membuat postingan.. hehhehe , yang akhir2 ini gwe rasain susah untuk mendapatkan inspirasi.maka dengan semangat empat lima kemarin malem gwe sempat-sempatin mencari keberadaan situs mereka dengan bantuan Om google.

Dan hasilnya secara keseluruhan gwe sempat kecewa, dari segi pengelolaan conten sampe desainnya menurut gwe biasa-biasa saja, tidak sebanding bila di ukur dari segi kepopuleran dan banyaknya duit yang mereka miliki.

Btw… hehhehe ada namunya coy. dari beberapa group band yang sempat gwe kunjungi ada beberapa website mereka yang lumayan, dan ocehlah untuk nongkrong di blog gwe, tentu saja sesuai dengan selera yang gwe miliki tentang sebuah desain web, artinya pertimbanganya dan pemilihan nya sangat subjektif bro.

Diantaranya gigionline, sobatpadi, cokelat, slank, naff, kerispatih , serius band dan terutama yang paling gwe suka group burgerkill,  band cadas asal bandung yang justru tidak terlalu populer, tapi menurut gwe itu layout the real band.

Dan untuk berlaku adil , band-band lainya aku tulis dalam bentuk link tulisan saja. biar you tahu juga site mereka.

gigionline.com

Sobatpadi.net

Kerispatih.com

seurieus.com

Shelaon7.com

naffonline.com

slank.com

cokelat.net

burgerkill.com

website band lainnya :

1. www.peterpanband.com
2. www.unguband.com
3. www.radjaband.com
4. www.naifband.com
5. www.dewa19.com
6. www.nidji.boleh.com

Technorati tags: web layout, beautiful layout

Indonesia Beautiful Layout

V r.Beta Update, nemu lagi dua sebenarnya ada tiga tapi yg satunya lagi pas di kunjungi udah ganti themenya. dan maaf jika judulnya di rasa terlalu profokatif, sebenarnya itu hanya untuk kepentingan search engine saja. dan ini sy kumpulkan untuk bahan reperansi saya.

1.3daysafter.net

 

3daysafter.net

2.15june.com

www.15june.com

3.blogombal.org

www.blogombal.org

4.Avianto.com

www.avianto.com

5.lalightsindiefest.com

 www.lalightsindiefest.com

Technorati tags: Desain Inspiration

Leia dan warcraft

Hmmm... ternyata bw asik juga yach.. setidaknya aku mendapatin dua template yang menurut ku menarik .

Leia Templates

Kalau udah bosan dengan tampilan layout blog ini, mungkin pilihannya sebagai penganti, saya pingin coba blog yang di beri nama leia. karena awalnya template ini milik WP yang di adaptasikan ke dalam new blogger.

View  : demo

View  : donlot 

Posted by: freshbloggertemplates.blogspot.com

Warcraft Templates

Sedangkan yang di bawah ini, awalnya dari web templates yang di adaptasikan ke dalam new blogger. dulu sempat kepikiran ingin nyoba mengadaptasikan-nya. keliahatanya template ini asik banguet.

View : demo

View : donlot

Posted by: bloggertemplates.itmag.org

Technorati tags: New Blogger, Free Blogger Templates

Link Subscription Dan Open Id

Sebenarnya pihak blogger atau test laboratorium Blogger telah menerbitkan dua penambahan baru untuk para blogger mania.

Pertama : sebuah widget baru  link  Subscription feed atau link berlanggan bagi  para pembaca setia blog kita ke dalam halaman elemenya.

Untuk mendapatkan widget ini ikutilah petunjuknya.

1. kita harus masuk lewat Blogger Draf

2. Setelah mengisi blogger Id  seperti biasa buka template dan masuk  pada halaman elemen.

3 Kemudian tambahkan widget Link Berlangganan atau Link Subscribe ke dalam blog kita.

Kedua : Team laboratorium Blogger terus memperbaharui comment systemnya yang banyak di kritik ini. salah satunya penambahan Open ID pada comment systemnya, sebagai pintu komunikasi dengan platform blog id yang lain seperi Wordpress, live Journal dll.

untuk mengaktifkan :

1. kita harus masuk lewat Blogger Draf.

2. Kemudian buka tab Pengaturan dan tekan tab komentar, di samping tulisan Siapa Yang Berkomentar pilih Pengguna Terdaftar - termasuk OpenID. Setelah itu Simpan Pengaturan.

Info dari : Blogandweb

Technorati tags: Blogs, Belajar New Blogger

Menambah Kolom atau Multi kolom

Menarik sekali tutorial tentang menambah kolom yang di tulis oleh kang Rohman dalam blognya Kolom-Tutorial. Saya sangat menyukainya.
Namun untuk menambah kolom widebar atau multi kolom , seperti gambar di bawah. trik yang di gunakan untuk blog saya ini berbeda dengan cara yang di lakukan kang Rohman.

trik menambah kolom widebar di atas  berlaku  jika kita telah memiliki dua sidebar dalam float yang sama, misalkan keduanya di sisi kanan atau keduanya di sisi kiri.

Bagimana caranya ?

Langkah pertama di atas kedua code Css sidebar kita, masukan kode ini.  

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ }


#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */ }
nilai width sesuaikan dengan kedua sidebar yang telah kita miliki, jika kedua sidebarnya bernilai sama yakni 20%, maka nilai width widebar-wrapper nya 40%. dan ini berlaku juga jika kita mengunakan nilai pixel.
begitu juga untuk nilai Float-nya, apakah sisi kanan atau kiri. Dan terkadang kita pun perlu menyesuiakan nilai marginnya di setiap kolom, karena penambahan kolom widebar ini.

Setelah itu masukan  kode ini

<div id='widebar-wrapper'> <b:section class='sidebar' id='widebar' preferred='yes'> </b:section></div>

Simpan dan letakan di atas kode ini 

<div id='main-wrapper'>

setelah itu SIMPAN TEMPLATE dan lihat hasil penambahannya di Halaman Elemen.

Jika belum jelas anda bisa mengunjungi bloggeruniversity, sebagai sumber aslinya, pada label Css/Html tentang Widebar.

Menambah Dua Widebar.

Sekarang bagaimana jika kita ingin menambah kolom widebarnya atau Sidebarnya  seperti  gambar di bawah ?

 

Secara logika dan saya praktekan langsung dengan cara dan kode dari bloggeruniversity, berikut perubahan kecil pada css-nya dan menambahkan html-nya di bawan <div id='main-wrapper'> itu memang bisa.

Namun saya lebih tertarik dengan cara yang dilakukan oleh BloggerBuster.com dalam penambahan widebar atau Sidebar-Wrapper jenis ini.

Caranya ?  donlot  dulu Free Template Girly Web 2.0 di sini. Setelah itu buat blog baru  dengan layout template Girly Web 2.0 ini. tujuannya untuk kita bedah dan pelajari  isinya.

Setelah terinstall, kemudian cari dan pelajari kode ini.

#sidebar-wrapper { background: #f9e0e0
url(http://templates.bloggerbuster.com/girly_web_20/sidebar-bottom.gif) bottom left no-repeat;
width: 35%;
padding: 10px;
margin: 2px 0;
float: right;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float */
}


#sidebar-wrapper2 {
border-left: 1px solid $bordercolor;
width: 35%;
padding: 0 10px;
float: right;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float */
}


#sidebar-wrapper3 {
border-left: 1px solid $bordercolor;
width: 35%;
padding: 0 10px;
float: right;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float */
}


#sidebar-twocol-left {
float: left;
width: 155px;
margin-right: 10px;
}


#sidebar-twocol-right {
float: left;
width: 155px;
margin-left: 5px;
}

Jika sudah merasa paham dan ngerti maksudnya, coba kita terapkan ke dalam blog kita. dan harus di ingat variable border colornya yakni $bordercolor. karena setiap penyedia template bisa berbeda-beda dalam menamai variable. dan tentu saja sesuaiankan juga lebar dan margin pada blog kita. begitu juga dengan selector atau penamaan  sidebar h2, sidebar a, a:hover, sidebar ul, sidebar li. dst. Jika kita mengatur nilai dan propertinya  berbeda antara sidebar yang satu dengan lainnya. 

Jika sudah beres kita mengatur dan mensetting Css-nya, sekarang dalam template Girly Web 2.0 kita cari kode Html di bawah, pelajari maksudnya, jika sudah paham masukan dan ganti ke dalam blog kita.

<div id='main-sidebar-wrapper'>
<div class='snap_noshots' id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>


<b:section class='sidebar' id='sidebar-twocol-left' preferred='yes'>
</b:section>


<b:section class='sidebar' id='sidebar-twocol-right' preferred='yes'>
</b:section>


<div style='clear:both;'/>


<b:section class='sidebar' id='sidebar-two' preferred='yes'>
</b:section>


</div>


<div style='clear:both;'/>


</div>


<!--End Main Sidebar Wrapper -->
<div style='clear:both;'/>


Opssss ! terkadang ketika kita menerapkan kode di atas ada pesan peringatan bahwa kodenya tidak di tutup dengan benar seperti tag penutup ini </div>. Solusinya tambahkan saja tag penutup tersebut di samping tag </div> kode sidebar-wrapper terakhir . atau terkadang perlu kerja keras juga Bung !

Kolom Yang Sama Tinggi.

Tentang masalah ini, sebenarnya merupakan tulisan lama dari blog Didas, yang kemudian di pertajam lagi oleh kang Rohman. Akan tetapi itu juga mesti di sesuai dengan kebutuhan pada layout kita, kalau bagi blog saya sendiri seh dengan menambah javascript kolom sama tinggi, akan keliatan menjadi layout yang kaku.

Halaman Elemen Yang Berantakan.

Mungkin kita berhasil menambah widebar kolom ke dalam blog kita, namun ketika kita membukanya dalam Halaman Elemen, terkadang kita mendapatinya berantakan dan  posisinya kacau, maklum kita kan sama-sama orang otodidac, yang terpasak harus paham karena memilki blog .

Namun lagi-lagi saya harus acungi jembol dengan template yang di buat oleh BloggerBuster ini. ternyata untuk urusan tata letak Halaman Elemen, kendali dan solusinya ada pada kode ini. ( cari pada barisan kode Css terakhir dan pahami strukturnya ).

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
body#layout #header-wrapper {
width: 700px;
}
body#layout #outer-wrapper {
width: 700px;
}
body#layout #footer {
width: 700px;
}
body#layout #footer2 {
width: 200px;
}
body#layout #footer3 {
width: 200px;
}
body#layout #footer4 {
width: 200px;
}
body#layout #sidebar-wrapper {
width: 350px;
}
body#layout #sidebar2 {
width: 350px;
}
body#layout #sidebar-two {
width: 350px;
}
body#layout #main-sidebar-wrapper {
width: 350px;
float:left;
}
body#layout #sidebar-twocol-left {
width: 150px;
float:left;
}
body#layout #sidebar-twocol-right {
width: 150px;
float:right;
}
body#layout #main-wrapper {
width: 300px;
float:left;
}
body#layout #crosscol-wrapper {
width: 700px;
}
body#layout #footer-bottom {
width: 700px;
}


Dengan mengetahui logika struktur kode di atas, sekarang kendali tentang Template di new Blogger ada pada kita.

Bagaimana dengan menambah kolom di bagian Footer ?
Saran saya kalau udah ngerti dengan logika di atas, donlot saja Template di BlogandWeb yang multi kolom pd bagian Footer-nya.
Satu hal yang perlu di ingat dalam penambahan kolom, salah satu kuncinya jangan menandai kotak kecil di samping Expand Template Widget. karena dengan cara demikian kode Html-nya akan keliatan Simple.  

Technorati tags: Css/Html, New Blogger