Showing posts with label Blog. Show all posts

Membuat tombol melayang prev dan next posting di blog

By : AdiMPS

nih aku agak bingung PREV ma NEXT blog ku hilang karena aku edit CSSnya, karena galau aku nemuin ini deh tombol baru :

cari ja kode home-link atau kalo gak ketemu cari kode page kayak gini :
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}#blog-pager{text-align:center}

lalu copas diatasnya kode dibawah ini atau langsung ja timpa dengan kode dibawah ini:

a.home-link{visibility:hidden}
#blog-pager-older-link a, #blog-pager-newer-link a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifApzac2ozbQkKj4pFaCk4MPP7LUq9NnZLxyVKVNUyCjeSadrF1CrljRMkFMwhfk6RqHq_Ps9cbFQpD0vQ4iGVMEcXpicQSW4xt9sE8wj5ExADCH9gmZkpNXc4rzUgYW9dPOIJWU_z7zU/s1600/nextprev.png) no-repeat transparent;text-indent:-99999em!important;}
#blog-pager-older-link a{float:right;position:fixed;right:10px;top:500px;display:block;width:35px;height:35px;background-position:-29px 0;transition:all 400ms ease-in-out}
#blog-pager-older-link a:hover{background-position:10px 0}
#blog-pager-newer-link a{float:left;position:fixed;left:10px;top:500px;display:block;width:35px;height:35px;background-position:0 -47px;transition:all 400ms ease-in-out}
#blog-pager-newer-link a:hover{background-position:-35px -47px}

Perhatikan kode yang berwarna biru, itu adalah jarak icon dari tepi atas. Silahkan atur jaraknya agar sesuai dengan blog Anda. Untuk kode yang berwarna merah paling atas adalah untuk menyembunyikan tombol home/beranda karena saya pikir link homepage (home/beranda) biasanya sudah ada pada menu header atau menupage jadi saya hilangkan saja.

Perhatikan tulisan yang berwarna merah, itu adalah url imagenya yang menampilkan icon next prevnya. Ada beberapa gambar yang saya sediakan dalam beberapa warna di bawah ini. Silahkan pilih yang sesuai dengan tema blog Anda dan ganti tulisan/kode yang berwarna merah di atas dengan url image yang Anda pilih (untuk image yang ada di kode di atas iconnya berwarna merah).

Silahkan pilih gambar-gambar di bawah ini yang sesuai dengan selera dan tema blog anda kemudian copy url imagenya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj165imCYusWT8SOMrjaeKj7WHENjkDS4h9Ohxchiz8_Ij_iId84jxSm_0M3YfPdXnkOIHB0kQOJkB_Abdi4mow5Lav1Az7kGavZedyfHCAzfoXIu4GJ6MraVUaH-5fQjyti3wkxicmX_7-/s1600/nextprevbiru.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG7vPQvzwaQ25v7StRacf4gOB4a5uY9pul_HTG1tqSuMAQkVGUOAlwPSZ1ERGmfN4d0-4GlHxSlOsA4V7TiQ8tzbbaXulIcs1zF8caXXN0ZYgIH40FfNxhZDHJrCEUwmOyH0Uh8wZPig5A/s1600/nextprevhijau.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFqbwKrJqn-D6Im96no6TCUn23ZPZ5Hu3ohFfj71W-PGD6IRIwWow9gNhVvyIwOh3HdjiB8VIjMfWLc46P7Jmy3ob94xVHXa0iegGmmwM2WhizsTeUFGQQaliRBv3JjiQPcQe6m2UUzkk/s1600/nextprevhitam.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTlRCVnGclv-T2oilA0j2nf82e2inPeIwNN0VmW10HsBDDfuRFIzA2Ft_cIiyHt1BYROuQJV0oTTI215u5zZeNge067-RUqxHFBZuz2VpJTckKpvteMGQKnGvTMuIjhy2FrcYSxnKNfae/s1600/nextprevkuning.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjo_GTDcBXSL29PbgCrPUkI-DediKTGFM1dcb8pelaP-KnCedwqlUAwiXJhVw2H5QdEGLEHFRpLW275CmnYG7h2iskLL1q8uxe3RdZFCicdjtbHr2zDa9MHNd0lPHgUfws7-u0CEc81wn/s1600/nextprevungu.png

BERES.

Tapi nih kode tombol dan gambarnya kayaknya rada salah.. tapi aku berhasil nemuin solusi buat kembaliin tombol lama ku yang hilang. ha" SIP dah.

6 Comments

Tag : Blog,

Membuat Tab Multi Widget Standar di Blog

By : AdiMPS

6. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.

7. Masukan kode berikut di atas kode ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Copas kode widget menu 1 disini</div></div>
<div class="Page">
<div class="Pad">Copas kode widget menu 2 disini</div></div>
<div class="Page">
<div class="Pad">Copas kode widget menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

BERES

0 Comments

Tag : Blog,

Pasang Widget untuk mengetahui pengunjung yang sedang online di blog

By : AdiMPS

Ada banyak web penyedia fasilitas ini, kali ini saya menggunakan fasilitas yang di berikan mapmyuser

Okay langsung aja nih sob ke cara membuatannya :

1. Untuk mendapatkan scriptnya silahkan buka situs mapmyuser
2. Pilih warna dan posisi widget yang sobat inginkan:

3. Copy script yang di berikan untuk sobat pasang di script sobat

cara memasang di blog:

1. Login ke blog sobat
2. Tata letak>tambah Widget >HTML/JavaScript
3. Masukkan script yang telah sobat dapatkan
4. Save template

5. Beres

0 Comments

Tag : Blog,

Mendaftar blog di Google Adsense melalui blogger

By : AdiMPS

Google adsense adalah sebuah program periklanan terpopuler saat ini di dunia maya. Mendaftar di google adsense memang banyak cara yang dilakukan oleh para blogger, antara lain mendaftar langsung dari situs google adsense, mendaftar melalui pihak ketiga dan masih banyak lagi yang berkaitan dengan cara pendaftaran di google adsense. Bagi yang membuat blog dari subdomain blogger yaitu blogspot.com diberi kemudahan mendaftar di google adsense. Sesuai judul di atas, silahkan ikuti langkah berikut:

1. Untuk yang pertama ini, Sobat tentunya harus memiliki sebuah blog di Blogger
2. Setelah itu Sobat masuk ke dasbor blogger dan pilih penghasilan. Lihat gambat di bawah ini:

Perlu digaris bawahi, untuk blog yang tidak ada pilihan "PENGHASILAN", mungkin perlu rehabilitasi untuk mendapatkan kata itu di blog. Caranya sangat mudah:
a. Sobat pilih Setelan
b. Kemudian pilih Bahasa dan pemformatan
c. Setelah itu pilih bahasa Inggris saja. Selesai... untuk melihat hasilnya silahkan muat ulang halaman dasbor Sobat

3. Setelah Sobat pilih Penghasilan, Sobat akan dibawa ke halaman seperti gambar di bawah ini:

Untuk pendaftaran ke google adsense, Sobat pilih Daftar ke Google Adsense, seperti gambar di atas

4. Selanjutnya, klik Memulai dan Sobat akan di bawa ke halaman seprti gambar di bawah ini:

Untuk tahap yang pertama ini, Sobat tinggal pilih akun mana yang ingin digunakan untuk mendaftar ke Gooogle Adsense. Kemudian bila perlu baca keterangan tentang akun google, konten yang akan dimonetisasi/kebijakan program dan alamat pos.

Untuk tahap yang kedua buat pemberitahuan konten atau keterangan tentang blog Sobat.

Untuk tahap yang ketiga kirim permohonan Adsense.

5. Setelah semuanya berjalan dengan lancar, sekarang Sobat tinggal menunggu persetujuan dari Google Adsense yang akan dikirim ke Email Sobat yang digunakan untuk mendaftar Google Adsense.

6. Selesai....

KITA HARUS NUNGGU EMAIL DITERIMA OLEH PIHAK GOOGLE, BISA JA DAFTAR LAGI KALO BOSEN NUNGGU. OK

0 Comments

Tag : Blog,

Chat BOX Melayang untuk BLOG

By : AdiMPS

Cara membuat Chat BOX kyak di Blog ini >>

I. masuk ke blogger

II. langsung ke layout (tata letak)

III. tambah gadget atau HTML/JavaScript

IV. copy paste kode berikut..

Copas Kode cbox yang telah sobat buat, dan letakkan di sini

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

NOTE :

- yang warna hijau sobat ganti dengan gambar Url yang sobat ingin kan,, kalau menurut sobat sudah bagus, abaikan saja...

-yang warna merah, sobat copas cbox yang telah anda buat di www.cbox.ws, lihat gambar di bawah ini.. (sigp up dulu di cbox, lalu ambil codenya dari sana)

maka akan seperti ini :

V. simpan / save..

beres dah.. bisa diatur posisi nya juga.

9 Comments

Tag : Blog,

Membuat Gambar/Avatar Beku atau Gerak di Pojok Kanan Kiri Atas Bawah di Blog

By : AdiMPS

Yoa ini caranya >>

1. Login Ke Blogger Kita

2. Pilih Tata Letak

3. Add Gadget

4. Pilih HTML / Java Scrip

5. Masukkin Kode Dibawah Ini Yea, Sesuai Keinginan Mu, Mau Yang

Dimana Letaknya, Kanan Kiri Atas Bawah, Pilih Sendiri Yea,

Memasang dipojok kanan bawah

<a href='http://adimpshunter.blogspot.com'style='display:scroll;position:fixed;Bottom:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

Memasang dipojok kanan atas

<a href='http://adimpshunter.blogspot.com/'style='display:scroll;position:fixed;Top:0px;right:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

Memasang dipojok kiri bawah

<a href='http://adimpshunter.blogspot.com/'style='display:scroll;position:fixed;Bottom:0px;left:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

Memasang dipojok kiri atas

<a href='http://adimpshunter.blogspot.com/'style='display:scroll;position:fixed;Top:0px;left:0px;' title='Keterangan Gambar'><img src='URL Gambar'/></a>

6. Simpan Lalu Lihat Blog Kita

ini contoh link nya >> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPqIfMt1QUp9gWMpFVvoJGibbhPoagCvtytUYWpsh6y9kIMjhZEf8A46pgT4suyIDShyphenhyphen22ruqLPKrCOzazk4a1aOPqJ3HDNbHy8aOLsPHslq3DMmT0UQZpRMNNb0_sEB9uDTZOUwoKmO5/s1600/n4.gif

0 Comments

Tag : Blog,

Membuat Notifikasi atau Info Terbaru

By : AdiMPS

Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

Screenshot

CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>

Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>

1. Pengaturan posisi notifikasi.

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

Atas,kanan.
right: 10px;
top: 10px;

Bawah,kanan.
right: 10px;
bottom: 10px;

Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.

top:atas
bottom:bawah
right:kanan
left:kiri

Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)

0 Comments

Tag : Blog,

AdiMPS

Hidup 1X ja Santai Lah

Silahkan Pilih

Showing posts with label Blog. Show all posts

Membuat tombol melayang prev dan next posting di blog

Membuat Tab Multi Widget Standar di Blog

Pasang Widget untuk mengetahui pengunjung yang sedang online di blog

Mendaftar blog di Google Adsense melalui blogger

Chat BOX Melayang untuk BLOG

Membuat Gambar/Avatar Beku atau Gerak di Pojok Kanan Kiri Atas Bawah di Blog

Membuat Notifikasi atau Info Terbaru

Arsip

Kategori Dipilih

Pengunjung GalaU