Gudang Ilmu

Anda tahu share pack? Share pack adalah sebuah widget yang digunakan untuk memudahkan pengunjung membagi artikel anda ke jejaring sosial, seperti Facebook, Twitter, Technorati, dll. Nah, yang kita bahas bukan share pack di blog ini. Tapi di blog http://siapayangpantas.blogspot.com. Buka salah satu postingan, dan lihat pada bagian akhir postingan. Ada share pack disitu. Nah, tampilannya kira-kira seperti dibawah ini.

Bagaimana? Menarik? Okelah kalo begitu, kita mulai!

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Centang checkbox Expand Template Widget.

4. Cari kode:

]]></b:skin>

5. Copy kode berikut diatasnya.

.share, img.share{
border: 5px outset;
border-color:#FFFFFF #000000 #000000 #FFFFFF;}
.share:hover, a:hover .share{
border: 5px inset;
border-color: #585858 #A4A4A4 #A4A4A4 #585858;
}

6. Cari kode:

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

7. Taruh kode ini dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<b>Share this post to other.</b><br/><br/>
<div align='center'>
<a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to Facebook'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINLRT_CwD5aESmW9G641cAtkv6EZ-uIPDKIqRDO0bRAYcfWINzQsaHqOBO_mgH07_SiZXDJM6K1Fm-ouguKKlEfjsKxC-LzCDX0Ow-qiKyzuL809Tk6JBoU0cboBx69w1C3mHMoPrwBI/s320/facebook.png'/></a>
<a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to Twitter'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixf17PtvwJg6qGRur8TSwgDb4K0nYi1Jm7n5osqORpGyuhNMq1GiQuv7k4CM5Vp2S6iOH69ovgQuZySZEUScfXtLf8ztqoDbqOHbGD_luMlt_em4Uj-YpDcbd4KJ3EST_YLCNL3QqBkTY/s320/twitter.png'/></a>
<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to Digg'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd0iuG8OoOliyweTUC-YV9D4DJA9UIPC76wGuFI5SexpIbHylLC9QHdLGzYRQFZbYSGxI3lpYNVjhnkELASUSen1-RciVmt4u0N7C5bS_EJlWPAKMO3znQXBWatxIZWX_cOaaAvqeTAh0/s320/digg.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to Del.icio.us'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpJw3OUmfMthABMD4kXA70C_YKjLFEVtO49C5wvtJMMTvg5xAPMl4TKV8Yobvzf4U6lGdFfKN94PzDl6GGBu4hwNzpqj9yBKyZuh3o0DGVGW64kVPj-V5pSGdAuRPExCfgLFwePOqinE/s320/delicious.png'/></a>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to StumbleUpon'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bvxipfALg5ghQbLZNisTcxtngxRjX3Ei-BRfuG3EkWUIOgZRAqascz37yJAZjt_crRVxiX0EW1DZq3hVgUf4_r7IH7kbnD09y3iZgJ_I1DBJWrCserkBf_JXmV0pGWQuopG8-uZgC9k/s320/stumbleupon.png'/></a>
<a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share to Technorati'><img class='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcoxkgzIiM05ZkxrNLcBs2YS_oUGROnqB30eOmHYK2LCv3ugVLwwSrwqsAc2-5Ko9Z8KumrSn0NUGFM2_-AS-A13ZPmKB1FyoUasjhglBI_-jxULR-v02zCjKbYlYJkYgy3Ve177WCe8/s320/technorati.png'/></a>
</div>
</b:if>

8. Simpan.

9. Lihat blog anda.

Semoga berhasil!

Note:
Ikon-ikon yang saya pakai saya comot dari http://jwloh.deviantart.com. Apabila anda mempunyai koleksi icon lainnya, silakan ganti alamat yang berwarna hijau untuk ikon Facebook, biru muda untuk ikon Twitter, merah untuk ikon Digg, biru tua untuk ikon Delicious, kuning untuk ikon Stumbleupon, dan jingga untuk ikon Technorati dengan alamat ikon masing-masing.
KLIK DISINI UNTUK BACA SELENGKAPNYA

Coba anda scroll ke bawah di blog ini. Akan tampil artikel terkait yang bisa menarik pengunjung anda untuk melihat-lihat postingan lainnya dan akan membuat pengunjung betah di blog anda. Tertarik?

Sebelumnya anda harus login terlebih dahulu ke Blogger, lalu tujulah menu Tata Letak > Edit HTML. Nah, lalu backup template anda dan klik checkbox Expand Template Widget. Nah, lalu lakukan langkah-langkah berikut.

1. Taruh kode berikut diatas kode ]]></b:skin>.

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;
font-size:small;
color:#0080FF;
background:#81BEF7;
clear:both;
float:left;
width:410px;
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:large;
color:#0080FF;
margin-bottom:5px;
border-bottom:1px solid #0080FF;
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:400px;
padding:10px;
}

2. Cari:

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

3. Taruh kode berikut dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='underpost'>
<div class='similiar'>

<div class='widget-content'>
<h2>Artikel Menarik Lainnya</h2>
<div id='artikel-terkait'>
<div id='relposts'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

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

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('relposts').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";

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

</div>
</div>
</b:if>