Blogger Tutorial

Showing posts with label Mempercantik Blog. Show all posts

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

[..]

meratakan img dengan post-body

[..]

Bagaimana Pasang Intro Profile Pada Halaman Depan

[..]

Membuat widget or gadget berbeda-beda tampilan

Otrelah boogle_lover kali ini saya akan menulis trik bagaimana caranya membuat widget/gadget berbeda-beda tampilan untuk background, warna tulisan , border dan lain-lain. trik ini di khususkan terutama bagi yang suka berexperimen dan pingin beda.

Untuk melihat hasilnya bisa boogle_lover lihat di blog bloon_online ini.

perhatin

Saya menggunakan trik ini pada minima standar , jadi mungkin untuk template yang lain bisa saja kasus-nya berbeda-beda.

Pemahan Dasar

1. Ini sering saya jelaskan. Setiap kita menambah gadget baik Html/Javascript, Text, Linklist dan lain-lain, Blogspot menambahkan Id yang sangat khusus berupa angka / penomeran di ujung nama gadgetnya . untuk widget/gadget Html misalnya HTML1, dan jika kita menambah widget HTML lagi maka yang kita dapati menjadi HTML2, HTML3, HTML4. begitu juga untuk widget yang lain-nya.

2. Untuk mengetahui nama dan id sebuah widget/gadget secara mudah boogle_lover dapat mengenalinya melalui halaman depan ketika posisi kita login. buka/tekan gambar berbentuk obeng&kunci ( atau bisa juga pada halaman page elements tekan Edit pada gadgetnya ). setelah jendela gadget terbuka periksa pada bagian frame atas. seperti yang di tunjukan gambar di bawah ini.

3. Pemahaman dasar selanjutnya menggenal bagian-bagian script html gadget secara garis besar. ( yang nantinya dapat boogle_friends mangfaatkan untuk mengatur latar belakang berupa gambar/color, warna tulisan , border/binkai dan lain-lain. red )

a. id = Text1 merupakan gadget itu sendiri

b. h2 merupakan title/judul gadget

c. widget-content merupakan konten / isi gadget

Jika di ilustrasikan hasilnya akan seperti ini.

4. Pemahan dasar yang terakhir ialah dalam penulisan css nya hurup-nya harus benar dan sesuai. contoh Text1 = penulisan yang benar - text1 = penulisan yang salah. HTML1 = benar – Html1 = salah.

Otre deh boogle_friends ternyata pegel juga nulis-nya hehe..

Setelah memahami tulisan di atas yang kita lakukan menambah kode Css –nya ke dalam blog ( biasanya saya menyimpan sebelum tulisan ini ]]></b:skin> . red ).

Oh iya jangan lupa karena ini merupan sebuah selektor id , maka menurut buku mang omo harus di awali dengan tanda pagar [ # ] . jadi contohnya seperti ini.

sebelum tulisan ini

]]></b:skin>

masukan kode css di bawah ini

#Text1 {background:#d3c6ac;padding:3px;}

#Text1 h2 {background:#8bed99}

#Text1 .widget-content {background:#99bde1;}

Untuk gadget Html

#HTML1 {background:#d3c6ac;padding:3px;}
#HTML1 h2 {background:#8bed99}
#HTML1 .widget-content {background:#99bde1;}

thankiyu untuk komentarnya :)

[..]

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.

[..]

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

[..]

Menganti Tampilan Gadget Form Search

[..]

Cara mengedit heading [ h2 ] untuk Sidebar

Salah satu mangfaat pengunaan heading/judul ialah untuk mempermudah dalam menentukan sebuah topik. Pada html sendiri heading ini mempunyai tingkatan dan ukuran tertentu, mulai dari h1 sampai h6.

Dan secara default dalam template Minima Standar , pengaturan untuk tag heading h2 di atur secara umum ( inheritance= pewarisan property ), artinya ketika kita mengunakan h2 untuk konten dan untuk judul sidebar maka keduanya akan terlihat sama. dengan mengunakan script css di bawah.

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .5em;
font:$headerfont;
line-height: .4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Nah jika kita ingin mengunakan pengaturan h2 antara konten dan judul sidebar berbeda, maka caranya membuat h2 untuk sidebar secara khusus dengan menambahkan selector ID dan property-value .

contohnya seperti ini.

#Sidebar-Wrapper h2 { property:value}

dengan begitu maka h2 untuk sidebar mempunyai aturan sendiri.

Sedangkan jika ingin membuat h2 mempunyai sifat yang lebih khusus lagi pada sebuah judul widget , maka yang perlu di ketahui dulu adalah nama widget dan Id nya.

contoh jika LinkList h2 untuk sidebar sama mengunakan font tebal dan berwarna hitam seperti ini.

LinkList1 h2.
BlogKawan Satu
Lisklist2 h2.
BlogKawan Dua
Linklist3 h2.
BlogKawan Tiga.

ket : LinkList1,LinkList2,Linklist3 merupakan nama widget/gadget yang memiliki sebuah ID ( digunakan untuk tag secara individual dan spesifik, maka untuk penulisannya dalam Css di awali dengan tanda pagar [ # ] ) .

Dan jika saya ingin menampilkan BlogKawan Dua dengan hurup berwarna merah maka penambahkan pada halaman css-nya seperti ini.

#LinkList2 h2 { font-weight;Bold;color;red}

BlogKawan Dua

Otre selain dengan cara di atas, ada lagi cara untuk membuat heading/judul untuk sidebar berbeda satu sama lain, cara ini sering di sebut juga inline style sheet.

pertama centang/tandai di samping tulisan Expand Widget Templates.

kemudian cari tag html h2 yang ingin kita edit atau ingin di atur secara individual. .

dan tambahkan script seperti ini .

contohnya saya mengunakan inline style berupa border-top untuk h2 dengan warna yang berbeda-beda di blog ini.

yup mudah-mudahan pengalaman saya yang sangat sederhana ada mangfaatnya.

[..]

Inspirasi ringan di bawah halaman blog

[..]

Upgrade desain halaman komentar 2 kolom

Tulisan ini merupakan “ Upgrade Vesion Tentang Desain layout komentar 2 kolom “. thank buat blog hajunik karena source kodenya saya ambil dari template buatannya “ True Elegan “, dan makacih juga buat suhu mochal yang telah memodifikasi pada author comment highlighting-nya .

Terutama di bandingkan dengan yang terdahulu ( bisa di lihat di sini ), maka upgrade version ini untuk loding time-nya lumayan ringan, dan juga jika di lihat dari source kodenya lebih simple dari sebelumnya.

Cara Penerapanya :

Pertama :

Backup dulu template kita. setelah itu buka tab Tata Letak- Edit Html.

Kemudian centang/tandai kotak kecil di samping tulisan Expand Template Widget.

Setelah itu cari kode berikut ini.

<b:loop values='data:post.comments' var='comment'>

kode keseluruhan-nya menjadi seperti di bawah ini.

Kemudian ganti semua kode di atas dengan kode html ini.

<ul class='commentlist'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'><li>
<div class='' expr:id='data:comment.id'>
<div class='pane_l'>
<div class='c_author'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
<br/>
Said
</dt>
</div>
<div class='c_avatar'/>
<div class='commentphoto' expr:class='data:post.avatarIndentClass' style='margin-top:.5em;'/>
<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>
<a expr:name='data:comment.anchorName'/>
<a expr:href='"#comment-" + data:comment.id' style='font-size:14px;' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:else/>
<div class='pane_r'>
<p><data:comment.body/></p>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
</div>
</b:if></div>
<div class=' clear'/></li> </b:loop>
</ul>

Kedua :

Pada bagian kedua ini menyimpan ( atau menganti ) Css comment. dan yang pertama kali saya lakukan adalah menambah kode Css global riset, – untuk kasus ini , saya menambahkan global reset list .

ul {   
   margin:0px;   
   padding:0px;  
   list-style-type:none;  
  }

Simpan kode tersebut di atas atau di bawah properti body ini

body{ background:$bgcolor;  margin:0;…. }

kemudian setelah itu . saya mengganti css comment - red. biasanya di bawah kode keterangan seperti ini.

/* Comment */

Atau seperti ini ....

/* Comment
-------------------------------------------------- */

dengan kode css berikut ini.

#comments{background:transparent; border:solid #ccc 0px; margin-bottom:10px}
#comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
#comment-list {margin-top: 10px;padding:10px;
background: transparent;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: transparent;
border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;background:#fff;display: inline;
width: 110px;min-width: 110px;max-width: 110px;
border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
* html .pane_l{margin-top:15px; }
.pane_r {display: block;line-height: 1.5em;margin-left: 125px;
padding:8px 15px 15px 15px;;background:#fff;
border-left:1px dotted #CCCCCC;
border-right:1px dotted #CCCCCC;
border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
.c_author {font-size: 13px;font-weight: normal;height:30px;
overflow:hidden;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
padding-top:20px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:transparent; border:0px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:95%;}
* html .comment-form { width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:transparent;padding:8px 15px 15px 15px;
border-left:1px dotted #33CCFF;border-right:1px dotted #33CCFF;
border-top:3px double #33CCFF;border-bottom:3px double #33CCFF;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:black;
text-decoration:bold;
}
.deleted-comment {
font-style:italic; color:gray;
}

* atau jika susah mencarinya , bisa juga langsung di simpan kode css tersebut di atas tag.

]]></b:skin>

Setelah itu Simpan Template ..

[..]

Revisi J-Gaza Widget

hack dan idenya mantap mas.. tapi ada masalah setelah menginstall nya. format tulisannya tidak beraturan. tolong masukannya.. trims mas kaji -

Terima kasih juga atas masukanya, mungkin karena saya pasang pada template yang saya gunakan, maka dalam beberapa hal bisa saja berbeda ketika mengunakan J-Gaza Widget pada template lain, bahkan keliatanya menjadi rancu.

Untuk itu dalam tulisan ini, ada beberapa kode css dan content J-Gaza Widget yang saya revisi. Mudah-mudahan versi revisi ini tidak terjadi ke rancuan seperti script sebelumnya. ( red. tapi jika ada masalah bisa share dengan saya ).

- demonya bisa anda lihat di samping kanan badan postingan ini.

Pertama :

Backup dulu templatenya.

kemudian dalam tab Layout pilih Edit Html, dan tandai kotak kecil di samping tulisan " Expand Widget Templates ".

setelah itu di atas tag ini.

]]></b:skin>

masukan semua kode css ini.

/* J-Gaza Widget  -------------------------------*/  
.gaza {   
float:right; 

font-size:11px; 

line-height:140%;   
margin:3px 0px 15px 15px; 

padding:3px 0px; 

width:140px; 

} 

* html .gaza {   
font-size:10px; }

.gaza ul { 
 list-style: none; 
 padding:0px;   
 margin:0px;   
}

.gaza li {   
 display:block;height:15px; 
 color:#777;font-weight:normal;   
 padding:10px 0px;margin:-1px 0;text-decoration:none; 
 letter-spacing:1px; 
 background-color:#EBF3FB;border-top:1px solid #555; 
 border-bottom:1px solid #555; 

}

li.text {  
font : normal bold 140% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;  
padding: 10px 10px;  
margin: .2em 0;

}

li.text a:hover{  
text-decoration:underline;  
}

li.font{

padding: 10px 0 10px 5px;

}

* html li.font{

margin:-1px 0;

}

li.print {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGHcSig5F6NEe_SQQqIStkIU19rMoAfM0cui2kkcMFCd2pqnfhkaXYStoGycvKXAt5L3KojjtdM4kGF8_HTufr1X0cAdmU_vAfJrY3nnkmG9rrjGF3jysrOiftRTIqVauqcjvoSgCSzfU/);  
background-repeat: no-repeat;

background-position: 5px 50%;

padding: 10px 0 10px 25px;  
}

li.mail { 

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_eaaCdG3u0JamHcX5Lk9fsCIje3fvGhdOqhOFQG9CQxZxGmxSgcK3wJJQF9L8ZQVmkFYU4WDf8WOniutjYQGIg4CEsy_80hyVG8f5OeD1kt8lkdJBBnjeQbVr2FgweGJjP688o-MkWM/);   
background-repeat: no-repeat; 

background-position: 5px 50%; 

padding: 10px 0 10px 25px; 

}

li.book { 

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71K5LeTSi4hXV9e97ztGKkjgJ4Uoxms0NeetyhssCh5pwMBhMoG70ZbGLXHZVZ5ZKmAWaSEwQ0S1MYFsoXW3HhjH2UVwNc6pljNZwf37uFSAoS5WyfAomFpPsBdLI7hpZHEmzLtwWfRE/); 

background-repeat: no-repeat; 

background-position: 5px 50%; 

padding: 10px 0 10px 25px; 

}

li.marks {   
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcfaS4_ccDvQFtLXSFv5qxUWT-FvWLVPGTqARagt38wS85SiDPub2xakWRBoPIleBb90tGtYKvf-Sj28smMvCCKGG81UfkZdCrTmDRVNOLTSFN-Tg4uM1bhI_XGXXBti3SUd0ycfaHigw/);  
background-repeat: no-repeat; 

background-position: 5px 50%; 

padding: 10px 0 10px 25px; 
}

li.komen {  
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3B0jaW1EE-lVTKL8LQsdlLoqGU73gE58B36rlodOPC3bP4TZJv4qvVP6LYIXsIip46HnRw4XAwQ1q_h4qTwFKbls06eUjgmPuhCBQfBND8enuwtkm5vLzpgt1KgnG2V2hmlPuNPyB_4/);   
background-repeat: no-repeat; 

background-position: 5px 50%; 

padding: 10px 0 10px 20px;   
}

.jgaza { 

background:#4DA96A; 

display:block;  
font-size:11px;   
margin:10px 0 15px 0;   
color:#000;   
text-align:center;  
}

.jgaza a{ 

color:#fff;   
}   
.jgaza a:hover {   
color:#FF0000;   
}

.gazapost{   
font-size: 14px;   
}

( red. Jika merasa terlalu panjang, bisa saja kodenya di persingkat dengan cara mengunakan background setiap list-nya sama.)

Setelah beres , kemudian di bawah tag ini

</head>

masukan link Css dan javascript ini.

<link href='http://jaloee.googlepages.com/gazatextsizer.css' rel='stylesheet' type='text/css'/> 

<script src='http://jaloee.googlepages.com/doctextsizer.js' type='text/javascript'/> 

<script src='http://jaloee.googlepages.com/addprintlink.js' type='text/javascript'/>

Kemudian cari kode ini.

<p><data:post.body/></p>

Setelah ketemu ganti dengan kode ini.

<div class='gaza'><ul><li class='text'><a href='http://catalog-tutorial.blogspot.com/2009/01/revisi-j-gaza-widget.html'> J-Gaza<em>Widget</em></a></li><li class='font'>Font Size :
<a class='texttoggler' href='#' rel='normalview' title='normal size'><span style='font-size:13px'>A</span></a>
<a class='texttoggler' href='#' rel='largeview' title='large size'><span style='font-size:16px'>A</span></a>
<a class='texttoggler' href='#' rel='xlargeview' title='extra large size'><span style='font-size:17px'>A</span></a> <script type='text/javascript'>
//documenttextsizer.setup("shared_css_class_of_toggler_controls")
documenttextsizer.setup("texttoggler") </script></li><li class='mail'><b:if cond='data:post.emailPostUrl'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg' target='_blank'>
Kirim ke teman</a>
</b:if></li>
<li class='print'><a href='javascript:window.print()'> Print this page </a></li>
<li class='book'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'> Facebook </a></li><li class='marks'><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'> Gbookmarks </a></li><li class='komen'> <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if></li></ul>
<span class='jgaza'><a href='http://www.mer-c.org/' target='_blank'>Save Our Palestina </a></span>
</div>
        <div class='gazapost'><p><data:post.body/></p></div>

** note : Jika anda mengunakan readmore maka yang di ganti <p><data:post.body/></p> –nya yang pertama.

Kedua :

Setelah beres dengan pekerjaan di atas “ Simpan Template “, kemudian buka tab Setting – Basic. dan pastikan di samping kanan tulisan “ Show Email Post links? “ . dalam keadaan terpilih “ Yes”.

AGREEMENT

Karena ini widget bertemakan kepedulian terhadap nasib anak-anak dan bangsa palestine, maka saya berharap , jika anda memasang widget ini mohon jangan di hapus tulisan dan link " Save Our Palestina ". please man " salam dua jari ".

Kecuali sampai agresi dan kependudukan Israil terhadap Jalur Gaza berhenti. maka anda boleh menghapus tulisan tersebut.

note:

Sekali lagi script ini sama tergesa-gesanya ketika menulis teks proklamasi, dan saya gunakan serta di uji coba pada template minima yang saya modifikasi , jadi jika terjadi masalah dengan template yang lain-nya, bisa anda share di sini.

[..]

Pemahan Dasar

Style Blockquote

Pullquotes

Bagaiaman cara membuat gaya blockquote

Pencarian berhubungan dengan:belajar ngeblog

Label