0 Cara Membuat Widget Rata Tengah Scroll Box

Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.

Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<script widget 1><br />
<script widget 2><br />
<script widget 3><br />
<script widget 4><br />
<script widget 5><br />
</center>

</div>

• Ganti script widget dengan script widget yang akan dipasang.
• width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
• height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.

Sebagai contoh:
Misalnya, saya mempunyai beberapa script widget yang akan dipasang di scroll box, yaitu:

• <a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a>

• <a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a>

• <a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a>

• <noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

• <a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>

• <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

• <a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a>

• <a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<center> 

<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a><br/>

<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a><br/>

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><br/>

<noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript><br/>

<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><br/>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a><br/>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a><br/>

<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a><br/>

<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a><br/>

</center>

</div>

Bila diletakkan di sidebar, maka hasilnya akan tampak seperti di bawah ini.
  

Untuk memasang scroll box di sidebar, berikut ini langkah-langkahnya:

• Masuk ke akun Blogger
• Klik Rancangan > Elemen Laman > Tambah Gadget.
• Kemudian pilih HTML/JavaScript.
• Berikan judul dan isi kolom Konten dengan script scroll box.
• Klik tombol SIMPAN.
• Atur posisi widget ke tempat yang diinginkan.
• Klik tombol SIMPAN. 

Okelah demikian cara-cara tersebut yang saya tahu.. selamat mencoba dan semoga berhasil :) 

Sumber

0 Cara membuat read more bergambar otomatis di blog

Hai sobat blogger ! lama nih gak update postingan, habis try out sih, jadi super sibuk bulan ini, tapi saya sempatkan update artikel dulu deh, okelah kenapa jadi curhat ya? oke, kali ini rizaldi priantama akan membahas tentang cara membuat read more otomatis di blog, mungkin cara ini sudah diterapkan pada template-template sobat , namun jika template dasarnya adalah dari blogger sendiri, mungkin sobat hanya bisa menambahkan secara manual, jika ingin menambahkannya secara otomatis, yuk kita bahas bersama disini :

1.) Baca Basmallah
2.) Login ke akun blogger sobat
3.) Masuk ke Rancangan > Edit Html
4.) Backup dulu template sobat, klik download template lengkap
5.) Centang tanda Expand Widget Template
6.) Tekan Ctrl + F, lalu cari kode </head>
7.) Setelah ketemu, masukkan kode dibawah ini tepat dibawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 110; img_thumb_width = 130; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

8.) Jika sudah selesai dengan langkah 7, cari lagi kode <data:post.body/> 

9.) Jika menemukan 2, pilih yang pertama saja

10.) Lalu ganti kode <data:post.body/>  dengan kode dibawah ini 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt="Baca Selengkapnya" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-vrQcxcfyrmUvYGHmIwEInLvTuG3SF90dGG1D7OvJ4dRmC6AQQN0TG_v7HxqChFSovc8I01o8zCLKCYgeY4fWBuP8GD6naSAqE9yfqdKfhOzFWVX80MCHnBfP4oGdOYDb32BG1eSSKI/s1600/ReadMore.jpg"/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

11.) Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-vrQcxcfyrmUvYGHmIwEInLvTuG3SF90dGG1D7OvJ4dRmC6AQQN0TG_v7HxqChFSovc8I01o8zCLKCYgeY4fWBuP8GD6naSAqE9yfqdKfhOzFWVX80MCHnBfP4oGdOYDb32BG1eSSKI/s1600/ReadMore.jpg dengan url gambar read more sesuai selera sobat

12.) Simpan Template dan lihat hasilnya

Jika sobat memiliki pertanyaan seputar artikel diatas, silahkan berkomentar/posting di Forum saya

SEKIAN
Semoga Berhasil dan Bermanfaat
Post by : Rizaldi Priantama

0 Cara Membuat Top Menu di atas Header

Salam blogger mania sobat..udah lama nieh saya  gak menyapa semua..kemaren sibuk di dunia nyata jadinya gak sempet posting dech..hehe tapi untuk menjaga trafic blogger harus terus posting kan..hehe baiklah kali ini saya ingin share ke jurig jarian mania semua tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa di blog ini tepatnya di atas header. Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech capcus.

• 1. Login di blogger dengan ID blog sobat

• 2. Klik menu Layout

• 3. Klik Tab Edit HTML

Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

• 4. Centang Expand Template Widget agar code dapat terlihat semua

• 5. Masukan code berikut

Tepat dibawah code <b:skin><![CDATA[

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

6. Lalu sobat  cari code <body> gunakan ctrl + F untuk memudahkan pencarian.

7. Lalu sobat copas code berikut tepat dibawah code <body>

 <div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.ganti dengan link sobat/'>Home</a></li>
<blink><li><a href='http://www.ganti dengan link sobat' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.ganti dengan link sobat' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Request Lagu'>Request Lagu</a></li>      
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Yang perlu diperhatikan kata berwarna hijau silahkan sobat ganti sesuai keinginan sobat bloger

Semoga bermanfaat 

0 Cara Membuat Recent Post Berjalan Pada Blog

Cara Membuat Recent Post Berjalan - Kali ini saya akan membahas Tutorial Blog dan Tips Blog yaitu Cara Membuat Recent Post Berjalan sebelumnya saya pernah bahas tentang cara membuat recent post dengan Thumbnail atau gambar, nah sekarang beri sedikit efek, yaitu efek berjalan dari atas ke bawah, jadi berjalan gitu recent post nya, owh iya bagi yang tidak tahu apa itu recent post saya akan jelaskan Recent Post adalah Artikel Terbaru jika kita memasang widget Recent Post maka artikel terbaru kita akan ditampilkan di sidebar blog, jadi fungsinya memudahkan pengunjung melihat artikel terbaru Blog kamu, sehingga akan menambah minat membaca pengunjung. Ok langsung saja cara membuat Recent Post Berjalan.

• Login ke Blog kamu.
• Pilih Add Gadget HTML Java Script.
• Copy kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://putrakumbara-rzj.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Keterangan :
Ganti URL yang berwarna merah dengan Alamat Blog kamu.
numposts adalah jumlah recent post yang akan ditapilkan.

Sekian penjelasan dari saya, jika ada hal yang kurang paham silahkan tinggalkan pesan di kotak komentar.

0 Cara Membuat Artikel Terkait Di Bawah Postingan Blog

Kali ini saya akan membuat artikel mengenai " Cara Membuat Artikel Terkait Di Bawah Postingan Blog "
Silahkan liat juga postingan artikel saya sebelumnya yang berjudul:
" Tiga Award Yang Diberikan Sahabat Blogger Kepada Wizyuloverz "

Langsung saja tanpa basa basi, Kali ini saya akan membuat artikel dengan judul :

" Cara Membuat Artikel Terkait Di Bawah Postingan Blog "

Beberapa Hari lalu salah satu sahabat Wizyuloverz yang bertanya bagaimana cara membuat artikel terkait di bawah postingan Blog, nah oleh sebab itu kali ini saya membuat artikel mengenai Cara Membuat Artikel Terkain Di Bawah Postingan Blog, dengan adanya artikel terkait lainnya memiliki keuntungan bagi blog yang kita miliki karena memudahkan pengunjung melihat postingan lainnya yang kita miliki terkait dengan apa yang telah pengunjung lihat itu, berikut cara membuatnya.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog anda.

2. Pilih menu Rancangan dan Pilih Edit/HTML
3. Setelah Itu Centang Expand Widget 
4. Untuk menghindari terjadinya kesalahan silahkan Download Lengkap Template 

5. Kemudian cari kode <data: post.body> gunakan Ctrl+f

6. Copy kode dibawah ini dan simpan dibawah kode <data: post.body>

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>
<span class=’box’>
<div class=’widget-content’>

<h3>Artikel Terkait</h3>
<div id=’data2007′/><br/><br/>

<script type=’text/javascript’>

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

maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;

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>
</span></div>

</b:if>

7. Simpan Template Dan lihat Hasilnya

Keterangan : 

• Silahkan Ganti Tulisan Bercetak warna Kuning Dengan Kata-kata yang sahabat inginkan,
• Biasanya kode <data: post.body> ada dua didalam template Blog, silahkan pilih kode yang ke dua atau yang paling bawah.
  

0 Cara memberi garis atau border pada pinggir sidebar blog

Walau sedikit kecewa dengan visitor blog ku hari ini dari google, ini tidak menyurutkan semangat ku untuk update artikel baru. mungkin itu adalah pemulaan untuk sebuah kesuksesan. ibarat pepatah mengatakan gagal itu adalah permulaan dari kesuksesan. intinya tidak ada kata sukses jika tidak ada kegagalan. dan kita tidak pernah merasakan nikmatnya sukses jikalau tidak pernah meraskan kekalahan.

Nah biar Panduan sukses blogger ada update terbarunya. saya akan membahas tutor yang ringan-ringan saja. biar panduan sukses blogger bisa bangkit lagi dari keterpurukannya. nah bagi anda yang sudah mengerti membuat garis pada sidebar blog selamat saja. jika belum berikut ini cara membuat nya.

• Login ke blogger
• Klik Rancangan
• Edit HTML
• Cari kode .sidebar .widget {
• Kemudian tambahkan kode di bawah ini pada kode tersebut, lebih kurang seperti ini
  .sidebar .widget {
  border: 1px solid #eee;
  .......
  }
• Ganti #eee warna border tersebut dengan kode warna lainnya.
• Jika anda menginginkan garis tersebut cuma di kiri sidibar blog saja anda bisi mengganti nya dengan
  .sidebar .widget {
  border-left: 1px solid #eee;
  ........
  }
• Perhatikan tulisan berwarna biru anda bisa menggantinya dengan rihgt untuk kanan top untuk atas botom untuk bawah
• Kemudian simpan tamplate
• Lihat hasilnya

Semoga artikel ini bermanfaat untuk kita semua. dan jangan lupa kembali lagi untuk membaca update artikel terbaru ku setiap harinya. dan salam sukses....

0 Cara Menambahkan Fungsi Scroll pada Widget Follower atau Pengikut Blog

Bagi sobat yang kebingungan untuk menambahkan Fungsi Scroll pada Widget Follower atau Pengikut Blog sobat bisa baca tutorial ini sampai tuntas. Contoh nya bisa sobat lihat pada gambar di bawah ini.

Trus bagaimana Cara Menambahkan  Fungsi Scroll pada Widget Follower atau Pengikut Blog?

Caranya sangat mudah kok, pasti sobat blogger sudah pada mengerti, nah buat sobat yang belum tau dan ingin tau silahkan ikuti langkah-langkah nya dibawah ini:

1  Login terlebih dahulu dengan menggunakan account Blogger sobat.

2. Klik tab Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template, fungsinya untuk menghindari hal-hal tidak di inginkan.

4. Kemudian cari kode ]]></b:skin> , Gunakan tombol Ctrl + F untuk memudahkan pencarian.

5. Biasanya kode id untuk Widget Pengikut atau Follower seperti di bawah ini.

<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>

Maka untuk menambahkan scroll pada Widget Follower atau Pengikut silakan Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#Followers1 .widget-content{
height:100px;
width:auto;
overflow:auto;
}

Nb: 100px merupakan tinggi scroll, silakan diatur tingginya jangan sampai melebihi tinggi Widget Follower aslinya agar terbentuk penggulung atau scroll.

7. Dan yang terakhir Klik tombol SIMPAN TEMPLATE. selesai.

Mudah bukan cara membuat nya....

tutorial ini saya dapet dari blog teman saya Munadi. bagi yang masih memiliki kesulitan dalam menambahkan scroll pada Widget Follower atau Pengikut Blog silahkan mengunjungi blog tersebut. atau sobat bisa bertanya langsung pada kolom komentar dibawah posting ini..

Semoga tutorial ini bermanfaat....

0 Cara Membuat Tombol Suka | Like Facebook dibawah Judul Posting

Cara Membuat Tombol Suka | Like Facebook dibawah Judul Posting. Widget ini sangat disarankan sekali karena bisa menambah trafik atau jumlah pengunjung ke blog anda. Pembuatannya sangat mudah sekali dan hampir semua template bisa diterapkan widget ini. Contohnya bisa anda lihat dibawah judul posting ini. Oke langung aja ke Caranya:

1. Login ke Akun blogger anda
2. Klik Rancangan
3. klik Edit HTML, jangan lupa centang pada Expand Widget
4. Cari kode <div class='post-header-line-1'/> (gunakan CTRL+F)
5. Copy kode dibawah ini:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

     6.  Lalu pastekan dibawah kode <div class='post-header-line-1'/>
     7.  kemudian klik Simpan Template
          lihat hasilnya.

Demikian semoga bermanfaat dan selamat mencoba.

0 Cara Membuat Tombol Like Facebook Dibawah Judul Posting Blog

Blazer Blog, Tutorial Blog - Kali ini saya akan membahas bagaimana cara membuat tombol like facebook dibawah judul posting blog, bagi kamu yang ingin membuat tombol like ini, kesempatan bagus apalagi diletakannya dibawah judul posting. Disni tombol like facebooknya ada tiga model, jadi pilih salah satu saja

Dengan memasang tombol like facebook kamu akan mengetahui seberapa bagus artikel anda disukai oleh pengunjung blog anda.

Berikut cara membuat nya :

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML.
4. Cari kode <data:post.body/>
5. Setelah ketemu pilih salah satu kode dari tiga kode yang akan saya berikan, dan letakan diatas kode nomor 4.

1. Kode Pertama, Tombol Like Vertikal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2. Kode Kedua, Tombol Like Horizontal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Kode Ketiga, Tombol Like Tanpa Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

Letakan salah satu kode diatas, tepat diatas kode nomor 4 tadi.
Ingatpilih salah satu saja, jangan semuanya, nanti gagal.

Simpan Template, dan lihat hasilnya.

0 Cara membuat Energy Power Saving Mode di blog

1. LogIn ke Blogger.
2. Pergi ke rancangan / Design.
3. Add a gadget / Tambahkan Element.
4. Pilih HTML/Javascript.
5. Pastekan kode berikut :

Lalu Simpan.

Lihat blog anda dan tunggu kira - kira 15 detik, jreeeeng..

Semoga bermanfaat.

0 Cara Membuat Widget Buku Tamu Melayang di Sisi Kanan

Cara membuat buku tamu (guest book) / chatbox melayang :

1.    Daftar dulu di Shoutmix atau Cbox, pilih salah satu saja.

2.  Isikan data yang diminta dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.

3.    Selanjutnya login ke dashboard blogger anda.

4.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

5.  Copy kode script dibawah ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.

<!-- Mulai Hidden Widget -->

<style type="text/css">

.rifaldhi_fixed{

position:fixed;

top:180px; /*jarak dari atas*/

right:0px;

z-index:+1000;

}

* html .rifaldhi_fixed {position:relative;}

#hidden_rifaldhi {

display:none;

border:2px solid #616258; /*ketebalan dan warna kotak*/

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;

background:#f1f1ea; /*warna latar*/

padding:3px 10px 0px 10px;

}

</style>

<div class="rifaldhi_fixed">

<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">

<tr><td>

<!-- Gambar Atas -->

<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI

<br/>

<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>

</td></tr></table></div>

<!-- Gambar Samping -->

<div style="z-index:+5" class="rifaldhi_fixed">

<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">

<img style="border:0px;" src="http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png" /></a>

</div>

<!-- Selesai Hidden Widget --> 

6.    Preview dulu untuk  melihat hasilnya.

7.  Edit kode shoutmix pada bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode warna background 

8.  Jika sudah beres Simpan/Save gadgetnya.

Dengan adanya widget guest book/buku tamu melayang seperti ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karena banyak juga pengunjung blog yang kadang malas menulis di kotak komentar namun hanya ingin sekedar menyapa melalui widget buku tamu shoutmix/cbox ini.

0 Menghapus Blog Yang Kita Ikuti (Follow)

Pernahkah terbayang di benak anda jika kita sudah terlalu banyak mengikuti (follow) blog teman lain? Terkadang kita mengikuti blog hanya sekedar untuk menyenangkan hati si empunya karena sudah meminta lewat kotak komentar atau buku tamu, misalnya "eh... follow me dong....!" Ya, basa-basi retoris gitu... Hal ini membuat kita sulit untuk memilih blog mana sebagai prioritas mana yang bukan. 

Nah, pada postingan kali ini saya akan membahas bagaimana cara menghapus salah satu Blog dari list blog yang kita ikuti. Jika temen-temen ada yang mau menghapus salah satu blog yang kita ikuti, berikut langkah-langkahnya

1. Seperti biasa masuk ke Dashboard blog kita dengan cara login ke Blogger
2. Kemudian setelah itu tekan tombol manage pada bagian Daftar Bacaan
3. 
   
   
   
   
4. Lalu tekan tombol setelan/setting pada pada nama blog yang akan kita hapus
5. 
   
   
   
   
   
6. Setelah muncul tab/window baru pada browser anda, klik tombol Google kemudian masuk dengan alamat email anda
   
   
   
   
   
   
   
7. Setelah itu anda akan kembali ke halaman Kelola blog yang saya ikuti, tekan kembali Setelah/Setting pada halaman tersebut
8. Akan muncul di tab/window baru dan masuk ke halaman Profil anda, untuk menghilangkan blog yang kita ikuti kita tinggal tekan berhenti ikuti situs ini
9. 
   
   
   
   
10. Kemudian akan muncul kotak konfirmasi apakah anda akan menghapus blog tersebut dari list blog yang kita ikuti

1. 
   
   
2. Sekarang blog yang anda ikuti tersebut sebelumnya telah terhapus dari list blog yang anda ikuti

Gimana, mudah kan? Demikian tadi penjelasan bagaimana cara untuk menghapus blog yang kita ikuti. Selamat mencoba dan semoga bermanfaat.