Membuat 3 Kolom Elemen di Bawah Posting

Footer 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika kamu pengen meletakkan widget anda yang pasti footer ini akan sangat berguna juga,saya juga baru menambahkan footer 3 kolom pada template saya ini, lhatlah keren gak ya ha ha ha.....Footer wraper dari template klasik hanya mempunyai satu widget, begitu pula template - template minima hasil design para master web.

Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :

>>>login ke blog anda
>>>Klik Tata Letak
>>>Edit Html
>>>Cari kode #footer-wrapper atau yang mirip seperti itu, kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini:

---

---

/* ----- FOOTER ----- */

#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

border: 1px solid $bordercolor;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;padding: 0px;border: 1px solid #cccccc;}
#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}
#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}

---

---

>>Kemudian cari kode yang mirip dengan kode diwah ini:

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

>>>setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini:

<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>


<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

</div>
<div style='clear:both;'/>
</div><!-- end footer-wrapper -->

>>>Simpan template
>>>Selesai,Kode di atas untuk membuat footer 3 kolom

NB:agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan, lihat blog saya ini ini juga hasil otakatik aja seperti tutorial ini bagus gak,,he he he...
semoga bermanfaat.

Read more »

Membuat Related Post dengan Scroll

Sobat semua pasti sudah tahu semua tentang "Related Post". Tapi bagi yang belum tahu, related post adalah artikel yang berhubungan atau terkait. Widget ini dibuat agar di blog kita menampilkan artikel-artikel yang masih terkait atau masih berhubungan dengan artikel yang mereka baca. Tapi pada bahasan kali ini, saya tidak akan membahas bagaimana cara membuat "Related Post" yang biasa, tetapi kali ini saya akan berbagi cara membuat related post dengan fungsi scroll. Sobat semua bisa melihat contohnya seperti di setiap postingan blog saya ini.
Kenapa saya tidak membahas cara membuat related post yang biasa, karena kalau dalam satu kategori kita mempunyai banyak sekali artikel, maka kalau tetap menggunakan cara seperti itu akan memenuhi halaman blog kita.

Kalau diantara para Sobat ingin mencobanya, silahkan ikuti langkah-langkah berikut ini :
1. Seperti biasa, Login dulu di akun blogger Sobat
2. Klik "Tata Letak" => "Edit HTML"
3. Centang "Expand Template Widget"
4. Cari kode dibawah ini :

<p><data:post.body/></p>

   atau

<data:post.body/>

 5. Copy kode berikut dan paste di bawah kode no 4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if> 

 Silahkan ganti tulisan yang berwarna merah sesuai dengan keinginan Sobat. Misalnya : "Related Post" atau "Artikel Yang Berhubungan".

Read more »

Menampilkan Widget di Halaman yang Diinginkan

Sebagaimana Kalian ketahui bahwa, widget itu banyak manfaat-nya, mungkin sebagai penghias blog, sebagai layanan instant di blog kita, dan lain sebagainya. kata orang, yang terpenting dari blog adalah postingannya, itu memang betul, tapi alangkah bagusnya jika postingan itu di selingi oleh sebuah widget? mungkin tanpa widget, blog kita terasa hampa. Tapi ada tanggapan bahwa kalo kebanyakan widget akan membuat blog kita berat, itu pernyataan yang benar, tapi sekarang ada solusinya. Yaitu Dengan Menampilkan Widget Di halaman Yang Diinginan. Keuntungannya adalah agar side bar lebih hemat, tidak memberatkan blog dan masih banyak lagi fungsinya. Contohnya sepert: Widget langganan Muncul Di HompePage saja, tp jika membuka artikel, widget itu hilang. Gimana cara mengaturnya? lihat ayat-ayat di bawah ini:


Masuk ke Blog >> tata letak >> Edit HTML

Lalu cari kode ini:

<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "index"'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:if>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

ket:-kata yang berwarna merah adalah widget yang ada di blog kalian
-kata yang berwarna biru adalah kode yang harus ditambahkan(halaman depan saja)

Adapun kode kode yang lain:

Untuk halaman depan saja(seperti contoh diatas)

<b:if cond='data:blog.pageType == "index"'>

untuk di halaman artikel saja:

<b:if cond='data:blog.pageType == "item"'>

untuk dihalaman archive saja:

<b:if cond='data:blog.pageType == "archive"'>

Untuk di halaman tertentu:

<b:if cond="[URL halaman anda]" == data:blog.url'>

Begitu aja hal-hal yang bisa saya sampaikan, semoga berhasil. Jika masih bingung, silahkan berkomentar di bawah ini

Read more »

Compress CSS Untuk Mempercepat Loading Blog

Wah padahal saya sedang pusing ketika menulis posting ini, dengan penuh penuh perjuangan melawan kepala saya yang hampir meledak ini saya akhirnya selesai juga postingan ini. Yah, artikel hari ini Insya Allah, sangat di butuhkan oleh beberapa kawan-kawan blogger semua. Amiinnnn.....

Lha kenapa kok sangat di butuhkan? iya, karena kebanyakan blogger sangat senang yang namanya memperhias blog, sehingga membuat blog kita menjadi berat. Betul tidak???

Oke Kita mulai saja ya????

Ada banyak cara agar blog kita tidak berat. Tapi ada 1 cara yang menurut saya paling ampuh.

1. Kompress Kode CSS anda

tips ini saya rasa sebagai tips yang sangat manjur, apalagi jika anda banyak menggunakan CSS, pasti blog anda langsung cepat secepat valentino rossi. hehehehe...

Lha gimana cara kompressnya???

• Login ke blogger
• Masuk ke Tata letak
• Masuk ke Edit HTML
• centang kotak Expand Template Widget
• Jangan lupa back up dulu template anda
  
• Copy semua kode setelah kode <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin> ke dalam notepad
• Masuk ke alamat: http://www.csscompressor.com/
• Dan letakan Kode yang kamu copy tadi di kotak yang telah disediakan
• Klik Compress
• Lalu setelah menunggu, kode yang sudah di kompress tadi keluar
• Masukan Kode Yang sudah kompress tadi, setelah kode <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin>
• Simpan Template anda, dan ukur kecepatan blog anda di sini: http://www.iwebtool.com/speed_test

Read more »

Membuat Back to Top dengan jQuery

Wah, aku kembali lagi nih. kali ini aku kembali dengan blog tutorial yang sudah lama tidak aku tampilkan.

Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.

1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$(&#39;a[href*=#top]&#39;).click(function() {
if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
if ($target.length) {
var targetOffset = $target.offset().top;
$(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>

5. Kemudian Ganti kode <body> dengan kode <body id='top'>

6. letakan kode di bawah ini, di atas kode </body>

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLNl-ZggJE5CMyNmW6Z_4e4ZXzhYboTRFBkkBILUDoOMAts6qRxpHqZoIdjMHgPP1_lLLB-EOy1CpVoMDgcJbTrK0R48v1WEXRouOmpvT3wTcnvV0RKxRp1AgPuQXbuMrHAN73e-QZmq0/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

7. Selesai, dan silahkan menikmati back to top jquery

Read more »