Game Files: bawah

Showing posts with label bawah. Show all posts

Saturday, January 14, 2017

Cara Memasang Tombol Kembali Ke Atas Dan Ke Bawah Di Blog

Ide Cemerlang.com - Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Ke Bawah Di Blog yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload yang saya dapat dari salah satu blog / website dengan alamat url www.ozanhacker.com.

Tips dan trick ini sudah saya peragakan disalah satu blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog berikut ini.

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>


<a href=# style=display:scroll;position:fixed;bottom:5px;right:5px; title=Back to Top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwomX1MavmRV77DjlcGRmsHz7_zvMgdbOs6ckLdUnfD-lCKTHIriyb0_D70PjnBwT1sI8bAcWvKDlBm-HEkaIWA_4copD0o7pMaLxEjwYxqNHGLEbucpMv7c31J3wTpOrWA7e2ydkjC7b/s1600/Untitled-2.png/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>


<a href=# style=display:scroll;position:fixed;bottom:5px;right:5px; title=Back to Top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwomX1MavmRV77DjlcGRmsHz7_zvMgdbOs6ckLdUnfD-lCKTHIriyb0_D70PjnBwT1sI8bAcWvKDlBm-HEkaIWA_4copD0o7pMaLxEjwYxqNHGLEbucpMv7c31J3wTpOrWA7e2ydkjC7b/s1600/Untitled-2.png/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

Kode warna kuning adalah posisi tombol berada
Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan gambarnya dengan selera anda)

Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1. Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

2. Kemudian sisipkan kode berikut ini setelah atau dibawah kode <body>

3. Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Available link for download

Cara Memasang Tombol Share Di Bawah Posting Blog

Tutorial - Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.

1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfxW6hzJMWaxQfZUolnnwWC475NX3Lt0VwjsFynEXQhS4_T_gaNTc42OQSbRIDpQmDasRSUk4ICTF6xaaXz5ZIzUoXauSbZpF8bTxqNP7iS1fx5VKjRKFCDBYiHsO0IsrmGln-prm_2s/s1600/sharebelow.png) no-repeat;
}
.sharebelow a.googleplus {
background-position: 0px -348px;
}
.sharebelow a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow a.pinterest {
background-position: 0px -464px;
}
.sharebelow a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow a.delicious {
background-position: 0px 0px;
}
.sharebelow a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow a.digg {
background-position: 0px -116px;
}
.sharebelow a.digg:hover {
background-position: 0px -174px;
}
.sharebelow a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow a.technorati {
background-position: 0px -928px;
}
.sharebelow a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow a.twitter {
background-position: 0px -928px;
}
.sharebelow a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow a.facebook {
background-position: 0px -232px;
}
.sharebelow a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow a.reddit {
background-position: 0px -580px;
}
.sharebelow a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow a.rss {
background-position: 0px -696px;
}
.sharebelow a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class=sharebelow>
<b:if cond=data:blog.pageType == "item">
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>

<a class=facebook expr_href="http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title rel=external nofollow target=_blank title=Share this on Facebook :>/>

<a class=googleplus expr_href="http://plus.google.com/share?url=" + data:post.url rel=external nofollow target=_blank title=+1 it :>/>

<a class=twitter expr_href="http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Tweet this :>/>

<a class=pinterest href="http://pinterest.com/" rel=external nofollow target=_blank title=Pin it :>/>

<a class=delicious expr_href="http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Add this to Delicious :>/>

<a class=stumbleupon expr_href="http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Stumble this :>/>

<a class=digg expr_href="http://digg.com/submit?phase=2&url=" + data:post.url rel=external nofollow target=_blank title=Digg this :>/>

<a class=reddit expr_href="http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Add this to Reddit :>/>

<a class=rss expr_href=data:blog.homepageUrl + "feeds/posts/default" target=_blank title=Bookmark :>/>
</b:if></div>
<div style="clear:both"/>

4. Simpan dan lihat hasilnya.

Available link for download

Saturday, January 14, 2017

Cara Memasang Tombol Kembali Ke Atas Dan Ke Bawah Di Blog

Cara Memasang Tombol Kembali Ke Atas Dan Ke Bawah Di Blog

Sunday, November 13, 2016

Cara Memasang Tombol Share Di Bawah Posting Blog

Cara Memasang Tombol Share Di Bawah Posting Blog