Update Google Page Rank

Maaf postinganx dihapus :)

Universitas Teknologi Tercanggih Di Timur Tengah

Bulan Semptember 2009 kemarin, pemerintah Arab Saudi resmi membuka King Abdullah University of Science and   Technology (KAUST). Universitas teknologi ini menjadi universitas tercanggih di Timur Tengah.

Universitas ini menerima pengajar dan peserta didik dari seluruh dunia.
Merupakan satu-satunya kampus berbasis teknologi paling lengkap dan tercanggih di wilayah Timur Tengah
KAUST adalah sebuah universitas berskala internasional berbasis riset di bidang sains dan teknologi, didedikasikan untuk memberikan inspirasi pada era baru pencapaian ilmiah dalam Kerajaan yang juga akan bermanfaat bagi kawasan dan dunia.

KAUST terealisasi dari visi jangka panjang Penjaga Dua Masjid Suci, Raja Abdullah Bin Abdul-Aziz Al-Saud.
Kampus utama terletak di lahan dengan luas lebih dari 36kilometer persegi di daerah Thuwal di sepanjang Laut Merah - sekitar 80 kilometer sebelah utara Jeddah, kota terbesar kedua di Kerajaan Arab Saudi. Shaheen
 
KAUST bekerja sama dengan raksasa komputer IBM, merilis proyek untuk membangun komputer super dengan kemampuan 222 triliun kalkulasi per detik.
Shaheen, itulah nama super komputer itu, direncakan menjadi yang komputer paling canggih di kawasan Timur Tengah. Menurut Majid Al-Ghaslan selaku CIO KAUST, super komputer ini akan membantu menganalisis potensi energi minyak yang bertebaran di negara itu.

Shaheen berasal dari bahasa Arab untuk sejenis burung elang yang terkenal karena kecepatan terbangnya.

Dengan komputer super Shaheen ini, Arab Saudi bakal masuk di jajaran elit negara-negara di dunia yang punya komputer dengan kapabilitas teraflop.
Bahkan Shaheen katanya akan terus dikembangkan sehingga bisa mencapai jutaan triliun kalkulasi per detik dalam beberapa tahun ke depan yang dapat menangani 185,17 teraflops.

Semoga usaha yang dilakukan Kerajaan Arab Saudi ini akan mewujudkan tersebarnya kebaikan Islam. Selama ini, Saudi telah menyebarkan berbagai ilmu Islam ke seluruh dunia dengan menerbitkan dan mencetak mushaf Al-Quran dan berbagai buku Islam lainnya, menyumbangkannya ke seluruh dunia.

Bantuan yang diberikan Kerajaan ini kepada umat Islam di seluruh dunia sudah sangat banyak, dari bantuan kemanusiaan untuk korban bencana, bantuan pendirian Masjid di negara muslim maupun negara non muslim dan bantuan dana ke berbagai ormas Islam, walaupun kadang ternyata ormas Islam tersebut memusuhi Kerajaan.

Saudi juga telah memberikan banyak beasiswa untuk para pelajar dari seluruh dunia baik di bidang ilmu Islam maupun ilmu dunia. Semoga Allah menjadikan kita, umat Islam sebagai umat yang memberikan manfaat kebaikan bagi manusia dan seluruh alam. Karena Islam adalah rahmat, kebaikan dan kasih sayang untuk alam semesta.


http://www.kaust.edu.sa/

Mempercantik Tampilan Judul Posting Ketika Label Diklik Dengan Background

Panjang amat judulnya? Sebelumnya saya pernah posting trik cara hanya menampilkan judul posting ketika label atau category diklik, untuk trik kali ini cara memodifikasi tampilan judul posting tersebut dengan memberikan background pada judul postingnya seperti contoh pada gambar disamping. Tapi trik ini bisa dilakukan kalau sobat sudah melaksanakan trik sebelumnya.

Berikut langkah langkahnya:

 

Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML

1. Centang pada kotak kecil disamping Expand Template Widget
2. Cari kode yang berwarna merah, ingat kode ini hanya terlihat jika trik sebelumnya sudah anda lakukan, jika belum lihat kembali disini 

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

   3.  Selanjutnya ganti kode yang berwarna merah tadi dengan kode berikut ini:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<data:post.title/></div></a>

Note: 
Ganti kode warna yang berwarna hijau dengan warna yang Anda sukai.Tapi jika ingin juga menambahkan icon di depan title postingan, sobat tinggal menambahkan kode gambar ke dalamnya kode diatas, selengkapnya, sobat dapat mengganti kode tadi dengan kode berikut:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<img alt='>>>' border='0' src='alamat gambar icon anda letakkan disini'/>
<data:post.title/></div></a>

  4. Oke, tinggal simpan template!!!

Semoga berhasil dan bermanfaat!

Minta Voting Untuk Mendukung Saya

Dalam rangka lomba Blog Se-SMA Kab. Jepara, Saya mewakili SMA Saya yaitu SMAN 1 Mayong dalam lomba blog tersebut. Blog yang Saya buat adalah http://smanmayong.blogspot.com.

Penentuan pemenang lomba blog ini salah satunya melalui Voting di blog komep. Nah maka dari itu Saya sebagai Author blog SMAN Mayong meminta dukungan dari Anda melalui voting.

Caranya

Kunjungi http://komep.blogspot.com dan di sidebar kanan ada Voting Area, Lalu pilih SMAN 1 MAYONG dan klik tombol Vote.

Saya ucapkan terima kasih sebesar-besarnya untuk yang udah Voting. Semoga perjuangan Saya akhir-akhir ini tidak sia-sia..

Ayo Voting sebelum tanggal 30 Desember 2009

Salam Blogger

Award Ke Tiga

Alhamdulillah berikut award ketiga serta kue cantik (mau diapain kuenya ya?) yang diterima blog ini dari blog dua orang sahabat Rizky dan MasterGoMaster 

  
 

  

Terimakasih ya! Maaf belum tau nie mau dibagi kesiapa lagi? Pasalnya anaa blogger baru belum banyak kenalan, apresiasi award yg kemarin juga kurang? Trus blogger yang anaa sering kunjungi 'rumahnya' kebagian juga sama dua sahabat diatas?

Sekali lagi terimakasih penghargaan award ini!

 

Membuat Scroll Pada Daftar Komentar (New)

 

Postingan ini untuk menjawab pertanyaan ukhty narti pada trik membuat scroll pada daftar komentar pertama seperti terlihat pada image diatas. jadi perbedaannya dengan trik sebelumnya kolom untuk menuliskan komentar berada diluar daftar komentar. Untuk hasil atau contohnya seperti daftar komentar pada blog ini

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> Expand Template Widget

Cari kode berikut: 

<dl id='comments-block'> 

Untuk memudahkan gunakan tab CTRL+f

• Sisipkan kode berikut di atas kode tadi:

<div style='overflow:auto; width:ancho; height:400px;'>

• Scroll kebawah sampai anda temukan kode </dl> atau gunakan lagi   tombol  ctrl+f untuk mencari

• Setelah dapat letakkan kode berikut setelahnya

</div>

• Simpan template.

Kalau masih bingung, lihat kode berikut, yang warna merah adalah kode yang harus anda sisipkan. Untuk ukuran height bisa anda ganti sesuai selera

<div style='overflow:auto; width:ancho; height:300px;'>
      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>
</div>

Jangan lupa simpan template!

Membuat Icon Disamping Judul Posting

Ingin membuat variasi icon disamping judul posting yang contohnya bisa anda lihat pada blog ini atau seperti pada beberapa gambar dibawah ini?

Caranya mudah saja, ikuti langkah-langkah berikut:

Langkah pertama: Tentukan image atau gambar yang akan dijadikan icon kemudian upload ketempat hosting anda, ambil URL gambar iconnya.

Langkah kedua:

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-style:italic;
line-height:1.3em;
color:#333;
}

• kalau sudah dapat sisipkan kode berikut

background:url(alamat gambar anda) no-repeat left center;

• Sehingga keselurahannya menjadi seperti ini:

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-style:italic;
line-height:1.3em;
color:#333; 
background:url(alamat gambar anda) no-repeat left center;}

• Terakhir klik save/ simpan.

Semoga bermanfaat!

Top Komentator Widget

Top Komentator widget ini sebenarnya udah banyak dibahas oleh blog-blog lain yang membahas seputar tutorial blog.



Tapi dikarenakan saya lihat pada blog ini belum ada panduannya jadi tidak ada salahnya juga membuat tutorial Top Komentator di blog ini juga.



Seperti biasa, caranya :



Login dulu ke account blogger kamu.

• Pilih tab Tata Letak --> Elemen Halaman.

• Tambah Gadget dalam elemen blog kamu (rekomendasi : Di bawah atau di samping gadget Posting Terbaru)

• Dalam "Tambahkan Gadget", pilih HTML/JavaScript

• Copy dan pastekan kode di bawah ini dan jangan lupa diberi judul (ex : Top Komentator)

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol>');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

if(obj.value.items[i].link == "")

var item ="<li>" + obj.value.items[i].title + "</li>";

else

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Frudyazhar.blogspot.com&num=15&filter=rudy" type="text/javascript"></script>

Note :

• Ganti kode yang berwarna biru dengan alamat blog kamu.

• Ganti kode yang berwarna merah dengan jumlah komentar yang ingin ditampilkan.

• Kode yang berwarna orange adalah untuk tidak menampilkan nama dari pemilik blog tersebut.

Contoh pemakaian Top Komentator ini bisa anda lihat pada blog rudyazhar disini.

Selamat mencoba...

Cara Membuat Background Pada Titel Footer

Melengkapi postingan sebelumnya. Berikut langkah langkah membuat background pada titel atau judul footer seperti pada contoh gambar berikut atau lihat

disini dan disini 

 

Membuat background pada titel atau judul footer

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

#bottom h2 {
padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
}

• kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

• Sehingga keselurahannya menjadi seperti ini:

#bottom h2 {
padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
background:url(alamat image anda)repeat-x;
}

• Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul footer dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

background: #5FB404;

Untuk melihat macam macam kode warna klik disini

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini

Mudah saja, berikut langkah langkah membuat background pada titel posts:

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

• kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

• Sehingga keselurahannya menjadi seperti ini:

.post h3 {
  background: url(alamat image anda)repeat-x;
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

• Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul postingan dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

background: #5FB404;

Untuk melihat macam macam kode warna klik disini 

Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
 






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

• Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

.sidebar h2 {

• Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

• Isi tulisan berwarna merah diatas dengan alamat gambar anda
• Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
• Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

• Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!

Untuk mengedit warna font anda bisa lihat kode warna disini

• Simpan template!

Semoga bermanfaat!

Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

Berikut anaa coba berbagi trik membuat menu slider versi dua. Mengapa versi dua? Karena sebelumnya anaa pernah posting trik membuat menu slide atau tab view slide versi 1 yang contonya bisa dilihat pada halaman awal (home) pada sidebar kanan blog ini.
Cara membuat menu slider versi 2

• Langkah pertama pada dasbor klik tata letak=> edit  HTML=> cari kode ]]></b:skin>

letakkan kode berikut diatas kode tadi:

#slider    {
    background:url(YOUR-LINK-HERE/slide.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}
#mover {
    width: auto;
    position:absolute;
    overflow:hidden;
}
.slide {
    padding: 20px 0px;
    width: 1000px;
    float: left;
    position: relative;
    height:200px;
    }
.slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }
.slide h2 a:link, .slide h2 a:visited  {
    color:#fff;
    background-color: transparent;
    }
.slide h2 a:hover  {
    color: #ddd;
    background-color: transparent;
    }
span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
}   
.slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
.slide img {
    position: absolute;
    top: 20px;
    left: 577px;
    background:#fff;
    padding:10px 10px;
    }
#slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 65px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }   

• Langkah ke dua letakkan script JQuery dan kode berikut sebelum </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Cari kode berikut:

<div id='header-wrapper'>
..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2010/01/cara-membuat-menu-dtree.html'>Cara Membuat Arsip Seperti Menu Dtree?</a></h2> <p>Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image disamping</p> <img alt='Ngeblog Offline' src='http://i50.tinypic.com/dbk4tv.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/07/cara-membuat-menu-scrolling.html'>Cara Membuat Menu Scroll</a></h2> <p>Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh disamping!</p> <img alt='Tab View Slide' src='http://i45.tinypic.com/b50h0y.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html'>Membuat menu tab view</a></h2> <p>Bagaimana cara membuat menu tab view sederhana seperti gambar disamping..</p> <img alt='tab view sederhana' src='http://i50.tinypic.com/25fimhu.jpg'/> </div> </div>
<!-- /Mover --> </div>
<!-- /Slider --> </div>
<div class='clear'/>

• Silahkan edit tulisan yang berwarna biru, merah dan hijau dengan link, judul dan deskripsi postingan anda !
• Terakhir jangan lupa save deh!
• Semoga berhasil!

Untuk melihat hasilnya klik disini

Cara Menambahkan Elemen Halaman Diatas Footer

Masih tentang desain template setelah sebelumnya saya posting cara menambah dua kolom elemen halaman dibawah sidebar utama dan menambah sebuah elemen halaman dibawah dua sidebar yg telah dibuat itu, agar lengkap kali ini akan saya paparkan lagi langkah-langkah menambah elemen halaman diatas footer seperti terlihat pada gambar berikut:


Yang saya jadikan tempat eksperimen kecil ini blog saya lainnya (lihat disini) yang menggunakan template default blogger, minima

Baiklah langsung aja berikut cara menambah elemen di atas footer:

1. Login ke blogger dengan id anda
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :
   

   #footer {
   width:900px;
   clear:both;
   margin:0 auto;
   padding-top:15px;
   line-height: 1.6em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: center;
   }

6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi
   

   /* bottom
   ----------------------------------------------- */
   #bottom {
   width:900px;
   clear:both;
   margin:0 auto;
   float:left;
   padding:10px 0;
   color:#333;
   background:#ffffff;
   border-top:1px solid #333;
   }
   #bottom a:link {
   color:#006699;
   text-decoration:none;
   }
   #bottom a:hover {
   color:#c06000;
   text-decoration:underline;
   }
   #bottom a:visited {
   color:#045FB4;
   text-decoration:none;
   }
   #bottom h2 {
   padding:20px 0 2px 0;
   margin:0 0 10px 0;
   border-bottom:1px dotted #cccccc;
   font-size:11px;
   font-weight:bold;
   line-height:1.4em;
   text-transform:uppercase;
   }
   #bottom ul {
   padding:0;
   margin:0;
   color:#333;
   }
   #bottom ul li {
   list-style-type:none;
   border-bottom:1px dotted #333;
   background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
   padding-left:17px;
   margin-top:2px;
   }
   #left-bottom {
   width:200px;
   float:left;
   padding-left:15px;
   }
   #center-bottom {
   width:200px;
   float:left;
   padding:0 20px 0 20px;
   }
   #right-bottom {
   width:420px;
   float:right;
   padding-right:15px;
   }

7. Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode ini :
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

8. Tambahkan kode berikut di atas kode tadi :
   

   <div id='bottom'>
   <b:section class='bottom' id='left-bottom' preferred='yes'/>
   <b:section class='bottom' id='center-bottom' preferred='yes'/>
   <b:section class='bottom' id='right-bottom' preferred='yes'/>
   </div> <!-- end bottom -->

9. Sekarang klik tombol SIMPAN TEMPLATE
10. Selesai

Note: sesuaikan ukuran lebar (widht) footer dengan template anda dan lebar elemen yang akan ditambahkan sesuaikan selera anda dengan memperhatikan jarak marginnya.
Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil! Bisa lihat hasil eksperimen saya disini

Menambah Elemen Dibawah Dua Sidebar

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:


Menambah elemen di bawah dua sidebar

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :
   

   #sidebar-wrapper {
   width: 220px;
   float: $startSide;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }

6. Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }

7. Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.
   

   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:350px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

   Sehingga kodenya akan menjadi seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   $startSide
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

8. Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :
   

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   <b:widget id= dan seterusnya...
   <b:section class='sidebar' id='left-col' preferred='yes'/>
   <b:section class='sidebar' id='right-col' preferred='yes'/>
   </div>

9. Sisipkan kode berikut di bawah kode tadi :
   <b:section class='sidebar' id='bottom-col' preferred='yes'/>
10. Sehingga secara keseluruhan menjadi seperti ini :
    

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya....
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    <b:section class='sidebar' id='bottom-col' preferred='yes'/>
    </div>

11. Sekarang klik tombol SIMPAN TEMPLATE
12. Selesai

Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!

Cara Membuat Icon Pada Address Bar

Suatu kehormatan untuk menjawab pertanyaan seorang teman blogger ukhty Wardah dari negara tetangga bagaimana cara mengganti icon pada address bar? Sebelumnya pertanyaan yang sama juga diajukan ukhty SuciYellow

Untuk kita yg memiliki blog di blogger/ blogspot icon defaultnya seperti ini kita bisa menggantinya dengan icon favorit kita, berikut caranya:

• Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh icon anaa:

                   

• Jika image anda berukuran besar anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
• Klik pada tombol Browse...
• Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
• Klik pada tombol Generate Favicon.
• Setelah proses selesai, klik pada Click Here to Download your favicon.
• Save ke komputer anda.
• Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, misalnya photobucket, imagesachs dll.
• Setelah anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, anaa mempunyai sebuah alamat URL seperti ini :
  http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif
• Anda harus mengubah alamat URL favicon anda menjadi seperti ini :

<link href='http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif' rel='shortcut icon' type='image/x-icon'/>

• Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
• Klik pada Tata Letak.
• Klik Edit HTML.
• Silahkan cari kode </head> posisinya berada bagian atas
• Simpan kode favicon yang tadi persis di atas kode </head> . Contoh :

<link href='http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif' rel='shortcut icon' type='image/x-icon'/>

• Klik tombol Simpan Template.
• Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Semoga bermanfaat!

Cara Membuat Link Memiliki Ragam Efek Menarik

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:

• Loggin ke blogger
• Klick layout atau tata letak
• Edit HTML
• Cari code berikut:

hover

• Untuk memudahkan tekan ctrl+F, hasilnya akan banyak.
• Setelah ketemu tambahkan code berikut sejajar pada setiap code tadi.

{ color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }

• Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
• Jangan lupa save, simpan template!

Kalau ingin linknya berkedip warna pelangi lihat disini

Menambah Dua Kolom Elemen Halaman Dibawah Sidebar Utama

Kali ini saya ingin mengetengahkan cara menambah dua kolom elemen halaman dibawah sidebar utama.
Tidak panjang lebar lagi, berikut cara menambah elemen halaman dibawah sidebar utama yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template default blogger yaitu minima...
Tampilan awal templateminime seperti gambar dibawah ini:


Bagaimana cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti gambar dibawah ini:

Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

   6. Ganti nilai width 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya:
Kalau untuk template minima 220 dibagi menjadi dua hasilnya sangat kecil karena itu anaa pilih 350, setelah dibagi dua dan memperhitungkan margin atau jarak antara kedua sidebar baru maka untuk setiap kolomnya (sidebar kanan dan kiri) lebarnya menjadi 170 dan float: right;
Maka kode diatas jadi seperti ini:

#sidebar-wrapper {
width: 350px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

             7. Sekarang tambahkan kode berikut di bawah kode tadi

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

   8. Secara keseluruhan kodenya menjadi seperti ini :

#sidebar-wrapper {
width: 350px;
float: right;
$startSide
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

   9. Sekarang kita akan membuat kode HTML untuk sidebar left dan sidebar right tersebut. Cari kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>

  10. Sisipkan kode berikut di bawah <b:widget id= dan seterusnya.... :

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

  11. Sehingga secara keseluruhan menjadi seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

12. Nah agar sidebar yang telah dibuat tidak melorot jumlah yang kita tambahkan pada sidebar utama tadi tambahkan pula pada 3 elemen halaman template anda yaitu

• Elemen Header
• Elemen Outer
• Elemen Footer

Lebar sidebar utama setelah dirubah - lebar sidebar asli = jumlah yang anda harus tambahkan pada lebar header, outer dan footer (350-220 =130).
Kode masing masing elemen seperti ini:

• Untuk Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

• Untuk Wrapper

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

• Untuk Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Tulisan berwarna merah adalah yang harus anda ganti angkanya dengan menambahkannya dengan jumlah penambahan pada sidebar utama. Dari contoh diatas maka perhitungannya 660+130=790
13. Sekarang klik tombol SIMPAN TEMPLATE
SELESAI.
Untuk melihat hasilnya klik Elemen halaman! Semoga berhasil, semoga bermanfaat!

Membuat Komentar Admin Berbeda Dengan Pengunjung Blog

Kalau kita berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.

Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Langkah 1
Login ke account blogger Anda!

Langkah 2
Jangan lupa beri tanda centang Expand Widget Templates

Langkah 3
Copy paste kode di bawah sebelum kode ]]></b:skin>

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Untuk kode yang berwarna merah bisa anda ganti sesuai selera, bisa lihat kode warnanya disini

Langkah 4
Cari kode seperti di bawah:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kode warna merah yang di tulis tebal (bold) adalah kode baru yang harus di sisipkan di antara kode di atas.

Langkah 5
Simpan template! Sekarang lihat artikel yang ada komentar anda, sudah berubah tampilannya apa belum? Oya saat menuliskan komentar anda harus dalam sign in diaccount anda.

Kalau ingin komentar Admin memiliki background image seperti gambar dibawah ini:

Ganti saja backgroundnya dengan URL gambar anda!

Selamat mencoba, semoga bermanfaat.

Recent Comments ala Wordpress versi II

Gimana khabar anda semua, Semangat Luar Biasa untuk mempercantik blog Anda?

Kali ini saya ingin sharing ilmu untuk mempercantik blog di blogspot dengan recent comments ala wordpress Versi II, karena versi pertama udah di bahas OB pada postingan Trik Blogger | Memasang Komentar Terbaru (Recent Comments).



Beda dengan yang terdahulu apa? kalau yang dulu link antara nama komentar saya postingan menuju ke alamat yang sama, yaitu kehalaman postingan yang dikomentari.

Nah versi yang sekarang kalau link yang berkomentar langsung menuju ke-alamat si komentar itu sendiri mirip seperti yang ada di wordpress.



ini contohnya :







Widget ini hasil kreasi dari www.corpseofattic.com, disitu ada berbagai versi yang sudah dibuatnya.

Anda juga bisa intip langsung source code dari wordpress recent comments disini, bisa kamu modifikasi jika tidak membuat kepala kamu pusing.

Tapi kalau kamu tidak mau pusing-pusing ini saya jelaskan triknya :



Login dulu ke account blogger kamu.

• Pilih tab Tata Letak --> Elemen Halaman.

• Tambah Gadget dalam elemen blog kamu (rekomendasi : Di bawah atau di samping gadget Posting Terbaru)

• Dalam "Tambahkan Gadget", pilih HTML/JavaScript

• Copy dan pastekan kode di bawah ini dan jangan lupa diberi judul (ex : Komentar terbaru)

<div style="overflow: auto; width: 180px;

height: 330px; background-attachment: scroll;

background-color:#dde5d1; line-height:1.5em;padding: 5px; border: 4px dotted #FFF; -moz-border-radius:10px;-webkit-border-radius:10px;">

<script style="text/javascript" src="http://corpseofattic.com/scripts/recentcommentsv2.js"></script><script style="text/javascript">var numposts = 7;var showposttitle = true;var standardstyling = true;</script><script src="http://rudyazhar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>

Note :

• kode yang berwarna biru untuk mengaktifkan fungsi scroll, jika tidak menggunakannya kamu bisa hapus aja kode tersebut.

• Ganti kode yang berwarna merah dengan alamat penyimpanan file "recentcommentsv2.js" kamu sendiri. Kalau tidak biarkan apa adanya.

• Kode yang berwarna orange adalah jumlah recent comments yang ingin kamu tampilkan, contoh diatas 7 komentar yang tertampil kamu bisa rubah angka 7 ke angka 5 misalnya.

• Ganti kode yang berwarna hijau dengan alamat blog kamu.

Contoh pemakaian recent comments ini bisa anda lihat pada blog rudyazhar disini.

Selamat mencoba...

Masalah Pada Kolom Komentar

Mungkin kita sering bertanya kenapa blog saya sudah dipasangi kolom komentar tapi masih sepi komentar padahal postingan kita tidak buruk buruk amat bahkan ada diantara postingan yang sangat menarik? Banyak hal yang bisa jadi alasan kenapa blog kita sepi komentar, jarang update, jarang blogwalking, promosi blog dan bisa jadi masalah pada kolom komentar yang sering kali tidak kita sadari!

Untuk alasan terakhir anaa sering menjumpainya dibeberapa blog, anaa tidak bisa berkomentar karena verifikasi kata pada kolom komentarnya bermasalah, terpotong atau tidak adanya scroll pada kolom komentar seperti gambar berikut:

 

          

Untuk mengecek ada tidaknya masalah tersebut dikolom komentar blog anda silahkah cek tanpa sign in terlebih dahulu keblogger. Jika tidak bermasalah Alhamdulillah, jika bermasalah berikut dua saran anaa untuk mengatasi masalah pada kolom komentar

1. Hilangkan verifikasi kata pada kolom komentar, caranya:

• Loggin ke blogger
• Pada dasbor klik pengaturan
• Klik komentar
• Pada bagian bawah ada pilihan tampilkan verifikasi kata untuk komentar, pilih tidak
• Klik simpan setelan

Dengan cara ini anda menonaktifkan perintah anti spam, tapi akan memudahkan pengunjung berkomentar. Jika ada komentar spam anda tinggal mendeletnya saja.

2. Jika tidak ingin menghapus verifikasi kata pada kolom komentar, maka memasang scroll bisa jadi alternatif lain mengatasi masalah ini. Caranya hanya dengan merubah sedikit kode pada template. berikut langkah-langkahnya:

• Login ke bloger
• Kemudian pilih Tata Letak
• Pada tab menu, pilih Edit HTML
• Klik kotak Expand Template Widget
• Cari kode yang mirip  dengan kode berikut

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='no' width='100%'/>

• Jika sudah dapat, gantilah scrolling='no' menjadi scrolling='yes'
• Ini menandakan fungsi scrolling sudah diaktifkan.
• Terakhir simpan template

Semoga berhasil, bermanfaat!

Cara Membuat Spoiler Pada Blog

Postingan kali ini tutorial cara membuat spoiler pada blog. Apa spoiler itu? Lihat contoh berikut! Klik tab berikut!

Klik cara membuat widget ini

Sudah mengerti maksudnya? Postingan ini untuk menjawab pertanyaan seorang teman, (de' suciyellow), syukur kalau bisa bermanfaat bagi yang lain...

Berikut caranya:

• Pada dasbor klik tata letak=> klik elemen halaman=> tambah gadget=> HTML/JavaScript
• Copy dan paste kode berikut kedalam kolom kontent:

 

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div><blink><a href=http://amatullah83.blogspot.com/2009/12/cara-membuat-spoiler-pada-blog.html>Klik cara membuat widget ini</a></blink>

Teks yang berwarna biru bisa anda ganti katanya sesuai selera misalnya seperti contoh diatas, begitu pula dengan kontentnya bisa diisi dengan banner, buku tamu, link teman dan lain lain! Untuk background warnanya bisa lihat kodenya disini

• Jangan lupa simpan dan simpan lagi!
• Lihat hasilnya!

Semoga bermanfaat!

Cara Membuat Menu Tab Navigator Horizontal

Get update here 30 tab menu navigasi horizontal

Melanjutkan postingan sebelumnya sebagai jawaban pertanyaan seorang teman yang ingin mengetahui cara membuat menu tab navigator horizontal.

Sebenarnya pada banyak template baru, tab navigator horizontal ini sudah tersedia dan sobat dengan mudah bisa mendownloadnya dengan gratis dan tidak perlu susah membuatnya. Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:

1.Langkah Pertama

• Loggin ke blogger

• Pada dasbor klik tata letak

• klik edit HTML kemudian cari kode ]]></b:skin>

• kemudian letakkan kode berikut diatas ]]></b:skin>

menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

hasilnya seperti ini:

atau kode berikut:

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Untuk hasil seperti ini

keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat disini

• Simpan template.

2. Langkah Ke Dua

Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=> HTML/JavaScrip

Copy dan paste kode berikut warna merah berikut pada content:

 

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://amatullah83.blogspot.com">HOME</a>

<a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam" target="_blank">Agama</a>

<a href="http://amatullah83.blogspot.com/search/label/Teknologi" target="_blank">Tecnology</a>

<a href="http://amatullah83.blogspot.com/search/label/Kesehatan" target="_blank">Kesehatan</a>

<a href="http://amatullah83.blogspot.com/search/label/Islamic%20Animation" target="_blank">Islamic Animation</a>

<a href="http://amatullah83.blogspot.com/search/label/Glitter%20Text" target="_blank">Glitter Teks</a>

<a href="http://www.blogger.com/" target="_blank">Loggin Blogger</a>

</li>
</div>
</div>

Keterangan: untuk URL silahkan sobat ganti, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. Bisa lihat kode warnanya disini

• Simpan. simpan lagi... lihat blog anda!

Semoga berhasil dan bermanfaat!

*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.

Cara Menambah Elemen Halaman Diatas Header

Kali ini saya ingin berbagi trik blog cara menambah elemen halaman diatas header dan cara membuat manu tab navigator horizontal. Berhubung pada postingan cara membuat menu tab view, seorang teman bertanya pada kolom komentarnya seperti ini:

rencanapembelajaran mengatakan...

oh ya, kalau mau buat tab menu di bagian atas header bisa gak. soalnya cuma blog2 tertentu yang ada menu nya di bagian atas, misalnya kayak blog ini ada menu agama islam, teknologi, glitter text, kesehatan dsn. blog saya bisa kah di buat spt itu ? mohon petunjuknya.. silahkan di liat blog saya !
Jawabannya: Alhamdulillah bisa, pertama anda tentu harus mengetahui dulu cara menambah elemen di atas header.

Berikut ikuti langkah langkahnya:

Dalam keadaan login=> pada dasbor klik tata letak/ layout=> edit HTML=> cari kode ]]></b:skin>

• Tambahkan kode berikut diatas kode ]]></b:skin>
  

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

• Kemudian cari kode berikut  <div id='header-wrapper'>
  
• Kemudian copy kode berikut diatas <div id='header-wrapper'>
  

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

• Selanjunya simpan template!

Lihat hasilnya klik elemen halaman, jika ada kolom tambah gadget diatas header langkah langkah yang anda lakukan berhasil!

Selanjutnya elemen tambah gadget diatas header bisa anda gunakan untuk macam macam widget. Untuk cara membuat menu tab navigator horizontal pada postingan berikutnya insyaAllah. Sedangkan cara menambah elemen halaman dibawah header bisa lihat .disini

Manfaat Bertukaran Link

Banyak manfaat yang akan kita dapatkan dengan bertukar link antar sesama blogger, diantara manfaatnya selain untuk mendongkrak page rank, meningkatkan trafik pengunjung, menambah back link dan memudahkan deteksi blog dimata mesin pencari, yang paling utama adalah mempererat persahabatan dengan saling berkunjung atau silaturahim keblog lainnya.

Pertemanan kita lewat blog dengan saling berkunjung dan bersilaturahim, membaca karya teman, atau postingan yang berupa informasi dapat dipastikan sedikit banyak akan menambah ilmu, wawasan dan memperluas pola pikir kita yang tentu suatu saat, kalau tidak sekarang maka akan sangat berguna dimasa yang akan datang sebagai modal katika kita terjun kemasyarakat.


Hal yang perlu kita perhatikan pula, jangan lupa untuk memberikan apresiasi atas karya teman setelah kita membaca dan mengambil manfaat dengan memberikan komentar, baik berupa ungkapan terima kasih atau saran dan kritik yang membangun.

Nah untuk itu anaa mengajak teman teman sesama blogger untuk bertukaran link, dengan syarat... wah ada syaratnya? Jangan khawatir syaratnya mudah saja kok!

Hanya satu yang anaa harapkan, yaitu blog teman bukanlah blog spam, blog yang mengandung content pornografi, pornoaksi atau yang mengandung unsur SARA!

Nah siapa yang berminat bertukaran link dengan blog ini, silahkan tinggalkan pesannya dikolom komentar!

Pasang link anaa dan konfirmasi! InsyaAllah anaa akan melink balik sesegera mungkin...
Salam...
==========================================
Baru belajar dan coba praktekin tips SEO nie??? (",)

Seiring bertambahnya ilmu SEO maka Syarat Bertukar Link di Update, Baca dihalaman FRIEND'S LIST