Membuat Back To Top Keren Di Blogger

Sebenarnya di template yang saya pakai sekarang telah ada fitur Back To Top ini sobat, namun karena saya putuskan untuk mengganti tampilan footernya, jadinya saya korbankan saja back to top dari template yang saya gunakan.

Nah, sebagai penggantinya, saya menggunakan back to top ala mbak Arlina Design. Widget ini dilengkapi dengan fitur Auto Hide, jadi hanya akan muncul ketika user scroll kebawah. Terima kasih untuk mbak arlina yang telah membagikannya.

Untuk sobat yang ingin menggunakan back to top ini yang telah saya modifikasi sedikit, sobat bisa menguikuti tutorial singkat berikut ini.

Pertama pasang Font awesome terlebih dahulu pada template sobat, jika sudah ada di dalam template, Lewati langkah ini atau ganti dengan kode yang saya berikan berikut.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Script Font Awesome itu telah saya lengkapi dengan script yang akan meload data font awesome secara async. Jadi tidak akan membebani loading blog sobat. O ya, letakkan kode tersebut diatas kode </head>.

Selanjutnya tambahkan CSS berikut ini diatas ]]></b:skin> atau </style>.

.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;transition:all 0.5s ease-in-out;transition-delay:0.2s;}
.smoothscroll-top:hover {background-color:#3eb2ea;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s;}
.smoothscroll-top.show {visibility:visible;cursor:pointer;opacity:1;bottom:25px;}
.smoothscroll-top i.fa {line-height:inherit;}

Pengaturan pada warnanya hanya perlu anda perhatikan pada #09c dan ganti sesuai warna yang sobat inginkan. Setelah itu untuk mengganti warna hovernya sobat ganti pada #3eb2ea, ganti sesuai wana yang sobat inginkan, atau selaraskan dengan warna blog sobat.

Setelah itu kita masuk ke langkah terakhir sobat, tambahkan kode dibawah ini tepat diatas kode </body>.

<div class='smoothscroll-top'>
    <span class='scroll-top-inner'>
        <i class='fa fa-2x fa-chevron-up'/>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Selanjutnya jangan lupa untuk Simpan Template, dan coba lihat di blog sobat. Seharusnya sudah bersemayam back to top dibagian bawah kanan blog sobat. Semoga bermanfaat :)

Source : http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html

Read More

Membuat Author Box Dibawah Posting

Author box ini saya temukan di template mbak Arlina yang New Minima Colored, saya tertarik memasangnya pada template fastestmagz yang saya gunakan, dan akhirnya berhasil juga hanya dengan copy beberapa bagian aja, serta edit dikit jadi deh.

Baiklah untuk Anda yang menginkan memasang Author Box ini, bisa mengikuti tutorial singkat saya berikut ini, dan jika anda mengalami kesulitan dalam pemasangan widged ini bisa berkomentar dan akan saya bantu sebisa dan semampu saya.

Pertama tambahkan CSS berikut ini diatas </head> pada edit HTML.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* CSS Multi Author Box By Arlina Design */
.authorboxwrap {
  background:#f9f9f9;
  margin:-15px 0 25px 0;
  padding:20px;
  overflow:hidden;
  border:1px solid #e6e6e6;
}

.avatar-container {
  float:left;
  margin-right:20px;
}

.avatar-container img {
  background:#fff;
  width:90px;
  height:auto;
  padding:5px;
  border:1px solid #ccc;
}

.author_description_container {}

.author_description_container h4 {
  font-weight:600;
  font-size:16px;
  display:block;
  margin-bottom:10px;
}

.author_description_container h4 a {
  font-family:Oswald,arial;
  border-bottom:1px solid #0099cc;
  text-transform:capitalize;
  color:#333;
}

.author_description_container p {
  font-size:12px;
  line-height:1.6;
  margin-bottom:15px;
}

.authorsocial a {
  display:inline-block;
  text-align:center;
  float:left;
  margin-right:2px;
}

.authorsocial a i {
  width:30px;
  height:30px;
  padding:8px 9px;
  display:block;
  background:#E9E9E9 !important;
  color:#555;
}
</style>
</b:if>

Seperti biasa, saya pasti sisipkan tag kondisional agar hanya terpanggil dibagian posting saja sehingga tidak akan membebani pada bagian homepage. Dan selanjutnya Anda bisa mencari kode persis seperti berikut :

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Dan tambahkan kode berikut ini tepat dibawah kode yang Anda temukan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a expr:alt='data:post.author'>
<img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/></a></div>
<div class='author_description_container'>
<h4><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span></a></h4>
<p>
Hanya seorang blogger biasa yang gemar menulis dan curhat tentang pengalaman hidup, serta belajar segala hal yang bermanfaat, dan terus memperbaiki diri.       
</p></div></div></div>
</b:if>
<!-- url : http://competitivgrace.blogspot.com
Author box Simpel By Arlina Deign
Share & Edited by Iwan Efendi -->

Selanjutnya Anda hanya perlu mengganti yang saya beri tanda merah itu dengan deskripsi yang anda inginkan. Sebenarnya dengan kode dari mbak Arlina telah di setting otomatis untuk deskripsinya, namun karena kadang nggak muncul, saya lebih memilih untuk memasukkannya secara manual sesuai keinginan saya sendiri.

Untuk yang lainnya sudah diset otomatis mengikuti profile g+ kita masing-masing. Setelah semuanya selesai Simpan Template lalu lihat hasilnya. Sangat mudah bukan? Semoga bermanfaat.

Read More

Membuat Tombol Share Simple Dibawah Posting

Sebenarnya widget share ini pertama kali saya lihat pada blog kang Adhy selaku Pemilik Kompiajaib.com, seperti biasa saya langsung intip kodenya sekalian belajar. Karena sebelumnya saya telah modifikasi tampilannya sehingga menjadi lebih simpel (menurut saya sih gitu) hehe. 

Untuk originalnya, Anda bisa lihat pada blog kang Adhy yah. Untuk artikel ini sendiri adalah pesanan teman saya bernana Si Geeniuss pada suatu pesan komentar, namun untuk Anda yang ingin mengcobanya juga diblog anda silahkan ikuti tutorial singkat berikut ini.

Agar Tombol Share ini berfungsi, anda harus memasang FontAwesome terlebih dahulu, kalau sudah ada di template, tinggal ikuti saja tutorial dibawah ini. OK.

Langkah pertama tambahkan CSS berikut ini dibawah di atas </head> pada edit HTML.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.share,h2.sharetitle {
  display:inline-block;
  float:left;
  margin-right:10px;
  margin-top:15px;
}

h2.sharetitle {
  font-weight:600;
  font-size:24px;
  margin-top:20px;
}

.sharethis {
  position:relative;
  margin-bottom:20px;
}

a.gp {
  color:#ba3227;
}

a.fb {
  color:#324b81;
}

a.tw {
  color:#01a7de;
}

a.pr {
  color:#0a7111;
}
</style>
</b:if>

Seperti biasa, CSS diatas telah saya lengkapi dengan tag konditional agar hanya terload dibagian postingan, sehingga tidak membebani homepage blog. selanjutnya Anda cari kode tepat seperti dibawah ini.

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Selanjutnya letakkan kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharethis"><h2 class="sharetitle">Bagikan :</h2> <div class="share ani-dur ani-name"> \
<a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x"></i></span></a> \
<a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x"></i></span></a> \
<a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=iw_n&related=iw_n" target="_blank" title="Share to Twitter">\
    <span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span></a></div><div class="clear"></div></div> \
');
//]]>
</script>
</b:if>
<!-- url : http://competitivgrace.blogspot.com, Share box Simpel By Kompi Ajaib, Share & Edited by Iwan Efendi -->

Sebenarnya tidak harus dibawah kode yang saya berikan, namun bisa dikreasikan sendiri untuk posisinya, namun emang lebih baik dibawah posting sih hehe. Setelah itu ganti user id twitter yang saya blok warna kuning menjadi user id  twitter milik anda, terus jangan lupa untuk Simpan Template lalu lihat hasilnya.

Karena widget ini menggunakan FontAwesome, untuk template Anda yang telah dilengkapi FontAwesome, tidak akan ribet lagi. Widget ini sangat ringan, karena tidak perlu memanggil JS yang biasanya tersemat dalam Tombol Share yang lainnya, dan menjadi render js. Sekian artikel tentang Membuat Tombol Share Simple dan Ringan Dibawah Postingan Semoga bermanfaat.

Read More

Membuat Kotak Berlangganan Simple & Keren Dibawah Posting

Saya sudah lama mempelajari cara membuatnya, namun ilmu saya belum seberapa, namun saya hanya bermodalkan nekat dan kemauan, dan akhirnya saya sedikit demi sedikit mengerti cara membuatnya sobat. Walaupun sebenarnya saya tidak membuatnya melainkan mengeditnya.

Untuk kode aslinya saya dapatkan di template Mas Sugeng 2015, dan saya edit hingga menjadi lebih mirip dengan style pada template Evomagz. Jadi untuk sobat yang menginginkan kotak berlangganan ini yang telah saya buat lebih simple dan lumayan keren, sobat bisa mengikuti tutorial berikut ini.

Tambahkan CSS berikut di atas </head> pada edit HTML sobat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.berlangganan-box {
  font-family:Arial;
  color:#fff;
  background:#38424B;
  padding:15px;
  border:1px solid #ededed;
  margin:10px 0 0;
  text-align:center;
}

.berlangganan-box input.email-address[type=&
  quot;
  text&
  quot;
  ] {
  width:80%;
  padding:10px;
  border:1px solid #ddd;
  text-align:center;
  border-radius:4px;
  outline:none;
}

.berlangganan-box input.submit-email[type=&
  quot;
  submit&
  quot;
  ] {
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  padding:10px;
  background:#2db2eb;
  border-radius:4px;
  color:#fff;
  border:none;
  font-weight:normal;
  outline:none;
  width:80%;
}

.berlangganan-box input.submit-email[type=&
  quot;
  submit&
  quot;
  ]:hover {
  background:#0099cc;
  cursor:pointer;
}

.button {
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  text-align:center;
  position:relative;
  vertical-align:top;
  width:148px;
  height:32px;
  padding:0;
  font-size:13px;
  color:#fff;
  font-weight:normal;
  text-align:center;
  background:#07ACEC;
  border:0;
  cursor:pointer;
  border-bottom:3px solid #0D9AD0;
  border-radius:4px;
  outline:none;
}

.button:active {
  top:1px;
  outline:none;
}

.button:hover {
  background:#0D9AD0;
}
</style>
</b:if>

CSS tersebut telah dilengkapi dengan tag kondisional agar hanya terload dibagian posting, dan dengan begitu tidak akan menambah beban dari home page sobat, nah selanjutnya cari kode yang sama persis seperti berikut.

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Selanjutnya letakkan kode berikut ini tepat dibawah kode tersebut.

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Competitiv&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <p>Sign up here with your email address to receive updates from this blog in your inbox.</p><p><input class='email-address' name='email' placeholder='Your Email Address...' type='text'/></p><input name='uri' type='hidden' value='Competitiv'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Subscribe'/></p>
</form>
</div>

Pengaturan pada widget ini hanya perlu sobat perhatikan pada kata yang saya beri tanda blok kuning, ganti dengan id feedburner sobat. Setelah itu sobat Simpan Template, dan coba lihat hasilnya.

Sebenarnya untuk kode yang terakhir tidak musti sobat letakkan pada bagian yang saya berikan, namun bisa juga sobat sesuaikan, semisalnya sobat tahu letak tag html related post, maka sobat bisa letakkan kode yang terakhir itu tepat dibawah kode html related post. Semoga bermanfaat. :)

Read More

Membuat Catatan, Info, Warning, Tips, & Update

Blok model ini sebenarnya tidak terlalu penting, namun cukup bisa membuat tampilan blog kita menjadi lebih profesional. Mengapa tidak penting, karena fungsinya yang bisa terbilang sama aja dengan Quote yang telah tersedia pada setiap template.

Namun, dengan Membuat Catatan, Info, Warning, Tips, dan Update Dengan Font Awesome ini akan menjadikan tampilan yang lebih bewarna sobat. Cara ini saya temukan di blog teman saya +kowe sopan yang dia juga memakai cara ini.

Karena saya belum begitu paham dengan CSS serta HTML, dan saya hanya bisa mengedit saja, jadi saya akan share ulang aja dan terima kasih sobat +kowe sopan yang telah berbagi. Semoga bisa mempercantik blog sobat.

Memasangnya Pada Template
Karena cara ini menggunakan Font Awesome, maka kita perlu menyisipkan Font Awesome di dalam template sobat. Masuk ke Edit HTML dan tambahkan Script berikut tepat diatas </head> gunakan ctrl+f untuk memudahkan pencarian.

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Script tersebut sudah dilengkapi dengan pemanggilan secara async jadi tidak akan memperlambat blog sobat ketika Font Awesome dipanggil, karena akan dipanggil setelah seluruh komponen blog termuat.

Selanjutnya sobat tambahkan CSS berikut ini untuk mengatur style tampilannya. Tambahkan tepat diatas  ]]></b:skin> atau kode </style> , cari kode itu menggunakan ctrl+f agar mudah sobat.

.catatan,.info,.warning,.tips,.update {
  display:block;
  font-style:normal;
  color:#333;
  padding:15px 18px 15px 48px;
  border-bottom:1px solid rgba(0,0,0,0.1);
  position:relative;
  border-radius:3px;
  margin:0 0 10px;
  color:#FFF;
}

.catatan:before,
.info:before,
.warning:before,
.tips:before,
.update:before {
  font-family:"FontAwesome";
  display:block;
  position:absolute;
  top:15px;
  left:16px;
  color:rgba(0,0,0,0.15);
  font-size:22px;
  line-height:1;
}

.catatan:before {
  content:'\f11d';
}

.info:before {
  content:'\f05a';
}

.warning:before {
  content:'\f071';
}

.tips:before {
  content:'\f028';
}

.update:before {
  content:'\f085';
}

.catatan {
  background-color:#49A5D7;
}

.info {
  background-color:#FF9531;
}

.warning {
  background-color:#B25A5A;
}

.tips {
  background-color:#FAD163;
  color:#000;
}

.update {
  background-color:#69A24A;
}

Cara Penggunaan

Untuk cara penggunaannya sangat mudah sobat, jika sobat tengah membuat postingan sobat bisa masuk ke mode HTML bukan Compose, nah setelah itu gunakan salah satu pemanggil setiap class dari masing-masing info box. Untuk memudahkan pemahaman sobat, saya buatkan contoh satu seperti berikut:

<div class="info"> Teks Sobat Disini </div>

Begitu juga dengan fungsi class yang lain sobat, disini sobat hanya perlu mengganti Info dengan update atau yang lain sobat, jika belum mengerti juga silahkan bertanya dikomentar sobat yah. Semoga bermanfaat.. ^_^

Sumber referensi : http://obesitystrike.blogspot.com/2015/02/css3-info-box-dengan-icon-font-awesome.html

Read More

Menampilkan Recent Post Dengan Feed Blogger

Update : 26 Februari 2015, menambahkan recentpost by label.

Semenjak saya mengganti template blog ini menjadi template milik mas sugeng yang 2015 yang dulunya premium dan sekarang telah menjadi freemium, hehe :D saya sangat penasaran menampilkan recent post yang ada dibawah postingnya itu loh sobat. Apa lagi ketika saya lihat di demonya ada tuh recent post, dan pas saya pakai gak ada pengaturan maupun script khusus untuk itu, wah saya sangat penasaran waktu itu.

Sampai-sampai saya telah bertanya dari grup ke grup hingga akhirnya saya bertanya langsung dengan mas sugengnya karena frustasi, dan dibalas sekitar 3 jam setalh saya PM beliau di fanspagenya (yang penting dibalas aja :D ). Ternyata dari jawaban beliau, setelah saya bertanya "Mas bagaimana cara menampilkan recent post atau recent post by label di template mas sugeng 2015 ?, saya udah pusing mas nyari caranya :(, terima kasih mas".

Mas sugeng pun membalas PM saya dengan sedikit kata-kata dan menyertakan link, "Itu menggunkan feed blogger mas, ini baca mas [link]", dan saya coba langsung, dan ternyata berhasil sobat. Mantap bener, itu ilmu gak seberapa menurut sobat, namun sangat berarti buat saya pribadi.

Nah, buat sobat yang belum tahu dan ingin tahu aja yah nih saya akan memberikan tutorial mengaktifkan fitur feed blogger serta cara menggunakannya. Untuk DEMO sobat bisa lihat pada blog saya ini. Kelebihannya dengan cara ini adalah recent post akan lebih ringan, karena tidak menggunakan javascript ataupun jquery seperti widget yang telah tersebar di google sobat.

1. Masuk ke bagian Dashboard > Tata Letak > Tambah Gadget sehingga sobat akan menemukan tampilan berikut : 

2. Setelah itu sobat bisa lanjut klik bagian Feed untuk masuk kebagian seperti gambar berikut sobat.

Pada gambar diatas, sobat hanya perlu mengisi bagian "URL Feed" dengan alamat blog yang ingin sobat buatkan feednya, dengan kata lain artikel baru akan tampil sesuai alamat yang tertera pada url feed ini.

Jika sobat ingin membuat seperti recent post, atau postingan terbaru sobat untuk blog sobat sendiri, sobat bisa memasukkan alamat blog sobat sendiri.

Namun jka sobat ingin menampilkan recentpost by label yaitu sesuai dengan label yang sobat pilih, dengan artian tidak menjadi postingan terbaru, sobat hanya perlu menambahkan /-/NamaLabel dari feed default yang kita buat sobat. Menjadi seperti berikut.

Untuk yang nama labelnya memiliki spasi harus menambahkan %20 untuk menggantikan spasinya. Sebagai contoh, kita akan buatkan label dari Tips Trik, jadi penulisannya dalam feednya menjadi Tips%20Trik.

3. Tahap selanjutnya sobat akan memasuki tampilan berikut, dan bisa menggunakan beberapa pengaturan.

Keterangan konfigurasi :

• Judul : Bisa sobat ganti sesuai judul yang sobat inginkan.
• Tampilkan : Sobat bisa menampilkan maksimal 5 item atau postingan, dan sobat juga bisa menampilkan Tanggal item, Sumber/pengarang postingan, dan yang terakhir pilihan agar link terbuka di tab baru, seusaikan dengan selera sobat.
• Pratinjau : Ini untuk preview tampilannya nati sobat.
• Ubah URL Feed : Untuk menggubah URL atau alamat feed sobat, mau dibuat by lebel atau tidak, dengan ini akan lebih mudah tanpa membuat feed baru. Tinggal edit aja bagian ini.

Simpan widget tersebut sobat, dan coba lihat pada blog sobat. Widget feed ini akan sudah tampil dengan baik pada blog sobat. Kurang lebih tampilannya seperti di blog saya ini sobat, seperti berikut. Menurut saya kelebihan menggunakan cara ini ialah lebih ringan.

4. Tampilan diatas sudah saya modifikasi sedikit sobat, namun untuk sobat yang menggunakan template mas sugeng, tampilannya tidak akan jauh berbeda. Itu saya membuat dua feed, satu dari blog competitiv ini dan satu lagi dari blog linux saya sobat. Saya rasa sobat sudah mengerti yah, semoga artikel "Menampilkan Recent Post Dengan Feed Blogger" ini bermanfaat.. ^_^

Read More

Menambahkan Fungsi Scroll Pada Widget Blogger

Kali ini saya akan share cara Menambahkan Fungsi Scroll Pada Widget, yaitu hal ini akan membuat widget tersebut terlihat lebih rapih dan tentunya lebih enak dilihat.

Gambar 1.0
Contoh Penerapan Di Blog's Linux

Untuk membuat fungsi seperti ini sobat perlu mengetahui ID-WIDGET dari widget yang ingin sobat tambahkan fungsi scroll ini. Sebagai contoh kita akan membuat fungsi scroll pada widget Arsip Blog's seperti Gambar 1.0 atau sobat bisa mengecek di blog ini sobat.

Gambar 1.1

Pada Gambar 1.1 adalah cara cepat untuk lompat ke widget yang sobat kehendaki, sekaligus itu adalah nama dari ID-WIDGET yang kita ingin tambahkan fungsi scroll tadi sobat. Dalam bentuk HTML akan terlihat seperti Gambar 1.2 sobat.

Gambar 1.2

Nah, setelah sobat mengetahui id dari widget yang sobat kehendaki, sobat hanya perlu menambahkan script berikut:

#ID-WIDGET .widget-content {
  max-height:200px;
  overflow:auto;
}

Dan letakkan diatas kode  ]]></b:skin>  atau diatas kode </style> pada template sobat. Dan ganti ID-WIDGET menjadi BlogArchive1 seperti contoh Gambar 1.3, atau dengan ID widget yang sobat kehendaki.

Gambar 1.3

Jika sobat ingin membuat fungsi scroll lebih dari satu widget, sobat bisa menuliskan scriptnya menjadi seperti ini sobat:

#Label1 .widget-content,
#BlogArchive1 .widget-content,
#Followers1 .widget-content {
  max-height:200px;
  overflow:auto;
}

Jika sobat ingin merubah tinggi maksimal dari widgetnya sobat bisa mengedit value dari max-height . Setelah itu Simpan Template sobat.

Semoga Bermanfaat.. ^_^

Source : DTE :]

Read More