Bikin Navigasi Halaman Dengan Scroll

00.40 ---
Pag Navi adalah navigasi halaman yang berguna untuk memudahkan kalian dalam melihat-lihat artikel. Blogger biasanya hanya menyediakan navigasi 'posting lama' , 'beranda' dan 'posting baru'. Namu semua itu dapat di ganti menjadi seperti ini.


Bedanya navigasi ini adalah dengan dilengkapi fitur scroll. Yaitu nomor halaman dapat di tampilkan semua... Untuk lebih jelasnya silahkan di coba.

1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML.
3. Cari kode ]]></b:skin>.
4. Letakkan kode berikut tepat di atasnya.

.paginator {
    margin-top:60px;
    font-size:1em;
}
.paginator table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
}
.paginator table td {
    padding:0;
    white-space:nowrap;
    text-align:center;
}
.paginator span {
    display:block;
    padding:3px 0;
    color:#fff;
}
.paginator span strong,
.paginator span a {
    padding:2px 6px;
}
.paginator span strong {
    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:absolute;
    z-index:2;
    width:0; height:3px;
    top:0; left:0;
    font-size:1px;
    background:#363636;
}
.paginator .scroll_knob {
    position:absolute;
    top:-5px; left:50%;
    margin-left:-10px;
    width:20px; height:20px;
    overflow:hidden;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNu3ov8QUXteP_AmxiSq-LQqnhCfYDRFOmZ7p27facsU3uZs8GoAx_Tg8tmleHmcGqN90h7NcDg2096JQo9h_ooTIRlXC1Xn_-bS-2pXEYatvNxaSA0UKG9Ge9LqFbWd5Bui4HN5ISNo8/s1600/slider_knob.gif) no-repeat 50% 50%;
    cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
    position:absolute;
    z-index:1;
    top:0; left: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;
}

5. Kemudian cari kode </body>, lalu pastekan kode berikut tepat di atasnya.

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

6. Simpan. Semoga berhasil :D
Diposting oleh Aldy di 00.40 2 komentar
Label:

Gambar Foto Paling Unik

02.20 ---
Gambar Foto Paling Unik – Berikut ini adalah gambar atau foto yang akan membuat anda terkesima di mana foto unik berikut ini akan membawa anda ke alam bawah sadar anda, antara ada dan tiada, antara sama dan tak sama. coba saja…

Gambar unik ini sebenarnya hitam putih, tatap secara fokus (untuk mudahnya fokus pada titik hitam) gambar berikut selama 15 detik, setelah itu tetap fokus menatap gambar… dan lihat apa yang terjadi…


http://is.gd/alprablog_gambar_unik

Apakah Anda menemukan perubahan? Hanya 40% orang yang dapat menemukan perubahannya. :D
Diposting oleh Aldy di 02.20 4 komentar
Label:

Kumpulan Font Keren by Alprafont™

04.43 ---
Selamat malam readers setia Alprablog. Sebelumnya saya ingin meminta maaf kepada kalian karena saya jarang online dan tidak dapat membalas semua pesan, blogwalking, dan follow Anda. Semua itu di karenakan laptop saya yang sudah mulai menggila. Saya Anda dapat memakluminya.

Sebenarnya tujuan postingan ini adalah ingin membertihaukan kepada kalian peluncuran blog terbaru saya :D yaitu Alprafont™. Blog ini di buat untuk menyediakan brbagai jenis font-font unik dan keren yang dapat Anda gunakan di blog Anda. Berikut Screen shotnya.

Alprafont™
Sekian dari saya Terima Kasih....
Diposting oleh Aldy di 04.43 2 komentar
Label:

Cara Memasang Desain Facebook Pada Sidebar Blog

05.24 ---

Selamat malam, kali ini saya akan melanjutkan postingan sebelumnya yaitu cara desain plugin like box dan dasar-dasar desain plugin facebook likeboox. Sebelumnya saya ingin minta maaf kepada kalian semua karena postingannya telat. Sebenarnya plugin facebook ini hanya bisa di gunakan pada blog Wordpress.com. Tapi saya sudah bisa mencobanya pada blog Blogspot. Maaf kalau caranya agak rumit -___-

Langsung ke langkah-langkahnya...

1. Buka Notepad.
2. Masukan kode berikut pada Notepad Anda.

 <html>
<head>
</head>
<body>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><script type='text/javascript'>FB.init(&quot;142764049144880&quot;);</script><fb:fan connections='8' css='http://www.geocities.ws/alprablog/css/fb-style.css?1' height='254' logobar='0' profile_id='209688125727652' stream='0' width='250'/>
</body>
</html>

Ganti text yang berwarna merah dengan kode Script Plugin Faceboox Anda.

3. Simpan file dengan format .html.

4. Upload File tersebut ke file hosting gratis seperti ripway.com setelah di upload maka hasilnya akan seperti ini.

5. Masukan kode berikut pada sidebar blog Anda.

<iframe src="http://alpra.at.ua/demo/v1/plugin-fb.html" height="270"/></iframe>

Ganti text yang berwarna biru dengan alamat file hosting Anda tadi..

6. Simpan.
Diposting oleh Aldy di 05.24 4 komentar
Label:

Lagu Ayodance Patch 6 September 2011

05.59 ---
Lagu Ayodance Patch 6 September 2011

Cara Download
BPMJudul LaguDownload
126Guitar Master - Audition - Let's Dance (feat. Joe Brown)Download
170Guitar Master - Audition - Symphony No. 40 (Rock Ver.)Download
138Audition - You Are Kidding, Right?Download
1562AM - The Greatest Love (Fukuyama Masaharu Remake)Download
1004Minute - Sweet Suga Honey!Download
90Beast - On Rainy DaysDownload
142Cassanova - Juara SejatiDownload
125Drimi - CuriosityDownload
140Drimi - Tak Bisa Tak MauDownload
98Endank Soekamti - AudisiDownload
100Endank Soekamti - Tancap GasDownload
100G.Na - Supa Solo (feat. Swings)Download
158G.Na - Things I Want To Do If I Have a Lover (feat. Rain)Download
95Girls' Generation - Baby BabyDownload
103Handsome People - CrazyDownload
96Hyuna - A Bitter Day (feat. Jun Hyung &amp; G.Na)Download
128Jang Woo Hyuk - Time is [L]overDownload
131Lyla - Akhir CeritaDownload
140Lyla - KunobatkanDownload
140Parcel - Harga MatiDownload
134SM Town - Summer VacationDownload
148Seo In Kook - BrokenDownload
92Sharp - My Lips.. Warm Like CoffeeDownload
125Shin Hwa - Eusha! Eusha!Download
86T - Memories.. (Smiling Tears)Download
130Young Jee - Not At AllDownload
Diposting oleh Aldy di 05.59 4 komentar
Label: ,

Cara Desain Facebook like Box

01.23 ---
Pada artikel sebelumnya Saya sudah mengulas mengenai atribut-atribut plugin Facebook Like Box, penjelasan tersebut cukup mendasar guna membantu anda untuk mendesain atau mengedit tampilan Like Box.

Artikel ini adalah lanjutan dari artikel sebelumnya. Mulai dari mengubah warna background, fonts serta penempatan atribut-atribut pada plugin Like Box tersebut.Di sini kita akan membuatnya menggunakan XFBML Script.




Like Box XFBML script

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("12345");</script>
<fb:fan profile_id="ID-HALAMAN" stream="0" connections="12" logobar="0" width="288" height="274" css="http://www.alpra.cc.cc./style.css?1"></fb:fan>

 Perhatikan text yang berwarna merah. ID-Halaman di ganti dengan Id Halaman Facebook Anda.


Penting !
Perhatikan text "http://www.alpra.cc.cc./style.css?1" script tersebut untuk memanggil file script CSS yang anda simpan di file styles.css themes wordpress. Dan saya tekankan kepada anda, setiap kali mengubah kode script CSS maka anda harus mengubah juga angka >?1″ menjadi >?2″, >?3″ dan seterusnya hingga anda mendapatkan hasil tampilan like box yang cocok.



Dasar - Dasar Mendesain.

Berikut ini merupakan dasar script CSS untuk mendesain plugin Like Box, anda bisa mengatur atau menyesuaikannya dengan tema yang digunakan pada website atau blog.

1. Desain border dan background widget utama

/*Langkah 1 */
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}


2. Desain teks, link, fans teks dan background top attribute

/* Langkah 1 */
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}


3. Desain image profil, nama user dan image grid

Dan berikut adalah CSS lengkap dari langkah 1 hingga langkah 3 dan simpanlah di styles.css themes file hosting Anda..

/* Langkah 1 */
.fan_box .full_widget{
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
color: #FF5000;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/* Langkah 3 */
.fan_box .connections .connections_grid {
padding-top: 0 !important;
)
.fan_box .connections_grid .grid_item .name {
color: #FF5000;
font-family: tahoma;
}
.fan_box .connections_grid .grid_item {
padding: 0 5px 5px 0 !important;
color: #FF5000;
}

Anda dapat mengedit kode CSSnya sesuka Anda.

Click Here for Demo

Baca juga...
Diposting oleh Aldy di 01.23 5 komentar
Label:

Dasar - Dasar Mendesain Plugin Facebook Like Box

23.59 ---
Facebook adalah salah satu saran untuk mempromosikan website/blog. Anda dapat membuat halaman pada facebook dan mulai mempromosikan website/blog Anda. Sudah taukan apa itu facebook like box? Kalau belum tau berikut screen shotnya...


Gambar di atas adalah tampila plugin facebook standard. facebook hanya menyediakan 2 tampilan yaitu light dan dark. Bosen juga liat tampilan facebook like boxnya. Kali ini saya akan mendesain facebook like box sendiri dengan cara mengubah kode CSS nya. Mendesain plugin facebook ini bukan lah hal yang gambang. Langsung saja menuju materi hari ini.

1. Main Widget.

Main widget merupakan inti dari plugin ini, pada script bawaannya (default) terdapat dua pilihan warna yakni Light dan Dark. Berikut contoh tampilan main widget beserta CSS script yang sudah saya buat.


Berikut kode CSSnya
/* Main Widget */
.fan_box .full_widget{
height: 250px;
border: 2px solid #084E96;
background: #f2f2f2;
position: relative;
}


2. Top Element

Terdapat 3 atribut penting pada elemen ini, diantaranya Image Profile Page, Profil Page Name dan Connect Widget Button.


Keterangan :
  1. .connect_top
  2. .connect_action
  3. .profileimage
  4. .name_block
  5. .connect_widget,.connect_widget_interactive_area dan td.connect_widget_vertical_center

Berikut Kode CSSnya
/* Top Element */
.fan_box .full_widget .connect_top{
 border: 2px solid #f2f2f2;
 background: #FFEA02;
}
.fan_box .full_widget .connect_action{
background: #BDC7D8;
}
.fan_box .connect_action .profileimage {

}
.fan_box .connect_action .name_block{

}
.fan_box .connect_action .connect_widget{

}
.fan_box .connect_widget .connect_widget_interactive_area {
background: #FFBB00;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
background: #109504;
}

3. Fans Connections

Disini anda akan melihat atribut Total Count User dan daftar User Profil (nama dan foto).


Keterangan:
  1. .connections
  2. .total
  3. .connections_grid
  4. .grid_item
  5. .name

Berikut kode CSSnya.
/* Fans Connection */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{

}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}

/* 3 */

.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{

}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}

Dengan keterangan atribut diatas akan sedikit mempermudah pengeditan CSS script untuk plugin Like Box yang akan anda desain.

Baca juga...
Diposting oleh Aldy di 23.59 0 komentar
Label:
Langganan: Postingan (Atom)