Cara Menampilkan Widget di Halaman Tertentu

By. Dedi Yahya S
 
Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Menampilkan Widget di Halaman Tertentu pada Blogspot.

Cara Menampilkan Widget di Halaman Tertentu :

• Loggin pada Blogger
• Masuk mode Design kemudian Edit HTML
• Centang Expand Template Widget
• Cari kode seperti ini :

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

• Untuk mempermudah pencarian judul widget seperti Pesan ke dalam kotak pencarian browser ( Ctrl+F )
• Jika sudah ketemu tambahkan kode berikut :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

• Tutup dengan kode </b:if> untuk menempatkan dihanya halaman depan saja dan ditempatkan di tempat seperti dibawah ini :

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

• Perhatikan penempatan kode yang berwarna merah
• Jika sudah klik Save

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

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

Untuk menempatkan di halaman Archive saja

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

Untuk menempatkan dihalaman item/posting saja digunakan code

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

Dan untuk pada halaman pages atau static page blogger digunakan

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

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh :

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

Demikian blogger tutorial mengenai Cara Menampilkan Widget di Halaman Tertentu.

 

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^   

Baca Selengkapnya...

Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

By. Dedi Yahya S
 
Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Tepi Gambar Bershadow Dengan CSS 3 pada Blogspot.

Cara Membuat Tepi Gambar Bershadow Dengan CSS 3 di Blog :

• Loggin pada Blogger
• Masuk mode Design kemudian Edit HTML
• Cari kode berikut :

.post img {
- - -
- - -
} 

Catatan :

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 {

• Jika sudah ketemu, ganti kode tadi dengan kode berikut :

.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);
}

• Jika sudah, Simpan Template

Demikian blogger tutorial mengenai Cara Membuat Tepi Gambar Bershadow Dengan CSS 3.

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^   

Baca Selengkapnya...

Cara Mengembalikan Navbar Blog yang Hilang pada Blog

By. Dedi Yahya S
 
Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Mengembalikan Navbar Blog yang Hilang pada Blogspot.

Cara Mengembalikan Navbar Blog yang Hilang pada Blog :

• Loggin pada Blogger
• Masuk mode Rancangan kemudian Edit HTML
• Centang Expand Template Widget
• Tekan Ctrl+F
• Kemudian cari kode berikut

#navbar-iframe {
display: none !important;

• Jika sudah ketemu, Hapus kode tadi
• Namun apabila kode tadi tidak ketemu, berarti kode template Anda berbeda.
• Silahkan cari kode yang ini :

#navbar-iframe{ height:0px; visibility:hidden; display:none}

• Apabila sudah ketemu, Hapus kode tadi

Demikian blogger tutorial mengenai Cara Mengembalikan Navbar Blog yang Hilang pada Blogspot.

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^ 

Baca Selengkapnya...

Cara Menampilkan Ip Adress Untuk Pengunjung Blog

By. Dedi Yahya S

Pada kesempatan kali ini saya  akan memberikan trik dan panduan tentang Cara Menampilkan Ip Adress Untuk Pengunjung Blog.

 

Pengunjung blog akan tahu ip adress mereka lewat blog yang mereka kunjungi, untuk memasangnya diblog anda kunjungi situs http://www.wieistmeineip.de/banner/ 
copy code htmlnya..

• Loggin pada Blogger
• Pada Dashbor masuk mode Tata Letak
• Pada Elemen Laman pilih Tambah Gadget
• Pilih HTML/JavaScript
• Masukan kode Html yang tadi
• Jika sudah, Simpan

Demikian blogger tutorial mengenai Cara Menampilkan Ip Adress Untuk Pengunjung Blog.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^ 

Baca Selengkapnya...

Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll

By. Dedi Yahya S

Pada kesempatan kali ini saya  akan memberikan trik dan panduan tentang Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll.

Link Exchange atau tukeran link adalah saling bertukaran link/alamat blog antara pemilik blog.

cara memasang widget tukeran link cukup mudah. tidak memerlukan penanaman script pada template. berikut ini langkah-langkah memasang widget tukeran link pada blog.

Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll :

• Loggin pada Blogger
• Masuk mode Tata Letak
• Pada Elemen Laman pilih Tambah Gadget
• Pilih HTML/JavaScript
• Masukan kode berikut

<div style="border: 1px solid rgb(153, 153, 153);overflow: auto;
width: 300px;
height: 300px;
text-align: left; ">

<li><a href="URL KALIAN">Anchor name/judul link</a></li>

</div>

• Jika sudah, Simpan

Keterangan:
Untuk menambahkan link baru, tinggal copy paste kode dibawah ini:

width: 300px;  height: 300px; adalah lebar dan tinggi ubah anka untuk menyesuaikan.

<li><a href="URL link">Anchor name/judul link</a></li> 

Contoh:

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 300px;
height: 300px;
text-align: left; ">


<li><a href="URL Link 1">Anchor name/judul link1</a></li>
<li><a href="URL Link 2">Anchor name/judul link2</a></li>
<li><a href="URL dan setrusnya">Anchor name/judul link dan seterusnya</a></li>


</div>  

Demikian blogger tutorial mengenai Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^

Baca Selengkapnya...

Cara Menampilkan Widget Hanya di Halaman Depan Saja

By. Dedi Yahya S

Pada kesempatan kali ini saya  akan memberikan trik dan panduan tentang Cara Menampilkan Widget Hanya di Halaman Depan Saja.

Cara Menampilkan Widget Hanya di Halaman Depan Saja :

• Loggin pada Blogger
• Masuk mode Rancangan
• Pada Elemen Laman ingat nama widget yang ingin ditampilkan pada halaman depan saja
• Kemudian masuk ke Edit HTML
• Lalu cari nama widget yang tadi, misalnya Shoutbox
• Setelah dicari maka akan ada kode seperti ini

<b:widget id="HTML1" locked="false" title="" type="HTML">
<b:includable id="main">
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content>
</data:content>
</div>
</b:if>
<b:include name="quickedit">
</b:includable> 
</b:widget> 

• Kode warna hijau adalah kode yang harus ditambahkan. Ada tambahan lagi, untuk widget yang tidak diberi judul maka blogger akan menamai widget tersebut dengan Html1, Html2, Dst untuk widget Html/javascript. Text1, Text2, Dst untuk widget text. Tetapi saya sarankan agar kawan memberi judul pada setiap widget.

• Jika sudah, Simpan

Demikian blogger tutorial mengenai Cara Menampilkan Widget Hanya di Halaman Depan Saja.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^

Baca Selengkapnya...

Cara Menampilkan Foto di Komentar Blog

By. Dedi Yahya S

Pada kesempatan kali ini saya  akan memberikan trik dan panduan tentang Cara Menampilkan Foto di Komentar Blogspot.

Cara Menampilkan Foto di Komentar Blog :

• Loggin pada Blogger
• Masuk mode Setelan kemudian Komentar
• Pilih "Ya" pada opsi "Tampilkan gambar profil dalam komentar ?"
• Jika sudah, masuk mode Rancangan kemudian Edit HTML
• Centang Expand Template Widget
• Cari kode <dl id='comments-block'>
• Ganti kode di atas dengan kode berikut

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

• Jika sudah, cari kode <a expr:name='data:comment.anchorName'/>
• Jika Anda tidak menemukan kode di atas cari kode yang ini <b:if cond='data:comment.authorUrl'> sebagi penggantinya
• Masukan kode berikut di atas kode yang baru saja tadi di cari

<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'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

•  Jika sudah, Simpan Template

Demikian blogger tutorial mengenai Cara Menampilkan Foto di Komentar Blog.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^

Baca Selengkapnya...