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