Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan dilihat hasilnya.

Sumber : http://trik-tips.blogspot.com

readmore »»  

Cara Mudah Membuat Readmore Otomatis di Blog Terbaru

Bagaimana cara membuat readmore di blogspot dengan cara yang mudah dan cepat kilat di blog kesayangan sobat blogger . inilah pokok bahasan yang akan saya bahas untuk anda semua,hehehe.

baik sobat blogger, sebelumnya saya jelaskan sedikit apa gunanya read more pada blog kita. dengan adanya readmore blog sobat tampilan nya di home tidak terlalu memanjang ke bawah seperti tampilan home blog saya yang menggunakan readmore namun disini saya menggantinya dengan tulisan baca selengkapnya, itu seterah sobat.

Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".

-Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3.

-Lalu masukkan code di bawah ini tepat di atas  </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Kemudian sobat  cari kode <data:post.body/>

Ganti kode <data:post.body/>  dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Kemudian Save Template.

untuk keterangan readmorenya...

var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;

img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;

READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .

nah demikian lah tutorial dari Salman blog , semoga tutorial blog mengenai cara membuat readmore di blog dapat bermanfaat untuk sobat semua.

 

Sumber : http://www.berryhs.com

readmore »»  

Cobain deh..!

Okay, dalam beberapa hari ini, aku lagi semangat banget buat ngeblog..seru aja gitu kutak - katik blog, dari tulis - tulis, sampe kutak - katik skin dan segala hal cute-cute lainnya,hihi..biar blognya makin seru dan lucu. Dan tugasku sekarang adalah, berbagi dong sama kalian :D yuk, kutak - katik blog yuk biar makin seru..ni beberapa link buat bikin tampilan blog kita jadi lebih oke :

1. membuat cursor blog jadi bergambar atau animated (link). nah, dengan link itu, kita bisa bikin blog kita jadi punya cursor yang nggak biasa. bisa bergambar atau bergerak - gerak sesuai pilihan yang kita mau.
2. nah, bagi yang pengen nambahin musik favorit ke dalam blognya, juga bisa, jadi..pas orang buka blog kita, secara otomatis akan ter setel lagu favorit kita yang bisa didengerin. ini dia link nya.
3. buat skin blog cute kayak blog ku? ;p bisaaaa...gampang aja kok...ini link nya. atau bisa juga di www.pyzam.com
4. naaah, kalau di blogku ada "mesin penghitung" berapa kali blogku dibuka orang, kalian juga bisa kok bikin hal  yang sama di blog kalian, ini link nya (^_^)
5. kalau yang ini sih nggak aku masukin ke blogku sih, tapi seru juga kok kalau kalian mau masukin ke dalam tampilan blog kalian, yaitu bikin tampilan jam di blog. seru kan kalau di blog kita ada jamnya, hehehe...ini link nya.

sebenarnya masih banyak lagi widget seru buat ngerubah tampilan blog kita jadi lebih cantik, tapi untuk sekarang, segitu dulu aja yah, teman - teman (=^,^=) selamat berkreasi... ~(^,^~)(~^,^)~
 

readmore »»  

Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog

Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Apabila sekarang kita berbicara dan membahas mengenai navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger. Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini, maka Anda dapat melihatnya pada gambar di tas, dalam hal ini adalah bagian yang ditunjukkan dengan tanda anak panah.

Oke, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab tentang bagaimana cara membuat menu navbar seperti yang tampak pada gambar di atas, maka sekarang kita langsung pada pokok pembahasan yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Dimana teknik yang perlu dilakukan untuk keperluan tersebut adalah dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://biasaaja.co.nr/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvkZaDxG_YFai3k4Ff1tS83bP4Cc9LV5ozRtjKuNyopqQxMpulyRvAeiwUCSz0YLTWlJHGk3_MSAGyHaJi0Ss7H3Bf2gabOyU3e03SFw9reV-ZaP8NMaUT_lm_WXUKrlyls-4uPOaDT0/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://biasaaja.co.nr dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Salam.

readmore »»  

Web Hosting Murah, Lengkap dan Berkualitas

Bingung mo cari hosting? Mo yang murah tapi fasilitasnya lengkap?
Jangan bingung-bingun datang aja ke http://superinhost.com. Kalo gak percaya silahkan buktikan sendiri.
Ni contoh paket yang ditawarkan :

Paket Super Mega
- Space 50 MB, Bandwith 1GB, Harga = Rp.35.000 / Tahun
- Space 100 MB, Bandwith 2GB, Harga = Rp.50.000 / Tahun
- Space 250 MB, Bandwith 5GB, Harga = Rp.90.000 / Tahun
- Space 500 MB, Bandwith 10GB, Harga = Rp.140.000 / Tahun

Paket Super Giga
- Space 1 GB, Bandwith 20GB, Harga = Rp.20.000/bulan atau Rp.200.000/Tahun
- Space 2 GB, Bandwith 40GB, Harga = Rp.32.000/bulan atau Rp.320.000/Tahun
- Space 5 GB, Bandwith 100GB, Harga = Rp.50.000/bulan atau Rp.500.000/Tahun
- Space 10 GB, Bandwith 200GB, Harga = Rp.750.000/bulan atau Rp.750.000/Tahun

Untuk semua paket diberikan FEATURE yang sama. Unlimted email, unlimited Database, Fantastico, Cpanel, PHP, MySQL dll. Pokoknya super lengkap. Kalo gak percaya silahkan kunjungi http://superinhost.com

readmore »»  

Langkah - langkah Instalasi Windows Server 2003

Setup Windows Server 2003 - Bagian 1

Artikel ini adalah tutorial singkat mengenai instalasi Windows Server 2003 ke komputer PC untuk digunakan dalam sistem Voucha II. Jika Anda menggunakan server built-up seperti IBM xSeries atau Dell PowerEdge, anda harus baca manual instalasi yang disertakan bersama server tersebut. Instalasi ini dapat diterapkan pada :
1. Windows Server 2003 x86
2. Windows Server 2003 x86 Service Pack 1
3. Windows Server 2003 x86 R2
4. Windows Server 2003 x86 Service Pack 2
Instalasi Windows Server 2003 hampir mirip dengan instalasi Windows XP dan sama mudahnya. Hal-hal yang perlu Anda siapkan:
1. CD/DVD instalasi Windows Server 2003 (Enterprise Edition)
2. CD/DVD driver untuk motherboard, video card, sound card, ethernet card, dll.
3. PC dengan RAM minimum 256 (disarankan 512MB atau lebih), hardisk 20GB (disarankan 40GB atau lebih), video card true-color dengan resolusi 1024×768.
Baiklah mari kita mulai:
Boot komputer dengan CD Windows Server 2003
Atur konfigurasi BIOS agar melakukan boot ke CD/DVD ROM. Masukkan CD/DVD Windows Server 2003. Anda akan mendapatkan layar selamat datang di setup Windows Server 2003.





Tekan tombol ‘ENTER’ di keyboard. Anda akan menuju ke layar EULA

Tekan ‘F8′ di keyboard untuk persetujuan lisensi Windows Server 2003.

Membuat Partisi

Jika hardisk Anda masih kosong, anda harus membuat partisi untuk sistem Windows Server 2003. Tekan ‘C’ untuk membuat partisi dan masukkan ukuran partisi yang dibutuhkan, misal 10000MB (1GB).


Jika sudah selesai, tekan ‘ENTER’.
Format partisi tersebut dengan filesystem NTFS dengan metode quickformat.


Tekan ‘ENTER’. Windows Server 2003 Setup memformat partisi hardisk Anda.


Setelah format selesai, Windows Server 2003 Setup meng-copy file-file ke partisi Windows.



Setelah selesai, Windows Server 2003 Setup akan me-restart komputer dan boot ulang


Windows Server Setup GUI



Tunggu beberapa saat sampai muncul Wizard berikut:



Pilih ‘Customize’, dan lakukan setting seperti screen di bawah ini.



Klik ‘OK’, kembali ke layar sebelumnya dan klik ‘Next’.



Isi dengan Nama Anda dan Nama Perusahaan Anda. Kemudian klik ‘Next’.



Isi dengan CD key Windows Server 2003 yang disertakan bersama CD Windows Server 2003. Klik ‘Next’



Pilih Licensing Mode ‘Per Server’ dan isi dengan jumlah koneksi yang dibutuhkan. Klik ‘Next’.



Isi ‘Computer Name’ dan password untuk Administrator. Klik ‘Next’.



Pilih ‘Time Zone’ dengan (GMT +07:00 ) Bangkok, Hanoi, Jakarta. Klik ‘Next’. Setup akan melakukan instalasi Network.





PIlih ‘Custom settings’ dan klik ‘Next’.



Pilih komponen ‘Internet Protocol (TCP/IP)’ dan klik ‘Properties’.



Isi ‘IP address’, ‘Subnet mask:’, ‘Default gateway:’ sesuai konfigurasi network Anda. Klik ‘OK’. Kemudian klik ‘Next’.



Isi nama Workgroup yang diinginkan, misalnya : ‘VOUCHA’. dan klik ‘Next’.



Setup mencopy file-file komponen ke partisi Windows. Setelah itu Setup akan melakukan restart dan boot ulang komputer Anda.



Selamat, Anda berhasil melakukan instalasi Windows Server 2003!
Technorati Tags: windows-server-2003



Setup Windows Server 2003 - Bagian 2

Pada Setup Windows Server 2003 - Bagian 1, kita telah melakukan instalasi Windows Server 2003 dengan konfigurasi standar. Beberapa konfigurasi lainnya masih harus dicustomize agar sesuai dengan kebutuhan sistem yang diharapkan.
Pada bagian ke-2 ini, kita akan melakukan instalasi beberapa komponen tambahan yang diperlukan dan melakukan beberapa konfigurasi minimum untuk Windows Server 2003.
Instalasi Windows Server 2003 Service Pack 2
1. Masukkan CD Windows Server 2003 Service Pack 2
2. Jika Autorun tidak aktif, jalankan melalui menu Start.
Caranya:
1. Klik ‘Start’->’Run
2. Klik ‘Browse’. Pilih lokasi CD-ROM, dan pilih file ‘SRSP2.CMD’
3. Setup akan mengekstrak file-file instalasi dan menampilkan kotak dialog seperti berikut.



4. Klik ‘Next’ dan lanjutkan sampai selesai.
5. Restart


Instalasi Driver
Anda harus melakukan instalasi driver-driver hardware di komputer dengan CD/DVD instalasi hardware bersangkutan. Jika driver untuk Windows Server 2003 tidak ditemukan, coba dengan driver untuk Windows XP atau download dari website vendor bersangkutan.
Instalasi Internet Information Service (IIS)
1. Jalankan ‘Add or Remove Programs’ dari Control Panel
2. Klik button ‘Add/Remove Windows Components’
3. Double click ‘Application Server’



4. Double click ‘Internet Information Service (IIS)’



5. Pilih ‘File Transfer Protocol (FTP) Service’


6. Klik OK.

Membuat Partisi
Partisi untuk dokumen, database, dan file-file temporer sebaiknya dipisah. Untuk membuat partisi di Windows Server 2003, ikuti langkah berikut:
1. Jalankan ‘Control Panel’->’Administrative Tools’->’Computer Management’
2. Pilih ‘Disk Management’


3. Klik ‘Disk 0′ pada daftar disk dan klik kanan.
4. Pilih ‘New Partition’
5. Pilih ‘Extended Partition’, isi ukuran partisi yang dibutuhkan dan klik ‘Next’
6. Pilih filesystem ‘NTFS’.
7. Ulangi langkah 1-6 untuk partisi yang lain.

Membuat User Account
Anda harus membuat user account khusus untuk pemakaian biasa dan jangan gunakan account Administrator. Gunakan account Administrator jika diperlukan, misalnya instalasi software atau hardware.
1. Jalankan ‘Control Panel’->’Administrative Tools’->’Computer Management’
2. Pilih ‘Local Users and Groups’



3. Pilih ‘Users’
4. Klik kanan di daftar user dan pilih ‘New User’
5. Isi dengan nama user yang Anda inginkan.



6. Klik ‘Create’
Selamat, Windows Server 2003 telah siap digunakan sebagai Server. Untuk menggunakan Voucha II, Anda perlu melakukan instalasi Microsoft SQL Server 2000 dan Microsoft SQL Server 2000 - Service Pack 4.
Technorati Tags: windows-server-2003

readmore »»