Selasa, 28 Juni 2011

Membatasi Jumlah Posting Pada Halaman Label

20.34 Ariawan 1 comment


Label dalam blog adalah sesuatu hal yang wajib. Label bisa juga diartikan sebagai pengkategorian posting. Tujuannya untuk memudahkan pengunjung mencari artikel yang berhubungan. Maka dari itu jangan lupa memberi label sesuai dengan materi posting. Nah label bisa ditaruh di sidebar atau sebagai menu. 
Cuma sayangnya ketika label di klik, pastinya halaman akan memuat semua postingan dalam label tersebut. Kalau jumlah posting dalam satu label tersebut banyak tentunya akan membuat loading blog jadi berat. Agar halaman bisa menampilkan posting dengan jumlah tertentu maka kita perlu sedikit menambahkan kode pembatas seperti dibawah ini :
 
+ "?max-results=5"
Angka 5 adalah banyaknya posting yang muncul pada halaman ketika label di klik. Anda bisa merubahnya sesuai dengan selera.

Bagi Anda yang sudah memasang label pada widget sidebar dalam bentuk list atau  berikut cara menambahkan kode pembatasnya :
1. Masuk ke Akun Blogger Anda
2. Klik Ranncangan / Design > Edit HTML
3. Klik Download Template Lengkap terlebih dahulu untuk antisipasi jika terjadi eror
4. Centang Expand Template Widget
5. Cari kode seperti dibawah ini ( gunakan Ctrl + F atau tekan F3 untuk memudahkan pencarian )

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
6. Tambahkan kode pembatas + &quot;?max-results=5&quot;
7. Sehingga hasilnya akan seperti di bawah ini
<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
Untuk yang menggunakan label dalam bentuk cloud silakan cari kode berikut, letaknya dibawah kode label list :

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
Tambahkan kode pembatas + &quot;?max-results=5&quot;
Maka hasilnya akan tampak seperti di bawah ini.
<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

Cara diatas untuk label yang dipasang di widget sidebar blog, baik label dalan bentuk list maupun cloud. Untuk label di menu navigasi breadcrumbs dan post footer line jika di klik masih akan menampilkan semua poting. Anda juga bisa membatasi banyaknya posting yang muncul pada kedua link label tersebut. Caranya sama dengan diatas, cari kode seperti dibawah ini :

<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><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 != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div> 
Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <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 != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>


Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
Klik tombol SIMPAN TEMPLATE.
Selesai
Read more »

Kamis, 02 Juni 2011

Membuat Artikel Terkait Dengan Kolom Scroll Down

21.01 Ariawan No comments

Menampilkan artikel terkait  pada blog  akan memudahkan pengunjung untuk menelusuri artikel lainnya.
Sehingga pengunjung dapat lebih banyak membaca postingan-postingan pada blog. Langsung saja kita bahas bagaimana cara membuatnya pada blog.
Pertama setelah Anda login pada blog Anda klik Rancangan, lalu klik Edit HTML.
Kemudian back up template dengan cara klik download template.
Setelah itu klik checkbox expand template widget dan cari kode berikut <data:post.body/>.

Gunakan Shortcut F3 pada keyboard untuk memudahkan pencarian kode tersebut, atau bahasa gamblangnya tekan F3 dan copy paste kode tersebut di kotak pencarian yang akan muncul dibawah setelah kita menekan F3 pada keyboard.

Kalau sudah ketemu copy paste kode dibawah ini tepat dibawah kode <data:post.body/> tadi.


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

<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>

<div class='widget-content'>
<h3>Artikel Terkait Lainnya Seputar:</h3>

<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>

</div>
</b:if>



Simpan template dan lihat hasilnya. Tampilan scroll down menyeseuaikan jumlah postingan Anda dan ukuran ketinggian yang Anda gunakan yang ada pada script. Silakan Anda sesuaikan ketinggian dan warna background yang ada di script sesuai dengan selera Anda.


Hasilnya seperti ini.
Selamat mencoba.
Read more »

Membuat Daftar Isi Otomatis Sesuai Label Di Sidebar Blog

20.57 Ariawan No comments

Menampilkan semua daftar isi / judul posting blog di sidebar dengan urutan label.
Langsung aja lah. Begini caranya :
1. Login ke akun blogger anda
2. Klik "Rancangan", Elemen Laman klik Tambah Gadget pilih HTML / JavaScript
3. Masukkan kode berikut :
<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 250px; background-color: none; text-align: left;"><script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://araya19.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
4. Simpan
Warna biru untuk mengubah ketinggian, warna merah ganti dengan alamat URL anda. Untuk lebih maksimalnya silakan diutak atik sendiri ya..
Read more »

Menampilkan Hanya Judul Posting Pada Halaman Label

20.56 Ariawan No comments

Menampilkan hanya judul posting ketika label diklik bermanfaat untuk menghemat space bar pada halaman blog. Bayangkan jika label diklik kemudian halaman menampilkan semua postingan dari label tersebut, tentunya akan membuat berat loading dan tidak maksimal menampilkan judul posting. Kalau yang ditampilkan hanya judulnya saja, pengunjung akan lebih leluasa untuk memilih mana isi postingan yang akan dibuka.

Untuk membuatnya langkahnya seperti ini :
  • Login ke akun blogger Anda.
  • Klik Tata Letak / Lay Out.
  • Klik tab menu EDIT HTML.
  • Back up Template dengan mengklik " Download Template Lengkap ".
  • Klik / centang Expand Widget.
Cari kode <div class='blog-posts feed'> atau kode <b:include data='post' name='post'> Untuk memudahkan mencari tekan ctrl F / F3. Kemudian hapus kode diatas dan ganti dengan kode berikut ini :

<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>

Simpan Template.
Hasilnya seperti dibawah :


Selamat mencoba!
Read more »

Membuat Menu Scroll Down Pada Arsip Blog

20.55 Ariawan 1 comment

Menu scroll down pada arsip blog bermanfaat untuk menghemat  ruang pada sidebar. Langsung aja kita simak gimana cara ngebuatnya ya ya ya....hehehe..

Cara membuatnya :
  • Masuk pada akun blogger Anda.
  • Pilih Tata Letak / Lay Out.
  • Klik / centang Expand Widget.
  • Cari kode <div id='ArchiveList'>
  • Gunakan Ctrl + F / tekan F3 untuk memudahkan pencarian.
  • Sisipkan kode <div style='overflow:auto; width:ancho; height:260px;'> dibawah kode <div class='widget-content'> diatas kode <div id='ArchiveList'>
  • Dan tambahkan </div> diatas <b:include name='quickedit'/> 
 Lihat penempatan dibawah ini :


<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:260px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>


Anda dapat mengganti ketinggiannya dengan mengubah angka 260px sesuai dengan selera Anda.
Simpan Template. Mudah Kan??

Selamat mencoba!
Read more »

Membuat Teks Berjalan Pada Blog

20.54 Ariawan 1 comment

Teks berjalan sebenarnya terdiri dari dua kode dasar. Diawali dengan kode <marquee>dan diakhiri dengan kode </marquee>.

Macam-macam teks berjalan.
1. Teks berjalan dasar yaitu teks berjalan dari kanan ke kiri.
Contoh penggunaan kode : <marquee>IRAWAN</marquee>
Hasilnya :

IRAWAN

2. Teks berjalan dari berbagai arah dengan menambahkan kode direction.
Contoh penggunaan kode :
<marquee direction="right">TEKS DARI KIRI KE KANAN</marquee>
<marquee direction="up">TEKS DARI BAWAH KE ATAS</marquee>
<marquee direction="down">TEKS DARI ATAS KE BAWAH</marquee>
Hasilnya :

TEKS DARI KIRI KE KANAN TEKS DARI BAWAH KE ATAS TEKS DARI ATAS KE BAWAH

3. Teks berjalan dengan kecepatan yaitu dengan menambahkan kode scrollamount.
Contoh penggunaan kode :
<marquee scrollamount="10">TEKS BERJALAN 10</marquee>
<marquee scrollamount="15">TEKS BERJALAN 15</marquee>
<marquee scrollamount="30">TEKS BERJALAN 30</marquee>
Hasilnya :

TEKS BERJALAN 10 TEKS BERJALAN 15 TEKS BERJALAN 30

4. Teks berjalan mondar mandir dengan menambahkan kode behavior="alternate"
Contoh penggunaan kode :
<marquee behavior="alternate">TEKS BERJALAN MONDAR MANDIR</marquee>
Hasilnya :

TEKS BERJALAN MONDAR MANDIR


5. Teks berhenti ketika disentuh kursor mouse dengan menggunakan kode onmouseuver="this.stop()"onmouseout="this.start."
Contoh penggunaan kode :
<marquee onmouseover="this.stop()" onmouseout="this.start()">TEKS BERHENTI KETIKA DISENTUH</marquee>
Hasilnya :

TEKS BERHENTI KETIKA DISENTUH


6. Teks dengan warna background dengan cara menambahkan kode bgcolor="warna" atau bgcolor="#kode warna" dan juga bisa mengatur warna text dengan kode style="color:warna" .
Contoh penggunaan kode :
<marquee bgcolor="blue" style="color:yellow">TEKS KUNING BACKGROUND BIRU</marquee>
Hasilnya :

TEKS KUNING BACKGROUND BIRU

7. Taks berjalan variasi.
Contoh penggunaan kode :
  <marquee behavior="alternate"><marquee width="180">TEKS BERJALAN</marquee></marquee>
Hasilnya :

TEKS BERJALAN

Contoh dengan kode :
<marquee behavior="alternate" width="10%">>></marquee>TEKS DENGAN PANAH<marquee behavior="alternate" width="10%"><<</marquee>
Hasilnya :

>>TEKS DENGAN PANAH<<


Contoh dengan kode :
<marquee style="border:blue 2px SOLID">TEKS DENGAN BORDER BIRU</marquee>
Hasilnya :

TEKS DENGAN BORDER BIRU

Contoh dengan kode :
<marquee behavior="alternate" direction="up" width="95%"><marquee direction="right" behavior="alternate">TEKS ZIGZAG</marquee></marquee>

Hasilnya :

TEKS ZIGZAG


Selamat mencoba!

Read more »

Menghilangkan Navigation Bar Blogger

20.52 Ariawan No comments

Menghilangkan Navigasi Bar pada blogspot caranya cukup mudah.
Begini caranya gan....

Pertama masuk ke akun blogger, klik Tata Letak / Lay Out, pilih Tab Menu EDIT HTML dan jangan lupa centang EXPAND WIDGET.

Cari kode ini [CDATA[/*, gunakan Ctrl + F atau tekan F3 copy paste kode tadi di kotak pencarian / find bar.
Masukkan kode berikut ini di bawah kode [CDATA[/* tadi.


#navbar-iframe {
display: none !important;
}


Seperti inilah gambaran penempatannya :

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}



Selamat mencoba!

Read more »

Membuat Link Pada Blog

20.51 Ariawan No comments

Membuat Link pada blog adalah kebutuhan pada saat kita memposting. Link adalah tautan dimana kita mengarahkan teks atau gambar dalam posting untuk menuju ke satu tujuan yang kita arahkan. Dalam posting mungkin kita akan menautkan postingan kita menuju satu lokasi yang kita arahkan. Misal kita ingin mengarahkan isi postingan kita yang berisi tentang informasi software yang kita ikuti dari blog atau website lain, untuk mengajak pembaca menuju blog atau website tadi kita mengarahkan teks tertentu dalam postingan kita untuk menuju pada blog atau web yang kita arahkan jika pembaca mengklik teks tertentu yang kita tandai. Atau Anda juga bisa mengarahkan teks untuk mendownload file dari link download file hosting Anda. 
File hosting sendiri adalah tempat penyimpanan file yang disediakan oleh situs tertentu yang dapat diakses dari mana saja. Ada beberapa contoh free file hosting yang dapat Anda gunakan secara cuma-cuma. Misal ziddu, 4shared, mediafire dan sebagainya. Untuk dapat menggunakan layanan penyimpan data atau file cukup dengan mendaftar di salah satu situs yang menyediakan layanan file hosting. Jika kita kita mengupload file nantinya kita akan diberikan link file kita untuk bisa diakses oleh siapapun.
Kembali kepada topik membuat link pada blog. Misal kita akan membuat link seperti dibawah ini :
" Untuk informasi lebih lengkap mengenai software yang satu ini silakan klik dini."
Pada tulisan "silakan klik disini" kita blok kemudian klik ikon "LINK" dan masukkan alamat url blog atau website yang kita tuju.



 
Kemudian untuk membuat tautan terbuka dengan tab baru tambahkan kode target=_blank" dibelakang alamat url yang kita masukkan tadi. Caranya dengan klik Edit HTML pada menu posting blog Anda lalu cari kode alamat url tadi dan tambahkan kode target=_blank" dibelakang alamat sebelum tanda >. Misal Anda membuat link seperti ini : "klik disini"
Kode yang muncul di format HTML posting Anda seperti ini :
<a href="http://araya19.blogspot.com/"><b style="color: blue;">klik disini.</b>

Setelah kita tambahkan jadi seperti ini :
<a href="http://araya19.blogspot.com/"target=_blank"><b style="color: blue;">klik disini.</b>

Perhatikan tulisan yang berwarna biru.

Membuat link pada blog terbuka dengan tab baru penting dilakukan. Tujuannya agar pada saat pembaca atau pengunjung  mengklik teks yang kita tautkan terbuka dengan tab baru. Jika Anda tidak membuatnya maka halaman blog Anda akan tertimpa dengan tautan atau link yang Anda buat tadi. Atau dengan kata lain halaman blog Anda akan hilang dan berganti dengan halaman baru yang kita tautkan. Bayangkan jika Anda membuat banyak tautan atau link di blog Anda. Tentunya akan menyulitkan pembaca untuk membuka tautan lainnya di posting blog Anda karena harus kembali ke halaman blog Anda.
Agar lebih mudah untuk memasukkan kode untuk membuka tab baru pada link yang perlu diperhatikan adalah alamat url yang Anda masukkan pada anchor text. Untuk praktisnya ketika anda masuk pada Edit HTML posting Anda cari saja kode yang berisi url yang Anda tautkan pada teks dan tambahkan target=_blank" disetiap kode tautan sebelum tanda >. Mudah bukan?

Well, selamat mencoba.
Read more »

Membuat Navigasi Halaman Bernomor

20.48 Ariawan No comments

Dari sekian banyak tutorial membuat navigasi bernomor, rasanya hanya cara dibawah ini yang paling efektif, praktis dan bisa diterapkan pada template bawaan maupun template eksternal. Berikut langkah-langkahnya :

1. Login ke dashboard blogger anda
2. Klik Rancangan lanjut EDIT HTML
3. Cari kode ]]></b:skin>
4. Tambahkan kode berikut diatasnya

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;
}

5. Kemudian cari kode </body>
6. Tambahkan kode berikut diatasnya

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->

7. Simpan template dan lihat hasilnya

Selamat mencoba...
Read more »

Cara Mengganti Tullisan Posting Baru, Posting Lama Dan Beranda Dengan Icon Pada Blog

20.47 Ariawan No comments

Mengganti Tulisan Posting Baru, Posting Lama dan Beranda sebenarnya bukanlah suatu hal yang harus dilakukan. Tapi bagi Anda yang ingin agar tampilan blog lebih bervariasi bisa mengganti tulisan dengan icon gambar. Caranya cukup mudah.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini :
  • Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>
Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut:
Ganti kode tersebut dengan kode ini
<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Previous.png'/>
  • Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>
Ganti kode tersebut dengan kode ini:
<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Next.png'/>
  • Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>
Ganti kode tersebut dengan kode ini:
<img border='0' src='http://cdn.iconfinder.net/data/icons/sphericalcons/48/home.png'/>

4. Untuk icon silahkan di ganti dengan selera masing-masing .
5. Jika sudah tinggal klik Save Templates.
Read more »

Membuat Daftar Isi Pada Sidebar

20.42 Ariawan No comments

Membuat Daftar Isi pada sidebar blog caranya mudah dan praktis. Mungkin anda ingin lebih memudahkan pengunjung blog anda menelusuri isi postingan blog anda dengan daftar isi yang mudah terlihat. Caranya sebagai berikut : 

1. Login ke dasboard blogger anda klik Rancangan
2. Klik tambah gadget kemudian cari HTML/Javascript
3. Masukkan kode berikut ini :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">Daftar Isi</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li> MP3</a></li>
    </ul>
    </div>
    </div>


Ganti tulisan yang berwarna merah dengan alamat URL atau alamat blog anda atau link postingan anda. Lihat link postingan anda di adress bar pada saat anda membuka halaman posting dan letakkan di tulisan yang berwarna merah. Anda juga bisa mengganti tulisan "Daftar Isi" yang berwarna biru sesuai dengan selera anda. Juga untuk tinggi kolomnya sesuaikan saja dengan selera anda dengan mengubah nilai HEIGHT.

4. Simpan dan lihat hasilnya

Sekedar untuk contoh memasukkan link posting lihat dibawah :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">MP3 GRATIS</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://araya19.blogspot.com/2011/03/free-download-bon-jovi-mp3.html"> BON JOVI  </a></li>
    <li>><a href="http://araya19.blogspot.com/2011/02/free-download-dream-theater-mp3.html">DREAM THEATER</a></li>
<li>><a href="http://araya19.blogspot.com/2011/02/free-download-roxette-mp3.html">ROXETTE</a></li>
<li>><a href="http://araya19.blogspot.com/2011/01/guns-n-roses-mp3.html">GUNS N ROSES </a></li>
</ul>
    </div>
    </div>


Selamat mencoba...
Read more »

Script Efek Salju Berbagai Warna

20.40 Ariawan No comments

Inilah beberapa script efek salju dengan berbagai warna yang bisa anda gunakan untuk menghias blog anda. Untuk menggunakan script cukup dengan cara tambah gadget, pilih HTML/Javascript dan masukkan scriptnya, simpan dan letakkan dimana saja.
1. Efek salju merah
<script language="javascript"src="http://rikz.mobie.in/script/snow/redsnow.js"type="text/javascript">
</script>

2. Efek salju biru
<script language="javascript"src="http://rikz.mobie.in/script/snow/bluesnow.js"type="text/javascript">
</script>

3. Efek salju hitam
<script language="javascript"src="http://rikz.mobie.in/script/snow/blacksnow.js"type="text/javascript">
</script>

4. Efek salju cyan
<script language="javascript"src="http://rikz.mobie.in/script/snow/cyansnow.js"type="text/javascript">
</script>

5. Efek salju emas
<script language="javascript"src="http://rikz.mobie.in/script/snow/goldsnow.js"type="text/javascript">
</script>

6. Efek salju abu-abu
<script language="javascript"src="http://rikz.mobie.in/script/snow/graysnow.js"type="text/javascript">
</script>

7. Efek salju hijau
<script language="javascript"src="http://rikz.mobie.in/script/snow/greensnow.js"type="text/javascript">
</script>

8. Efek salju fuchsia
<script language="javascript"src="http://rikz.mobie.in/script/snow/fuchsiasnow.js"type="text/javascript">
</script>

9. Efek salju khaki
<script language="javascript"src="http://rikz.mobie.in/script/snow/khakisnow.js"type="text/javascript">
</script>

10. Efek salju lime
<script language="javascript"src="http://rikz.mobie.in/script/snow/limesnow.js"type="text/javascript">
</script>

11. Efek salju navy
<script language="javascript"src="http://rikz.mobie.in/script/snow/navysnow.js"type="text/javascript">
</script>

12. Efek salju maroon
<script language="javascript"src="http://rikz.mobie.in/script/snow/maroonsnow.js"type="text/javascript">
</script>

13. Efek salju olive
<script language="javascript"src="http://rikz.mobie.in/script/snow/olivesnow.js"type="text/javascript">
</script>

14. Efek salju orange
<script language="javascript"src="http://rikz.mobie.in/script/snow/orangesnow.js"type="text/javascript">
</script>

15. Efek salju pink
<script language="javascript"src="http://rikz.mobie.in/script/snow/pinksnow.js"type="text/javascript">
</script>

16. Efek salju ungu
<script language="javascript"src="http://rikz.mobie.in/script/snow/purplesnow.js"type="text/javascript">
</script>

17. Efek salju silver
<script language="javascript"src="http://rikz.mobie.in/script/snow/silversnow.js"type="text/javascript">
</script>

18. Efek salju teal
<script language="javascript"src="http://rikz.mobie.in/script/snow/tealsnow.js"type="text/javascript">
</script>

19. Efek salju kuning
<script language="javascript"src="http://rikz.mobie.in/script/snow/yellowsnow.js"type="text/javascript">
</script>

20. Efek bunga sakura
<script language="javascript"src="http://rikz.mobie.in/script/sakura.js"type="text/javascript">
</script>
Read more »

Membuat Link Berkedip Pada Saat Disorot Mouse

20.38 Ariawan No comments

Ingin link dalam blog anda berkedip warna warni pada saat disorot mouse? Berikut caranya :

1. Login ke akun blogger
2. Klik Rancangan lanjut klik tab EDIT HTML
3. Cari kode </head>, tekan F3 untuk memudahkan pencarian
4. Kalau sudah ketemu copy paste kode berikut tepat dibawahnya

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>
5. Simpan template dan lihat hasilnya
Read more »

Membuat Navigasi Breadcrumb Pada Blog

20.35 Ariawan No comments

Membuat Navigasi Breadcrumb pada blogspot memang harus dilakukan secara manual. Tidak seperti pada wordpress yang memang kebanyakan templatenya sudah SEO Friendly alias sudah tersedia navigasi breadcrumbnya Nah untuk membuat blogspot SEO Friendly ada baiknya kita memasang navigasi breadcrumb di blog. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik tab EDIT HTML
3. Beri centang pada Expand Template Widget
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatas kode tadi

.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}

6. Kemudian cari lagi kode berikut :
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

7. Copy paste kode berikut diatas kode tadi
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

8. Simpan template dan lihat hasilnya
Anda akan melihat hasilnya diatas postingan yang anda buka pada blog.
Read more »

Membuat Buku Tamu / ShoutMix Tersembunyi Di Sisi Blog

18.44 Ariawan No comments

ShoutMix atau Buku Tamu atau kolom komentar yang tersembunyi di sisi blog juga bisa menghemat ruang blog. Kalau blog anda penuh dengan konten maka sebaiknya anda menggunakan shoutmix tersembunyi agar blog terlihat rapih. Langkahnya :
1. Masuk dulu ke shoutmix.com untuk mendapatkan kode shoutmix anda, klik disini aja nih, setelah masuk klik create shoutbox, isi semua kolomnya trus centang "I have read and agree to the Terms of Service." Lanjut klik continue. Kalo udah dapet kodenya simpan dulu kode shoutmix anda.
2. Seperti biasa login ke akun blogger anda, klik Rancangan>Lemen Halaman>Tambah Gadget>pilih HTML/JavaScript.
3. Masukkan kode berikut nih :
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
4. Ganti kalimat " LETAKKAN KODE SHOUTMIX/C BOX ANDA DISINI" dengan kode shoutmix yang sudah anda simpan tadi. Sesuaikan gambar, tinggi, lebar, dan garis tepi dengan mengganti tulisan yang berwarna biru sesuai dengan selera anda.
5. Simpan dan selesai...

Read more »

Membuat Widget Followers Yang Tersembunyi Di Sisi Blog

18.41 Ariawan No comments

Untuk menghemat ruang blog widget followers bisa dibenamkan disisi blog. Jadi yang muncul disisi blog cuma judul widgetnya aja dan kalo di klik baru muncul halaman widgetnya. Untuk langkahnya sebagai berikut : 
1.  Login ke akun blogger anda, sebelumnya anda masuk dulu ke Google Friend Connect atau  klik aja disini untuk masuk ke Google Friend Connect, tujuannya untuk mendapatkan kode widget follower anda. Setelah masuk ke Google Friend Connect, klik tambahkan gadget anggota dan atur lah warna widget follower anda. Setelah selesai klik buat kode. Dan kode script follower anda akan mucul. Simpan dulu ya.
2. Lanjut masuk ke dasbor blogger anda setelah anda tadi sudah mendapatkan kode follower anda, buka Rancangan, Lemen Halaman, Klik Tambah Gadget dan pilih HTML/JavaScript.
3. Masukkan kode berikut :
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1094.photobucket.com/albums/i443/irawan9/folllowers.jpg') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script> <div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Kode Widget Follower Anda Disini

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (10-gb.offsetWidth).toString() + "px";
</script></div></div>
4. Ganti tulisan yang dicetak miring berwarna merah diatas dengan kode follower yang sudah anda simpan tadi, dan ganti tulisan yang berwarna biru dengan alamat url gambar anda atau bisa juga menggunakan alamat diatas.
5. Simpan gadget dan lihat hasilnya.
Read more »

Kode Warna HTML Blogger

18.40 Ariawan No comments

Nah...ini dia gan, kode warna HTML Blogger. Ga perlu dijelasin lagi fungsi dari kode-kode warna html blogger. Kalau yu seorang blogger pastinya dah tau dah nih kode fungsinya buat apa? Seperti biasa langsung aja gan. Pasti seneng yang praktis-praktis kan? Klik aja di warna yang mo dipilih. Kode otomatis muncul (liat di kotak bawah ya gan ).





































































































































































































Kode warna yang dipilih :

Semoga bermanfaat dah...
Read more »

Membuat Menu Horizontal Pada Blog

18.37 Ariawan No comments

Menu pada blog pastinya sangat membantu pengunjung mencari kategori yang diinginkan. Selain itu menu juga dapat memperindah tampilan blog apabila letaknya diatur dengan baik menyesuaikan template. Langsung menuju materi gan untuk membuat menu horizontal secara manual.

1. Login ke akun blogger
2. Klik Tata Letak dan pilih tab Edit HTML
3. Centang Expand Template Widget, sebelumnya ada baiknya download template lengkap dulu untuk mengantisipasi bila terjadi kesalahan pada saat edit atau tidak maksimal hasilnya
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatasnya
/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan sub menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link sub menu ketika pointer digerakkan diatasnya.
 6. Cari kode berikut :
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
 5. Kalau sudah ketemu copy paste kode berikut tepat dibawah kode tadi
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>About Me</a></li>
<li><a href='URL 3'>Contact Me</a></li>
</ul>
</div>
 6. Ganti tulisan yang berwarna merah dengan URL yang anda tuju dan ganti yang berwarna biru dengan nama menu anda
7. Klik simpan template
Silakan anda menambahkan variasi sendiri untuk warna, font, lebar menu dan sebagainya. Atau jika ingin mencoba membuat menu dengan cara offline silakan anda download CSS Menu Generator.
Read more »

Membuat Daftar Isi Otomatis Pada Sidebar Dengan Scroll Atau Dengan Efek Berjalan

18.32 Ariawan No comments

Kalo kemarin saya sudah posting gimana caranya bikin daftar isi manual pada side bar, sekarang saya mau share cara membuat daftar isi pada blog secara otomatis dengan scroll atau dengan efek berjalan. Langsung menuju ke materi gan. Berikut langkahnya :

1. Seperti biasa, login ke akun blogger anda
2. Klik Rancangan dilanjut klik Tambah Gadget pilih HTML / JavaScript
3. Untuk Daftar Isi dengan Scroll masukkan kode berikut :
<style></style>
<div style="margin: 0px; padding: 0px; overflow: auto; width: 400px; height: 200px; background-color: rgb(128, 0, 0);">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 150;var showpostdate = false;var showpostsummary = false;var numchars = 150;var standardstyling = true;</script><script src="http://tutorialbloggerari.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></div>

4. Tulisan yang berwarna biru bisa diganti menyesuaikan dengan lebar sidebar blog sobat, nah yang warna merah ganti dengan alamat blog sobat yay, yang berwarna hijau itu warna backgroundnya, ganti lah sesuka hati atau kalo mau dikosongin tinggal ganti aja dengan kata none

5. Untuk Daftar Isi Dengan Efek Berjalan masukkan kode berikut nih :

<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://tutorialbloggerari.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>
6. Seperti diatas, warna merah ganti dengan alamat blog sobat ya, warna biru untuk mengatur ketinggian. Silakan diutak-atik sendiri untuk mendapatkan hasil yang maksimal yang sesuai dengan keinginan sobat deh.
7. Terakhir simpan dan lihat hasilnya
Read more »

Menghilangkan Tanda Obeng Pada Blog

18.28 Ariawan No comments

Sebenarnya menghilangkan tanda obeng pada blog tidak terlalu penting. Karena tanda obeng hanya muncul pada saat si empunya blog sedang mengedit blog. Tapi bagi empunya blog yang risih dengan tampilan obeng, tanda obeng tersebut masih bisa dihilangkan dari pandangan mata. Berikut caranya :
1. Seperti biasa login ke akun blogger anda
2. Klik Rancangan dilanjut dengan klik tab EDIT HTML
3. Cari kode ]]></b:skin>
4. Copy paste kode berikut diatasnya
.quickedit{
display:none;
}

Kalau anda sebelumnya sudah pernah mengedit template anda dengan kode yang lainnya diatas kode ]]></b:skin>, maka tempatkan kode .quickedit{ tersebut diatas kode yang sudah anda masukkan terlebih dahulu.
Read more »

Membuat Efek Bintang Jatuh Dari Kursor Pada Blog

18.27 Ariawan No comments

Masih ingin menghias blog anda dengan berbagai macam efek? Yang satu ini bisa dicoba. Kursor akan menampilkan efek bintang berjatuhan pada saat mouse diseret. Caranya mudah. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik Tambag Gadget
3. Pilih HTML/JavaScript
4. Copy paste kode berikut dan letakkan dimana saja. Agar tidak mengganggu posisi tata letak blog sebaiknya ditempatkan dibawah saja
<script src="https://sites.google.com/site/ajurna1/freeware/bintangcrusor.js"></script>
5. Simpan template

Selesai...

Apabila script diatas tidak bisa digunakan silakan anda mencoba script dibawah dengan berbagai macam warna efek.

<script src="http://imtikhan.googlecode.com/files/red_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/yellow_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/green_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/blue_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/black_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/white_star.js" type="text/javascript"></script>
Read more »

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grocery Coupons