Ads 468x60px

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Kamis, 11 Juli 2013

Cara Membuat Show Hide Widget di Blog

Cara Membuat Show Hide Widget di Blog
Belajar Internet kali ini akan membahas sedikit tentangCara Membuat Show Hide Widget di Blog. Beberapa di antara kalian mungkin tidak mengerti maksud dari show hide widgettersebut. Tapi sekedar demo silahkan perhatikan di bawah ini.


Klik disini
Ganti dengan kode HTML widget sobat, tulisan, ataupun sekedar foto


Caranya:
1. Login ke akun blog sobat
2. Masuk pada Tata Letak
3. Klik Tambahkan widget/add widget
4. Masukkan kode HTML di bawah ini


<div><div style="margin-bottom: 2px;"><i><b><small>Klik disini</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" type="button" /></div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

Ganti dengan kode HTML widget sobat, tulisan, ataupun sekedar foto

</div></div></div>

5. Simpan
6. Selesai

Sumber:belajarinternet100.blogspot.com
Baca Selengkapnya >>

Renungan Singkat-Menjadi Bukit

Renungan Singkat

Menjadi Bukit

Kolose 3:10 (Dan telah mengenakan manusia baru yang terus menerus diperbaharui untuk memperoleh pengetahuan yang benar menurut gambar Penciptanya.

Mungkinkah Orang Mau Masuk Ke Dalam Gereja Jika Yang KeluarDari Gereja Tidak Menunjukkan Karakter Kristus?

Tuhan Memberkati. Amin

Baca Selengkapnya >>

Selasa, 09 Juli 2013

Cara Menampilkan dan Menyembunyikan Widget di Blog


Anda mempunyai banyak elemen atau widget yang tampil di blog? Widget blog yang terlalu banyak tentunya akan mengurangi kecepatan loading. Namun jika widget itu terasa penting dan tetap ingin mempertahankan keberadaannya ada baiknya anda melakukan pengaturan pada halaman mana saja elemen tersebut akan ditampilkan.
Bagi Anda yang sedang menata tampilan blognya kini saya share teknik cara menampilkan dan menyembunyikan elemen atau widget di halaman tertentu pada sebuah blog. Fungsi dari teknik itu sendiri merupakan salah satu cara untuk membuat halaman blog lebih rapih, lebih efektif, terlihat dinamis, bahkan dapat membuat loading lebih cepat.

Teknik ini menurut saya perlu diketahui dan diterapkan oleh blogger pada blognya. Saya menyarankan hal ini karena tata letak widget dan konten yang berkualitas juga merupakan kriteria penilaian tersendiri baik dari admin maupun pengunjung.

Kita bisa mengatur widget apa saja yang mau ditampilkan di halaman depan atau widget apa saja yang mau disembunyikan di halaman postingan/statis sehingga tampilan blog kita lebih rapih.

Teknik ini cukup mudah untuk diimplementasikan di blog, dan hanya memerlukan waktu beberapa menit saja. Untuk menampilkan dan menyembunyikan widget ini hanya perlu untuk menyisipkan kode HTML sesuai dengan yang diinginkan. 

Coba bandingkan Halaman posting ini dengan Home atau halaman Label.

Berikut Teknik cara menampilkan dan menyembunyikan widget di blog.
catatan: gunakan sesuai keperluan.

1. Untuk menampilkan elemen/widget hanya di Home page.
Kodenya
<b:if cond='data:blog.url == data:blog.homepageUrl'>
---ISI dari elemen atau Widget---
</b:if>
Contoh Penggunannya
<b:widget id='HTML1' locked='false' title='Nama title' 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 != ""'>
<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>
warna merah adalah batas dari penggunaan kode.
warna biru adalah kodenya.

2. Untuk menampilkan elemen/widget hanya di Post page (postingan).
<b:if cond='data:blog.pageType == "item"'>
---ISI dari elemen atau Widget---
</b:if>

3. Untuk menyembunyikan elemen/widget di Post page (postingan artikel).
<b:if cond='data:blog.pageType != "item"'>
---ISI dari elemen atau Widget---
</b:if>

4. Untuk menampilkan elemen/widget di halaman tertentu.
<b:if cond='data:blog.url == "URL Halaman"'>
---ISI dari elemen atau Widget---
</b:if>

5. Untuk menyembunyikan elemen/widget di halaman tertentu.
<b:if cond='data:blog.url != "URL Halaman"'>
---ISI dari elemen atau Widget---
</b:if>

6. Untuk menampilkan elemen/widget hanya di halaman arsip (archive).
<b:if cond='data:blog.pageType == "archive"'>
---ISI dari elemen atau Widget---
</b:if>

7. Untuk menyembunyikan elemen/widget di halaman arsip (archive).
<b:if cond='data:blog.pageType != "archive"'>
---ISI dari elemen atau Widget---
</b:if>

8. Untuk menampilkan elemen/widget hanya di halaman statis (static page).
<b:if cond='data:blog.pageType == "static_page"'>
---ISI dari elemen atau Widget---
</b:if>

9. Untuk menyembunyikan elemen/widget di halaman statis (static page).
<b:if cond='data:blog.pageType != "static_page"'>
---ISI dari elemen atau Widget---
</b:if>

Cara diatas dapat digunakan untuk menampilkan atau menyembunyikan elemen tertentu seperti tampilan halaman depan (Beranda), halaman postingan artikel, halaman statis, ataupun halaman arsip tidak penuh dijejali dengan berbagai macam widget. 

Semoga bermanfaat.
Baca Selengkapnya >>

Minggu, 07 Juli 2013

Cara Membuat Kolom Postingan Terbaru Blog

Pastingan terbaru berfungsi untuk memberi tahu kepada pengunjubg tentang posting yang terbaru pada sebuah blog. Adapun untuk membuatnya tidaklah rumit karena sudah tersedia di blogspot sobat.
Cara membuatnya:
1. Login ke blog sobat
2. Klik dasbord
3. Klik rancangan
4. Klik tambah gadget atau add gadget
5. Pilih gadget feed
6. Akan  muncul

Post terbaru : http://NamaBlogAnda.blogspot.com/feeds/posts/default
Contoh : http://simanmendrofa.blogspot.com/feeds/posts/default

7. Klik lanjutkan
8. Ganti judul gadgetnya sesuai selera sobat
    misal:Posting Terbaru
9. Save

Semoga Bermanfaat !
Baca Selengkapnya >>

Kamis, 28 Februari 2013

Widget Daftar Isi Blog

Kode untuk membuat widget daftar isi :
<div style="overflow:auto;padding:0px 10px; width:auto; height:260px;border:1px solid #bbbbbb;">
<div>
<ul>
<script style="text/javascript">
var numposts = 9999;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tutorialblogspot.googlecode.com/files/toc-bulletlist.js'></script>
<ul><script src="http://simanmendrofa.blogspot.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=9999"></script>
</ul></ul></div></div>
Untuk kostumisasi :
  1. Ganti tulisan yang berwarna merah dengan URL blog sobat.
  2. Kalau sobat blogger memasang widget ini di tempat postingan, hapus kode height:260px; (kita menghapus kode itu supaya tidak menggunakan scroll bar).
  3. Kalau sobat blogger ingin mengganti background dari widget ini, sobat blogger tambahkan kode background: #F6CEE3; setelah kode border:1px solid #bbbbbb;
  4. Untuk warna bingkainya, silahkan sobat blogger ganti kode #bbbbbb dengan kode warna yang lain.
Semoga Bermanfaat!

Baca Selengkapnya >>

Minggu, 02 September 2012

Cara Membuat Judul Blog Bergerak


Dalam postingan kali ini akan membahas tentang Cara Membuat Judul Blog Bergerak.Kenapa judul blognya bergerak ? tujuanya mungkin supaya Blog jadi terlihat dinamis.Judul blog kita jadinya akan terlihat berjalan pada title bar browser.
Buat kamu yang ingin membuat Judul Blog Bergerak silakan ikuti tutorial Cara Membuat Judul Blog Bergerak Berikut ini.

1.LOGIN ke blogger.

2.Kemudian klik Tata Letak Kemudian Klik Lagi Edit HTML.

3.Selanjutnya cari kode berikut ini.

<title><data:blog.pageTitle/></title>

4.Hapus Kode Tersebut dan ganti dengan Kode berikut ini>

<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5.Kamu bisa mengganti angka 100 yang berwarna biru tersebut dengan keinginan kamu.Angka tersebut adalah kecepatan pergerakan judul blog kamu.

6.Kalo udah selesai silakan klik SAVE TEMPLATE

Baca Selengkapnya >>

Cara Mendaftarkan Blog di Yahoo dan Bing

Seorang blogger pasti menginginkan agar traffic kunjungan ke blognya terus menanjak. Agar optimal dan mendapatkan tujuan tersebut tentunya seluruh search engine yang ada di dunia maya ini mengindeks blog kita. Tentunya, kita tidak hanya berdiam diri hanya memanfaatkan Google saja sebagai mesin pencari utama dan yang paling banyak mengindeks blog kita. Karena selain google masih ada search engine-search engine besar lainnya seperti yahoo dan bing.

Semenjak merger antara search engine bing dan yahoo akhir November 2011 lalu, submit blog cukup dilakukan di Bing Webmaster tools. Agar blog kita ingin terindeks mesin pencari yahoo dan Bing, yang pastinya kita harus mendaftarkan / submit blog kita ke yahoo dan bing tersebut. Mendaftarkan blog / situs ke Bing sebenarnya cukup mudah, namun untuk ping dan submit sitemapnya yang kadangkala bagi blog baru dan blogger pemula cukup merepotkan (bisa dibilang malah nggak bisa, hehehe, inilah yang saya alami dulu).


Ya sudah tidak perlu berbasa-basi lagi dah. Buat sobat yang ingin mendaftarkan blognya di bing silakan ikuti langkah2 berikut.

1. Untuk memudahkan, sobat pastikan memiliki akun windows live, seperti ; aku@hotmail.com 
2. Login ke http://www.bing.com/toolbox/webmaster/ 
3. Klik webmaster tool sign in/log in with windows live id

 
Klik add site > masukkan nama blog sobat. Klik submit

5. Muncul perintah / permintaan agar kita memverifikasi blog kita.
    Pilih option 2, karena menurut saya ini adalah langkah termudah.

6. Copy kode yang muncul setelah kita klik option 2.





7. Masuk ke akun blogger sobat, > Rancangan > Edit HTML

8. Cari kode <head> kemudian masukkan kode yang telah dicopy di option 2 tadi, dibawah 


kode <head>


seperti contoh di bawah;


9. Simpan template.

10. Kembali ke bing webmaster, kemudian klik Verify.

11. Selesai dan blog sobat sudah terdaftar di bing dan yahoo search.

Lihat gambar di bawah ! perbedaan Blog yang sudah terdaftar dan terverifikasi dengan yang belum terverifikasi, urutan 1 sampai 3 sudah terverifikasi, sedangkan yang no. 4 belum Verified, ditunjukkan dengan kata Verify Now, yang berarti belum diverifikasi. Blog yang sudah terverifikasi adalah jika kita sudah memasukkan kode pada option 2 tadi.



Baca Selengkapnya >>

Jumat, 10 Agustus 2012

Cara Mudah Memasukkan Link ke Gambar Blog

Bagaimana kak cara masukin link di gambar jadi kalau ada yang klik gambarnya langsung mengarah ke link tertentu yang kita masukkan ? kayak mana kak ? heheehe, itulah pertanyaan dari adik adik blogger, nah Berry Blog akan tunjukin caranya tanpa basa basi dengan cara yang mudah dan praktis .

Pertama, Log in akun blog .

Kedua, Misal mau masukin gambarnya di dalam postingan, nah pilih new post atau entri baru dulu .

Ketiga, Upload dulu gambar dan ambil link gambarnya , lihat di cara menyimpan gambar du blog dan  mengambil link gambar.

Keempat, copas kode dibawah ini ke postingan sobat dan ganti tanda merah dengan milik sobat .

<a href="masukan link yang ingin dituju"><img src="masukkan link gambar" /></a>

contoh : 

<a href="http://simanmendrofa.blogspot.com/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJl-j0jrvTdcIB2snVPFVPN4HaFwtnoO6lsKww7vZwwXbx5ZpL-46GxFpfG9ueflETSv_ZFxjEwIQ-kdp-JfSpYL0J2fbKGBBgMMYebQ0Xi1_WcFxQRPNUJ770897pHQ5d2XqwQwP2_0a/s400/Moon+Chae+Won5.jpg" /></a>

maka hasilnya seperti ini : 

Demikian tutorial Cara Mudah Memasukkan Link ke Gambar Blog, semoga bermanfaat!

Baca Selengkapnya >>