Tutorial

[Tutorial] Cara Menghilangkan Navbar    (Navigation Bar) di Blog !!


http://www.digitalgupshup.com/wp-content/uploads/2010/05/blogspot-top-navbar.png       





 
1. Kamu harus Login dulu di Blogger.com
2. Trus Pilih Layout --> Edit HTML
3.
Copy kode Di bawah ini lalu paste di atas kode ]]></b:skin>

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


Kemudian simpan.

Selamat Mencoba.....!!

[Tutorial] Cara Membuat Efek Daun Berjatuhan di Blog !!


Cara Membuat Efek Daun Berjatuhan Di BlogEfek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.
Cara Membuat Efek Daun Berjatuhan :
1.       Seperti biasa login dulu ke dashboard blogger anda.
2.       Pilih Rancangan > Edit HTML, centang Expand widget template.
3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.
4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .
<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>
5.       Save / simpan template anda dan lihat hasilnya !!



[Tutorial] Cara Membuat Site/Blog Jadi Maintenance !!


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BkT_IBhyphenhyphenCq3WG97xZtOke1OfRnyzSturNEDSomlH2zxlTOPYM7btXMp-QSB6wVdTcB4oDCBTnCMxGxDIo6yJU12QaNLdWD9Rs3LO0Y8DBOgGouSIyVRHSFyFLVw-ZGSH5MRGWtvpLrgT/s1600/under-maintenance.gif

Eitss.. tenang saja, ini bukan pemberitahuan bahwa blog ini mengalami “Site Down for Maintenance”, melainkan hanya sharing bagaimana membuat blog dengan tampilan seakan-akan mengalami “Site Down”.
Ini hanya permainan CSS dengan penambahan gambar saja. Untuk melihat tampilan lebih jelas, silahkan lihat demo dibawah.
Berikut tutorial cara membuat tampilan site maintenance
1. Masuk ke "Rancangan - Edit HTML"
2. Tambahkan code berikut diatas kode ]]></b:skin>

html {
  height: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGs7_fwoYnGB11UmvgnXh1PtK5qg4SPSdGuUFcJBXimq_HyffdrXqyUnD33SuJj4plAjwu-PcY6crYRjYAMz5ZIRBwQc0BJlllKF0FmVKWDnQGfOfez76vxfWpFtRu3i9SckN8ekD5ffM/s1600/under-maintenance.gif) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

3. Anda bisa mengganti tulisan yg berwarna merah dengan alamat gambar lain.



 [Tutorial] Cara Membuat Kursor Selalu Di ikuti Jam !!

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4N5omopE2bxwDQA2rGnPyl5uPUfr6eze8dD1kvKF6PSagmllHe686HW_BUwSTZtblEtPoyk0R8AnbnDavp4cGqkzmYsPaMaUqvoCN6cI68VbLJNzYZgggzNdnIbJI7ap38lVOKe399Uk/s320/Untitled-1.gif

Ok kali ini saya akan Menshare Cara Kursor Mengikuti jam ok  simak saja ya Postingan saya ini

  1. ok Seperti Biasa Anda Login Dulu keblogger anda Login
  2. Setelah Login anda Anda Click Rancangan
  3. Kemudian Click lagi "Edit HTML"
  4. Conteng "Expand Template Widget"
  5. Setelah Expand Template Widget di conteng anda Harus Mencari Kode
   "]]></b:skin>" (Kalo Ingin Mudah Mencari Code ]]></b:skin> Silahkan Tekan "CTRL Kiri + F")
     
     6. Kalo Sudah Ketemu Kode ]]></b:skin> Silahkan Taruh Script di bawah ini tepat diatas Code ]]></b:skin> tadi

Code
/* CSS Kursor Diikuti Jam */
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;

}


     7. Kemudian Anda Harus Mencari Code "</body>" (Anda Dapat Menemukan Code Tersebut           di  Paling Bawah Code HTML Tersebut)
    8. Kalo Sudah Ketemu silahkan Anda Taruh Code Dibawah ini tepat diatas "</body>"

Code:
<script src='http://pandet-pandet.googlecode.com/files/clock.js' type='text/javascript'></script>

    9. Click Simpan Templates


Note*: Saran Saya Sebelum anda Melakukan Tutorial di atas Saya Sarankan Anda Harus Download Template Lengkap Anda Dulu Supaya kalo ada masalah Template anda bisa di backup kembali.



[Tutorial] Cara Membuat Animasi Loading di Blog !!



Cara Membuat Animasi Loading di Blog.. Animasi loading pada blog berguna untuk memperbagus status loading kita dengan ada gambar bergerak seperti gambar disamping.Tutorial ini nantinya akan merubah sedikit kode HTML template blog Anda. jadi saya sarankan sebelum mencobanya Anda telah mem-backup dulu blog Anda.

Untuk memilih model loading-nya, silahkan lihat disini
atau jika ingin lihat contoh gambarnya langsung:

Setelah anda memilih salah satunya, download file loading tersebut dan upload kembali ke web hosting Anda. (jika Anda belum mempunyai hosting saya sarankan untuk mengupload kePhotobucket, atau tempat penyimpanan yang sering Anda gunakan).
jika sudah, ikuti langkah di bawah ini.
 

Cara Membuat Animasi Loading di Blog :
  1. Login ke akun blogger Anda
  2. Pilih Edit HTML
  3. Centang Expand Template Widgets
  4. Cari <body> ganti kode tersebut dengan kode di bawah ini
<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='URL GAMBAR ANDA'/></div> <script src='http://loading-js.googlecode.com/files/loading.js' type='text/javascript'/>

 Ganti URL GAMBAR ANDA dengan url gambar Loading animasi yang telah anda temukan,kemudian SAVE.


[Tutorial] Cara Membuat Twitter Update di 

Blog !!



1. Silahkan kunjungi http://twitter.com/about/resources/widgets
2. Pilih My Website - Profile Widget
11
3. Masukkan Nama Twitter kamu pada kolom yang sudah di sediakan
2
4. Setelah memasukkan nama Twitter, akan ada hasil update twitter kita di sebelah kanan. Untuk pengaturan tampilan, ukuran tampilan dll, silahkan klik pada tulisan Prefences, Appearance dan Dimensions. Selanjutnya klik Finish & Grabe Code.
5. Silahkan Copy Paste code HTML yang di berikan ke Blognya masing-masing, jangan blog orang ya….
3





[Tutorial] Cara Membuat Facebook Like Box di Blog !!

1.   Setelah mimiliki akun FB silakan anda login terlebih dahulu ke facebook.
2.   Bukalah halaman ini : http://www.facebook.com/pages/create.php jika anda belum punya community page
3.   atau Pilih "create a page" atau klik disini
4.   Akan muncul seperti gambar di bawah ini, dan isi sesuai nama Community anda

Terbaru
Pilih Zona Merek atau Produk, lalu pilih Categori Situs Web.
akan ada ada form yang harus di isi dan lengkapilah !



 setelah itu klik create community page.

Baiklah sekarang kamu sudah memiliki halaman fans untuk blog kamu,..

Berikutnya adalah Cara Membuat like This Box Facebook di Blog




1. Silakan Klik http://developers.facebook.com/plugins/?footer=1


klik gambar untuk memperbesar
Tampilan nya nanti akan seperti di atas... yang kang salman ber tanda merah di atas adalah widget yang paling banyak di pake di blog.

Zaman Dulu (Lewat Saya jgn di perhatiin)
 (itu adalah ID community page anda)
Sekarang yang di copy url pagenya
Sebelumnya saya ingatkan Anda harus mengcopy URL page Fans Facebook Anda, jadi klau belum silakan kembali lagi.


1. Pilih Like Box
Perhatikan gambar di bawah ini :
Dahulu
klik untuk memperjelas (Lewat Aja)

Sekarang yang perlu kamu masukan bukan ID community, tetapi masukan url pagenya.. tepat di kolom "facebook page url"


Keterangan :
Width : lebar widget
Height : ketinggan dari widget
Connections : jumlah max penggemar yang di munculkan
Stream : menampilkan komentar di community page anda
Header : menampilkan kata "find us on facebook

7.  Setelah selesai silakan klik Get Code, dan copy kode yang anda dapatkan seperti gambar di bawah ini


8.   Login ke Blogger
9.   Pilih Edit Tampale / Tata Letak
10.  Lalu Tambah Widget / Gedget
11.  Pilih HTML / Javascript
12.  (paste) salin kode tadi disini
13.  Simpan


 [Tutorial] Cara Memasang Widget Alexa Rank di Blog !!


Buat yang belum tahu cara memasang widget Alexa Rank yang mengindikasikan traffic(dan tentunya lebih baik dipasang agar Alexa Rank nya lebih ter update dengan baik), maka silakan ikuti langkah-langkah di bawah ini.


  • Klik kategori “Sitetool” (letaknya diantara kategori “Home” dan “Top Sites”) pada bagian atas halaman situs tersebut.
  • Pada halaman Sitetool tersebut, bergeserlah ke bagian bawah dimana akan ditemukan pilihan yang tertulis “Alexa Site Widget” , yang terletak diantara tulisan “Edit your listing” dan “Alexa developer tools”. Klik tulisan “Alexa Site Widget.
  • Setelah mengklik “Alexa Site Widget” sebagaimana di atas, akan muncul 3 pilihan menu di bagian atas halaman : traffic widget, review widget, dan alexa logos. Klik traffic widget.
  • Di halaman yang baru muncul, jika anda menyusurinya dari atas ke bawah akan ditemukan 3 pilihan widget : “alexa site stats button” , “alexa traffic rank button” , dan “alexa traffic graph” dengan contoh masing-masing pilihan tersebut di sebelah kanannya. Perhatikan bahwa jika anda ingin memunculkan tulisan alexa rank lengkap dengan informasi jumlah link masuk maka pilihlah “alexa site stats button” dengan menuliskan alamat URL halaman depan situs atau blog anda (contoh :master-1st.blogspot.com; contoh lain www.master.com) . Jika anda hanya ingin menampilkan tulisan alexa rank saja maka ambillah pilihan kedua “alexa traffic rank button. Pilihan ketiga jika dipilih, hanya berupa tampilan grafik.
  • Anda lalu akan dihadapkan pada 3 pilihan ukuran tampilan widget : button 120 x 95, vertical banner 120 x 240, dan banner 468 x 60 sedangkan contohnya ada di sebelah kanan masing-masing. Jika anda yakin dengan ukuran yang anda pilih maka copy paste kode HTML yang telah disediakan ke bagian HTML atau widget blog atau situs and.


[Tutorial] Cara Mudah Membuat Box Tukar 
Link di Blog !!

Sobat Mau Tukeran Link ? Ayo,saya juga mau..hee..Bertukar Link memang penting dalam dunia bloging,selain untuk menjalin silaturahmi,yang paling penting bisa mendatangkan traffic untuk blog yang saling bertukar link..Nah,buat sobat yang ingin membuat Box Tukar Link,ikuti Trik Mudah Mudah berikut :

Sobat Mau Tukeran Link ? Ayo,saya juga mau..hee..Bertukar Link memang penting dalam dunia bloging,selain untuk menjalin silaturahmi,yang paling penting bisa mendatangkan traffic untuk blog yang saling bertukar link..Nah,buat sobat yang ingin membuat Box Tukar Link,ikuti Trik Mudah Mudah berikut :


1.Login ke dashboard>>Pilih Design>>Add widget>>HTML 
2.Copy Kode Dibawah ini :
<textarea rows="3" cols="17" style="width: 252px; height: 83px; color: Black; background-color: white;" readonly>&lt;a href="http://NAMABLOG.blogspot.com/" target="_blank" title="PENJELASAN BLOG SOBAT."&gt;&lt;img src="ALAMAT URL GAMBAR" border="0" alt="PENJELASAN BLOG SOBAT."&gt;&lt;/a&gt;</textarea>
 
 Catatan : Ganti KODE YANG BERWARNA MERAH sesuai dengan blog sobat. 
 Hasilnya seperti ini :








Cara II

<a href='http://chipzbieberzone.blogspot.com/'><img src='http://images.cooltext.com/2384462.gif'/></a>


Catatan : Ganti KODE YANG BERWARNA BIRU sesuai dengan alamat blog sobat.
                 
              : Ganti KODE YANG BERWARNA MERAH sesuai dengan link Logo/Banner yg telah kau  buat.

Hasilnya seperti ini :




[Tutorial] Cara Membuat Tukar Link di Blog !!


Bagi rekan netter, kini bertukar link juga bisa untuk meningkatkan page rank
blog/web
anda. Terkadang kita merasa kesulitan untuk melakukan tukar link
tersebut karena anda harus copy/paste link blog dari blogger lain ke blog anda.
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda.


Tips & Tutorial

 

Dengan memasang widget seperti contoh diatas, anda bisa membantu blogger lain
agar lebih mudah dalam bertukar link. Mereka tinggal copy/paste script blogroll tersebut sidebar blog mereka atau bisa juga ditempatkan kebagian lain pada blog. Anda bisa sesuaikan sesuai dengan kebutuhan tampilan blog anda.


Bagaiman cara membuat script tukar link? Nah, ini dia cara membuat script/kode tukar link atau link exchange atau blogroll di blog/web. Ikuti langkah-langkah berikut :

1. Browsing ke http://cooltext.com 2. Pada menu sebelah atas klik Logos, hingga muncul seperti pada gambar
    dibawah ini:



3. Pilih/klik logo yang anda suka

4. Logo dibagi atas dua bagian yaitu sebelah kanan dan kiri. Silahkan anda
    melakukan pengaturan atau desain sesuai dengan kebutuhan anda.


5. Klik pada Image Width untuk mentukan ukuran logo, jika sudah selesai
    klik tombol Render Logo. Tunggu beberapa saat sampai proses membuat logo
    selesai, seperti gambar dibawah ini
.



6. Klik Download Image untuk langsung menyimpan logo/image ke hardisk
    atau flashdisk anda. Get HTML Code untuk mendapatkan script, akan
    tetapi anda diminta untuk register terlebih dahulu.
    sebaiknya pilih cara pertama saja Klik Download Image.



7. Berikutnya tugas anda adalah menyimpan file logo tersebut ke harddisk online
    atau penyimpanan online. Misalnya :
http://www.photobucket.com, jika belum
    punya silahkan register dulu. Ambil kode HTML yang pendek, karena terdapat
    banyak pilihan kode HTML yang tersedia, pilih pilihan paling bawah seperti contoh :
   
http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif


8. Login ke akun blogger anda, klik Tata Letak, Element Halaman, Tambah Gadget,
    HTML/JavaScript
, klik tombol + (tambah). Lalu copy/paste script dibawah ini ke
    sidebar blog atau bisa juga dibuat posting khusus untuk bertukar link seperti ini.
Berikut Contoh Script yang yang bisa dipakai untuk menampilkan widget tukar link pada blog/web anda :
<p>Mau Tukar Link? Copy/paste code HTML berikut ke blog anda</p>
<p><a href="
http://pulsamurah.50webs.com/" target="_blank"><img alt="Tips & Tutorial" src="http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif" border="0" /></a></p>

<p><textarea rows="3" cols="31"><a href="
http://pulsamurah.50webs.com" target="_blank"><img border="0" alt="Tips, Triks AdSense, Tutorial Blog, Free Download E-Book, Bisnis Penghasil Dollar, cara buka Paypal/Alertpay, tips google adsense, bisnis internet, pusat bisnis online, pulsamurah" src=" http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif "/></a></textarea></p>



Keterangan:
Ganti yang warna Biru dengan URL blog dan descripsi blog anda, Warna merah judul image anda sedangkan yang warna hijau ganti dengan URL logo/image tempat anda menyimpan image yang baru saja anda simpan di http://www.photobucket.com

Ketika dipasang di sidebar blogger/Website hasilnya akan terlihat seperti ini:
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda.
Tips & Tutorial

 

9. Bagaimana Mau Mencoba? Salam Sukses.


[Tutorial] Cara Menaikkan PageRank Blog dengan Cepat !!


Setelah absen lama membahas Tutorial blog, kali ini saya akan membahas tips menaikkan Pagerank blog kita. Sebagaimana kita ketahui bahwa tolak ukur si Mbah Google melihat blog kita ialah dengan melihat rangking blog kita.  Ini penting buat blog yang sedang mengejar ranking tinggi di Google dan bagus buat bisnis Online.
Nah, berdasarkan pengalaman saya ini, saya mau berbagi sedikit tips supaya blog kita cepat naik rangkingnya. Google akan memberikan ranking blog mulai dari nilai 0 dan paling tinggi 10. kalau mau jelas info seputar Pagerank baca DISINI. Jadi makin tinggi blog kita, maka makin tinggi juga nilai popularitas blog tersebut. Nih ikuti kiat2 saya, dimana dalam 6 bulan saja saya sudah dapat PR 3 :)
1. Blogwalking, kita pasti sudah kenal banget dengan istilah tersebut, semakin kita bogwalking ke blog lain otomatis kita akan mendapatkan backlink dari blog yang kita kunjungi, tentunya kita harus meninggalkan jejak dengan komentar ( bukan komentar SPAM loh )

2. Tukar Link, ini adalah jurus paling banyak dipakai blogger untuk menaikkan rangking blog kita, semakin banyak teman, maka semakin banyak kunjungan ke blog kita
3. Mendaftarkan blog kita ke situs search engine, dengan begitu blog kita akan muncul di search engine. Semakin banyak blog kita muncul disana, semakin banyak juga traffic yang mampir dari searc engine tsb. Kalo anda mau daftarkan blog/situs anda bisa kunjungi salah situs submit blog seperti INI ( Langsung Daftar di 40 situs searc engine )
4.  Kunjungi blog Anda lewat serach engine, maksudnya jika anda memiliki postingan yang memberikan info yang banyak dicari orang seperti blog berita atau tutorial blog sebaiknya ketikkan judul blog anda. Jika kita sering mengetikan judul blog kita otomatis blog kita akan sering muncul di Search engine.
5. Pasang iklan di situs iklan Gratisan, bukan hanya iklan saja yang dapat anda pasang di situs tsb, cobalah sekali2 anda promosikan blog anda lewat situs tersebut. Klik DISINI untuk daftar di situs iklan baris. Semakin banyak anda memasang di situs tersebut, maka semakin terkenal blog anda dan tentunya backlink akan kita dapatkan.
6. Update Blog, sering2lah mengupdate blog anda, minimal sebulan itu 10 postingan atau berapa sajalah, biasanya Google akan terus men-crawl setiap postingan kita.
7. Berdo’a, nah cara ini wajib anda lakukan, selain melakukan tips diatas, Do’a kita mungkin dapat mewujudkan impian kita tersebut. Semoga aja blog kita cepat naik rangkingnya.
Nah demikian tips ringan agar blog kita cepat naik rangkingnya, ada yang mau nambahin ?

[Tutorial] Cara Mudah Membuat Read More tanpa Script !!

Ingin tahu Cara Membuat Read More Tanpa Script???

Cara Membuat Read More/Baca Selengkapnya tanpa edit template sangat mudah!!!

  1. Silakan tulis artikel seperti biasanya (tulis saja dulu sampai selsai)
  2. Letakkan korsur pada tulisan (sesudah kalimat) yang ingin di masukkan Read More.
  3. Klik Icon Insert jum break Cara Mudah Membuat Read More Tanpa Script
  4. Terbitkan/Publish artikel tersebut dan silakan lihat hasilnya.
Nah itu lah cara mudah membuat read more/baca selengkapnya di blogger tanpa harus pusing dan ribet memasukkan script read more lagi.

Selamat Mencoba

[Tutorial] Cara Membuat Next Page di Blogger !!

 1. Login ke blogger anda tentunya
2. Masuk ke Tata Letak
3. Tambah Gadget >> HTML/JavaScript
4. Copy pastekan code berikut di dalamnya

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

</style>






<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';


var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
</br>
<a href="http://abi-galoga.blogspot.com/" rel="me" target="_blank">next page</a>
Catatan : untuk mengatur jumlah posting dalam satu halaman silahkan atur code beirkut
 var pageCount=5;
jika anda ingin menampilkan 10 posting satu halaman maka 
var pageCount=10;

Simpan. mudahkan?sulit?bagaimana bisa yang semudah ini di bilang sulit -__- hahaha 


[Tutorial] Cara membuat Menu Horizontal di blogger !!

  1. Login ke dashboard blogger
  2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
  3. Klik Add Gadget / Tambah Gadget.
  4. Pilih/klik opsi HTML/Javascript
  5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
  6. Klik Save / Simpan
  7. Selesai
Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>                      
</div>

 Keterangan.

ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan. 


0 komentar:

Posting Komentar