Recent Posts

Senin, 24 Oktober 2011

Cara menginstal dual boot

2

Tutorial Merakit Komputer

Tutorial Merakit Komputer

Cara Menginstal UBUNTU

Cara Menginstal Ubuntu

Equation

Equation Auto Saved)

TUGAS MS EXCEL 1

latihan halaman 51_2

Minggu, 23 Oktober 2011

BLOG (Cara Menghilangkan Widget Attribution Blogger)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qJrTPjTNZ0NybD7xpi450Zj9EKgc5Tj5-A8mP8S6TaN77JetxYpARSQHe8jQDttDaKWMGb1uUodeE3Szzi8O3Hc9xQCoIg2qTEyRuPun4M44ZZcIXbvtF-KrXXGaYNnKI3Fdhyo45P0/s400/menghilangkan-attribution-blogger.jpgPada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {
height:0px; 
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.


BLOG ( Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong)



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiynuUrvENTUBY6hyv2uZNbCN21QI9wzcwXR6Cq-7oqWxTbE3hwYNjWnVZJSl9V4ZSS1FUUlQwtuXF9gMuoIh_QBuBkEX8t-utzP8ERQAOwTfv1AIyfJaJHEF78siWINkSmecr4PzMtORQ/s400/title.jpgPada zaman dahulu kala blogger mengijinkan widget dengan tanpa judul (title) namun sekarang kebebasan itu dikekang oleh blogger, jadi setiap widget/gadget harus ada title atau judulnya. Namun sering kali kita tidak menginginkan gadget/widget tanpa judul, dan jika dipaksa akan muncul pesan perintah error "Required field must not be blank" atau intinya judulnya harus ada dan tidak bisa dilanjutkan bila tanpa judul.

Nah bagaimana mengatasinya?

Caranya cukup mudah kita tinggal mengisi title atau judul gadget dengan code

<!--->

lihat contoh dibawah ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhfqVp4BYMfY-3K2GjUZYhXBbT_xiHfO01Sn8fUaSL18HySZtcHAbr6LTahfiHf2Y062Emd1j-Jxh0PXGx1k2X_O5xDLu7Dp_cGGp5b9juBVO7Rdj0CUjBWRGsfviFT5BfYlSihZI6D0/s400/tutorial-jitu-blank-title.jpgDan hanya cukup code diatas tidak perlu tambahan apa-apa lagi.

Sekian deh cukup semoga bermanfaat bagi Anda


BLOG (Membuat Tepi Gambar Bershadow Dengan CSS 3)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuANc_5bKhM5A8XPvSZ79v-4HfGwOr4I4Kgq-XCjlZYrTuG9GfjGxS0Ww5IMyROrYkBZE4xNgkVioDirMORSAkfRJ9x-dGY6B1COInCzXpJfwQR1QR92YcLBrn5f_XA4CBGTJuRbpc3Oc/s400/box-shadow.jpgCSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

BLOG(Memodifikasi Pesan Perintah Pada Widget Followers)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_v4s5fj43w4NpUQBRGLhQFGBxi1jDvf2dgH0UTz2NwjC6EsytdVlFR9KgvANpTyW22E_nTT6xEeAUA8XlEseODUu_zxVpAC8iUQmM485Lw9E4OhCsmG0dW4BhBm6W8P8po-P5_5cO1Q/s320/follower.gif
Widget Followers adalah widget baru dari blogger blogspot yang mempunyai fitur memberikan informasi postingan (updatetan) terbaru pada blog yang diikuti pada dashboard para blogger yang mengikuti blog tersebut, Sebagaimana langganan Feed via Email jika ada postingan terbaru dari blog yang sudah di subscribe maka akan ada informasi di Email orang yang mensubscribe blog tersebut.

Widget ini mempunyai tampilan standart seperti ini, jika dalam keadaan Log In

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHQwpkl41qqtBrCQtgAj6dfNiX7HMuQybQb949Ng6jIJSUsEr88l1DNnGHFARgXxyGL5-kg5dSFW5jpkf5mOOr525Jx43lgCVErfxmx_Q7d4_BeEGDD5lU6vVvN7bwmLuCD-fhpTkqZg/s200/follower-login.gif

Dan jika tidak keadaan Log In tampilanya akan seperti
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8GCjg3PnNwhWSFObVlObboxEugiCuOah5xlflGg43w3XORCMnnDWXJoZP4-aVMbnDJLZd9FM63TuDQ8dr-LD66t-sfa_8_OeBZyIAbUaGPnoRmWcogkDQrPmRSFKHrsCKDtZjE4kc7w/s200/follower-offline.gif

Ada perbedaan Antara kedua gambar pada waktu Log In dan tidak, diantaranya adalah jika keadaan Log In Pesanya "STOP FOLLOWING" dan jika keadaan tidak log in pesanya "FOLLOW THIS BLOG" dan juga dibagian bawah jika log in pesanya "MANAGE" dan jika tidak log in pesanya tertulis "VIEW ALL".

Nah pada pertemuan kali ini kita akan membahas tentang cara bagaimana memodifikasi pesan yang terinfeksi link perintah oleh Widget Followers ini.

Untuk mengedit Link perintah kamu harus masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "expand widget templates"

1. menghapus count (jumlah) Followers pada judul sidebar
<data:totalFollowerCount/>

Jika ingin menghilangkan jumlah follower tinggal hapus saja code diatas

2. Mengganti perintah "Follow this Blog"
<data:followThisMessage/>

3. Mengganti perintah "Stop Following"
<data:stopFollowingMessage/>

4. Mengganti Teks jumlah follower pada bagian bawah.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatRsTgGMbSODvWkE3eAkKlwdP1S5MxM7E6BOlXcoRD1cTgrqFjWi5WlVb3xvhgnmzWhN2nEOKCVfCIGCfKXkBPirSU70zKZpLqkoGkHuBBW89QkqR-xib2IqYFoa7wh1d16BPFPVoyrs/s200/foot-follower.gif
<data:followersFooterMessage/>

5. Mengganti perintah dan teks jika belum ada follower (kosong)
<data:emptyFollowersMessage/>

6. Mengganti Perintah "Manage" (dalam keadaan Log In di blogger)
<data:manageFollowersMessage/>

7. Mengganti perintah "View All" (keadaan tidak Log in)
<data:viewAllMessage/>

ganti code-code link perintah diatas sesuai dengan kreasi kamu sendiri!

Nah code-code diatas bisa kamu cari (untuk mempermudah tekan ctrl+F pada browser kamu dan masukkan code yang kamu cari) pada menu Edit HTML dan keadaan "Expand widget templates" tercentang

kalau sudah tinggal SAVE

Semoga artikel ini bisa sedikit membantu Anda!
sekian semoga bermanfaat bagi Anda, jika ada pertanyaan silahkan isi komentar!
selamat berkreasi dan berexperimen! semoga berhasil

BLOG (Merubah Tampilan Gadget Link List)


Satu lagi alternatif blogroll (tempat link teman di blog kita) setelah kemaren membahas tentang cara membuat blogroll dengan manual HTML sekarang saya akan mencoba membuat blogroll dengan gadget Blogger default yaitu link list.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLVUMXzjabwt1Ku9eHRR-fVF4VwmEqJjDo0lrbxkLnZf08L1bTlk911GVXSNcCx5TNRV9abKOMincNwVClcIhUqfNzC1vfg_mU8arsKcfLx5xWzBp-1qS3_ijqdl_9LLJ51NjI0TkBowg/s400/link-list.gif

Pada standartnya gadget ini tidak begitu sering digunakan oleh para peblogger karena jika Linknya banyak akan memenuhi halaman Blog kita dan jika linkya di klik tidak membuka jendela baru tapi malah akan membuka di jendela lama yang kita gunakan.

tapi saya ada suatu trik untu membuat gadget Link List ini menjadi sederhana dengan efek scroll dan efek pembukaan link di jendela baru.. Lihat contoh di blog saya (disini)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYknDQealBlfmw6bKv2KFtUOkkimFQ4mreKEeoJrRvP9uDc_uF2r-lVesxeSpLl1lm2MiKxZNOXr9ZPCaKa-0CUzvP-0eiD_JgL8BL4e-QyQ7wrZa_v56lQ74vhqsGxFSmx30-sxVphMH3/s200-r/blogroll_ke_bawah.gif

Masih banyak peblogger yang tidak ingin repot membuat tempat link teman dengan gadget bawaan dari blogger yaitu "link list" secara penggunaanya mudah gitu... Oke kita langsung saja ke cara pembuatanya

Lanhkah pertama yaitu sudah Log In ke blogger dan pasti sudah memasang Gadget "Link List"

Setelah langkah pertama terlaksanakan lalu masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"

Lalu Cari Code HTML seperti dibawah ini

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

Kemudian Ganti code diatas dengan Code dibawah ini..


<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>

Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linkya melebihi batas tinggi maka akan ada efek scrollnya

Kemudian Simpan dehh.. dan lihat hasilnya..

Gimana gampang kan silahkan berexperimen. yahh

BLOG (Membuat Read More)


Kali ini Saya mau menulis tentang cara memasang read more versi kedua, opppsss pada perjumpaan kemaren Saya udah nulis yang versi pertema .

Saya akan jelaskan perbedaan antara versi pertama dan versi kedua gini yaa kalau versi yang pertama jika kamu klik link read more akan mengarahkan ke halaman baru, nah jika yang versi kedua ini yaitu jika anda klik link read more sisa postingan akan muncul dibawahnya atau dihalaman yang sama tanpa membuka halaman baru.
Nah sekarang anas akan memberikan sedikit ilmu tentang cara membuat read more versi kedua ini ni ikuti yaa

  1. pastikan udah log in ke blogger
  2. Lalu selanjutnya ke menu Layout terus Edit HTML
  3. Jangan lupa Backup Template dan juga Centang "Expand Widget Templates"
  4. Pasang Code dibawah tepat diatas Code </head>
<script src='http://anas.ku93.googlepages.com/readmore-2.js'

type='text/javascript'/>

  1. Kemudian kamu Cari code kaya dibawah


<div class='post-header-line-1'/>
<div class='post-body entry-content'>


  1. Ganti code diatas hingga menjadi dibawah


<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>


  1. Kemudian setelah anda ganti, dibawah Code diatas ada Code
<p><data:post.body/></p>

  1. Kemudian dibawah Code diatas tambah Code seperti ini


<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

  1. Kurang lebih Semuanya menjadi seperti dibawah


<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>



Catatan : Tulisan yang tercetak tebal diatas bisa kamu ganti sesuai selera kamu, itu adalah link Read more

  1. Langkah Pertama selesai kemudian Save Templates
  2. Kemudian Ke langkah selanjutnya yaitu ke menu Setting --> Formatting
  3. pada Kotak "Post Tempaltes" isikan Code dibawah ini
<span id="fullpost">



</span>


  1. Kemudian Simpan dan langkah Terakhir adalah ..... Hore... Hore.....


Tips:
Ini adalah postingan yang di tempatkan dihalaman muka sebelum Code <span id="fullpost">
Dan disini adalah sisa postingan yang akan muncul jika anda klik link read more
</span>


BLG (Merubah Tampilan Headings Blog)


Heading yang mempunyai arti kepala, pasti kepala tempatnya diatas.. ya iyalah masa di bawah.. he.. he.. Seperti halnya juga headings di blog yang tempatnya diatas tapi jangan salah Saya kali ini tidak membahas tentang header blog tapi melainkan headings yang biasa ditulis dalam code HTML dan CSS adalah seperti h2, h3, h4 dan sebagainya, Contoh headings di blog adalah seperti judul posting, judul sidebar, tanggal posting dan judul blog.

Seperti biasa tutorial kali ini saya akan coba membahas tentang cara memodifikasi CSSnya, untuk merubah tampilan headings di blog kita hal yang harus kita lakukan adalah mengotak-atik CSS (cascading style sheets) dari yang standar ke bentuk yang kita inginkan.

Oke langsung saja Saya akan jelaskan satu persatu dan cara memodifikasinya...
Masuk menu Layout kemudian masuk Edit HTML untuk mengota-atik CSSnya

Merubah tampilan Judul Posting

Jika Anda ingin merubah tampilan judul posting Anda maka code CSS yang harus Anda cari adalah seperti dibawah ini

.post h3 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Sidebar

Cari code CSS dibawah ini

.sidebar h2{
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Blog di Header

Cari CSS dibawah ini

#header h1 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Tanggal Posting

Cari CSS dibawah

h2.date-header {
------------
-------------
-------------
-------------
}

Perhatikan Code CSS yang berwarna merah saja karena yang lainya adalah definisinya.
Nah sekarang kita lanjut ke cara otal-atik CSSnya biar tampilanya oke punya.

Ganti garis putus-putus dari code CSS diatas dengan definisi dibawah ini

margin:5px;
padding:5px;
border:1px dotted #000000;
Khusus Margin, Padding dan Border baca artikel ini

font-size:140%
untuk menentukan besarnya huruf , bisa kamu ubah sesuai selera kamu misalnya kamu ubah menjadi 100% atau 150% dan juga satuanya bisa kamu ganti dengan px (pixels) misalnya 14px.

font-weight:bold;
Untuk menentukan ketebalan huruf, Bold adalah jika kamu ingin hurufnya tebal apabila kamu ingin merubah hurufnya biasa ganti bold dengan normal, dan apabila kamu ingin mengganti hurufnya menjadi miring kamu ganti saja dengan code italic.

text-align:right;
Untuk menempatkan posisi text jika kamu isi dengan right maka text akan berada di kanan dan apabila kamu isikan left text akan berada di kiri dan juga center maka textnya akan berada di tengah.

color:#FFFFFF;
Untuk memberi warna huruf, #FFFFFF adalah code warna untuk warna putih carilah code warna yang sesuai dengan keinginan kamu di http://colorschemer.com/online.

Background:#000000;
untuk memberi warna background. silahkan ganti code warna sesuai keinginan kamu di http://colorschemer.com/online untuk mencari code warna.

text-transform:uppercase;
uppercase untuk menampilkan hurufnya dengan huruf besar semua meski dalam pengaturan anda menuliskan huruf kecil. jika Anda ingin mengubah dengan huruf kecil semua ganti dengan lowercase dan jika ingin huruf depanya saja yang besar maka ganti dengan capitalize.

Nah jika di blog Anda pasti CSSnya sudah ada definisinya tinggal mengedit dan menambahi yang kurang-kurang saja.

Sekian dulu artikel ini Saya rangkum dari berbagai sumber salah satunya dengan sistem browsing dan baca artikel dari kang rohman.
Semoga bermanfaat bagi Anda....


BLOG (Mengganti Haloscan Ke Comment Blogger)


Oughhh sekarang para blogger menggunakan commentsbox dari blogger yaitu "embedded comments" ini salah satu dari fitur blogger in draft. Tapi dulu sebelum "embedded comments" muncul banyak para blogger menggunakan Commentsbox dari haloscan yang fasilitasnya sama seperti Comments box dari blogspot yang sekarang. Tapi para blogger berbondong-bondong mengganti dengan comments box dari blogspot sendiri dengan alasan sering mendapat masalah dari haloscan dan haloscan adalah pihak luar dari blogspot. jadi kalau ada yang asli ngapain gak pakai yang asli/orisinil iya gak.
Tapi buat yang terlanjur menggunakan haloscan dan pengen kembali ke jalan yang benar, maksud aku kembali ke Comments asli blogspot yang bisa muncul di bawah postingan langsung ini dibawah ada caranya:


  1. pertama-tama ke menu Layout--->Edit HTML
  2. "Download Full Tempaltes" Untuk membackup Template
  3. Centang Checkbox "Expand widgets Tempaltes"
  4. Kemudian Cari Code dibawah


<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>

<!-- start haloscan (part 1) -->
<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/comments/lovemanisa/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScan(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCount(&#39;<data:post.id/>&#39;);</script>
</a> |
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/tb/lovemanisa/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScanTB(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCountTB(&#39;<data:post.id/>&#39;);</script>
</a>
</span>
<!-- end haloscan -->

</b:if>
</b:if>


</span>

  1. Kemudian ganti Code diatas Dengan Code dibawah ini


<span class='post-comment-link'>

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

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

</b:if>

</span>


  1. Kemudian ke langkah selanjutnya, cari Code dibawah


<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<!-- start haloscan (part 2 - post) -->
<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<p><a class='comment-link' expr:href='&quot;http://www.haloscan.com/comments/lovemanisa/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScan(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCount(&#39;<data:post.id/>&#39;);</script>
</a> |
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/tb/lovemanisa/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScanTB(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCountTB(&#39;<data:post.id/>&#39;);</script>
</a></p>
<script expr:src='&quot;http://www.haloscan.com/comments/lovemanisa/&quot; + data:post.id + &quot;/?m=1&quot;' type='text/javascript'/>
<noscript><a expr:href='&quot;http://www.haloscan.com/comments/lovemanisa/&quot; + data:post.id + &quot;/&quot;'>Comments</a> | <a expr:href='&quot;http://www.haloscan.com/tb/lovemanisa/&quot; + data:post.id + &quot;/&quot;'>Trackback</a></noscript><br/>
</span>
<!-- end haloscan -->

</b:if>



<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>


  1. kemudian langkah selanjtnya adalah gantilah Code Diatas dengan Code dibawah ini


<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<h4><b:if cond='data:post.numComments == 1'>1

<data:commentLabel/>:<b:else/><data:post.numComments/>

<data:commentLabelPlural/>:

</b:if>

</h4>

<dl id='comments-block'>

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

<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><data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'>

<data:comment.body/>

</span><b:else/>

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

</b:if></dd><dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>

</b:if>

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</div>

</div>

</b:includable>

  1. Setelah langkah diatas selesai mari kita lanjut ke langkah selanjutnya
  2. Cari Code dibawah Ini

    <p class='comment-footer'>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </p>
  3. Kemudian ganti Dengan Code dibawah ini

    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <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>

  4. selesai kemudian Save Template dehhh
Jika anda ingin membuat Commentsbox Blogger (baca artikel sebelumnya)

Sekian deh semoga bermanfaat yaaaaaa jangan lupa is komentar yahhhh

BLOG Menambah Gambar Sebelum Judul Posting


Halo Sobat dimanapun Anda berada senyumSebelumnya Anas akan menanyakan kabar kalian semua.. apakah kalian baik-baik saja..? soaloke semoga baik-baik saja yah hari inisengihnampakgigi . Oke kita langsung saja ke topik pembicaraan kali ini yaitu Anas akan membahas tentang cara menambah gambar sebelum judul posting di blog Anda.
Lalu apa gunanya.. soal
Gunanya Cuma untuk memperindah judul posting kita biar terkesan bagus dilihat oleh pengunjung blog Anda dan membuat blog Anda lebih Expresif encem.
Oke buat Anda yang pengen membuatnya silahkan ikuti cara dibawah ini..

Pertama-tama kita pastikan sudah log in ke blogger, setelah log in kita masuk menu Layout kemudian masuk menu Edit HTML

Lalu Cari Code CSS seperti dibawah ini yang mirip di blog Anda


.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;



Nah telah ketemu tambahkan Code semacam background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center; dan juda code height:48px; biar IE (internet Explore) bisa mengadaptasi jika di Mozilla Firefox tidak masalah tanpa code height, sehingga kurang lebih code CSSnya menjadi



.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;


Setelah Anda tambah jangan lupa Atur paddingya agar gambarnya terlihat dengan ukuran yang sempurna... tapi jika Anda menggunakan Background yang saya kasih diatas paddingnya seperti ini padding:48px 0px 0px 45px; 
Nah Code yang tercetak tebal dan merah diats adalah lokasi URL gambar, jika Anda ingin mencari koleksi gambar yang lainya Anda Bisa Cari di www.iconarchive.com.
Dan code height sesuaikan dengan tinggi background kamu.

Jika kamu belum mengerti padding silahkan baca Artikel yang ini dulu biar nanti posisinya terlihat sempurna.

Setelah Semua selesai dan beres tidak ada kesalahan lalu Simpan pengaturan Anda.. dan lihat hasilnya sengihnampakgigi

Nah jika Gambarnya kurang terlihat utak atik saja paddingnya...

Oke saya kira cukup sekian jika ada pertanyaan silahkan lontarkan saja di kotak komentar..
senyum


BLOG (Highlight Post Dengan Tombol Select All)


Sebelumnya pada postingan yang kemaren saya sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu. Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

Seperti contoh dibawah ini




Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...


Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah code <head>




<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>


4. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code ]]></b:skin>



/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px;
border:1px solid #FFC71F;
background:#FFFFCC;
}
.kopiaer { /* -- Style Box Luar --*/
background:red;
padding:7px;
}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00;
border:1px solid #FFC71F;
color:#FFD65C;
padding:2px;
font-weight:bold;
}


Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya

<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">

INI TEKS YANG INGIN DITAMPILKAN

</div>
</div>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.