Pages
Nenek dan Tabib
Perawatan Kecantikan Sederhana Untuk Pria
Berikut ini tips perawatan kecantikan yang dapat dilakukan seorang pria untuk menjaga penampilannya tetap menarik.Kostumisasi Penomoran pada Komentar Blogger�
Credits
Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog Vagabundia berasal dari Buenos Aires, Argentina.
Menambah nomor urut komentar
Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.
Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.
.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}- Untuk merubah letak nomor ke kanan (
right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru. - Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
- Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
- Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.
Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</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'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>Sisipkan kode yang berwarna merah di antara kode-kode di atas.
HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.
<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>Kostumisasi nomor urut komentar
Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:
.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}
.numberingcomments:after {content:"."}Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.
Cara Terbaru dan Termudah Memilih Bisnis MLM yang Baik
Judul artikel ini, Cara Terbaru dan Termudah Memilih Bisnis MLM yang Baik tampaknya berlebihan. Tetapi agar mendapatkan posisi yang baik di mBah Google dan agar segera bisa anda temukan terpaksa saya pakai. Mimilih bisnis MLM (Multi Level Marketing) sebenarnya bukanlah pekerjaan mudah. Hal ini disebabkan oleh banyaknya MLM yang bermunculan akhir-akhir ini. Ada yang benar-benar menjalankan sistem
Optimasi Kotak Komentar Blogger�
Anda tentu sudah baca posting tentang “Kostumisasi Avatar Komentar”, “Tahukah Anda?”, & “Trik Blogger | Mengatur Tataletak Link to This Post”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.
Merubah lebar kotak komentar
Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.
.comment-form {
width:425px;
max-width:425px;
overflow:auto;
clear:both;
}Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan px, em, %, atau pt. Atribut width berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan max-width digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.
Aksesoris kotak komentar
1. Menambah teks sebelum kotak komentar

<h2 id='comment-post-message'><data:postCommentMsg/></h2>
<p>Silakan berkomentar, tapi jangan memasukkan SPAM yah…</p>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>Catatan: Kode yang berwarna merah merupakan kode yang dicari, sedangkan yang berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah <h4 id='comment-post-message'><data:postCommentMsg/></h4>.
2. Menambah variasi teks atau gambar di samping kotak komentar
Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut width—elemen komentar (#comments) & lebar kotak komentar (.comment-form) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya. Yang perlu di garis-bawahi, bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.
Coba Anda lihat gambar di atas (Figure 1), perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan & bentuknya lebih kurang terlihat pada model di bawah ini.
You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......
You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......
Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode CSS maupun HTML dalam template blog Anda.
Kode CSS
.intermezzo {
float:right;
width:32%;
margin-top:8em;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.intermezzo .first-letter {
float:left;
line-height:0.5em;
padding:0.175em 0.15em 0.0175em 0;
font-size:5em;
}
.intermezzo .first-line {
margin-left:-5.75em;
}
.intermezzo .enjoy {
display:block;
font-variant:small-caps;
font-weight:bold;
}
.intermezzo .type-s {
padding:0.175em 0 0;
font-size:6.15em;
vertical-align:-0.35em;
}
.intermezzo .end-letter .hidden-s {
color:#fafafa;
display:block;
position:absolute;
left:-1.75em;
}
.intermezzo .end-letter {
text-transform:uppercase;
font-size:2em;
margin:-0.225em 0 0 2.225em;
display:block;
position:absolute;
}
.intermezzo .dot {
font-size:1.5em;
bottom:-1.5em;
margin-left:6em;
display:block;
position:absolute;
}
.dot .dot-1 {
bottom:-0.5em;
display:block;
position:absolute;
}
.dot .dot-2 {
bottom:-1em;
display:block;
position:absolute;
margin-left:-0.25em;
}
.dot .dot-3 {
bottom:-1.5em;
display:block;
position:absolute;
margin-left:-0.75em;
}
.dot .dot-4 {
bottom:-2em;
display:block;
position:absolute;
margin-left:-1.525em;
}
.dot .dot-5 {
bottom:-2.5em;
display:block;
position:absolute;
margin-left:-2.5em;
}
.dot .dot-6 {
bottom:-3em;
display:block;
position:absolute;
margin-left:-3.75em;
}- Letakkan kode tersebut di atas
]]></b:skin>. - Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template “Optimasi Blog” & belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.
- Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan template blog Anda.
widthmenunjukkan lebar elemen &margin-topmenunjukkan jarak margin suatu elemen dengan bidang di atasnya. - Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.
Kode HTML
<p class='intermezzo'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p>- Letakkan kode HTML tersebut di atas kode berikut.
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if> - Apabila Anda memulai pencarian dengan kode
<p class='comment-footer'>, maka Anda akan menemui 2 (dua) kode. Pilihlah yang kedua! - Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode
<div style='clear:both;'></div>di atas kode HTML<p class='intermezzo'>. - Update (June 29, 2011): Ketika Anda melakukan pengaturan bahwa komentar tidak di-izinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di-antara HTML
.intermezzo.<div style='clear:both;'></div>
<p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p> - Update (June 29, 2011): Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML
.intermezzo.<div style='clear:both;'></div>
<b:if cond='data:blog.pageType != "static_page"'><p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p></b:if> - Kemudian rubah CSS
.comment-formmenjadi (lihat kode berwarna merah):
dot…dot…dot tergantung isian nilai yang telah Anda masukkan..comment-form {
width:…;
max-width:…;
overflow:auto;
clear:left;
}
Seperti ucapan sebelumnya, Anda pun bisa berkreasi dengan variasi kode dan/atau bentuk lain sesuai dengan keinginan & mungkin dapat merebut simpati pengunjung di blog Anda.
The Little Red-Cap
| Once upon a time there was a dear little girl who was loved by every one who looked at her, but most of all by her grandmother, and there was nothing that she would not have given to the child. Once she gave her a little cap of red velvet, which suited her so well that she would never wear anything else; so she was always called Little Red-Cap. |
One day her mother said to her, "Come, Little Red-Cap, here is a piece of cake and a bottle of wine; take them to your grandmother; she is ill and weak, and they will do her good. Set out before it gets hot, and when you are going, walk nicely and quietly and do not run off the path, or you may fall and break the bottle, and then your grandmother will get nothing; and when you go into her room, don't forget to say, 'Good-morning,' and don't peep into every corner before you do it." "I will take great care," said Little Red-Cap to her mother, and gave her hand on it. The grandmother lived out in the wood, half a league from the village, and just as Little Red-Cap entered the wood, a wolf met her. Red-Cap did not know what a wicked creature he was, and was not at all afraid of him. "Good-day, Little Red-Cap," said he. "Thank you kindly, wolf." "Whither away so early, Little Red-Cap?" "To my grandmother's." "What have you got in your apron?" "Cake and wine; yesterday was baking-day, so poor sick grandmother is to have something good, to make her stronger." "Where does your grandmother live, Little Red-Cap?" "A good quarter of a league farther on in the wood; her house stands under the three large oak-trees, the nut-trees are just below; you surely must know it," replied Little Red-Cap. The wolf thought to himself, "What a tender young creature! what a nice plump mouthful�she will be better to eat than the old woman. I must act craftily, so as to catch both." So he walked for a short time by the side of Little Red-Cap, and then he said, "See Little Red-Cap, how pretty the flowers are about here�why do you not look around? I believe, too, that you do not hear how sweetly the little birds are singing; you walk gravely along as if you were going to school, while everything else out here in the wood is very merry." Little Red-Cap raised her eyes, and when she saw the sunbeams dancing here and there through the trees, and pretty flowers growing everywhere, she thought, "Suppose I take grandmother a fresh nosegay; that would please her, too. It is so early in the day that I shall still get there in good time;" and so she ran from the path into the wood to look for flowers. And whenever she had picked one, she fancied that she saw a still prettier one farther on, and ran after it, and so got deeper and deeper into the wood. Meanwhile the wolf ran straight to the grandmother's house and knocked at the door. "Who is there?" "Little Red-Cap," replied the wolf. "She is bringing cake and wine; open the door." "Lift the latch," called out the grandmother, "I am too weak, and cannot get up." The wolf lifted the latch, the door flew open, and without saying a word he went straight to the grandmother's bed, and devoured her. Then he put on her clothes, dressed himself in her cap, laid himself in bed and drew the curtains. Little Red-Cap, however, had been running about picking flowers, and when she had gathered so many that she could carry no more, she remembered her grandmother and set out on the way to her. She was surprised to find the cottage-door standing open, and when she went into the room, she had such a strange feeling that she said to herself, "Oh dear! how uneasy I feel to-day, and at other times I like being with grandmother so much." She called out, "Good morning," but received no answer; so she went to the bed and drew back the curtains. There lay her grandmother with her cap pulled far over her face, and looking very strange. "Oh! grandmother," she said, "what big ears you have." "The better to hear you with, my child," was the reply. "But, grandmother, what big eyes you have!" she said. "The better to see you with, my dear." "But, grandmother, what large hands you have!" "The better to hug you with." "Oh! but, grandmother, what a terrible big mouth you have!" "The better to eat you with!" And scarcely had the wolf said this, than with one bound he was out of bed and swallowed up Red-Cap. When the wolf had appeased his appetite, he lay down again in the bed, fell asleep and began to snore very loud. The huntsman was just passing the house, and thought to himself, "How the old woman is snoring! I must just see if she wants anything." So he went into the room, and when he came to the bed, he saw that the wolf was lying in it. "Do I find thee here, thou old sinner!" said he. "I have long sought thee!" Then just as he was going to fire at him, it occurred to him that the wolf might have devoured the grandmother, and that she might still be saved, so he did not fire, but took a pair of scissors, and began to cut open the stomach of the sleeping wolf. When he had made two snips, he saw the little Red-Cap shining, and then he made two snips more, and the little girl sprang out, crying, "Ah, how frightened I have been! How dark it was inside the wolf;" and after that the aged grandmother came out alive also, but scarcely able to breathe. Red-Cap, however, quickly fetched great stones with which they filled the wolf's body, and when he awoke, he wanted to run away, but the stones were so heavy that he fell down at once, and fell dead. Then all three were delighted. The huntsman drew off the wolf's skin and went home with it; the grandmother ate the cake and drank the wine which Red-Cap had brought, and revived, but Red-Cap thought to herself, "As long as I live, I will never by myself leave the path, to run into the wood, when my mother has forbidden me to do so." It is also related that once when Red-Cap was again taking cakes to the old grandmother, another wolf spoke to her, and tried to entice her from the path. Red-Cap was, however, on her guard, and went straight forward on her way, and told her grandmother that she had met the wolf, and that he had said "good-morning" to her, but with such a wicked look in his eyes, that if they had not been on the public road she was certain he would have eaten her up. "Well," said the grandmother, "we will shut the door, that he may not come in." Soon afterwards the wolf knocked, and cried, "Open the door, grandmother. I am little Red-Cap, and am fetching you some cakes." But they did not speak, or open the door, so the gray-beard stole twice or thrice round the house, and at last jumped on the roof, intending to wait until Red-Cap went home in the evening, and then to steal after her and devour her in the darkness. But the grandmother saw what was in his thoughts. In front of the house was a great stone trough, so she said to the child, "Take the pail, Red-Cap; I made some sausages yesterday, so carry the water in which I boiled them to the trough." Red-Cap carried until the great trough was quite full. Then the smell of the sausages reached the wolf, and he sniffed and peeped down, and at last stretched out his neck so far that he could no longer keep his footing and began to slip, and slipped down from the roof straight into the great trough, and was drowned. But Red-Cap went joyfully home, and never did anything to harm any one. |
Gambar Favicon untuk Dipasang di Address Bar dan Cara Memasangnya
Di sini sahabat dapat
Cara Memasang gambar favicon di address bar
Memasang gambar di address bar atau lazimnya disebut favicon banyak dilakukan para blogger, tak terkecuali yang memiliki akun di blogspot. Hal ini dilakukan untuk memberi nilai tambah bagi blognya sehingga terkesan lebih professional layaknya domain berbayar. Disamping itu, dengan memasang gambar favicon yang menjadi ciri khas agar blog kita mudah dikenali. Lewat favicon (singkatan: favorit icon
Daftar Harga Mercedes-Benz di Indonesia
Daftar Harga Mercedes-Benz di Indonesia
Mercedes-Benz B-Class
Legenda Danau Toba (Sumatera Utara)
Mercedes-Benz ML 350 Sport 2011
�Varian ini adalah entry level dari model M-Class yang telah diperkenalkan di tanah air sejak akhir tahun lalu,� tutur Roland Staehler, Director Sales & Marketing MBI, saat peluncuran di Hotel Ritz Carlton.
SUV premium ini dibekali mesin V6 berkapasitas 3.498 cc, bertenaga 272 hp
Spesifikasi dan Harga Nokia C2-03
Spesifikasi Nokia C2-03:Jaringan:
GSM 900 / 1800 � SIM1, SIM 2
GSM 850 / 1900 � SIM1 & SIM 2
Dimensi:
Ukuran 103 x 51.4 x
Sehat Dengan Teh Hijau
1. Teh hijau dapat menghindari dari berbagai penyakit seperti fungsi kanker, radang sendi, kolesterol, jantung, infeksi dan gangguan kekebalan tubuh.Cara Mudah Membuat Logo Blog Keren! (6 Online Text Logo Generators)

Atau yang seperti ini?

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.
FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.
Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.
Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.
Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.
Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.
Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot
Happy Bloggin'!
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com
Perawatan Kecantikan Kulit dengan Pisang
Kostumisasi Avatar Komentar
Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?
Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.
Apabila Anda ingin mengetahui kode CSS embeded tersebut, coba buka blog Anda & tekan tombol Ctrl + U pada papan ketik. Mungkin Anda akan melihat kode seperti ini:
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' />Dari bundle CSS di atas akan kita temui kode avatar komentar sebagai berikut.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}
#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.
Memperbesar gambar avatar
Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah & letakkan di atas ]]></b:skin>.
#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}Catatan: Silakan dirubah nilai atribut height & width—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “mengganti gambar blank”
Merubah letak avatar
Lihat kembali kode untuk “memperbesar gambar avatar”, kemudian ganti atribut left—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan.
Anda dapat pula menambahkan atribut lainnya, contoh margin:2em 0 -2px 0;. Artinya avatar akan bergeser ke bawah sejauh 2 ems dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam HTML komentar seperti di bawah ini (hanya untuk diketahui saja).
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
</b:if>
Mengganti gambar blank
Tampilan blank pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar blank dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}
Tambahkan atribut:
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
Silakan ubah alamat & nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut height & width pada ulasan “memperbesar gambar avatar”.
Hasilnya akan terlihat seperti di bawah ini.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
}Kemudian letakkan di atas kode ]]></b:skin>.
Mempercantik avatar dengan CSS3
Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain rounded corner & box shadow.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
border-radius:5px;
box-shadow:2px 2px 5px #666666;
}
Catatan:
Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar blank” di atas.
Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.


