Bebas: Widget Blogspot

Tampilkan postingan dengan label Widget Blogspot. Tampilkan semua postingan

Cara Membuat Widget About The Author Box Untuk Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Author dalam Bahasa Indonesia berarti penulis. Jadi dalam dunia Blogger author adalah penulis artikel pada sebuah Blog. Dalam kegiatan Blogging, sebaiknya kita jangan merahasiakan identitas kita pada para pembaca. Perkenalkanlah diri kita sebagai penulis artikel pada sebuah Blog kepada para pembaca, agar terjadi hubungan atau komunikasi yang baik antara kita sebagai penulis dan pembaca. Salah satunya dengan memasang widget Author Box yang menjelaskan About The Author.
Sebenarnya sudah disediakan widget bawaan dari Blogspot yang berfungsi untuk memperkenalkan diri kita sebagai penulis, yaitu Widget Mengenai Saya dari Google Plus. Namun karena tampilanya yang mengacu pada tampilan Google Plus, kadang-kadang menjadi tidak cocok dengan tampilan Blog kita. Oleh karena itu, maka banyak Blogger yang membuat widget Author Box-nya sendiri sehingga tampilanya cocok dengan tampilan Blog. Dan kali ini saya akan bagikan salah satu karya seorang Blogger (tidak tahu siapa) dalam tampilan widget Author Box yang dapat sobat pakai dan bisa diedit ulang. Tampilanya seperti berikut:

Perhatikan tampilan widget Author Box di atas. Warna Background pada widget akan otomatis mengikuti warna kolom widget pada Blog sobat. Jadi kemungkinan widget ini akan cocok untuk dipasang di Blog mana pun. Untuk tampilan foto profil, akan bergerak sedikit berputar ke arah kiri ketika disentuh kursor. Di sampingnya terdapat sedikit kata-kata perkenalan dan diikuti dengan tulisan "read more". Tulisan read more ini bisa sobat masukan link. Saya sarankan sobat mempunyai halaman About Me pada Blog sobat. Jadi tulisan read more ini dapat sobat masukan URL halaman About Me yang sobat miliki. Selain itu di bagian bawahnya terdapat icon-icon Sosial Media diantaranya Feed Burner, Google Plus, Facebook dan Twitter yang dapat sobat masukan link ke halaman Sosial Media (milik sobat) tersebut. Icon-icon Sosial Media ini berwarna Abu-abu, dan akan bergerak dan berubah warna ketika disentuh kursor.

OK jika sobat tertarik untuk memasang widget About The Author Box ini, silakan ikuti langkah-langkahnya berikut.
1. Login ke akun Blogger sobat.
2. Pada halaman dashboard, masuklah lah ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.
4. Pilih HTML/Javascript, dan masukan kode berikut.

Keterangan:
-Kode berwarna biru adalah ukuran tampilan foto profil.
-Kode berwarna merah adalah URL Foto Profil.
-Kode berwarna hijau adalah kata-kata perkenalan.
-Kode berwarna oranye adalah URL halaman About Me.
-Kode berlatar biru adalah URL RSS Feedburner. Jika belum punya, silakan kunjungi artikel saya tentang Cara Mendaftarkan Website/Blog di Google Feedbuner.
-Kode berlatar merah adalah URL ID akun Google Plus.
-Kode berlatar hijau adalah URL ID akun Facebook.
-Kode berlatar oranye adalah URL ID Twitter.

Sobat bisa mengedit-edit ulang tampilan widget Author Box ini, silakan berkarya.

5. Klik Simpan jika telah selesai, dan silakan lihat hasilnya.

Sekian posting untuk kali ini, semoga sobat sekalian menyukai widget yang saya bagikan ini.

0 komentar »

Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Kadang-kadang pada Blog yang kita miliki kita ingin memasang widget yang kita anggap penting dengan tampilan yang dapat menarik perhatian pengunjung. Tujuanya agar terjadi sebuah aktivitas pada widget tersebut, aktivitas apa pun itu. Contohnya, kita mempunyai halaman Blog kita di Facebook. Dan kita memasang widget like box fans page halaman tersebut pada Blog yang kita miliki. Tentunya ini dilakukan agar semakin banyak orang yang menyukai halaman Blog kita di Facebook. Untuk dapat menarik perhatian pengunjung Blog lebih banyak, tidak sedikit Blogger yang memasang widget like box facebook melayang, atau widget like facebook yang tiba-tiba muncul di depan layar (orang awam bilang).
Menurut saya widget seperti itu jelas mengganggu pemandangan pengunjung saat sedang membaca sebuah artikel. Apalagi jika widget tersebut muncul berkali-kali dan menghalangi artikel yang sedang dibaca oleh pengunjung. Jangan sampai membuat pengunjung kesal deh sobat, apalagi jika membuat pengunjung malah meninggalkan Blog yang sobat cintai. Saya sendiri pernah mendapat kritik dari pengunjung karena memasang widget melayang ini, "sangat mengganggu pemandangan saya", katanya.

Ada cara lain untuk menyajikan widget yang sobat anggap penting ini. Widget ini tentu terasa lebih nyaman bagi para pengunjung jika dibandingkan dengan widget melayang. Setidaknya tidak terlalu mengganggu pemandangan pengunjung karena widget ini terdapat di posisi sudut kanan bawah pada blog yang tentunya tidak akan menghalangi artikel. Selain itu widget ini hanya akan tampil ketika layar digulir ke bawah pada jarak tertentu, dan akan hilang kembali jika layar digulir ke atas atau jika pengunjung meng-klik tombol close pada widget. Karena saya orang yang masih awam, widget ini saya sebut Widget Show Hide di Sudut Kanan Bawah Blog, hehe. Perhatikan saja contoh tampilanya berikut ini.

Nah, dengan menyimak sedikit penjelasan dan melihat screenshot di atas, apakah sobat tertarik untuk menerapkanya di blog sobat? Jika jawabanya iya, atau sobat sekedar ingin mencobanya, silakan ikuti langkah-langkahnya berikut ini.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya tetap akan berada di pojok kanan bawah Blog sobat.
4. Pilih mode HTML / Javascript.
5. Masukan kode di bawah ini.

<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background: #ffffff repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

    <div style="width:300px; padding:10px; margin:0 auto; overflow:hidden;">

        <a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>

        <strong style="color:#808080;"><center>Pesan Pada Widget</center></strong>

<==Masukan script widget disini==>

        </div></div>

Ubah tulisan berwarna biru dengan pesan pada widget yang sobat inginkan. Contoh: "Follow dan Like Yah Sobat".
Masukan script widget yang sobat inginkan pada tulisan berwarna merah. Sobat bisa memasukan lebih dari satu widget. Namun jangan terlalu banyak yah sobat, menurut saya tampilanya kurang bagus. Masukan maksimal 2 script widget saja. Contohnya widget tombol follow twitter (dapatkan script-nya disini) dan widget like box facebook (dapatkan script-nya disini).

6. Setelah selesai menentukan tampilanya, silakan klik Simpan.

Sebenarnya script widget yang saya berikan diatas masih bisa sobat ubah tampilanya, contohnya pada kode berwarna oranye. Silakan saja modifikasi dengan kreasi sobat sendiri. Semoga pembahasan kali ini bermanfaat.

0 komentar »

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Beberapa waktu lalu saya sempat membagikan salah satu cara memodifikasi widget Label, tepatnya pada widget Label dengan tampilan Cloud yang kebetulan kali ini juga masih pada tampilan tersebut. Namun berbeda dengan yang dahulu yakni Label Cloud dengan ukuran Font yang berbeda, mungkin sekarang tampilanya akan lebih unik dan menarik lagi. Gambar di samping mungkin bisa menjadi gambaran hasil dari modifikasi widget Label yang sekarang akan saya bahas. Mau tahu bagaimana uniknya? Silakan simak lebih lanjut dan bila perlu coba pada Blog sobat.
Sedikit penjelasan tentang hasil dari modifikasi widget Label kali ini. Setiap nama label akan dilingkari dengan border berwarna. Dan ketika cursor disentuhkan pada salah satu nama label, maka warna border akan berubah serta nama dengan border akan berputar kurang lebih seperempat lingkaran.
Perhatikan screenchot hasil modifikasi-nya di bawah ini.

Bagaimana? dengan sobat melihat screenshot diatas, apakah tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah berikut ini:

Pertama yang harus dilakukan adalah sobat memasang dulu widget Label pada Blog sobat, tentunya dengan tampilan cloud.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih Widget Label dan silakan sobat bisa atur sendiri tampilanya. Namun jangan lupa, sobat harus memilih tampilan cloud.

5. Klik simpan, sobat telah berhasil memasang widget Label Cloud pada Blog sobat.
Kini sobat mulai untuk mengedit tampilanya agar lebih unik dan menarik.
6. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #ADFF2F;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;

Ubahlah kode berwarna merah dengan kode warna yang sobat inginkan. Kode ini merupakan warna awal border yang melingkari nama Label.
Ubahlah kode berwarna biru dengan kode warna yang sobat inginkan. Kode ini merupakan warna pada nama Label yang sedang disentuh kursor.

8. Klik Simpan Template, selesai.

0 komentar »

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Bagi seorang Blogger (khususnya pada Blogspot) yang sudah tidak pemula lagi, istilah label bukanlah hal yang asing. Mereka menerapkan Label ini pada Blog-nya untuk mengelompokan artikel berdasarkan jenisnya. Hal ini tentunya dilakukan untuk membantu pengunjung Blog agar lebih mudah dalam menjelajahi sebuah Blog. Namun bagaimanakah seorang Blogger menampilkan Label ini agar pengunjung dapat melihat kategori-kategori artikel pada Blog-nya?
Blogspot sudah menyediakan widget untuk Lebel dengan dua pilihan tampilan, yaitu tampilan Daftar dan tampilan Cloud. Nah, sekarang saya akan membahas widget Label dengan tampilan Cloud. Berbeda dengan tampilan daftar yang menampilkan daftar label secara vertikal, tampilan Cloud ini menampilkan widget label dengan terus menjejerkan nama-nama label seperti sebuah kalimat.
Ternyata widget Label Cloud ini dapat dimodifikasi agar tampilanya lebih menarik. Kali ini saya akan bagikan salah satu cara memodifikasinya yang akan menghasilkan tampilan widget Label Cloud dengan ukuran Font yang berbeda. Hasil modifikasi ini juga membuat, semakin banyak Label diisi artikel, maka nama Label akan ditampilkan dengan ukuran Font yang besar. Sedangkan sebaliknya, jika sebuah Label jarang diisi artikel maka nama Label akan ditampilkan dengan ukuran font yang kecil.

Bagaimana? Tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah membuatnya.

Memasang widget Label Cloud.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan untuk dipasang widget Label Cloud.
4. Silakan pilih widget Label dan sobat tentukan tampilanya. Yang paling penting adalah sobat harus memilih opsi "Cloud".

5. Klik Simpan, dan widget Label Cloud pun telah terpasang di Blog sobat.

Memodifikasi widget Label Cloud.

6. Berikutnya adalah memodifikasi widget Label Cloud tersebut. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

Re-Edit:
Ubahlah kode berwarna merah dan bercetak tebal miring, dengan kode HTML warna yang sobat inginkan.
Dengan kode di atas maka akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda dan warna-warni, seperti contoh berikut.

Jika sobat tidak menyukai tampilan yang warna-warni atau hanya ingin satu warna saja, silakan hapus kode yang berwarna merah (color:#XXXXXX;). Maka dengan script ini akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda saja.

Lalu font yang dihasilkan akan berwarna apa? Tentunya warna font ditentukan oleh setelan pada Template Blog yang sobat gunakan. Berikut contoh hasilnya.

8. Klik Simpan Template, dan silakan lihat hasilnya.

0 komentar »

Cara Membuat Widget Google+ Follower dengan Efek Keren

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Posting terakhir pada bulan Ramadhan dan sebelum mudik lebaran. Saya akan bagikan widget Google+ Follower yang telah dimodifikasi hingga memiliki efek yang keren. Sebelumnya, apakah Google Plus itu? Google Plus adalah sosial media dari Google, yang pastinya sudah tidak asing lagi di kalangan Blogger.
Karena yang saya tahu saat ini pengguna akun Blogger juga otomatis memiliki akun Google plus, begitulah kurang lebih. Untuk menghubungkan satu pengguna dengan pengguna lain, Google plus juga mempunyai istilah Follower. Namun yang akan saya bahas kali ini tidak akan menggali tentang Google plus. Melainkan widget Follower dari Google plus untuk Blogspot, yaitu Google+ Follower.
Sebenarnya widget ini telah disediakan oleh Blogpot pada daftar widget, pasti sobat Blogger tahu. Namun, masih polos belum ada efek apapun. Untuk sobat yang tidak suka kepolosan, silakan terapkan salah satu efek yang akan saya berikan ini pada widget Google+ Follower milik sobat.
Contoh tampilanya seperti berikut.

Widget pertamanya berwarna putih, dan berubah menjadi abu-abu ketika disentuh kursor.

Ok, untuk sobat yang suka dengan widget ini, silakan simak langkah-langkah membuatnya.
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut

Keterangan:
Ubah kode berwarna merah dengan ID Google plus sobat.
Kode berwarna hijau adalah warna mula-mula pada widget.
Kode berwarna biru adalah warna pada widget ketika disentuh kursor.
Kode berwarna pink bercetak tebal adalah ukuran kotak yang membungkus widget.
Kode berwarna pink yang bercetak miring adalah ukuran widget Google+ Follower sendiri.

Untuk mengetahui ID Google plus sobat, silakan masuk ke Google plus. Dan perhatikan gambar berikut.

6. Klik Simpan, jika sobat tidak mengubah kode tampilanya, maka hasilnya akan seperti berikut.

0 komentar »

Cara Memasang Widget Pengikut Blog dengan Mode HTML

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Widget pengikut Blog adalah widget yang menampilkan daftar pengguna yang mengikuti Blog sobat, dengan disertai Join This Site Button. Menurut saya widget ini sangat bermanfaat karena setiap kita update posting, maka posting tersebut akan tampil pada halaman dashboard pengikut Blog kita. Jadi kemungkinan setiap kita membuat posting baru akan langsung mendapat pembaca.
Dengan cara pemasangan biasa, terasa sangat mudah. Karena widget ini telah disediakan Blogspot. Yaitu dengan cara masuk ke bagian Tata Letak>> Tambahkan Gadget>> Gadget Lainya>> Pengikut>> Simpan.

Namun karena adanya keperluan lain, pembuatan widget ini dengan mode HTML pun diperlukan. Saya memerlukan cara mode HTML karena akan menggabungkan widget ini dengan widget lainya. Mungkin sobat juga memerlukan cara membuat widget ini dengan mode HTML, silakan simak lebih lanjut.
Cara ini gampang-gampang susah sob, namun yang saya tahu syaratnya sobat harus memakai Browser Mozila Firefox. Silakan sobat yang mau mencobanya, saya sarankan menyimak sambil mempraktikan.

1. Login ke akun Blogger sobat.
2. Pasang dulu widget ini dengan cara biasa. Masuk Tata Letak>> Tambahkan gadget>> Gadget Lainya>> Pengikut>> Beri judul contohnya "Pengikut">> Simpan.
3. Masuk ke halaman Blog sobat.
4. Klik kanan pada halaman Blog sobat>> Pilih Lihat Kode Sumber Laman/ View Page Source.

5. Dengan menggunakan tombol ctrl+F, cari judul widget yang telah sobat tentukan sebelumnya. Saya contohkan judulnya "pengikut". Akan ada beberapa hasil pencarian dari keyword "pengikut". Dengan menekan tombol Enter beberapa kali, pilihlah hasil pencarian kata "pengikut" yang disekitarnya terdapat kode-kode seperti berikut.

6. Nah, kode ini adalah kode sumber Widget Pengikut Blog. Copy kode tersebut dimulai dari <div id="div-xxxxxx"></div> sampai </script>. Jangan sampai salah, perhatikan contoh gambar diatas.

7. Masuk kembali ke bagian Tata Letak pada Blog sobat.
8. Klik Tambahkan gadget di posisi yang sobat inginkan.
9. Kini sobat pilih mode HTML/Javascript.
10. Masukan kode berikut.

11. Lalu di bawahnya, baru sobat pastekan kode yang telah sobat copy dari kode sumber Widget Pengikut Blog. Hingga kurang lebih hasilnya seperti berikut

Perhatian:
Sobat jangan menggunakan kode diatas, karena itu adalah kode sumber Widget Pengikut Blog milik saya. Gunakanlah kode sumber Widget Pengikut Blog milik sobat yang sebelumnya telah sobat copy-paste.
Kode yang berwarna biru adalah kode-kode warna yang bisa sobat modifikasi.
Kode yang berwarna merah adalah kode-kode ukuran yang bisa sobat modifikasi juga.

12. Klik Simpan, selasai.

Begitulah Cara Memasang Widget Pengikut Blog dengan Mode HTML. Oh ya, saya pernah mengatakan dengan memasang widget mode HTML, maka manfaatnya adalah widget tersebut dapat digabungkan dengan widget lain yang tentunya widget mode HTML juga. Berikut contohnya.

Pemasangan Widget Pengikut Blog dengan Mode HTML

0 komentar »

Gabungan Widget Like Facebook, Follow Twitter, dan Google+ untuk Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Saya pernah membagikan cara membuat widget tombol like facebook, tombol follow me twitter, dan tombol google +1. Kali ini saya akan bagikan salah satu hasil penggabungan widget-widget tersebut dalam satu buah widget, dengan ditambah satu widget lagi yaitu follow on google+.
Tujuan dibuatnya widget ini adalah, mengumpulkan widget-widget sosial pada satu area, sehingga pengunjung akan lebih mudah menemukan widget sosial pada Blog sobat. Selain itu juga agar tata letak widget terlihat rapih, karena widget-widget sosial ini diletakan dalam sebuah tampilan kotak, dan dalam tampilan kotak tersebut setiap widget-nya memiliki ruang masing-masing. OK, untuk lebih jelasnya coba perhatikan screenshot widget tersebut di bawah ini.

Bagaimana? sobat suka dan ingin menerapkanya di blog sobat? Silakan ikuti langkah-langkah berikut ini.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

Saya hanya share widget dengan script yang telah ada, yang telah dibuat kawan Blogger lain sebelumnya. Widget ini cocoknya dipasang pada sidebar dengan lebar sekurang-kurangnya 300px. Kecuali untuk para Blog master, mungkin widget ini bisa dipasanng dimanapun ia inginkan. Silakan, edit lebih lanjut widget ini jika memang sobat bisa.

Namun saya tidak khawatir, kebanyakan Blogger menggunkan sidebar yang tidak kurang dari 300px.
Keterangan:
Ubah kode berwarna merah dengan url Blog sobat.
Ubah kode berwarna hijau dengan ID Twitter sobat.
Ubah kode berwarna orange dengan ID Google Plus sobat.

Ubah kode berwarna biru dengan alamat halaman Fanspage Facebook sobat.
Kalau sobat belum punya halaman Fanspage Blog sobat di Facebook, tentunya sobat harus buat dulu. Silakan baca panduanya, klik disini.

6. Jika kode telah diletakan dan selesai disesuaikan, maka klik Simpan.

Silakan lihat hasilnya, semoga berhasil.

0 komentar »

Cara Membuat Tombol Back To Top di Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Membuat Tombol Back To Top di Blog.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.

Berikut langkah-langkah dalam Membuat Tombol Back To Top di Blog.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjs3fDpRMQTdbCI6M3aFovaSWBVfHcPNQS3TllrRvkgvNt4uh-Kmk8Ll2w-d3ZroXCdUqu5_iPp8c9N5hfXtVB_tBX7fMgczi5CweRj0Y5ptcrXIoGqBjoSb7qrPGfrAPWExd4Fc7AMMBO/s1600/back+to+top13.png" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

</script>

Catatan:

Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
Kode-kode berwarna hijau bisa sobat ubah:

- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
- Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
- Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
- Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
- Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
- Scroll Back To Top: title pada tombol

Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.

Ada beberapa pilihan gambar untuk tampilan tombol Back To Top:

6. Setelah selesai, maka klik Simpan.

0 komentar »

Cara Mendaftar dan Memasang Widget Histats di Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Sudah lama saya ingin membuat posting tentang mendapatkan data pengunjung dan widget dari histats untuk Blog. Namun baru sekarang bisa terlakasana dan akan saya bahas pada artikel Cara Mendaftar dan Memasang Widget Histats di Blog. Histats baik digunakan untuk memantau pengunjung pada Blog sobat untuk membantu sobat mengetahui perkembangan pada blog sobat, atau untuk memamerkan keramaian pengunjung Blog sobat pada publik, hehe.
Histats ini akan memberikan data Traffik pengunjung secara detail meliputi: jumlah pengunjung yang sedang online pada Blog sobat, penayangan hari ini, pengunjung hari ini, total kunjungan, total penayangan, kota/negara pengunjung berasal dan lain-lain.

Bagaimana? tertarik untuk mendapatkan data dari Histats? Silakan daftar, dapatkan info dan widgetnya.

1. Masuk ke halaman Histats, dan klik register.

2. Pada form create new account, isikan data-data yang diminta histats. Istilah surename adalah nama keluarga atau nama belakang sobat. Setelah pengisian selesai, centang pada kotak I have read and agree Publisher Agreement Terms, isikan kode captcha dan klik Register.

3. Akan tampil tulisan berikut yang meminta sobat memeriksa alamat email untuk verifikasi.

4. Maka periksalah kotak masuk pada email sobat, akan ada pesan dari histats. Klik link yang diberikan histats untuk verifikasi.

5. Akan muncul pesan dari histats bahwa akun anda telah aktif, dan meminta sobat untuk login.

6. Maka lakukanlah login dan mulai menggunakan Histats. Jika telah login, klik Add e website.

7. Pada form create new website/blog isikan data yang diminta histats, diantarnya:

Site url : url Blog.
Language : bahasa yang digunakan pada Blog.
Time Zone : Zona waktu di tempat sobat berada.
Category : kategori konten pada Blog.
Title : Judul Blog.
Description : Deskripsi singkat isi Blos.
Page views start value : angka memulai dihitunngnya penayangan. Jika dari nol, maka biarkan kosong
Visitors start value : angka memulai dihitunngnyapengunjung. Jika dari nol, maka biarkan kosong
Stats visibility : pilih opsi pertama jika data traffik akan ditampilkan pada publik.
Centang kotak Accept pada opsi Terms of use & Privacy Policy.
Isikan kode captcha.

Jika telah selesai mengisi form create new website/blog, klik Continue.

Selesai, sobat sudah membuat akun histats dan mendaftarkan Blog sobat untuk diberi panatauan pengunjung oleh histats. Silakan operasikan sendiri, karena yang akan saya bahas selanjutnya adalah mendapatkan widget dari histats untuk dipasang pada Blog.

8. Klik pada nama Blog yang akan sobat pasang widget histats.

9. Pada halaman ini akan tampil secara rinci data pengunjung sobat. Klik Counter CODE.

10. Klik add new counter

11. Terdapat banyak tampilan, silakan pilih yang sobat suka.

11. Centang data-data yang sobat butuhkan untuk ditampilkan pada Blog sobat, dan klik save.

12. Klik Counter Id yang baru dibuat.

13. Sobat akan diberikan kode oleh histats, pilih opsi standard saja dan coppy kodenya.

14. Lalu pastekan pada widget Blog sobat. Masuk Blogger>>Tata Letak>> Tambahkan Gadget>> HTML/Javascript>>Paste>>Simpan

Selesai, widget histats telah terpasang pada Blog sobat. Namun biasanya widget tersebut menyesuaikan terlebih dahulu, jadi harus sabar yah sobat...

0 komentar »

Membuat Sticky Widget pada Sidebar Blog

Diposting oleh Unknown Label: Blogging, Widget Blogspot

Ada widget menarik untuk Blog nih sobat, namanya Sticky Widget. Saya dan mungkin sobat Blogger pun sudah sering melihat widget ini, namun saya baru tau nama dari widget ini yaitu Sticky Widget. Ingin tau lebih banyak tentang Sticky Widget dan cara memasangnya? Silakan simak terus artikel ini tentang Membuat Sticky Widget pada Sidebar Blog.
Seperti apa sih Sticky Widget itu? Pengertian simple-nya Sticky Widget itu widget yang menempel. Namun didalam Blogspot Sticky Widget adalah widget pada posisi tertentu yang akan selalu mengikuti tampilan monitor walaupun tampilan halaman terus digulung namun akan berhenti pada posisi awal yang telah ditentukan. Untuk lebih jelasnya, perhatikan gambar berikut.

Sudah jelaskan bagaimana tampilan Sticky Widget ini? Biasanya Sticky Widget dipasang pada Sidebar bagian bawah. Karena jika dipasang pada sidebar bagian atas, hasilnya akan bertabrakan. Sangat berguna jika dipasang widget-widget sosial seperti rekomendasi situs Google +1, Tombol Follow / Follow box Twitter, Tombol Like / Like Box Facebook, dll. Dan Sticky Widget ini tidak akan mengganggu pandangan pengunjung Blog sobat, tidak seperti halnya Widget Melayang.

Bagaimana, sobat tertarik untuk memasang Sticky Widget ini pada Blog sobat? Untuk sobat yang ingin memasangnya, silakan simak langkah-langkah yang akan saya jelaskan dengan teliti, karena memang menurut saya pembuatnya agak rumit. OK, kita mulai.

Pertama, pastikan sobat telah memasang widget pada sidebar yang akan dibuat Sticky.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template dan klik Edit Template.
3. Dengan tombol ctrl+F, sobat cari kode ]]></b:skin> dan letakan kode berikut diatas kode ]]></b:skin>.

#catcher{
height:930px;
}

#sticky{
width:300px;
height:auto;
}

# Pada kode berwarna merah, sobat ubah sesuai dengan tinggi widget catcher pada Blog sobat. Widget Catcher adalah widget yang tidak akan dibuat Sticky, yang berada diatas widget Sticky.

#Contohnya terdapat catcher widget yaitu popular posts 300px, label 300px, dan blog archive 300px, dengan jarak antar widget 10px. Jadi sobat harus memberi lapak untuk catcher widget dengan tinggi 300px+10px+300px+10px+300px+10px = 930px. Jika sobat bingung menentukan tinggi catcher widget, silakan dikira-kira saja dahulu, nanti bisa sobat ubah lagi ketika Sticky Widget berhasil dibuat. Jika hasilnya catcher dengan sticky menempel, sobat tambah ukuran catcher-nya. Jika hasilnya catcher dengan sticky terlalu jauh, sobat kurangi ukuran catcher-nya.

#Sobat ubah kode berwarna biru dengan ukuran lebar sidebar/Sticky Widget.

4. Langkah berikutnya, dengan tombol ctrl+F sobat cari kode </body> dan letakan kode berikut diatas kode </body>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop &lt;= docViewTop));
        }
        var catcher = $(&#39;#catcher&#39;);
        var sticky = $(&#39;#sticky&#39;);
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css(&#39;position&#39;,&#39;fixed&#39;);
                sticky.css(&#39;top&#39;,&#39;0px&#39;);
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight &gt; sticky.offset().top) {
                sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                sticky.css(&#39;top&#39;,stopHeight);
            }
        });
    });
</script>

5. Selanjutnya, bagian ini sedikit membingungkan. Dengan tombol ctrl+F sobat cari kode <div id='sidebar-wrapper'> atau <div id='sidebar'> atau sebagainya. Akan terlihat kode kurang lebih seperti berikut.

Sobat harus paham fungsi dari kode widget id-widget id diatas. Contohnya sobat akan membuat kode berwarna ungu sebagai catcher widget dan kode berwarna hijau sebagai Sticky Widget. Maka sobat harus mengubah kode diatas dengan sedikit menambahlan kode HTML. Perhatikan kode berikut.

Tambahkan kode berwarna merah tebal pada kode tersebut. Perhatikan perubahan kode pada template milik saya.

6. Setelah selesi, klik Simpan Template.

Ok. lihat hasilnya. Pada bagian Tata Letak, Widget yang dibuat Sticky bisa ditambah. Namun jika sobat menambahkan widget yang dibuat catcher, tambah pula ukuran tinggi bagian catcher.
Semoga sobat tidak bingung dengan pembahasan saya kali ini, hehe.

0 komentar »

Bebas

Cara Membuat Widget About The Author Box Untuk Blog

Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

Cara Membuat Widget Google+ Follower dengan Efek Keren

Cara Memasang Widget Pengikut Blog dengan Mode HTML

Gabungan Widget Like Facebook, Follow Twitter, dan Google+ untuk Blog

Cara Membuat Tombol Back To Top di Blog

Cara Mendaftar dan Memasang Widget Histats di Blog

Membuat Sticky Widget pada Sidebar Blog

Categories

Archives

Live Traffic Feed