church--tutorial: August 2010

Sunday, August 22, 2010

Sekali lagi tentang intro img – : gambar : -

0 comments 10:25 AM Posted by tutorial
Labels: Blogger Hack, Mempercantik Blog

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.

Friday, August 13, 2010

Lagi Tentang Meratakan Img Dengan Post-Body

0 comments 8:24 AM Posted by tutorial
Labels: Blogger Hack, Mempercantik Blog

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

Saturday, August 7, 2010

1031 donwloaded dan 2506 pageview

0 comments 7:06 AM Posted by tutorial
Labels: Blogging Review, Brush

Terutama untuk font arabic Shifa, saya tidak menyangka sama sekali sejak di posting “ kaligrafi islam, font, shape dan brush psd “ pada tanggal 28 agst 2008, yang mengunduh mencapai 1031 orang dan untuk pageview 2506 visitor ( pageview counter terpasang pada tanggal 23 okt 2009 ).

Secara khusus saya mengucapkan terima kasih untuk para pembuatnya .. kalau saya tahu situs-nya mungkin special akan saya buatkan link mereka.

Oh iya.. dua atau tiga hari lagi bulan Ramadhan. Saya ucapkan selamat menjalankan ibadah shaum bagi yang melaksanakannya. semoga ibadah-nya dilaksanakan dengan semangat dan di terima oleh Nya.

Quote of the day:
Make the month of ramadan this year toward a new consciousness. - Boogle

Technorati Tags: ramadhan,kaligrafi islam,font,shape,brush arabic

Thursday, August 5, 2010

meratakan img dengan post-body

0 comments 7:26 AM Posted by tutorial
Labels: Mempercantik Blog, Template

Sehubungan ada pertanyaan sobat saya tentang “ meratakan img dengan post-body “, seperti yang saya lakukan pada antar muka blog jaloee.

Pertanyaanya seperti ini:

Kang, gimana tips meratakan gammbar ama post-body? Kae thumbnail di blog ni (layout standar blogcepot kan judul post selalu diatas). Tks

Karena sobat saya ini sudah sangat lihai membuat template, jadi dari pada di terangkan lebih baik saya sarankan untuk mendowload template “ Hybrid News “ di koleksi template Go Templatez.

Monday, August 2, 2010

Bagaimana Pasang Intro Profile Pada Halaman Depan

0 comments 11:53 AM Posted by tutorial
Labels: Blogger Hack, Mempercantik Blog

Trik ini caranya hampir sama dengan tulisan “ Pasang Intro Flash Di Blogspot “, yang membedakan hanya objek yang di gunakan. Jika sebelumnya menggunakan Flash file, namun sekarang menggunakan sebuah gambar ( img.file ). Hasilnya menurut saya sama keren.

Untuk variasi selain photo dan profile, bisa kita tambahkan pula link label/categorie blog, atau di sisipi script adsense camp, apalagi jika anda lagi ikutan kontes seo bisa anda tambahkan link url halaman yang anda konteskan. Apakah seo friendly ? wah jangan tanya gie dah.

DEMO BLOG

church--tutorial