i-Habibi

Tuesday, 27 December 2011

Tutorial Bikin Footer Footer Bar + Random Post Berjalan

Kali ini saya akan menuliskan tutorial blog yaitu Tutorial Bikin Footer Footer Bar yang sudah saya sisipkan script Random Post Berjalan serta forum berlangganan dari feedburner.

Tutorial kali ini sengaja saya tuliskan karena ada salah satu pengunjung yang meminta kepada saya agar saya menuliskan tutorial membuat footer bar Baca Juga (maksudnya seperti yang ada di footer blog ini).

Bagi teman-teman yang belum tau apa yang saya maksud footer bar di sini, silakan lihat gambar berikut


Footer Footer Bar + script Random Post Berjalan + forum berlangganan dari feedburner

Nah itulah yang saya maksud Tutorial Bikin Footer Footer Bar yang sudah saya sisipkan script Random Post Berjalan serta forum berlangganan dari feedburner.

Next ...

Tutorial Bikin Footer Footer Bar + Script Random Post Berjalan serta forum berlangganan dari feedburner

Pertama silakan login ke Dasbor blogger, kemudian klik Rancangan / Design

Cara Membuat Read More Di Posting Blogger

Setelah itu klik menu Edit HTML

Untuk memasang kode footer bar ini silakan pilih salah satu cara berikut yang menurut teman lebih mudah.

(Cara 1 pasang kode Footer Bar + Script Random Post Berjalan + Forum Berlangganan)

Cari kode </body> dan letakkan semua kode berikut ini tepat di atasnya (Agar lebih cepat menemukan kode tersebut silakan baca Cara Mudah + Cepat Mencari Kode Html di Blogger)

<style type='text/css'>
/* --------------------------------------- */
/* Bottom Bar */
/* --------------------------------------- */
#bot-bar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#bot-bar .right {
width:34%;
float: right;
padding-right:20px;
line-height: 1.5;
font-size:12px;
height: 100%;
text-align:right;
}
#bot-bar .left {
width:60%;
float: left;
margin: 0px;
padding-top:4px;
padding-left:5px;
line-height: 1.2;
vertical-align: bottom;
}
#bot-bar a {
color:#666;
text-decoration:none;
}
#bot-bar a:hover{
color: #fff;
cursor:hand;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6E-6VHnIAwj3xXjMfqsRS0o754PZ1cg4exLcerv8iqYsGMs83c0NEwLcMqrkPP0eyuDO0656idO-gahoUK8fnn-4efJ_lv2yT4YYZXxEcTjU5i6-xLQ8tlZD6LcEo9Fh4D-Ls-DGacU/s1600/linkwarnawarni.jpg);
}
#bot-bar {
padding:5px 0 5px 0;
align: center;
position: fixed;
background: #000;
width: 100%;
left: 0px;
text-align: left;
color: #666;
font-size:12px;
z-index:10000;
bottom:0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
</style>
<div id='bot-bar'>
<div class='left'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td width='13%'>Baca Juga:</td>
    <td width='87%'>
&lt;script type=&quot;text/javascript&quot;&gt;
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i &lt;   numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j   in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&amp;&amp;l!=0){randarray[i++]=l;}}document.write(&#39;&lt;marquee onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot; scrollamount=&quot;4&quot;&gt;&#39;);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k &lt; entry.link.length;   k++){if(entry.link[k].rel==&#39;alternate&#39;){var item =&quot;(&lt;a href=&quot; + entry.link[k].href + &quot;&gt;&quot; + entry.title.$t + &quot;&lt;/a&gt;)&quot;;
document.write(item);}}
}document.write(&#39;&lt;/marquee&gt;&#39;);}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;
callback=randomposts&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    </td>
  </tr>
</table>
</div>
<div class='right'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td>Langganan </td>
    <td> &lt;form id=&quot;subscribe&quot; action=&quot;http://feedburner.google.com/fb/a/mailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Blog-AhmadRifai-Net&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;subbox&quot; onfocus=&quot;if (this.value == &#39;Masukan Email anda...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Masukan Email anda...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Masukan Email anda...&#39;;}&quot; type=&quot;text&quot;&gt;&lt;input value=&quot;Blog-AhmadRifai-Net&quot; name=&quot;uri&quot; type=&quot;hidden&quot;&gt;&lt;input  value=&quot;en_US&quot; name=&quot;loc&quot; type=&quot;hidden&quot;&gt;&lt;input id=&quot;subbutton&quot; value=&quot;Langganan&quot; type=&quot;submit&quot;&gt;&lt;/form&gt; </td>
    <td> <a href='http://blog.ahmadrifai.net/2011/12/tutorial-bikin-footer-footer-bar-random.html'>Get It</a></td>
  </tr>
</table>
</div>
</div>

(Cara pasang kode Footer Bar + Script Random Post Berjalan + Forum Berlangganan)

Cari kode ]]></b:skin> dan letakkan semua kode berikut ini tepat di atasnya

/* --------------------------------------- */
/* Bottom Bar */
/* --------------------------------------- */
#bot-bar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#bot-bar .right {
width:34%;
float: right;
padding-right:20px;
line-height: 1.5;
font-size:12px;
height: 100%;
text-align:right;
}
#bot-bar .left {
width:60%;
float: left;
margin: 0px;
padding-top:4px;
padding-left:5px;
line-height: 1.2;
vertical-align: bottom;
}
#bot-bar a {
color:#666;
text-decoration:none;
}
#bot-bar a:hover{
color: #fff;
cursor:hand;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6E-6VHnIAwj3xXjMfqsRS0o754PZ1cg4exLcerv8iqYsGMs83c0NEwLcMqrkPP0eyuDO0656idO-gahoUK8fnn-4efJ_lv2yT4YYZXxEcTjU5i6-xLQ8tlZD6LcEo9Fh4D-Ls-DGacU/s1600/linkwarnawarni.jpg);
}
#bot-bar {
padding:5px 0 5px 0;
align: center;
position: fixed;
background: #000;
width: 100%;
left: 0px;
text-align: left;
color: #666;
font-size:12px;
z-index:10000;
bottom:0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

Dan cari kode </body> kemudian letakkan semua kode berikut ini tepat di atasnya

<div id='bot-bar'>
<div class='left'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td width='13%'>Baca Juga:</td>
    <td width='87%'>
&lt;script type=&quot;text/javascript&quot;&gt;
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i &lt;    numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j    in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&amp;&amp;l!=0){randarray[i++]=l;}}document.write(&#39;&lt;marquee  onmouseover=&quot;this.stop()&quot;  onmouseout=&quot;this.start()&quot;  scrollamount=&quot;4&quot;&gt;&#39;);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k &lt; entry.link.length;    k++){if(entry.link[k].rel==&#39;alternate&#39;){var item  =&quot;(&lt;a href=&quot; + entry.link[k].href +  &quot;&gt;&quot; + entry.title.$t +  &quot;&lt;/a&gt;)&quot;;
document.write(item);}}
}document.write(&#39;&lt;/marquee&gt;&#39;);}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;
callback=randomposts&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    </td>
  </tr>
</table>
</div>
<div class='right'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td>Langganan </td>
    <td> &lt;form id=&quot;subscribe&quot;  action=&quot;http://feedburner.google.com/fb/a/mailverify&quot;  target=&quot;popupwindow&quot; method=&quot;post&quot;  onsubmit=&quot;window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Blog-AhmadRifai-Net&#39;,  &#39;popupwindow&#39;,  &#39;scrollbars=yes,width=550,height=520&#39;);return  true&quot;&gt;&lt;input id=&quot;subbox&quot;  onfocus=&quot;if (this.value == &#39;Masukan Email  anda...&#39;) {this.value = &#39;&#39;;}&quot;  value=&quot;Masukan Email anda...&quot;  name=&quot;email&quot; onblur=&quot;if (this.value ==  &#39;&#39;) {this.value = &#39;Masukan Email  anda...&#39;;}&quot;  type=&quot;text&quot;&gt;&lt;input value=&quot;Blog-AhmadRifai-Net&quot;  name=&quot;uri&quot;  type=&quot;hidden&quot;&gt;&lt;input   value=&quot;en_US&quot; name=&quot;loc&quot;  type=&quot;hidden&quot;&gt;&lt;input  id=&quot;subbutton&quot; value=&quot;Langganan&quot;  type=&quot;submit&quot;&gt;&lt;/form&gt; </td>
    <td> <a href='http://blog.ahmadrifai.net/2011/12/tutorial-bikin-footer-footer-bar-random.html'>Get It</a></td>
  </tr>
</table>
</div>
</div>

Keterangan :
Silakan ganti tulisan Blog-AhmadRifai-Net (yang ada di line 78 [kode 1] dan line 28 [kode 2] dengan Id FeedBurner teman

Cara mengetahui Id FeedBurner yaitu dengan melihat url lengkap FeedBurner teman, contohnya url FeedBurner saya http://feeds.feedburner.com/Blog-AhmadRifai-Net nah yang di belakang itulah yang saya maksud Id FeedBurner (Blog-AhmadRifai-Net)

Nah itu lah tutorial cara membuat footer bar + random post + forum berlangganan.

Selamat mencoba dan semoga berhasil

Update 17 Januari 2012

Karena tidak semua template bisa menggunakan cara di atas akhirnya saya mencoba untuk mencarikan solusi agar foterbar + random post bisa di pasang.

Caranya penggunaan script ini hampir sama dengan cara di atas, cuma bedanya script ini tidak dipasang di bagian Edit Html, tapi ditambahkan pada widget

Klik tambah Widget / Gadget, kemudian pilih widget Html/JavaScript

Setelah itu masukkan kode berikut :

<style type='text/css'>
/* --------------------------------------- */
/* Bottom Bar */
/* --------------------------------------- */
#bot-bar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#bot-bar .right {
width:34%;
float: right;
padding-right:20px;
line-height: 1.5;
font-size:12px;
height: 100%;
text-align:right;
}
#bot-bar .left {
width:60%;
float: left;
margin: 0px;
padding-top:4px;
padding-left:5px;
line-height: 1.2;
vertical-align: bottom;
}
#bot-bar a {
color:#666;
text-decoration:none;
}
#bot-bar a:hover{
color: #fff;
cursor:hand;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6E-6VHnIAwj3xXjMfqsRS0o754PZ1cg4exLcerv8iqYsGMs83c0NEwLcMqrkPP0eyuDO0656idO-gahoUK8fnn-4efJ_lv2yT4YYZXxEcTjU5i6-xLQ8tlZD6LcEo9Fh4D-Ls-DGacU/s1600/linkwarnawarni.jpg);
}
#bot-bar {
padding:5px 0 5px 0;
align: center;
position: fixed;
background: #000;
width: 100%;
left: 0px;
text-align: left;
color: #666;
font-size:12px;
z-index:10000;
bottom:0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#subbox{background:#fff;width:150px;color:#000;font-size:12px;font-family: Arial, Tahoma, Verdana;font-weight: normal;margin: 0;padding: 2px;border-top:1px solid #666;border-right:1px solid #ddd;border-left:1px solid #666;border-bottom:1px solid #ddd;display: inline;    -moz-border-radius:3px;-webkit-border-radius:3px;}
#subbutton{background: #ddd;color:#111;width:70px;font-size: 11px;font-family: Arial, Tahoma, Verdana;margin:0 0 0 5px;padding:2px;border: 1px solid #ccc;font-weight: bold;-moz-border-radius:3px;-webkit-border-radius:3px;color:#111;}
#subbutton:hover{background: #000;color:#fff;border: 1px solid #333;}
</style>
<div id='bot-bar'>
<div class='left'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
    <td width='13%'>Baca Juga:</td>
    <td width='87%'>

<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=Isi Dengan Alamat Blog Kamu
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>

    </td>
</tr>
</table>
</div>
<div class='right'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
    <td>Langganan </td>
    <td>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Isi Dengan Id FeedBurner Kamu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input id="subbox" onfocus="if (this.value == 'Masukan Email anda...') {this.value = '';}" value="Masukan Email anda..." name="email" onblur="if (this.value == '') {this.value = 'Masukan Email anda...';}" type="text" /><input value="Isi Dengan Id FeedBurner Kamu" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input id="subbutton" value="Langganan" type="submit" /></form>
    </td>
    <td> <a href='http://blog.ahmadrifai.net/2011/12/tutorial-bikin-footer-footer-bar-random.html'>Get It</a></td>
</tr>
</table>
</div>
</div>

Note :
Ganti tulisan Isi Dengan Alamat Blog Kamu dengan alamat blog kamu (jangan lupa pakai http:// ya)
Ganti tulisan Isi Dengan Id FeedBurner Kamu dengan id feed burner kamu.

Wednesday, 21 December 2011

cara buat link di postingan biar bisa di-klik

Trick blogart 18:24

Link yaitu mengetik link URL yang dituju dibumbui dengan kode sedikit, lalu diberi judul, terakhir diberi tutup kode. Ini merupakan kode HTML sederhana dan wajib dikuasai oleh setiap blogger. ;-)

Kode yang digunakan sangat sederhana kok, coba perhatikan kode berikut:

<a href="http://ibnuhabibi.blogspot.com/" title="i-Habibi">i-Habibi</a>

Untuk link yang pertama, nanti yang bisa dilihat adalah tulisan “i-Habibi“, yang kedua adalah “i-Habibi” (tanpa tanda petik). Intinya link tulisan yang akan muncul adalah yang di depan kode </a>. Jangan lupa juga untuk meletakkan tanda petik dengan benar.

Perlu diingat, penulisan kode HTML tersebut wajib ditulis pada postingan blog mode HTML, bukan mode Composel!!

Saturday, 17 December 2011

Bikin Link Hover Berpijar Di Bawahnya

blogger tutorial blogart 12:09

Kali ini saya akan menuliskan tutorial bagaimana cara membuat link berkedip-kedip dibawahnya menggunakan CSS buka pakai JavaScript

Maksud saya link di sini adalah tulisan yang tertanam link di dalamnya, sehingga ketika corsur diarahkan ke tulisan yang ada linknya tadi maka tulisan tersebut akan berpijar-pijar / berkelip-kelip dibawahnya.

Demo Link Berpijar / Berkelap-kelip yang saya maksud

Blogger Tutorial

Ok Ga Perlu Panjang Lebar ....
Bikin Link Hover Berpijar Berkelip-kelip Di Bawahnya
Langkah-langkah yang harus di lakukan:

Login ke dashboard blogger
Klik menu Rancangan / Design
Klik lagi menu Edit HTML

Jika sudah berda di Rancangan => Edit HTML silakan cari kode yang mirip seperti ini:

a:hover{
color:......;
text-decoration:.....;
}

Jika sudah menemukan kode seperti itu, silakan tambahkan sedikit kode berikut sebelum kode }

cursor:hand;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6E-6VHnIAwj3xXjMfqsRS0o754PZ1cg4exLcerv8iqYsGMs83c0NEwLcMqrkPP0eyuDO0656idO-gahoUK8fnn-4efJ_lv2yT4YYZXxEcTjU5i6-xLQ8tlZD6LcEo9Fh4D-Ls-DGacU/s1600/linkwarnawarni.jpg);

Sehingga jadi seperti ini:

a:hover{
color:......;
text-decoration:.....;
cursor:hand;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6E-6VHnIAwj3xXjMfqsRS0o754PZ1cg4exLcerv8iqYsGMs83c0NEwLcMqrkPP0eyuDO0656idO-gahoUK8fnn-4efJ_lv2yT4YYZXxEcTjU5i6-xLQ8tlZD6LcEo9Fh4D-Ls-DGacU/s1600/linkwarnawarni.jpg);
}

Silakan simpan perubahan dan cek blog teman apakah linknya sudah berpijar.

Catatan :

Saran saya sebaiknya gunakan cara ini juga warna latar blog / artikel teman berwarna gelap, seperti hitam. Jika menggunakan warna terang seperti putih kayak nya kurang bagus.

Selesai Tutorial Cara Membuat Link Hover Berkedip Warna Warni / berpijar-pijar.

Selamat mencoba dan semoga bermanfaat

i-Habibi

Tuesday, 27 December 2011

Recent Post by Label Tanpa Thumbnail & Script

Friday, 23 December 2011

Tutorial Bikin Footer Footer Bar + Random Post Berjalan

Wednesday, 21 December 2011

cara buat link di postingan biar bisa di-klik

Saturday, 17 December 2011

Bikin Link Hover Berpijar Di Bawahnya

Get updates in your email box

Recent Posts

Elegant Themes

Labels

Category

Blog Archive

Blogroll

Blogger Touch

Affiliates

first

infinity ads

Followers

Services

More Category

Labels