Blogger Tutorial

Showing posts with label Blogger Hack. Show all posts

Trik Jitu Mempercepat Loding Blog

Trik jitu menambah atau menaikan peforma blog ( kecepatan loding blog ) ini sebenarnya sangat simple, sepele dan logis. Namun justru itu kadang hal hal yang sepele suka luput untuk kita perhatikan.

Apa yang saya maksud kan di sini ialah ; jika kita mempunyai banyak file javascript, sering kali yang kita lakukan menyimpan dengan url ter-sendiri ( url file javascript -nya berbeda-beda ) walaupun tempat penyimpananya sama. maka yang terjadi saat loding blog, browser akan meminta dan menerima javascript satu persatu dengan cara dicicil. Tidak demikian halnya jika kita mengabungkan file-file javascript tersebut dalam satu file dan dalam satu url, maka secara logika browser akan menerima paket javascript yang kita miliki secara bersamaan. Sangat simple, sepele dan logis bukan ?

Cara seperti di atas telah saya aplikasikan pada blog ini dan terbukti menambah score sampai 4 (empat) bit di Yslow

Trik Jitu

Jika anda peduli dengan blog ke sayangan anda. Mari kita praktekan sekarang juga.

» Gunakan browser Firefox, kemudian unduh dan install pengaya { add-ons ) FireBug dan Yslow. ( sesuia kan dengan versi Firefox anda ).

» Setelah keduanya terinstall klik ikon Firebug di pojok kanan bawah browser ( icon mirip binatang kecoa ).

» Dalam tab menu pilih menu Yslow, kemudian klik Grade untuk mengetahui nilai status score blog kita ( ingat score anda berapa ).

» Masih dalam Yslow, kemudian klik menu Tool. Setelah itu pilih dan klik tulisan All JS Minified ( tool compres javascript).

» Dalam jendela yang terbuka banyak javascript yang telah di compres, pilih javascript yang ingin anda gabungkan. copy paste ke dalam program notepad. kemudian save as ke dalam format file JS ( contoh pada kolom file name di isi : myscript.JS . kemudian pada Save as Type pilih All File ).

» Upload file javascript tersebut ke tempat biasa anda menyimpanya. ( saran saya simpan di Code Google ).

» Sebelum mengganti dan menghapus javascript lama dengan file javacsript yang baru, di backup dulu terutama url javascript.

» Setelah beres dan tidak ada masalah, coba test kembali peforma blog anda di Yslow – klik Grade, dan perhatikan berapa bit score angkanya, berapa score perubahannya.. dan laporkan di sini kepada saya.. heheheh..

[..]

Sekali lagi tentang intro img – : gambar : -

selamat malam,
mau tanya.. untuk bikin intro page yg tanpa flash bagaimana kode dan tutorialnya? jadi memakai gambar dan cukup satu tulisan saja..saya sedikit bingung..karena hanya ada tutorial utk flash saja..

Pertayaan di atas saya dapati via form comment kemarin.

Dan sebenarnya untuk memasang intro img sama saja dengan pasang intro flash cuman objeknya saja yang berbeda. tapi baiklah akan saya jelaskan di sini. Dan silahkan anda modifikasi sesuai keinginan anda.

Pertama:

Siapkan dulu file img-nya, ukuran tinggi saya sarankan kurang dari 400 px, karena jika lebih dari itu akan munculnya tab scroll dan menurut saya kurang bagus. Sedangkan untuk ukuran lebar kurang dari 960 px, untuk resolusi monitor 1024 px. namun lebih baik jangan terlalu besar ukuran pixel-nya biar cepat untuk di loding. Untuk format file img Jpg dan Gif

Setelah beres simpan img file-nya pada img hosting seperti picasa, photobucket, imgus dll.

Kedua.

Tandai tulisan Expand Widget Templates.

Kemudian cari Html

<body>

Ganti dengan script di bawah.

<body>
<div id='intro'> 
<div align='center'> <p style='padding:50px 0 20px;'> 
<a expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=4&quot;'>
<img alt='Desert' border='0' height='210' 
src='http://gambarkamu.jpg' 
style='border-bottom: 0px; border-left: 0px; display: inline; 
border-top: 0px; border-right: 0px' title='Desert' width='300'/></a> </p>
<p style='padding-top:5px;font-size:18px;font-weight:bold;color:#fff;'>
<a expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=4&quot;'>
skip intro or login to blog</a></p> 
</div> 
</div>

Ganti http://gamabrkamu.jpg yaitu url img di atas dengan alamat gambar yang anda simpan . sesuaikan juga untuk ukuran width dan height dengan ukuran gambar yang anda miliki.

Setelah itu cari kode

<b:includable id='main'>

kemudian masukan di bawahnya css berikut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#navbar-iframe{display:none; height:0; visibility:hidden}
body {
background-color: #000000;
background-image: none;
}
#intro {
text-align:center;
margin:auto;
padding:auto;
}
#outer-wrapper{display:none;}
</style>
<b:else/>
<style>#intro{display:none;}</style>
</b:if>

Setelah itu di atas kode

]]></b:skin>

masukan css berikut

body#layout #intro {display:none;}

Pratinjau dan Save

Quote of the day:
Allah Yang Maha Mulia dan Maha Besar berfirman : “Apabila hamba-Ku senang bertemu dengan Ku, maka Aku senang untuk bertemu dengan-Nya, apabila ia benci bertemu dengan-Ku, maka Aku benci bertemu dengannya. – hadis qudsi.

[..]

Lagi Tentang Meratakan Img Dengan Post-Body

Lagi pertanyaan masuk tentang “ meratakan img dengan post-body “, via my facebuuk. Pada post sebelumnya saya lebih menyarakan untuk mendownload template Hybrid News, karena trik yang saya gunakan pada blog bloon mengunakan apa yang ada pada template hybrid news tersebut.

Baiklah ada beberapa yang perlu di lakukan agar img dengan post-body kurang lebih sejajar ( pada halaman depan-nya saja ).

Langkah Pertama

Memasukan script read more otomatis versi 3 ( versi sebelumnya juga bisa red. )

simpan di bawah tag;

]]></b:skin>

Javascript, using GeSHi 1.0.8.8
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 140; summary_img = 140; img_thumb_height = 110; img_thumb_width = 110; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 20px 5px 0px; margin:-50px 0 0 0 !important;"><img src="http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 20px 5px 0px; margin:-50px 0 0 0 !important;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
 
 
//]]>
</script>
Parsed in 0.019 seconds at 73.30 KB/s

( gunakan script read more otomatis di template Hybrid News, jika script di atas tidak berfungsing )

kemudian ganti script Html ini

Javascript, using GeSHi 1.0.8.8
<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Parsed in 0.005 seconds at 27.82 KB/s

dengan script berikut ini

Javascript, using GeSHi 1.0.8.8
<div class='post-body entry-content'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Parsed in 0.008 seconds at 52.12 KB/s

Langkah Kedua :

Tambahkan margin left untuk .post h3 + 140px ( merupakan syntax CSS untuk judul artikel - bisa saja untuk template lain adalah post h2 atau post h1 red )

CSS, using GeSHi 1.0.8.8
.post h3 {
  margin:.25em 0 0;
 
dst 
 
}
Parsed in 0.009 seconds at 4.81 KB/s

menjadi

CSS, using GeSHi 1.0.8.8
.post h3 {
  margin:.25em 0 0 140px;
 
dst
 
}
Parsed in 0.009 seconds at 5.35 KB/s

Langkah Ketiga :

Karena ini hanya pada halaman depan saja, untuk menormalkan kembali pada halaman postingan maka kita harus menambahkan script css ini. ( simpan di bawah javascript read more otomatis di atas red ).

CSS, using GeSHi 1.0.8.8
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post h3 { margin:.25em 0 0 0;
 
dst
}
</style>
</b:if>
Parsed in 0.009 seconds at 12.96 KB/s

Quote of the day:
Tuhan Yang Maha Mulia dan Maha Besar berfirman : “Barang siapa yang sibuk membaca Al Qur’an dan dzikir kepada Ku dengan tidak memohon kepada Ku, maka ia Aku beri sesuatu yang lebih utama dari pada apa yang Aku berikan kepada orang yang minta – hadist qudsi

[..]

Page Navigation Google dari Abu farhan

Ada satu aksesories jenius yang tadi siang saya tambahkan pada blog boogle ini , aksesories tersebut bisa di lihat teman teman di bawah halaman depan blog. ( mengantikan Older – Newer And Home )

Yes keliatan cantik dan sangat profesional bukan ? sebuah page navigation yang di buat hampir seratus persen menyerupai numbered page ala om google. Page navigation tersebut di buat oleh Abu Farhan . ( Jazakumullah khairon ya akhi ) .

Siapa Abu Farhan itu ?

Masih ingat tentang “ The best Hack – Memodifikasi Daftar Isi atau SiteMap “ yang dulu saya tulis. Nah itulah orang-nya. Dua hari kemarin boogle sempat mengunjungi blognya lagi. dan membaca tutorial modifiaksi atau tepatnya menyempurnakan bug / masalah pada sistem kerja Numbered Page Navigation yang pertama di buat oleh Muhammad Rias.

Tampa mengurangi rasa hormat apa yang telah di lakukan oleh muhammad rias untuk memecahkan kebuntuan tentang page navigation yang dulu cuma di miliki oleh blog wordpress, Namun sejak awal saya sudah merasakan ada ke anehan pada kerja hack ini, cuman boogle yang oot ini tidak tahu apa masalahnya, dan merasa ngeh juga ngerti setelah membaca tutorial Abu Farhan “ Page Navigation for Blogger (Problems Solved) “. ada dua penjelasan manarik dari beliau, kenapa page navigation sedikit ada masalah. yang pertama; karena secara default blogger tidak ramah untuk membuat banyak postingan pada hari yang sama, ini sangat berpengaruh pada kinerja page navigation yang tidak tepat. red. kasusnya hampir mirip dengan problem tanggal yang saya posting “ Menampilkan Tanggal Pada Hari Yang Sama “. yang kedua: masalah pada label, jika kita memiliki banyak tulisan dalam satu kategorie maka saat kita klik label tersebut akan muncul lebih dari maksimum posting per halaman ( keterangan yang Jadul pernah di pecahkan oleh Suhu Ramani ).

Jika ingin mengetahui penjelasan yang valid bisa cek langsung ke blognya Abu Farhan.

Sedikit masukan dari boogle, jika ingin menambah page navigation tersebut simpan scriptnya di atas tag </body> seperti yang dilakukan oleh blogger plugin, namun untuk javascriptnya simpan seperti yang Abu Farhan lakukan, jadi javascriptnya tidak perlu di simpan di url lain. ini menurut boogle labih ringan dan membantu saat di loding.

Akhir Kata

Sekali lagi Jazakumullahu buat akhi Farhan yang telah membuatin boogle page navigation ( test rendering ie6,7, 8, sapari,3.03, opera 9.64, FF 3.5.3 makyusss ), cuman kemarin ngga pesan gambarnya boogle ( Bo ) bukan google ( Go ).. heheheh nawar :D , tapi Insya Alloh kapan-kapan akan saya re-edit gambarnya.

[..]

Pasang Animasi Intro Flash Di Blogger

Update “ pasang animasi intro flash di blogger “ : Akhirnya setelah boogle tulis tengtang “Pasang Intro Flash di Blogger “, ada masukan trik dari suhu Herro, trik yang boogle pikir 99% sangat layak dan valid untuk teman teman pergunakan. – dan secara pribadi boogle sangat berterima kasih sekali atas masukan dari kang herro.

Beginilah caranya.

Sebenarnya trik ini masih prematur , namun untuk sekedar sharing dan mudahn-mudahan menjadi pemicu bagi master dan para suhu blogger untuk membahas cara pasang intro flash yang lebih layak dan valid, atas dasar pijakan itu, maka boogle coba memberanikan diri untuk mengulasnya .

Untuk demo bisa teman boogle lihat di blog ini Paribasa

Mempersiapkan File Flash.

Untuk mempersiapkan file flash sebagai intro-nya, ada beberapa cara yang dapat teman boogle lakukan. di antaranya menggunakan program populer seperti adobe flash, swish dll. - pastikan file yang kita buat ukuran byte nya sekecil mungkin, jika ingin menggunakan sound/suara sebagai musik latar belakang atur format-nya ke midi file, jika menggunakan format Mp3 atau Wav kompresi file –nya dengan tool cool edit dll.

Untuk yang instan , teman boogle dapat memangfaatkan bantuan om “ boogle “ eh “ google “ dengan kata input “ free intro flash “ dsb.

Setelah file intro flash –nya di buat atau tersedia simpan di tempat penyedia layanan hosting. kalau mau yang gratisan menurut kang firdaus bisa coba menyimpanya di fileave.com atau fileden.com.

Cara pasang Intro flash – Trik dari Kang Herro.

Buka tab Edit Html dan tandai/centang tulisan Expand Widget.

1. Masukan kode berikut tepat di bawah <body>

<div id='flashintro'>
<div align='center'> <p style='padding:50px;'> <object height='340' width='150'> <param name='movie' value='MYFLASH.swf'/> <embed height='410' src='Url Flash' width='560'> </embed> </object> </p><p style='padding-top:5px;font-size:18px;font-weight:bold;color:#fff;'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'>skip intro</a></p> </div>
</div>

Catatan : Ganti url flash ; dengan alamat / url flash yang anda simpan. sesuaikan juga nilai height dan width dengan ukuran flash anda.

2. Selanjutnya cari tag <b:includable id='main'> - atau bisa dengan ID yang lain . Letakkan kode berikut tepat dibawah tag tersebut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {
background-color: #000000;
background-image: none;
}
#flashintro {
text-align:center;
margin:auto;
padding:auto;
}
#outer-wrapper{display:none;}
</style>
<b:else/>
<style>#flashintro{display:none;}</style>
</b:if>

Catatan : untuk menghilangkan intro flash di dalam halaman Page Elemens , cari tag ]]></b:skin> , dan sebelum tag tersebut di atasnya masukan kode ini.

body#layout #flashintro {display:none;}

kemudian Save Template

Pengaturan Untuk Halaman Depan ( tab Home )

Selanjutnya jika teman boogle mempunyai tab menu/ navigasi maka halaman depan-nya yang biasa di wakili dengan menu Home/depan/beranda mesti di atur ke halaman search/label/?max-results=4 atau 5/6 dst yakni;

<a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'> Home </a>

Begitu juga untuk link Home di Page Navigation –nya ( yang ada di bawah Older – Home – Newer ), untuk Home –nya atur dengan link di atas.

untuk mencoba-coba teman bloogle bisa menggunakan url flash boogle.

http://santi23.fileave.com/mudik%20yuk.swf

piuuuuh tidak lupa boogle ingin mengucapkan

Taqabalallaho Minna wa Minkum

Selamat I’dul fitri Mohon maaf bila ada salah salah kate

[..]

Bagaimana Menambah Avatar-Comment bagi Template Non Standard

Walaupun sangat terlambat dan mesti menunggu blogger ulang tahun yang ke 10 dulu , namun bagi saya dan mungkin jutaan pengguna blogspot di seluruh dunia merasa senang dengan penambahan avatar pada tampilan komentarnya. Dengan demikian kita tidak perlu menggunakan javascript -hack pihak ketiga atau menggunakan avatar dari mybloglog.

Namun penambahan avatar pada komentar ini tidak berjalan mulus untuk semua pemakai, karena ada sebagian teman-teman yang tidak menikmati avatar komentar pada blognya masing-masing. Dan ini menurut saya sangat wajar karena ada sebagian teman-teman yang suka mengedit-edit pada bagian ini dan banyak juga penyedia free template yang tidak mengantisipasi penambahan ini.

Untuk itu bagi teman-teman yang tidak melihat avatar-comment bisa coba menggunakan trik sederhana ini, yang saya dapat kan dari bloggerbuster.

Menambah Script Untuk Menampilkan Avatar

Langkah Pertama :

Cek dulu pada tab Settings – Comments kemudian periksa di samping “ Show profile images on comments? “ pilihanya pada “ Yes” . dan sekarang periksa pada post commnets-nya apa avatarnya sudah keliatan.

Langkah Kedua :

Jika langkah pertama belum tersedia/ada, kita bisa mengedit template kita pada bagian Html –nya. Buka tab Edit-Html kemudian cek/centang/tandai tulisan Expand Widget Templates.

Kemudian cari script di bawah ini.

<dl id='comments-block'>

Jika anda tidak menemukan kode di atas coba cari script ini.

<div id='comments-block'>

Setelah script di atas ketemu kemudian ganti dengan kode berikut ini.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Note : intinya sebenarnya ada pada kode expr:class='data:post.avatarIndentClass'

Setelah itu kemudian cari kode ini.

<a expr:name='data:comment.anchorName'/>

Kemudian di atasnya masukan/simpan kode berikut ini.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Kemudian Simpan Template ( Save Template )

Apa Selanjutnya ?

Walaupun kita sangat senang dengan penambahan ini, namun saya kira dan setuju bangeut dengan pendapat amanda. bahwa penambahan avatar ini masih menyisakan pere buat tim work yang ada di belakang “ blogger “ . karena sebagaimana kita tahu tampilnya avatar ini hanya tersedia untuk pengguna akun blogger/google, tidak untuk pengguna yang lain seperti Open Id dll.

Memang sangat di sayangkan untuk penantian selama 10 tahun. but kita tunggu saja dengan sabar.. hehueueue.

Update

Dulu saya pernah nulis tentang “ Membuat Halaman Komentar Menjadi Dua Kolom “ . Tulisan tersebut ( kode tersebut ) telah saya update dan bisa menampilkan avatar-comment.

Jadi yang terlanjur menggunakan silahkan update kode scriptnya.

[..]

Bagaimana Cara Membuat artikel terkait atau related posts

Related Post atau Postingan Terkait itu sendiri banyak versi. Namun tujuannya tetap sama yakni menampilkan artikel terkait menurut kategorie atau label dari tulisan yang sedang kita baca. Dan ini biasanya sangat membantu jumlah PageView ( halaman yang di baca ) pada blog kita, Terutama bagi visitor yang ingin menggali lebih dalam artikel lainnya yang kita tulis.

Untuk tata letak bagusnya “ Related Post “ di simpan tepat bawah artikel, atau sedikit jarak dengan artikel.

* Perhatian

Dan perlu di ingat Post terkait ini akan berjalan atau terlihat jika artikel kita mempunyai label/kategorie/tag yang sama dari beberapa tulisan.

Menambah Script Artikel Terkait “ Related Post “

Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.

1. Login/masuk ke Blogger.com jika belum log in.

2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.

3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”

4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>

5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna

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

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>

</b:if>

</b:loop>
</b:if>
</span>

6. Sekarang cari kode baris post-footer berikut ini.

<div class='post-footer-line post-footer-line-3'>

kemudian masukan di bawahnya script ini.

<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Simpan Perubahan ( save template ).

Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}

Untuk List

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

di tulis dari berbagai sumber.

usuariocompulsiv
templatesparanovoblogg

[..]

Menampilkan tanggal postingan pada hari yang sama

[..]

The Best Hack : Membuat Daftar Isi atau Sitemap

[..]

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 != "item"'> 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.

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

[..]

RecentPost dan Plus Gambar

Setelah cukup lama mengutak-atik gadget bloglist, akhirnya saya menemukan widget baru yang bisa menampilkan feed berikut gambarnya ( recentpost thumbnails ), yang dalam beberapa hal saya setuju, widget feed thumbnails ini jauh lebih mudah untuk saya konfigurasi dari pada gadget bloglist.

eh tidak ding, karena meskipun mudah pada awalnya saya cukup repot juga xixixi, karena widget ini di tampilkan atau mengunakan table, yang saya sendiri kurang pamiliar dengan html table. tapi setelah mencoba mengutak-atiknya dan mencari reperensi tengtang table ini, akhirnya saya bisa juga memainkan sedikit jurus- jurus css untuk properti table.

ilustrasi recentpost thumbnais.

Jika anda tertarik ingin memasangnya, silahkan lakukan prosedur berikut ini.

1.Buka tab Edit Elemen kemudian pilih atau tambahkan gadget Htm/Javascript.

2. Setelah itu masukan script di bawah ini.

3. Stop !!! jangan di save dulu :) . karena kita harus mengetahui beberapa hal pada script di atas.

note 1

Script ini menjelaskan jika postingan kita tidak mempunyai sebuah gambar, maka gambar ( url gambar di atas ), akan mengantikanya. dan gambarnya akan di pilih secara acak ( true ).

note 2

Script ini menerankan lebar tabel, jarak antar cell, warna border, latar belakang cell. yang dapat anda konfigurasi dan di sesuaikan dengan lebar sidebar dan warna blog.

note 3

Script untuk tampilan lebar dan tinggi gambar. – kita bisa konfigurasi ulang.

note 4

Tampilan font, warna text link, text tebal.

note 5

Script tentang jumlah descriptsi recent post yang akan di tampilkan = 50; + .. , ukuran font, warna font, dan jumlah recentpost-nya = 5 ; ( bisa lebih bisa kurang )

note 6

Url blog yang akan di tampilkan recenspostnya , - home-page = http://bloganda.com/

note 7

Alamat kode javascript yang mengatur secara keseluruhan widget recentpost thumbail ini. dan salah satunya untuk kasus terntentu kita bisa mengatur parameter feed / recent post yang akan di tampilkan. – ( tergantung kebutuhan ).

a. misalkan, saya hanya ingin menampilkan recent post dalam label atau categorie artikel “ Photoshop “ saja.

pertama buka kode javascrip dengan program notepad. kemudian cari dan ganti kode ini.

feeds/posts/default?max-results=

dengan paramter url feed ini.

feeds/posts/default/-/Photoshop?max-results=

Setelah saya menyimpanya dengan nama file recentphotoshop.js dan uploadnya.

( tentang mengatur parameter feed pernah saya tulis di recent post label. )

Selain itu ada lagi yang bisa ganti beberapa kode pada file javascript ini. seperti menganti tabelnya menjadi satu colom dua row. yang menghasilkan gambar feed-nya di atas, sedangkan posisi keterangan feednya di bawah.

ilustrasi gambar.

otre deh selamat berkreasi dengan widget recent post barunya.

source : mlxperience

[..]

Bagaimana membedakan ukuran antara Main Post Dan Mini Post pada template species baru

Kena dech akhirnya saya dapat PR jugaxx dari Bcom … tadinya sempat males ngerjain-nya..hihihihi. but karena sudah pesan via comment box beberapa kale, mau tidak mau harus membalasnya juga.

Inilah pere yang harus saya balas.

Bang jawaban tentang membuat width posting dihalaman depan dengan halaman sub berbeda tolong dijawab, ya.

Makasih

Kalau ngga salah tebak mungkin pertanyaaan dari bcom ini, tentang layout mangga-cigazine . view : demo.

Benarkah ? Kalau benar tebakan saya . maka saya perlu jelaskan di sini, bahwa layout itu sumber source codenya sebagian saya ambil dari template “ Cellar Heat “ – mas Agus MU. Jadi jika ingin template minima postinganya seperti yang di miliki “ Cellar Heat “ maka donlot dulu template “ cellar heat “ tersebut. di sini.

Dan seperti kata-kata bcon sendiri trik yang saya gunakan ini adalah pake ilmu CSS ( contek sana sini ) atau SEO ( Sistem Edit Obrak-abrik ).

Install source code Cella Heart Ke Minima Template

Setelah beres mendonlot, buat blog baru dan pilih template minima untuk kita jadikan kelinci percobaan-nya. kemudian buat postingan sebanyak 3 (tiga ) postingan.

Buka tab edit html ( biarkan saja kosong atau jangan di tandai kotak kecil di samping tulisan Expand Template Widget.)

ganti ukuran Outer-wrapper menjadi 730px.

#outer-wrapper {
width: 730px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

kemdian cari kode html ini.

Setelah itu ganti kode di atas dengan kode html dari template “ Cellar Heat “ yang di mulai dari .

dan berakhir sampai tag penutupnya

</b:includable>
</b:widget>
</b:section>
</div>

* red . atau berakhir di atas kode html : <div id='column02'>

Langkah selanjutnya menganti kode Css : #main-wrapper dari template minima yakni.

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

dengan kode css untuk main-post dari “ Cellar Heat “ yaitu. di mulai dari.

/* first post home page */
#post-one {
    padding:30px 0 30px 4px;
    width:700px;
    color:#c0c0b4;
    font-size:11px;
    line-height:16px;
}

dan berakhir di

/* search results */ .search-results {
    color:#fff;
    font-size:12px;
    padding:12px 0;
}
.search-results .bigger {
    color:#fff;
    font-size:14px;
}

Kemudian silahkan Pratinjau/Preview. jika melihat sidebarnya melorot kebawah, jangan khawatir biarkan saja dulu.

Sekarang kita telah mempunyai template minima bergaya ala “ Cellar Heat “.

* Trik yang sama saya pernah meng-install template karya kang “ Hackshopere Ramani “ . dengan cara seperti itu.

Membedakan Ukuran Antara Main-Post dan Mini-Post.

Sekarang bagaimana membedakan ukuran lebar posting dihalaman depan dengan halaman sub ? seperti kasus layout mangga-cigazine.

Beginilah trik Seo-nya ( Sistem Edit Obrak-abrik ).

Dalam template cella heart untuk main-postingan dan mini-post. ( atau istilah mas agus recent-post ) merupakan bagian dari syntak ini : column01.

maka trik yang saya gunakan menghapus ukuran pada selector .Columm 01. yakni width:720px;

.column01 {
   width:720px; / ukuran lebar ini di hapus.
    overflow:hidden;
    float:left;
}

Kemudian skenario yang dua, saya menyembunyikan elemen sidebar pada halaman depan. Contohnya saya menambahkan widget “ Text “ . kemudian saya sembunyikan dengan cara menambahkan beberapa kode di antara widget- text seperti tulisan yang saya pertebal di bawah .

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

<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>

red. ( untuk menampikan keseluruhan kode html elemen di atas mesti di tandai kotak kecil di samping Expand Template Widget )

tentang menyembunyikan widget atau elemen, lebih jelasnya bisa di baca di sini : bikin-blog-lebih-dinamis.

dan lakukan untuk elemen sidebar lainnya seperti itu.

Setelah itu , Selanjutnya saya merubah ukuran untuk main-post-nya ( agar sidebar nantinya tidak melorot ke bawah ) . dengan cara menganti ukuran width:700px; menjadi 490px; pada selector #post-one .

#post-one {
    padding:30px 0 30px 4px;
    width:700px; / ganti ukuran ini menjadi 490px;
    color:#c0c0b4;
    font-size:11px;
    line-height:16px;
}

Penutup

Sebenarnya masih banyak pere yang mesti di kerjakan agar templatenya optimal dan sesuai dengan yang kita inginkan. dan saya percaya mas bcon ini tahu apa yang mesti di lakukan selanjutnya. lawong kerjaanya bikin template. xixiixixi…

Akan tetapi sebagai tanda terima kasih dan penghormatan atas kerja kerasnya Mas Agus Mu - dalam membuat template blogspot berbeda dari biasanya ( seperti template “ cellar heat ini ) , ada baiknya kita harus menyertakan link pada blog beliau, semacam special thank gitulah.

yuu met berpusing ria mas.