Variasi bingkai untuk tampilan video kesayangan

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger sistim geser

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger Dengan Sistim Geser

saya akan Posting Navigasi Halaman baru yang dapat mendukung lebih dari 500, dan sekarang ini Navigasi halaman dapat mendukung lebih dari 500, Alhamdulillah.
Untuk membuatnya cantik saya menggunakan Pugin Baru dari WP Paginator
Plugin ini panggilan Paginator 3000
- Ide oleh ecto (ecto.ru)
- Dikodekan oleh karaboz (karaboz.ru)
Untuk melihat hasilnya terbuka ini
Demo
Paginator3000

Langkah 1: Terapkan Style

Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html
Dona't klik kotak centang yang mengatakan "Expand Template Widget"
Cari ini

]]></ B: skin>

dan menggantinya dengan


. Paginator {
margin-top: 60px;
font-size: 1em;
}
paginator tabel. {
border-collapse: keruntuhan;
table-layout: fixed;
width: 100%;
}
paginator tabel. td {
padding: 0;
white-space: nowrap;
text-align: center;
}
paginator span. {
display: block;
padding: 3px 0;
color: # fff;
}
paginator span. kuat,
. Paginator span {
padding: 6px 2px;
}
. Paginator span kuat {
background: # ff6c24;
font-style: normal;
font-weight: normal;
}
paginator.. scroll_bar {
width: 100%; height: 20px;
position: relative;
margin-top: 10px;
}
paginator.. scroll_trough {
width: 100%; height: 3px;
background: # ccc;
overflow: hidden;
}
paginator.. scroll_thumb {
position: absolut;
z-index: 2;
width: 0; height: 3px;
top: 0; kiri: 0;
font-size: 1px;
background: # 363636;
}
paginator.. scroll_knob {
position: absolut;
top:-5px; kiri: 50%;
margin-left:-10px;
width: 20px; height: 20px;
overflow: hidden;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHchEfCYRSq7JxyFGjte5zonnhbszzY1wFECNQN7FcF3B4kqeQ_OLvIBdslLkIFoCd_IgOcG53Irn8zPWzVr-dwqGz6dNPN66CKHwuVoo38iBOHWoAo1mqW2-w3thECXcmMNWJRcN7nZA/s1600/slider_knob.gif) no-repeat-50% 50%;
cursor: pointer; kursor: tangan;
}
paginator.. current_page_mark {
position: absolut;
z-index: 1;
top: 0; kiri: 0;
width: 0; height: 3px;
overflow: hidden;
background: # ff6c24;
}

fullsize.. scroll_thumb {
display: none;
}

. Paginator_pages {
width: 600px;
text-align: right;
font-size: 0.8em;
color: # 808080;
margin-top:-10px;

}
]]></ B: skin>

Langkah 2: Javascript Aplly

Cari ini:

</ Body>

Ganti dengan:


<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'> </ script>
<script type='text/javascript'>
var home_page ="/";
var urlactivepage = location.href;
var postPerPage = 7;
numshowpage var = 6;
</ Script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</ Body>

Perubah berdasarkan pengaturan blog Anda:
var postPerPage = 7;
numshowpage var = 6;
PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi

Langkah 3: Customize Label

Buka halaman Edit HTML dan "Expand Template Widget"
Cari ini

'Data: label.url'

dan Ganti dengan ini

'Data: label.url + "? & Max-results = 7"'

Ubah 7 berdasarkan berapa banyak posting setiap halaman

Halaman navigasi untuk Blogger

Halaman navigasi untuk Blogger dengan gaya Google menggunakan Script Baru

Bismillah, ..
Google, Yang tidak tahu google!? ..
Sebuah mesin pencari yang paling banyak digunakan oleh pengguna internet ... khususnya pengguna Blogger.
Sebenarnya Abu Farhan telah posting tentang navigasi halaman dengan gaya google ...
"Halaman Navigasi untuk Blogger dengan Google Style"
Namun dalam artikel yang hanya dapat digunakan pada skrip navigasi tua ..
Jadi saya membuat script css untuk gaya google menggunakan skrip navigasi baru ...
Harap perhatikan dengan teliti, css dan javascript skrip berbeda dari skrip saya sebelumnya ... Jadi ikuti petunjuk di bawah ini untuk berjalan dengan baik ...
Berikut ini adalah tampilannya

Demo ini untuk Gaya Google:

Demo

Google Style:
Gaya google

Langkah 1: Terapkan Style

Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html
Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
Cari ini

]]></ B: skin>

Kemudian masukkan script di depan

]]></ B: skin>

script css.

Contoh:

Langkah 2: Javascript ApllyCari ini:

</ Body>

Ganti dengan:

Berubah berdasarkan pengaturan blog Anda:
var postPerPage = 7;
var numshowpage = 4;
PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi

Langkah 3: Customize Label (jika Anda sudah menggunakan saya sebelumnya Halaman

Navi tidak menggunakan langkah ini)

Buka halaman Edit HTML dan "Expand Template Widget"

Cari ini (semua teks ini dalam xml atau template)

'Data: label.url'

dan Ganti dengan ini

'Data: label.url + "? & Max-results = 7"'

Ubah 7 berdasarkan berapa banyak posting setiap halaman.

Mengenal perintah IFRAME

Untuk tutorial kali ini saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah <iframe>. Dengan perintah iframe kita dapat menampilkan isi dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan.

Perintah dasar dari iframe adalah sebagai berikut :

<iframe> .... isi dari iframe .... </iframe>

Beberapa atribut yang sering di pasang dalam iframe adalah :

ALIGN="left/right" --> Untuk mengatur posisi iframe

WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen

HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen

FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas

SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe

SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe

Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya yang lain yang beralamat di http://unique-r1-8.blogspot.com/, lebar yang ingin saya gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

Bagaimana sobat, tentunya dengan iframe kita dapat mengintip isi dari blog milik orang lain pada blog milik kita. Akan tetapi jangan lupa untuk meminta ijin terlebih dahulu kepada pemiliknya apabila tidak ingin kena damprat sang pemilik blog.

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling dalam efek marquee yang dibingkai frame 3 dimensi

contoh kode yang di pasang seperti ini :

Selamat bereksperimen !

Membuat foto animasi

Cara Membuat Efek Photo Samar (blur)

Bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

Langkah #1

Silahkan login ke blogger dengan ID anda.
Klik Tata letak.
Klik tab Edit HTML.
Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
Silahkan cari kode berikut : ]]></b:skin>
Copy paste kode berikut di atas kode ]]></b:skin>

.linkopacity img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .linkopacityxtra:hover img { filter:alpha(opacity=1.1); -moz-opacity: 1.1; opacity: 1.1; border:0; }
Klik tombol Simpan Template.
Langkah #1 selesai.

Langkah #2

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

Semisal gambar ini ingin nge link ke http://panduan-wongsalam.blogspot.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://panduan-wongsalam.blogspot.com" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :

Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :

<a href="#nogo" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :

Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.

Tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh :

.linkopacity img {      

filter:alpha(opacity=30);       

-moz-opacity: 0.30;       

opacity: 0.30;       

border:0;       

}

Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh :

Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don't miss it dude.

Variasi lain :

Foto efek blurr Dalam Binkai :

Secantik BIDADARI yang setia menemani diriku

Selamat berkreasi......Salam buat Senior Master Bloger

Membuat Gambar Horizontal Thumbnail Dengan CSS

Dengan CSS kita akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa itu horizontal Thumbnail?

Langsung aja kita lihat hasilnya

Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar tambah seru. Begini nih caranya :

Pertama: Buatlah terlebih dahulu gambar-gambar yang sekiranya mau di pajang di blog atau website milik anda. Misalkan gambar yang mau di pajang seperti ini :

Kedua :Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau pada hosting lainnya seperti google pages, photobucket, geocities, dll.

Ketiga :simpanlah kode CSS berikut diantara style sheet css yang ada :

  #latar {

padding:20px;

margin:25px;

float:left;

background:#ebe9dc;

border-right: 3px solid #ccc;

border-bottom: 3px solid #ccc;

} 



.tabel {

padding:5px;

margin:0;

float:left;

} 



.thumbnail {

position:relative; 

z-index:100;

} 



.thumbnail  a.gambar-kecil, .thumbnail  a.gambar-kecil1:visited {

display:block; 

text-decoration:none;

background:transparent; 

top:0; 

left:0; 

border:3px solid #000;

}



.thumbnail  a img {

border:0;

} 



.thumbnail  a.gambar-kecil:hover {

text-decoration:none; 

background-color:#8c97a3; 

color:#000;

border:3px solid #43b843; 

} 



.thumbnail  a .gambar-besar1 {

display:block; 

position:absolute; 

width:0; 

height:0; 

border:0; 

top:0; 

left:0;

}



.thumbnail  a.gambar-kecil:hover .gambar-besar1 {

display:block; 

position:absolute; 

top:100px; 

left:0px; 

width:400px; 

height:300px; 

border:5px solid #000;

} 



.thumbnail  a .gambar-besar2 {

display:block;

position:absolute;

width:0; 

height:0; 

border:0; 

top:0; 

left:0;

}



.thumbnail  a.gambar-kecil:hover .gambar-besar2 {

display:block; 

position:absolute; 

top:100px; 

left:0px; 

width:400px; 

height:300px; 

border:5px solid #000;

} 



.thumbnail  a .gambar-besar3 {

display:block; 

position:absolute; 

width:0; 

height:0;

border:0; 

top:0; left:0;

} 



.thumbnail  a.gambar-kecil:hover .gambar-besar3 {

display:block; 

position:absolute; 

top:100px; 

left:0px; 

width:400px; 

height:300px; 

border:5px solid #000; 

}

Keempat: Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).

  <div id="latar">

<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo"  title="Gambar Thumbnail"><img  src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg"  width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image"  /><img class="gambar-besar1"  src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg"  title="gambar besar" alt="gambar besar"  /></a></span></span>

<span class="tabel">



<span class="thumbnail"><a class="gambar-kecil" href="#nogo"  title="Gambar Thumbnail"><img  src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg"  width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image"  /><img class="gambar-besar2"  src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg"  title="Enlarged view of image" alt="Enlarged view of image"  /></a></span>

</span>  



<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo"  title="Gambar Thumbnail"><img  src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg"  width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image"  /><img class="gambar-besar2"  src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg"  title="gambar besar" alt="gambar besar" /></a></span>

</span>

</div>

Kelima : Di save aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .

Cara yang lebih detail :adalah seperti ini :

Langkah pertama :

Sign in di blogger dengan ID anda tentunya dong.
Klik menu Layout.
Klik menu Edit HTML.
Klik link Download full template, silahkan save untuk backup data (penting).
Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>

#latar { padding:20px; margin:25px; float:left; background:#ebe9dc; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc; }  .tabel { padding:5px; margin:0; float:left; }  .thumbnail { position:relative;  z-index:100;} .thumbnail  a.gambar-kecil, .thumbnail  a.gambar-kecil1:visited { display:block;  width:90px;  height:75px;  text-decoration:none;  background:#fff;  top:0; left:0;  border:3px solid #000; }  .thumbnail  a img { border:0; }  .thumbnail  a.gambar-kecil:hover { text-decoration:none;  background-color:#8c97a3;  color:#000;border:3px solid #43b843;  }  .thumbnail  a .gambar-besar1 { display:block;  position:absolute;  width:0; height:0;  border:0; top:0; left:0; } .thumbnail  a.gambar-kecil:hover .gambar-besar1 { display:block; position:absolute;  top:100px;  left:0px;  width:400px;  height:300px;  border:5px solid #000; }  .thumbnail  a .gambar-besar2 { display:block;  position:absolute;  width:0;  height:0;  border:0;  top:0;  left:0; }  .thumbnail  a.gambar-kecil:hover .gambar-besar2 { display:block;  position:absolute;  top:100px;  left:0px;  width:400px;  height:300px;  border:5px solid #000; }  .thumbnail  a .gambar-besar3 { display:block;  position:absolute;  width:0;  height:0;  border:0;  top:0; left:0; }  .thumbnail  a.gambar-kecil:hover .gambar-besar3 { display:block;  position:absolute;  top:100px;  left:0px;  width:400px;  height:300px;  border:5px solid #000;  }

Klik tombol SIMPAN TEMPLATE

Langkah kedua :

Klik menu Elemen Halaman
Klik tulisan Tambah sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
Copy paste kode berikut ke dalam elemen yang muncul

Klik tombol Simpan
Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.
Klik tombol Simpan yang berada di sebelah atas
Selesai.

Tambahan , pada kode di atas ada tertulis seperti ini :

<a class="gambar-kecil" href="#nogo" title="thumbnail image">

Tulisan #nogo tidak usah di ganti apabila gambar yang di pajang tidak ingin nge link ke manapun, namun apabila photo yang di pajang ingin dalam bentuk link, silahkan ganti tulisan #nogo dengan alamat URL,

Selamat mencoba dan berkreasi

Tutorial blog dan belajar SEO blogger

Presentasi

Variasi bingkai untuk tampilan video kesayangan

Embed player Murotal Mp3

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger sistim geser

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger Dengan Sistim Geser

Langkah 1: Terapkan Style

Langkah 2: Javascript Aplly

Langkah 3: Customize Label

Halaman navigasi untuk Blogger

Halaman navigasi untuk Blogger dengan gaya Google menggunakan Script Baru

Langkah 1: Terapkan Style

Langkah 3: Customize Label (jika Anda sudah menggunakan saya sebelumnya Halaman

Navi tidak menggunakan langkah ini)

Membuat Spoiler Di Blogspot

Efek Image Bubble untuk Mempercantik Blog

Efek Image Bubble untuk Mempercantik Blog

Efek Hover Image Gallery

Efek Hover Image Gallery

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

marquue dalam bingkai tv flat

Mengubah Kursor ketika Diarahkan ke Gambar

Cara Mengubah Kursor ketika Diarahkan ke Gambar

Membuat Link ke Halaman Atas / Top Page

Mengenal perintah IFRAME

Mengenal perintah IFRAME

Membuat foto animasi

Membuat foto animasi

Cara Membuat Efek Photo Samar (blur)

Cara Membuat Efek Photo Samar (blur)

Membuat Gambar Horizontal Thumbnail Dengan CSS

Membuat Gambar Horizontal Thumbnail Dengan CSS

Archivo del blog

DAFTAR ISI

Tutorial blog dan belajar SEO blogger

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger Dengan Sistim Geser

Langkah 1: Terapkan Style

Langkah 2: Javascript Aplly

Langkah 3: Customize Label

Halaman navigasi untuk Blogger dengan gaya Google menggunakan Script Baru

Langkah 1: Terapkan Style

Langkah 3: Customize Label (jika Anda sudah menggunakan saya sebelumnya Halaman Navi tidak menggunakan langkah ini)

Efek Image Bubble untuk Mempercantik Blog

Efek Hover Image Gallery

Mengenal perintah IFRAME

Membuat foto animasi

Cara Membuat Efek Photo Samar (blur)

Membuat Gambar Horizontal Thumbnail Dengan CSS

Archivo del blog

DAFTAR ISI

Tutorial blog dan belajar SEO blogger

Langkah 3: Customize Label (jika Anda sudah menggunakan saya sebelumnya Halaman

Navi tidak menggunakan langkah ini)