go blogger ~ indonesia

Home » tipstrick blog

Showing posts with label tipstrick blog. Show all posts

Cara memasang widget IP adress pengunjung blog

Kali ini saya akan memberitahu kepada sobat tentang cara memasang widget IP Address pengunjung blog. Widget ini berfungsi untuk mengetahui IP Address komputer atau laptop yang sedang kalian pakai untuk membuka di blog yang sudah terpasang widget ini. Widget ini tentu sangat bermanfaat bagi pengunjung blog karena mereka bisa mengetahui IP Address. Widget ini tidak hanya menampilkan IP Address saja, tapi juga menampilkan jenis OS pengunjung, Browser yang digunakan pengunjung, Negara asal pengunjung.
Langkah - langkah pembuatannya:

1. Login Blogger
2. Masuk ke Tata Letak > Add Gadget
3. Pilih HTML/JavaScript
4. Paste kode widgetnya di bawah ini

Cara membuat scrool box di blog

Cara membuat scrool box di blog merupakan cara lain untuk menghemat tempat dari space yang ada pada blog. Dengan adanya scrool box ini kita bisa menempatkan beberapa space yang mana ukuran aslinya memanjang ke bawah atau ke samping hanya dengan satu box kecil. Selain itu loading blog juga tidak terlalu lama hanya karena untuk menampilkan halaman yang terlalu panjang. Seperti pada gambar di bawah ini

Untuk proses pembuatannya paste kode di bawah ini pada opsi add gadget

Ganti tulisan isi box dengan gambar atau anchor text sesuai kebutuhan anda. Misalnya:

Maka hasilnya akan seperti ini

Tes 1
Tes 2
Tes 3
Tes 4
Tes 5

Silahkan ganti tinggi dan lebarnya sesuai ukuran sidebar blog anda.

Semoga artikel ini bermanfaat, selamat mencoba.

Cara memasang Breadcrumb navigasi pada blog

Cara memasang Breadcrumb navigasi pada blog atau runtutan label sebuah postingan blog mempunyai beberapa keuntungan diantaranya adalah membantu pembaca untuk melacak sebuah postingan yang ada hubungan dengan apa yang mereka cari di google.Selain itu dalam segi SEO juga diperhitungkan karena ini berhubungan dengan kata kunci pencarian sebuah artikel. Tapi jangan khawatir karena hampir semua template sudah mendukung adanya Breadcrumb ini terus bagaimana dengan template yang belum menyediakan fasilitas ini, tenang saja pada kesempatan kali ini saya akan posting cara pembuatan Breadcrumb navigasi pada blog.

1. Masuk ke dashboard blog >> TEMPLATE >> EDIT HTML >> LANJUTKAN

2. Centang Expand template lalu cari kode ini

Lalu paste kode bawah ini tepat di atasnya

3. Lalu cari kode di bawah ini

Jika ada dua silahkan pilih yang kedua.
Lalu paste-kan kode di bawah ini tepat diatasnya

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == ""'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
 <b:else/>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
 </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Lalu cari kode ini ]]>

5. Silahkan paste kode di bawah ini di atas kode no. 4

6. Terakhir simpan perubahannya lalu lihat hasilnya.

Semoga berhasil, semoga artikel ini bermanfaat. Jika ada kesulitan silahkan sharing dengan berkomentar di bawah.

Cara membuat label tag cloud cumulus berputar di blog

Cara buat label tag cloud berputar pada blog memerlukan beberapa persiapan agar tag cloud tampil maksimal tanpa terkendala banyaknya bandwidth file gambar yang terkuras sehingga menyebabkan loading blog semakin lama malah kadang hilang koneksinya. Saya sarankan bagi anda yang ingin mempercantik tampilan blog dengan berbagai macam gambar untuk meng-upload semua file gambar pada hosting kita sendiri, misalnya upload di google code atau yang lainnya. Pada edisi berikutnya akan saya posting cara upload file ke google code. Label cloud ini akan berputar terus ketika kursor kita dekatkan pada label sehingga seakan-akan memberi efek seperti bola yang berputar. Semakin banyak label yang anda buat semakin tampak-lah efek bola putarnya. Untuk langkah pembuatannya sebagai berikut:
Sebelumnya bagi yang ingin lihat demonya klik di sini.

1. Login ke blog anda

2. Masuk dashboard >> TATA LETAK >> ADD GADGET >> HTML JAVA SCRIPT

3. Copi paste-kan kode di bawah ini pada kolom

Keterangan:
* Tulisan URL BLOG ANDA ganti dengan url blog kamu
* Tulisan NAMA LABEL adalah label yang kamu cantumkan pada setiap posting artikel
* Tulisan NAMA LABEL YANG AKAN DITAMPILKAN maksudnya ketiklah label yang ingin kamu tampilkn pada tag cloud-nya
* height="230" width="250" Ukuran itu adalah panjang lebar kotak wiget-nya silahkan atur sendiri sesuai ukuran blog kamu
* Perlu diingat setiap ingin menampilkan label baru pada tag cloud ini harus kamu pasang secara manual. Mulainya dari kode ini

ubah sendiri nama label dan sumber url-nya dan begitu seterusnya.

4. Jika sudah selesai namai sesuai selera lalu klik save. Selamat mencoba, semoga artikel ini bermanfaat.
Happy blogging

Jika ada kesulitan silahkan sharing denngan berkomentar di bawah ini.

Cara membuat popular post blog tanpa image

Membuat popular post tanpa memakai image mempunyai beberapa keuntungan, diantaranya mempercepat loading blog sehingga para pengunjung pun senang karena mereka tidak perlu berlama-lama di depan komputer cuma untuk menunggu loading page blog anda. Selain itu space yang tersedia juga masih longgar sehingga bisa kita buat pasang iklan adsense atau space iklan berbayar , lumayan bisa buat tambahan beli udud untuk nemenin kita posting info-info terbaru di blog ini he he he..Bagi yang pengen lihat demonya klik di sini

Cara pembuatan popular post blog tanpa image:

1. Login-lah ke blog anda

2. Klik TATA LETAK / LAY OUT >> ADD GADGET >> HTML JAVA SCRIPT

3. Copi kode di bawah ini pada kolom dan silahkan beri judul sesuai selera

4. Jangan lupa ubah tulisan URL BLOG ANDA dengan URL anda sendiri

5. Terakhir klik save lalu lihat hasilnya. Selamat mencoba.

Jika ada kesulitan silahkan sharing dengan berkomentar di bawah sini. Happy blogging!!!

Cara membuat recent post dengan efek gambar berputar

Cara membuat recent post dengan efek gambar berputar ketika kursor kita tujukan pada gambar ini sangat mudah dalam aplikasinya. Tapi syaratnya setiap anda posting jangan lupa untuk memasang gambar yang sesuai dengan tema postingannya, agar tampilan pada recent post kelihatan fresh. Widget ini dilengkapi pula dengan tanggal posting dan jumlah comment. Widget ini sangat cocok untuk anda yang pingin mempercantik tampilan blognya. Untuk mengetahui live demonya silahkan klik di sini, dan berikut tutorialnya:

1. Login ke blog anda >> Klik TATA LETAK / LAY OUT >> ADD GADGET

2. Copi kode di bawah ini

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Nax7BSagD1i4dIuJAWkE4b6Zu02HKxXY0cRFTq2d3xDkmVH2hG4GaHBaN5GmFqbq7GZKwEXGoltDzsG1k0TjniDc1XhS_RPaDMBtZeRuLbC8FzfT3FF8d24jliiAQn-qj6te_UiTWMA/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

Lalu paste pada kolom yang sudah ada, dan silahkan beri judul sesuai selera anda.

3. Ubah tulisan URL BLOG ANDA dengan URL anda sendiri

4. Klik save lalu lihat hasilnya. Selamat mencoba

Jika ada masalah silahkan sharing dengan berkomentar pada kolom di bawah ini.

Cara membuat efek bintang berjatuhan pada kursor

Efek bintang berjatuhan ini merupakan pemanis tampilan blog. Efek ini hanya bekerja ketika kursor kita gerakkan. Proses pembuatannya sangat mudah, hanya mengatur pada add gadget dan memasukkan script di bawah ini pada kotak yang sudah tersedia. Berikut tutorial lengkapnya

1. Log in dan masuk ke blog anda pilih TATA LETAK/LAY OUT >> ADD GADGET >> HTML JAVA

SCRIPT

2. Masukkan script di bawah ini pada kolom

3. Klik save , dan selamat mencoba.

go blogger ~ indonesia

go blogger ~ indonesia

About Me

Advertise

Status Blog ini

Link Bolo-Bolo

Cara memasang widget IP adress pengunjung blog

Cara membuat scrool box di blog

Cara memasang Breadcrumb navigasi pada blog

Cara membuat label tag cloud cumulus berputar di blog

Cara membuat popular post blog tanpa image

Cara membuat recent post dengan efek gambar berputar

Cara membuat efek bintang berjatuhan pada kursor

Label

Cari Blog Ini

Pengen Tanya Apa Bro?

Entri Populer

Comment Anyar