Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog, Cara Membuat Widget Sticky di Menu Navigasi Blog, Cara Membuat Widget Sticky di Blog, Membuat Sticky di blog dengan mudah.

Halo sobat Ilham Blogger, di hari yang cukup cerah ini namun ujan, sekarang-sekarang ini saya mohon maaf jarang update, karena saya suka main games. Kali ini saya akan membahas Cara Membuat Widget Sticky di Sidebar Blog, sebetulnya widget sticky ini tidak hanya bisa digunakan di sidebar saja, tapi di ID manapun bisa, contohnya di menu navigasi. Mungkin sobat sudah mengetahui tujuan saya kali ini. Widget Sticky fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah.

• Demo widget sticky yang di sidebar, klik disini (coba scroll kebawah dan lihat iklan teks yang di sidebar menempel di atas).
• Demo widget sticky yang di menu navigasi, klik disini (coba scroll kebawah dan lihat menu navigasinya menempel di atas).

Berikut langkah-langkah membuat Widget Sticky di Sidebar :
1. Login ke Blogger
2. Dashboar > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
position:fixed;
top:5px;/* jarak dari atas*/
z-index: 100;
}

5. Letakan kode java script dibawah ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML1').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML1').addClass('sticky');
} else {
$('#HTML1').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

6. Simpan Template

Tips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.

Source : http://ahmadsuyadi.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html

BLOGGER 01.27 No comments

Cara Membuat Random Post di Blog

Cara Membuat Random Post di Blog atau Cara membuat Post Secara Acak di Blog | sobat Ilham Bloger, seperti yang sudah sobat ketahui membuat random post ini, banyak sekali keuntungannya, salah-satunya nambah pengunjung, semua artikel sobat dari postingan pertama sampai postingan terbaru, akan ditampilkan/mungkin ditawarkan lagi artikel tersebut kepada pengunjung, dengan jumlah batasan yang akan sobat inginkan, membuat/memasang atau bahkan mengedit random post di blog ini memang sangatlah mudah sekali, mungkin sebagian atau bahkan semuanya sudah mengetahui memasang random post di blog ini, untuk yang baru mendengar judul artikel ini, lihatlah contoh gambar dibawah ini sebagai gambaran :

Nah sudah tau kan ?, oke klo sudah tau, langsung saja ke pembahasannya.

• Login ke Blogger.com
• Dashboar -> Tata Letak -> Klik tambah gadget -> pilih HTML/Javascript
• Lalu masukan kode dibawah ini tepat didalam halaman HTML/Javascript

<script type = "text/javascript">
var randarray=new Array();
var l=0;
var flag;
var numofpost=5;
</script>
<script src="https://googledrive.com/host/0By9Vs49VphQqaDFNWTNZZVlMR2s" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"type="text/javascript"></script>

Catatan :
Ubah nilai/angka 5 menjadi angka yang diinginkan untuk menampilkan sejumlah post sesuai dengan angka tersebut, contohnya dirubah menjadi 3, 6, 7, dan seterusnya, tapi saya sarankan jangan lebih dari 10, kenapa ?, karena klo lebih dari 10 itu namanya bukan random post, tapi daftar isi.

Supaya tampak lebih rapi bisa memakai scroll dengan membaca atikel selanjutnya di : Cara Mudah Membuat Scroll Pada Label/Widget Blog

Souce : http://buka-rahasia.blogspot.com/2013/03/cara-pasang-random-posts-widget-blogger-blogspot.html

BLOGGER 01.25 No comments

Cara Membuat Kotak Centang Di Blog

Cara Membuat Kotak Centang Atau Ceklis Di Blog - Kotak centang ini berfungsi untuk mempermudah anda dalam membuat tutorial, tapi tutorial ini lebih spesipik artinya tidak umum lebih kepada perorangan, dan tidak dipakai oleh banyak orang, daripada penasaran lihat dulu demonya dibawah ini:

Tutorial apa yang anda suka di blog ini?

Template Blogger Gratis
Tutorial Blog
Gaya Hidup
Informasi
Komputer
Lainnya

Kode dasarnya seperti ini (anda simpan kode dibawah ini didalam HTML postingan) :

<input type="checkbox">

Untuk mengembangkannya seperti pada demo di atas gunakan kode ini:

Tutorial apa yang anda suka di blog ini?<br />
<br />
<input type="checkbox" />Template Blogger Gratis<br />
<input type="checkbox" />Tutorial Blog<br />
<input type="checkbox" />Gaya Hidup<br />
<input type="checkbox" />Informasi<br />
<input type="checkbox" />Komputer<br />
<input type="checkbox" />Lainnya<br />

BLOGGER 01.22 No comments

Cara Follow Blog Dengan Cepat dan Sangat Mudah

Cara Follow Blog Dengan Cepat dan Sangat Mudah - Pernah sobat kunjungi beberapa blog yang tidak memakai widget Google Friend Connect, jadi susah kan follownya, mengapa banyak blog yang tidak memakai widget Google Friend Connect?, hanya satu masalahnya bikin loading blogger jadi berat, tapi tutorial saya kali ini sangatlah simple dan sangat mudah dikerjakan. Follow blog itu ibarat kita punya facebook tapi gak punya teman satu-pun, lalu apa yang akan saya baca, lihat?, status gak ada, berita gak ada, serasa punya dunia sendiri, kembali lagi ke pokok ketika kita membuka blogger.com dan anda tidak mengikuti atau follow blog satu-pun kan serasa kesepian dan juga gak ada yang menarik, apa yang mau dibaca?, tapi ketika kita follow semua blog yang pernah kita kunjungi atau blog yang sangat bermanfaat bagi diri kita sendiri maupun orang lain jangan segan-segan untuk megikutinya / follow. Apa saja yang kita dapatkan ketika mengikuti blog orang lain?, the first pastinya akan mendapatkan artikel terbaru dari blog yang anda ikuti, the second ketika kita mengunjungi blogger.com (ketika sudah login) pastinya tidak akan kebingungan lagi mau ngapain?, dan juga ngga usah ribet cari-cari di google. Kalau menurut saya sendiri follow blog orang lain itu sangat beruntung dan tidak akan rugi sepeser-pun, saya aja mengikuti 103 blog, ya udah daripada ngomong terus kayak tukang obat kita lagsung saja ke pokok tutorial saya kali ini tentang Cara Follow Blog Dengan Cepat dan Sangat Mudah, berikut totorialnya:

1. Login ke Blogger
2. Dashboar > gulung layar monitor anda kebawah > klik tambahkan

3. Lalu masukan alamat web atau blog yang anda ikuti / follow contoh saya masukan alamat web/blog nya seperti ini http://yoga-tc.blogspot.com/

4. Klik tombol "ikuti" yang berwarna orange

5. Selesai dan sekarang anda dapat mendapatkan artikel terbaru dari blog yang anda ikuti

BLOGGER 01.21 No comments

Cara Memodifikasi Tampilan Label Cloud di Blog

Cara Memodifikasi Tampilan Label Cloud di Blog, Cara mengedit tampilan label cloud di blog jadi keren ada 4 pilihan.

Mungkin sobat pernah lihat tampilan label cloud yang keren-keren dan tutorial kali ini saya akan menjelaskan Cara Memodifikasi Tampilan Label Cloud di Blog, Untuk tampilannya ada 4 pilihan, pilih salah-satu saja yang menurut sobat paling bagus.

Mohon maaf tidak ada demonya, karena saya tidak memakai style label cloud seperti dibawah ini.

1. Login ke Blogger
2. Dashboar > klik tata letak > klik edit pada label
3. Untuk pengaturannya samakan dengan gambar dibawah ini:

4. Silahkan sobat pilih salah-satu tampilan label cloud berikut:

Style 1

/* Label Cloud Style By Blog Krizeer
----------------------------------------------- */
.label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666}.label-size:hover{border:1px solid #B20000;text-decoration:none;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;transition:all 0.5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}

Style 2

/* Label Cloud Style By Blog Krizeer
----------------------------------------------- */
.label-size{margin:0;padding:0;position:relative}.label-size a,.label-size span{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom:9px;margin-left:20px;padding:0 10px 0 12px;background:#2493C4;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.label-size a:before,.label-size span::before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #2493C4 transparent transparent;border-style:solid;border-width:12px 12px 12px 0}.label-size a:after,.label-size span::after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #2493C4;-webkit-box-shadow:-1px -1px 2px #2493C4;box-shadow:-1px -1px 2px #2493C4}.label-size a:hover,.label-size span::hover{background:#333}.label-size a:hover:before,.label-size span::hover::before{border-color:transparent #333 transparent transparent}

Style 3

/* Label Cloud Style By Blog Krizeer
----------------------------------------------- */
.label-size{display:inline-block;padding:0px 10px;height:29px;line-height:29px;border-radius:5px;font-weight:bold;font-size:12px;text-decoration:none}.label-size{border:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #6ea23b;color:#fff;background-image:linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size:hover{background-color:#b7fa66;background-image:linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(top,#b7fa66 0%,#7ec940 100%)}.label-size:active{background-image:linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size{display:inline-block;border-radius:5px 0 0 5px;border-right-width:0;position:relative;z-index:5;margin-right:20px;margin-bottom:10px}.label-size:after{content:"";width:22px;height:22px;line-height:18px;font-size:25px;border-top:1px solid #769e42;border-right:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #7eac46;border-radius:3px 7px 3px 0;color:#fff;background-image:linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);position:absolute;top:3px;right:-12px;z-index:-3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476,sizingMethod='auto expand');zoom:1}.label-size:hover:after{background-color:#b7fa66;background-image:linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%)}.label-size:active:after{background-image:linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}.label-size:before{content:"";height:5px;width:5px;display:block;position:absolute;right:-3px;top:11px;background-color:#fcfdf5;border:1px solid #83ab52;border-radius:5px;box-shadow:0 1px 0 #b2ddd83}.label-size span{padding:2px 5px;border:1px solid #9e5c26;border-radius:5px;box-shadow:inset 0 1px 0 #f5bf8c;background-color:#ed943f;text-shadow:0px 1px 1px #000;margin-left:10px;background-image:linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-o-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-moz-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-webkit-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-ms-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%)}#Label1{height:210px !important}

5. Jika sudah dipilih salah-satu salin kode yang sobat pilih tadi diatas ]]></b:skin>
6. Simpan template dan lihat hasilnya

Sumber : http://ah-shared.blogspot.com/2013/07/4-style-css-label-cloud-blogger.html

BLOGGER 01.21 No comments

Membuat Link Berkdedip Warna-Warni di Blog

Cara Membuat Link Berkdedip Warna-Warni di Blog - Untuk mempercantik blog anda dan anda ingin link di blog anda kedap-kedip warna-warni saat link disentuh cursor atau bahasa programnya hover, saya mohon maaf untuk demonya tidak ada.

Uuntuk pemasangannya ada 2 cara yang pertama cara menggunakan kode panjang dan yang kedua menggunakan kode pendek (menggunakan link)

Cara Pertama:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

4. Simpan template

Cara Kedua:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </head>

<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'>
</script>

4. Simpan template

By:yoga-tc.blogspot.com

BLOGGER 01.20 No comments

Cara Memasang Widget PageRank Valid HTML5 di Blog

Cara Memasang Widget PageRank Valid HTML5 di Blog - PageRank merupakan tolak ukur sebuah blog, dengan pagerank yang tinggi orang akan lebih percaya kepada sebuah blog. Singkat cerita saya membuat blog, seperti biasa karena pemula saya sering copas artikel dari blog lain. Setelah membaca sebuah artikel yakni bahaya copas, didalamnya dikatakan bahwa jika kita sering melakukan copas bukan tidak mungkin blog kita tidak akan mendapat pagerank dari google. Nah, sejak kejadian itu saya enggan lagi untuk copas (kecuali kode-kode aneh buatan master).
Saya mencoba membuat artikel sendiri dengan gaya bahasa sendiri, saya terus berusaha yang terbaik dalam membuat artikel termudah supaya dapat dipahami oleh pembaca.

Berikut Cara Untuk memasang widget PageRank-PRchecker.Info:
1. Masuk ke http://www.prchecker.info/pagerank-check-button.php
2. Kemudian masukan alamat blog (url blog) sobat dan lengkapi verifikasi kodenya

3. Kemudian salin (copy) salah satu script yang sesuai dengan icon yang dipilih kedalam notepad dulu

Kodenya kurang lebih seperti ini:

<a href="http://www.prchecker.info/" title="PageRank Checking Icon" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL3lvZ2EtdGMuYmxvZ3Nwb3QuY29tLw==&tag=1" alt="PageRank Checking Icon" style="border:0;" /></a>

anda lihat kode & yang saya kasih tanda, kode & tidak valid HTML5, jadi untuk memasang widget PageRank valid HTML5 ini harus mengubah kode & menjadi &amp; setelah diganti kodenya jadi seperti ini:

<a href="http://www.prchecker.info/" title="PageRank Checking Icon" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL3lvZ2EtdGMuYmxvZ3Nwb3QuY29tLw==&amp;tag=1" alt="PageRank Checking Icon" style="border:0;" /></a>

4. Masuk ke dashboard > tata letak > klik tambah gadget/add gadget > pilih HTML atau javascript
5. Lalu salin kode yang sudah valid HTML5 tadi kedalam kotak HTML
6. Simpan

By :http://yoga-tc.blogspot.com

BLOGGER 01.18 No comments

Cara Mengganti Tampilan Scrollbar di Blog

Sebelumya saya sudah memposting tutorial ini, namun pada tutorial kali ini ada tampilan yang berbeda sedikit, CSS yang saya renovasi memang sedikit, tapi simple, untuk demonya lihat scrollbar blog ini, oke kita lihat dulu tampilan scrollbarnya, lihatlah gambar di bawah ini:

CSS:

::-webkit-scrollbar{background-color:#e6e6e6;}::-webkit-scrollbar-thumb{background-color:#03a1d5;}::-webkit-scrollbar-thumb:active{background-color:#008bb9;}::-webkit-scrollbar-button{background-color:#aaa;}::-webkit-scrollbar-button:active{background-color:#888;}::-webkit-scrollbar-button:disabled{background-color:#fb9521;}

BLOGGER 00.58 No comments

Cara Menghapus Link Aktif Pada Komentar Dengan Javascript

Cara Menghilangkan Link Aktif pada Komentar - Terkadang kita sering dipusingkan dengan banyaknya spmmer pada komentar, dengan menyimpan link aktif /hidup. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Tentunya kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar.Contoh penulisan link aktif pada form komentar:



Ada beberapa cara untuk menghilangkan link aktif / link hidup pada komentar, diantaranya dengan CSS dan JavaScript.

Dengan JavaScript (Recommended)
Javascript pertama, Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan berbagi 2 JavaScript saja.

Sebelum ditambahkan Jacascript hasilnya seberti dibawah ini:



Simpan salah satu JavaScript ini di atas </body>

<script type='text/javascript'>//<![CDATA[$(function(){$('#comments p').find('a').contents().unwrap();});//]]></script>

Dan setelah ditambahkan Jacascript hasilnya akan menjadi seperti ini:



Javascript yang kedua, jika orang memakai link aktif di blog yang sudah memasang anti link aktif di komentar blog, maka yang muncul hanya kalimat "No Live Link!!!", berikut kode javascriptnya:

<script type='text/javascript'> //<![CDATA[ function blockLinks(parentID, children) { var parent = document.getElementById(parentID), content = parent.getElementsByTagName(children); for (var i = 0; i < content.length; i++) { if (content[i].innerHTML.indexOf('</a>') !== -1) { content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!"; content[i].className = "spammer-detected"; } } } blockLinks('comment-holder', 'p'); //]]> </script>

Dan hasilnya seperti gambar dibawah ini, hanya berupa kalimat "No Live Link!!!"

Sekian dulu tutorial kali ini semoga bermanfaat bagi kalian semua, dan bila ada kata2 yang salah, mohon dimaklumi saja ya
Source dari : http://blog.kangismet.net/2013/05/menghilangkan-link-aktif-pada-komentar.html

BLOGGER 00.57 No comments

Cara Membuat Subdomain di Blogspot

Cara Membuat Subdomain di Blogspot - Bagi sobat blogger semua yang memiliki blog di blogspot yang sudah menggunakan custom domain TLD, baik yang gratisan maupun yang berbayar, mungkin pernah terbesit keinginan untuk membuat subdomain dari domain TLD tersebut. Tapi sayangnya tidak tahu caranya, jadi cuma sebatas keinginan saja :D. Nah, kali ini saya ingin mencoba menuliskan tutorialnya, membuat subdomain di blogspot khusus untuk sobat pengunjung setia Blog Mas Sugeng.

Subdomain yang kita buat nantinya bisa kita pakai untuk blog baru di blogspot. Sebenarnya bisa juga subdomainnya kita pakai untuk selain blogspot, Wordpress misalnya seperti blogku yang satu ini www.catatan.mas-sugeng.com. Namun kali ini saya hanya ingin menuliskan tutorial membuat subdoamain di blogspot saja  untuk yang wordpress InsyaAllah akan saya tulis pada postingan berikutnya.

Langsung saja...

1. Masuk Ke Control Panel Domain
Oh ya, Sebelum dilanjutkan, ada yang perlu sobat ketahui terlebih dahulu. Setiap registrar domain atau tempat sobat beli domain memiliki tampilan control panel yang berbeda-beda, namun pada intinya untuk cara setting subdomain blogspot ini caranya sama saja di semua registrar domain, jadi hanya dibedakan oleh tampilan control panel saja. Biasanya ada yang user friendly dan ada juga yang tampilan control panelnya bikin puyeng. Jadi intinya lagi, saya harap sobat bisa menyesuaikannya sendiri. Di sini saya sendiri menggunakan registrar namecheap.com. lanjutt!!..

Karena saya menggunakan namecheap.com maka caranya seperti ini: klik MY ACCOUNT, terus klik Manage Domains, pilih domain yang ingin sobat edit dan selanjutnya klik All host records.

2. Menambahkan Host Record Baru

Bisa dilihat disitu kita tambahkan lima host record baru seperti halnya pada saat pertama kali custom domain. Hanya perbedaannya, di bagian CNAME yang biasanya cuma diisi dengan "www" kita isi dengan "www.subdomain". Dan di bagian A (Address) yang biasanya kita isi dengan simbol "@" kita isi dengan nama subdomain, dalam contoh di atas saya menggunakan nama subdomain "berita". Silakan bisa sobat sesuaikan sendiri. jika sudah, klik  Save Changes.

3. Submit Subdomain ke Blogspot
Klik Setalan > Dasar > Tambahkan domain khusus > Alihkan ke setelan lanjutan. Selanjutnya masukan alamat subdomain sobat, dalam hal ini adalah www.berita.mas-sugeng.com. Jangan lupa untuk menyertakan "www." Jika sudah, klik Simpan.

Tunggu maksimal 24jam sampai proses resolved DNS selesai. Contoh subdomain saya yang sudah jadi, klik www.berita.mas-sugeng.com.

Mungkin hanya segitu saja tutorial kali ini. Kurang lebihnya mohon maaf. Dan jika ada yang kuarang jelas bisa ditanyakan via form komentar di bawah. Terimakasih!

BLOGGER 06.23 No comments

Cara Memperpendek URL Agar URL Lebih Singkat

Cara Memperpendek URL Agar URL Lebih Singkat dengan goo.gl gratis, Cara membuat link pendek dengan goo.gl mudah.

goo.gl adalah layanan gratis yang telah disediakan oleh google buat mempersingkat URL atau alamat web/blog anda. Jadi bagi yang suka dengan yang URL pendek atau singkat-singkat, maka tak ada salahnya untuk mencoba layanan yang satu ini cara ini sangatlah mudah.

1. Kunjungi http://goo.gl/
2. Masukan URL yang akan disingkatkan/dipendekan URLnya

3. Klik "shorten URL", tunggu sampai proses selesai, dan copy URL yang sudah jadi, tekan CTRL+C
4. Selesai

Tweet

BLOGGER 06.21 No comments

Cara Membuat Scrollbar Dengan Persentase di Blog

Hallo Sobat Ilham Bloger pada kesempatan kali ini saya akan membagikan tutorial mengenai Cara Membuat Scrollbar Dengan Persentase.
apa sih itu ?, menjelaskannya susah liat saja scrollbar di blog ini sebagai demonya. dan tutorial ini hanya untuk memperindah tampilan blog saja.
ini dia screenshootnya :

Langsung saja ke tutorialnya yukk :
Tutorial Cara Membuat Scrollbar Dengan Persentase

saya anggap kalian sudah memasang custom scrollbar, bila belum memasang scrollbar bisa dibaca di artikel
Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog,

1. login ke Blogger

2. masuk ke template

3. klik edit HTML

4. lalu cari kode ]]></b:skin>, gunakan ctrl+f untuk mempercepat proses pencarian, jika sudah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 15px;
z-index: 500;
padding: 3px 8px;
background-color: #2493C4;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2493C4;
}

setelah itu, cari kode <body> atau <body
setelah ketemu,tambahkan kode ini di bawahnya <body>

<div id='scroll'></div>

selanjutnya cari lagi kode </body>, lalu letakan kode dibawah ini tepat di atas kode </body> (gunakan tombol Ctrl+F untuk mempercepat pencarian)

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

5. yang terakhir simpan template, dan lihat hasilnya :D

Untuk Setting
untuk mengganti warna background, cari background-color: #2493C4,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 15px; lalu ganti, untuk menggantinya kode 15px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan.

Sekian totorial kali ini dan semoga bermanfaat :D
sumber source : AH-SHARED

BLOGGER 06.20 No comments