Saturday, December 29, 2007

Bikin Blog Lebih Dinamis

0 comments

kali ini saya akan menulis bagaimana blog kita biar lebih dinamis lagi, atau sedikit merasakan pengelola-an  halaman blog gaya website berbasis content manajemen sistem (CMS). 

terutama mengelola elemen  yang ada di halaman depan blog  berbeda penampilanya dengan halaman yang di buka.

Untuk lebih jelasnya silahkan saudara pilih  salah satu judul tulisan yang ada pada blog ini.kemudian saudara perhatikan perubahan tampilan di bagian sidebarnya. Maka elemen profile, shoutbox dan recent komentar akan menghilang. Sedang elemen lain, yaitu elemen feed yang saya beri judul Template, tiba-tiba Tampak pada halaman yang di buka.

Coba kembali kebagian halaman utama tekan tab menu bertuliskan Home di bagian atas.
Berbeda bukan ? pada hal saya lakukan ini pada satu blog, dan tak perlu membuat blog baru lagi.

Gaya page dinamis ini sangat cocok sekali, bagi blog yang contentnya ingin menampilkan banyak link seputar ilmu pengetahuan, kumpulan tutorial dsb. juga sangat cocok bagi saudara yang ingin menampilkan diri anda dan kesukaannya.- artinya dari pada bernafsu memasang semua  elemennya pada halaman muka, lebih baik jika di bagi pada halaman lainnya.- tinggal kita pandai-pandai memilah dan memilah, elemen mana yang cucok di tampilkan pada halaman depan, dan elemen mana yang pas buat tampil di halaman selanjutnya.

Cara Install.

untuk menginstall-nya ke dalam blog sangatlah mudah, kita hanya menambahkan dua baris kode pada setiap halaman elemen yang di tambahkan atau yang terpasang.

Pertama : Menampilkan elemen hanya ada pada halaman frontpage atau halaman depan.

Pilih salah satu elemen yang hanya tampil di halaman depan blog, misalkan saya memilih elemen text  kemudian buka Template->Edit Html dan jangan lupa tandai kotak kecil di samping tulisan Expand Template Widget. kemudian cari tulisan atau kode elemen Text1. setelah ketemu tambahkan dan letakan dua baris kode pada posisi seperti tulisan yang saya  beri warna.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>
</b:if>

<b:include name="quickedit">  

</b:includable>
</b:widget>

Kedua : Menampilkan elemen hanya ada pada halaman selanjutnya.

Setelah kita memilih elemen mana yang akan tampil pada halaman selanjutnya, lakukan seperti langkah pertama. kemudian tambahkan dan letakan dua baris kode pada posisi seperti di bawah ini.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>

<b:include name="quickedit">

</b:if>   

</b:includable>
</b:widget>

Mencari kode elemen atau widget.

Perlu saudara ketahui setiap menambahkan sebuah elemen   secara default blogger telah memberi nama sesuai dengan elemennya. misalkan elemen Html/javascript di namai Html, elemen Daftar Link di namai LinkList, elemen Teks di namai text, Label di namai label. dst.
Dan setiap menambahkan elemen yang sama misalkan elemen text, maka blogger menemainya dengan Text1, Text2, Text3 dst. Html/javascript jadi Html1, Html2,Html3 dst.

Atau agar mudah mencari elemen yang kita tambahkan, bagusnya saudara memberikan judul pada setiap elemen. misalkan untuk elemen daftar liks atau linklist dengan judul bloggrol dst.

Mudah bukan smile_sad

Sumber tulisan dari :

1. adding-front-page-to-your-blog by Hoctro's place

2. related-posts by purplemoggy

Technorati tags: ,

Wednesday, December 26, 2007

Pasang Navigasi Bar Ala Boogle Blog

0 comments

Jika ente tidak tertarik dengan Navbar default dari blogger dan ingin menggantikan dengan Navbar seperti yang terdapat pada blog ini, ente bisa menggikuti tutorial di bawah secara step by step.

Langkah Pertama :

Menghilangkan Navbar Blooger dengan cara menambah kode css ini

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

Simpan sebelum tag body ini.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  dan seterusnya
  }

 

Langkah Kedua :

Tambahkan kode css navigasi ini.

/************** NAV1 *************/

#nav1{
height:32px;
line-height:32px;
background:white;
padding:0 10px;
background:transparent;
border-bottom: 1px solid #cfe4f2;
}
#nav1 ul,
#nav1 ul li
{
margin:0;
padding:0;
list-style:none;text-align:left;
    }
#nav1 ul li{
float:left;
display:block;
    }
#nav1 ul li a:link,
#nav1 ul li a:visited{
color:#0007EE;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;;
display:block;
    }
#nav1 ul li a:hover{
color:black;
    }
#nav1 ul li ul li{
float:none;
display:block;
    }
#nav1 ul li ul li a:link,
#nav1 ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
    }
#nav1 ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
    }
.submenu {
position: absolute;
width: 160px;
background: #fff;
padding:10px;
border:solid 1px #2E4B88;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
    }

#nav1 ul li#nav1_rss {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJD8XlNygftOlloKHWr_NmMMEZwI78RA3DMFPFb3Y9OIxsA29-zsNq88AtyolB8BJNk3wduTdoCeMvgxJOXTmqnKuPuYD3ekQJwfNE6DOOoktMAekqIfWzhzgZdtJghekhdDmSa-Ro_lZ/') no-repeat 10px;
padding-left:26px;
float:right;
}
#nav1 ul li#nav1_cat {
background:transparent;
float:right;
padding-left:10px;
}

Simpan sebelum kode ini.

]]></b:skin>

Langkah Ketiga :

Tambahkan javascript ini

<script src='http://santi23.fileave.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
function nav1(){
    $(&quot;div#nav1 ul li&quot;).mouseover(function() {
            $(this).find(&#39;ul:first&#39;).show();
    });
    $(&quot;div#nav1 ul li&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
    $(&quot;div#nav1 ul li ul&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
};
$(document).ready(function(){
    nav1();
});
</script>

Simpan javascript di atas sebelum kode ini

</head>

Langkah Keempat;

Masukan html navigasi ini.

<div id='nav1'>
<ul>
    <li><a href='url / alamat link tujuan' >Home</a></li>
    <li class=''><a href='#' title='About'>About</a></li>
        <li><a href='#' title='Child Pages Test'>Cara Membuat Blog</a>
          <ul class='submenu'>
       <li><a href='url / alamat link tujuan' title='Membuat Blog'>Membuat Blog</a></li>
       <li><a href='url / alamat link tujuan'  title='pengaturan blog'>Pengaturan</a></li>
       <li><a href='url / alamat link tujuan'  title='membuat tulisan'>Menulis</a></li>
          </ul>
        </li>
        <li id='nav1_rss'>    <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to Feed</a></li>
    <li id='nav1_cat'><a href='/'>Categories &#9660;</a>
        <ul class='submenu'>

            <li><a href='url / alamat link tujuan'  title='View all posts filed under Test category'>Test category</a></li>
        <li><a href='url / alamat link tujuan' title='category 2'>Test category 2</a></li>
        <li><a href='url / alamat link tujuan' title='category 3'>Test category 3</a>
        </li>

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

Simpan kode di atas sesudah kode ini.

<body>

Langkah Kelima

Setelah itu klik “ Save Template “ ( Simpan Template )

Bagaimana cara menggedit link pada navigasinya

Setelah Navbar –nya terinstall di blog kita, sekarang yang perlu ente pelajari dan lakukan adalah menggedit link url pada menu –nya sesuai dengan keingginan link tujuan ente.

coba perhatikan ini.

<li><a href='url /alamat blog ente'>Home</a></li>

Url / alamat blog ente = ganti tulisan itu dengan url blog ente misal; http://www.namablog.blogspot.com/ – dengan demikian maka setiap penggunjung menekan menu “ Home “ maka ia akan kembali pada halaman depan blog ente.

begitu juga

Url / alamat link tujuan = ganti dengan url / alamat link yang ingin ente tuju. misalkan jika ente punya alamat facebook jadi www.myfacebookuuu.com dst.

Sesuaikan juga nama menu navigasinya  dengan url / alamat link. misal Membuat Blog di ganti dengan Myfacebook. dst.

Setelah beres menggedit link url –nya seperti biasa Simpan Template

Technorati tags: ,

Tuesday, December 25, 2007

related post

0 comments

V r.Beta Sebenarnya code tentang related post ini sudah ada dan ramai orang memakainya sejak tahun 2006 lalu, namun pada blog ini saya baru memakainya tiga hari yang lalu ...hiksss.. emang gaptek..

Akan tetapi biarpun terlambat, namun akhirnya aku pakai juga dan hasilnya sukses dan sangat senang sekali, karena blog ini ada penambahan "ehem" =)) , seperti pemilik blog lainnya yang sudah pada jago-jago ngeblog.

Cara kerja Related post sendiri, secara default bekerjanya  hiden alias tersembunyi dalam fronpage ( halaman depan ) blog kita, namun ketika pengunjung menekan salah satu judul pada postingan ( atau read more / pemengalan artikel ) maka  otomatis  Related Post dengan label yang sama akan menampakan dirinya ( hixhixhix hantu kale ).

Kalau masih binggung dengan tulisan saya ini coba tekan judul postingan  atau tulisan read more di bawah ini.

Dan coba lihat di bagian sidebar blog saya ada sebuah elemen baru dengan judul VR RELATIF.

kita pun bisa menaruh elemen Related Post-nya di bawah postingan atau di atasnya. terserah kita dan suka-suka kita untuk menaruhnya.

Install Related Post

Pertama :
buka halaman Template -> Edit Html dan jangan lupa tandai kotak di samping tulisan Expand Template Widget. Kemudian simpan kode di bawah ini sebelum tag </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


Kedua :

Setelah memasukan kode di atas, kemudian cari kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Jika Susah mencarinya, gunakan pencarian pada browser yang kita pake. untuk FireFox dan Ie tekan berbarengan Tab Ctrl+F.

Setelah ketemu kode di atas ganti dengan kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Kemudian tekan tulisan Simpan Template.

Ketiga :
Sekarang masuk ke  Template -> Elemen Halaman, kemudian tambahkan sebuah widget atau elemen Html/JavaSricpt. dan masukan kode di bawah ini.
Namai atau beri judul Related Post.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>


Keempat
:
Setelah beres pekerjaan di atas, sekarang kita Kembali buka  Template -> Edit Html dan jangan lupa tandai juga kotak di samping tulisan Expand Template Widget. Kemudian kita cari code widget atau halaman elemen yang kita tambahkan yang di namai Related Post tadi, atau dengan bantuan kotak pencarian cari tulisan Related Post.

dan setelah ketemu kode-nya, kita hanya perlu menambahkan dua baris kode yang saya tandai dengan huruf tebal dan di beri warna.

misalkan kode widget-nya seperti di bawah dan penambahan dua baris kode yang hurufnya di pertebal juga di beri warna.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Kemudian Simpan Template.

Pekerjaanya sudah selesai, coba kita periksa apakah berjalan dengan benar dan sesuai.

Note:
Sedangkan untuk jumlah yang akan di perlihatkan oleh RRelated Posts ini.Kita bisa merubahnya sesuai dengan jumlah yang kita inginkan.  kalau kita ingin merubahnya cari saja kode dalam langkah kedua di atas yakni tulisan ini ,  max-results=10. secara default akan tampil sebanyak 10 post, gantilah angkanya sesuai dengan yang kita inginkan.

Perhatian.

Tulisan di atas merupakan hasil terjemahan. Jika merasa kesusahan untuk di mengerti cobalah masuk pada sumber aslinya di blog purplemoggy ini. mudah-mudahan lebih simple dan cepat di pahami.

Sumber dari :

purplemoggy

Technorati tags: ,

Followers

 

church--tutorial. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com