Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.
BlogRool ini gunanya
untuk menghemat tempat pada blog pada saat daftar link kita sudah
banyak dan menyesakkan body template blog. Ada beberapa cara yang saya
tahu untuk membuat blogrool.
Yang pertama seperti ini: Blogroll dengan menu dropdown:
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Blogroll - </option>
<option value="#">Amatullah's Page</option>
<option value="#">Islamic Animation</option>
<option value="#">Free Blogger Templates</option>
<option value="#">Tutorial Blogger</option>
</select>
</form>
Alamat URL dan titelnya tinggal anda sesuaikan sendiri!
Yang kedua: Membuat blogroll dengan perintah marquee :
Contohnya seperti ini:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >
<a href="#" target="_blank">Amatullah's Page</a>
<br/><br/>
<a href="#" target="_blank">Islamic Animation</a>
<br/><br/>
<a href="#" target="_blank">Free Blog Template</a>
<br/><br/>
<a href="#" target="_blank">Tutorial Blogger</a>
<br/><br/>
</marquee>
Maka hasilnya
 |
| Contoh Menu Scrolling Daftar Link |
Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!
Cara membuat related post
Ngeblog offline tanpa terhubung keinternet
Mengganti Read More Dengan Image
Cara membuat Recent Post
Cara buat menu scroll seperti diatas:
Copi code berikut:
<div style="padding-right: 10px;
padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px;
padding-top: 10px; height: 141px" 1px="1px" solid="solid"> <ul>
<p><a href="#
">Cara membuat related post</a> </p>
<p><a href="#">ngeblog offline tanpa terhubung keinternet</a> </p>
<p><a href="#">Mengganti Read More Dengan Image</a> </p>
<p><a href="#">Cara membuat Recent Post</a> </p>
</ul>
</div>
Setelah itu paste pada tempat yang sobat
inginkan di blog sobat , apakah pada postingan, sidebar dll. Untuk
alamat URLnya sobat ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan sobat
harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada
sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan
lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):
- Login ke blogger
- Pada bagian dasbor pilih menu layout/ tata letak
- Klik elemen halaman
- Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
- Pilih tambah HTML/JavaScript
- Beri titel, simpan codenya dalam konten
- Save, lihat hasilnya diblog sobat !
Semoga bermanfaat!
Beberapa waktu lalu, beberapa postingan anaa mendapatkan banyak
komentar
hingga puluhan (belum sampai ratusan nie?) Alhamdulillah apresiasi yang
indah dari rekan-rekan sahabat blogger. Tapi rasanya kurang nyaman juga
melihat sebuah halaman dibuka dan daftar komentarnya panjang sekali,
beberapa kali blogwalking dan melihat disebagian blog sahabat lainnya
ada yang
daftar komentarnya memakai scroll, anaapun tertarik untuk membuat hal serupa itung itung hemat halaman.
Ternyata mudah saja untuk membuat scroll pada daftar komentar, kode yang ditambahkan jg sangat sedikit, nah berikut selengkapnya:
1. Dalam keadaan loggin, klik tata letak (layout)=> Edit HTML=> Cari kode berikut:
/* Comments
-------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
Tambahkan kode berikut di atas kode #comments h4
#comments {
height:280px;
overflow:auto;
}
Save template!
1. Loggin ke blogger=> Klik layout=> Edit HTML=> Klik Expand Template Widget=> Cari kode
<data:post.body/>
Kalau sudah ketemu, copi dan pastekan script/ code berikut dibawah kode tadi
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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('albri').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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
2. Selanjutnya cari kode ]]></b:skin>
3. JIka sudah ketemu copy dan pastekan code berikut diatas code tadi.
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
4. Simpan template
