Membuat Shadow / Bayangan Border Widget

Membuat Sebelah Kanan dan Kiri Border Widget Memiliki Border Berbayang / Shadow

Menciptakan Shadow / Bayangan Border Widget Unik

Pernah sobat melihat sebuah background atau semacam border widget yang memiliki efek seperti banyangan?

Kurang lebih akan tampak seperti dibawah ini sob:

Lihat di SINI untuk contoh Live-nya

Membuat Shadow / Bayangan Border Widget - caranya sangat mudah gan,pertama,sobat letakkan barisan kode css berikut diatas kode skin:

.headerright {position: relative;height: 255px;width: 302px;border:1px solid #BABABA;margin: 5px 5px 0px 0px;padding: 5px 5px 0px 5px;font-weight: bold;background-color: #D2D2D2;-moz-box-shadow: inset 0 1px 1px #eeeeee;-ms-box-shadow: inset 0 1px 1px #eeeeee;-o-box-shadow: inset 0 1px 1px #eeeeee;-webkit-box-shadow: inset 0 1px 1px #eeeeee;box-shadow: inset 0 1px 1px #eeeeee;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}.headerright:before, .headerright:after {z-index: -1;position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 50%;max-width:300px;background: rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);}.headerright:after {-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);transform: rotate(3deg);right: 10px;left: auto;}

a.mrpujiajadeh {width:123px;height125px;}div.i125 a.mrpujiajadeh {background:#e7e7e7;width:125px;height:125px;line-height:100%;}div.lebarbox a {width:302px;}div.lebarbox a, div.i125 a {display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}div.lebarbox img, div.i125 img {border:0;clear:right;}html > body div.lebarbox a.mrpujiajadeh {width:302px;height:255px;}div.lebarbox a.mrpujiajadeh, div.i125 a.mrpujiajadeh {color:#666;font-weight:bold;font-size:12px;/*border:1px solid #BABABA;*/text-align:center;}div.lebarbox a.mrpujiajadeh {background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);width:302px;height:60px;line-height:480%;-moz-box-shadow: inset 0 1px 1px #EEE;-ms-box-shadow: inset 0 1px 1px #EEE;-o-box-shadow: inset 0 1px 1px #EEE;-webkit-box-shadow: inset 0 1px 1px #EEE;box-shadow: inset 0 1px 1px #EEE;}div.lebarbox a.mrpujiajadeh:hover, div.i125 a.mrpujiajadeh:hover {/*border:1px solid #999;*/background:#ddd;color:#333;}

Setelah itu,untuk menerapkannya pada widget,sobat tinggal membubuhkan kode berikut:

<div class="headerright floatR" id="headerright">
<div class="lebarbox"><a class="mrpujiajadeh">
Di Sini Letak Kode Html/Text/Javascript Anda
</a></div></div>

Selamat Mencoba Ya :D

Membuat Foto Slide dengan Angka dan Dot Navigasi di Dalamnya

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

Lihat gambar lebih besar klik di SINI

Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpG2x8_3YpmX84B0mV296ueKENaxXRmKFjmBczCFzx6uurglPX4RkMm_BmFCFpNwIoiFG4rm51HCPY7__9J8api4MSLUvlVy3Ko08GrV0jQAKqF3V_OOjr5Ks-qYlQzAD6HS09HB9yYE/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:

</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>


<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D

Cara Mengatur Ukuran Lebar 'Widget' Template Blogger

Cara Singkat,Cepat dan Efektif Mengatur Ukuran Lebar 'Konten Utama / Postingan' Blogger Template

Jika sobat menginginkan ukuran template dapat sobat utak-atik sendiri dengan cara singkat,tak ada salahnya sobat coba trik berikut ini.

Betul gan,sesuai dengan titlenya,mengubah / mengganti / mengarur ukuran lebar template blogger untuk 'widget'.
Main widget,ya ini akan merubah widget yang sobat miliki.Lihat screenshot template berikut ini:

Lihat gambar dalam ukuran besar

Gambar diatas adalah salah satu contoh dari template yang menggunakan 'blogger template satu kolom'.
Lalu apa hubungannya,ya,jika sobat memiliki template satu kolom,nanti bisa langsung sobat lihat dengan jelas efek dari trik yang akan kita coba nanti.

Namun jika blogger template yang sobat gunakan bukan 'satu kolom' kemungkinan trik ini hanya akan mengatur ukuran lebar area widget.

Caranya sangat mudah,Pertama, masuk ke akun Blogger sobat, buka tab Edit HTML dan contreng tulisan "Expand Widget Templates"

Selanjutnya cari kode :

body { (gunakan CTRL+F untuk mempermudah pencarian)

Biasanya akan tampak seperti ini:


Lihat gambar dalam ukuran besar

Nah,jika sobat sudah ketemukan tepat diATASnya letakkan kode berikut ini:

.widget {
padding-bottom:30px;
margin-left:70px;
margin-right:70px;
padding-top:0px;
}

Sehingga akan tampak seperti gambar ini:


Lihat gambar dalam ukuran besar

Nah,angka dalam kode yang berwarna merah diatas,gantilah sesuai dengan keinginan,semakin besar nilainya,maka widget akan semakin menyusut kedalam alias menyempit.

Simpan template dan lihat hasilnya.Selamat berkreasi ya gan!

Membuat Fake Loading Download Blogger / Script Efek Loading

Cara Menciptakan Loading Download Palsu / Fake / Tiruan

Pernahkah sobat mengalami hal yang sangat menyebalkan dalam dunia 'download file'?
Seperti saat sobat hendak mendownload file,namun saat tiba waktunya biasanya sobat diberi pilihan antara pilihan download premium atau dengan regulaer atau free.Nah,jika sobat memilikih free,biasanya ada hitungan mundur dan file download pun tercipta.

Namun sangat disayangkan,saat link download tercipta justru kita meng'klik' sebuah iklan,bukan link download yang kita inginkan.Bagaimana mereka menciptakan fake loading download tersebut,sedang kita tahu itu bukanlah file flash (*.swf)?
Apakah hal ini bisa diterapkan di blogger?

Nah,inilah tema Pelajaran Blogmalam hari ini gan,bagaimana cara membuat loading download tiruan / palsu alias fake download loading efect

Lihat,screenshot berikut gan:

Lihat gambar lebih besar di SINI dan lihat contoh live-nya di SINI

Seperti gambar diatas efek yang akan kita dapatkan dan ini sangat bekerja baik di browser Mozilla Firefox.
Lalu apa yang akan terjadi setelah Fake Loading tersebut selesai tampil? lebih baik coba dulu trik yang satu ini sob,itung2 buat ngibulin para 'predator internet' :D (ga boleh ya hihi)

Langkah dan Cara Membuat Efek Loading Download Tiruan / Palsu

Pertama,sobat pergi ke dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,lihat gambar:


(1)


(2)


(3)

Setelah itu cari kode ini (saran:gunakan Ctrl+F):

]]></b:skin>

Setelah ketemu,letakkan barisan kode css berikut tepat diATASnya:

#progress {
background:-webkit-linear-gradient(top, #333, #666);
background:-moz-linear-gradient(top, #333, #666);
background:-ms-linear-gradient(top, #333, #666);
background:-o-linear-gradient(top, #333, #666);
background:linear-gradient(top, #333, #666);
width:60%;
height:20px;
-webkit-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
-moz-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
box-shadow:0px 3px 10px rgba(0,0,0,0.4);
margin:50px auto 0px;
position:relative;
overflow:hidden;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

#progress:after {
content:"";
width:100%;
height:100%;
background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
position:absolute;
top:0px;
left:0px;
}

#progress div {
display:block;
width:100%;
height:100%;
background:#8FB44C;
background:-webkit-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-moz-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-ms-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-o-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
-moz-background-size:500%;
background-size:500%;
position:absolute;
top:0px;
left:0px;
-webkit-box-shadow:1px 0px 5px #000;
-moz-box-shadow:1px 0px 5px #000;
box-shadow:1px 0px 5px #000;
-webkit-animation:progressbar 50s linear;
-moz-animation:progressbar 50s linear;
-ms-animation:progressbar 50s linear;
-o-animation:progressbar 50s linear;
animation:progressbar 50s linear;
}

#olay1 {
width:100%;
height:100px;
text-align:center;
background:#000;
padding:50px 0px;
font:bold 20px 'Courier New',Monospace,Arial,Sans-Serif;
color:#fff;
text-shadow:0px 0px 3px #fff;
text-transform:uppercase;
position:fixed;
top:0px;
left:0px;
visibility:hidden;
-webkit-animation:complete 5s linear 51s;
-moz-animation:complete 5s linear 51s;
-ms-animation:complete 5s linear 51s;
-o-animation:complete 5s linear 51s;
animation:complete 5s linear 51s;
}


@-webkit-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-webkit-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-moz-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-moz-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-ms-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-ms-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-o-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-o-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}


@keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

Lalu simpan templates,setelah itu,buatlah posting / artikel baru seperti gambar berikut:

Lihat Gambar lebih Besar di SINI

Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'


Lihat Gambar lebih Besar di SINI

Kemudian letakkan script daftar isi berikut:

<center><div><input type="button" value="Lihat Gambar" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan Gambar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<div id='progress'><div></div></div>
<div id='olay1'>Gambare embuh ilang neng endi mas! wis aku goleki gak ono je!.</div>
</div>
</div></center>

Lalu publikasikan posting dan lihat hasilnya :D

Lihat Gambar lebih Besar di SINI
sumber:coding.smashingmagazine.com

Script Untuk Daftar Isi Blog / Situs (SiteMap)

Membuat Daftar Isi Blog dengan Javascript

Masih ingat dengan script daftar isi ciptaan abu farhan beberapa waktu lalu yang sampai saat ini beliau masih menjadi rujukan para blogger senior?

Kali ini tidak jauh berbeda,mungkin kamii hanya njiplak kali ya (copas lagi dah!),namun script ini memang sangat efektif,untuk contoh fisiknya,sobat bisa lihat di SINI

Cara menerapkannya pun sangat mudah,hanya lakukan posting seperti biasa,letakkan script dan sobat bisa lihat hasilnya.

Langkah dan Cara Memasang / Membuat Script Daftar Isi Blog

Pertama,sobat kunjungi dashboard lalu pilih 'New Post'


Lihat Gambar lebih Besar di SINI

Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'


Lihat Gambar lebih Besar di SINI

Kemudian letakkan script daftar isi berikut:

<link rel="stylesheet" media="screen" href="http://membuatgempar.net23.net/index-script-blogger.css" type="text/css" type="text/css" />

<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah Artikel:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya &#9658;",
prevText = "Prev",
nextText = "Next",
siteUrl = "http://pelajaran-blog.blogspot.com",
postsperpage = 10,
numchars = 370,
imgBlank = "http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif";
</script>

<script type="text/javascript" src="http://membuatgempar.net23.net/index-script-blogger.js"></script>

Dan beri nama pada judul seperti biasa sobat posting,lalu klik 'Publish Post'


Lihat Gambar lebih Besar di SINI

Dan sobat bisa lihat hasilnya dengan mengklik tombol 'View Post',moga berhasil ya.


Lihat Gambar lebih Besar di SINI

Cara Melihat Daftar 'Friend Request Sent' Facebook

Trik Cara Melihat Daftar Teman yang Menunda Perkawanan (Pending Friend Request)

Sebelum adanya 'Timeline' dalam tubuh facebook,dahulu kala,sebelum saya tumbuh uban seperti sekarang ini,facebook pernah menyediakan link untuk melihat 'daftar permintaan teman yang terkirim' yang istilahnya masih dalam waktu menunggu approve dari teman yang bersangkutan.

Namun,seiring berubahnya waktu dan kebutuhan,facebook kini sudah tak menyediakan fitur itu lagi,jadi bagaimana kita bisa tahu,daftar teman yang telah kita 'add' namun belum mendapat 'sambutan baik'?
Emang penting ya?

Penting sekali gan,masalahnya,jika kita terlalu banyak menambah teman,dan statusnya masih dalam 'pending request' sekali kita menambah teman lagi,bukan tidak mungkin facebook akan menonaktifkan akun facebook yang sobat miliki.

Kok bisa tahu?
Ya,tahu sendiri lah gan,kita ini termasuk orang-orang yang 'fakir asmara' dan 'pengemis cinta' juga,nah lo! ngaku ya,hihihi

Tapi,ada info menarik ni sob,sebuah trik sederhana untuk 'melihat daftar teman yang sedang menunda permintaan teman yang kita telah kirim'.

Pertama,sobat ikuti / allow dari aplikasi facebook ini:
apps.facebook.com/friendrequests
Selanjutnya,klik tombol 'Bulk Load' untuk melihat tutornya,:

Lihat Gambar lebih besar klik di SINI

Setelah itu,dalam jendela seperti gabar dibawah ini,sobat klik tombol 'Get Friend Request Data':


Lihat Gambar lebih besar klik di SINI

Nanti sobat akan mendapatkan jendela popup untuk barisan script seperti ini,gunakan Ctrl+A pada keyboard,lalu klik kanan dan Copy script tersebut:


Lihat Gambar lebih besar klik di SINI

Setelah itu,Paste script tersebut pada text area yang disediakan lalu klik tombol 'Load Friend Request':


Lihat Gambar lebih besar klik di SINI

Dan Tada!!


Lihat Gambar lebih besar klik di SINI

Ingat gan,jangan keseringan ng-add friend ya,saran aja kok :D

Membuat Show Hide Komentar Blogger

Buka Tutp Komentar Blogger / jQuery Slide Blogger Comment

Hi gan,ketemu lagi ya,hehehe (kangen ma kite kite ya :D)
Kali ini Pelajaran Blog akan sharing bagaimana membuat show/hide comment box di blogger dot com,pingin tahu lebih lanjut? ikuti ya :D

Bentuk fisik dari 'sliding komentar blogger yang bisa sobat buka juga sobat tutup untuk menghemat tempat' yang sudah berhasil saya terapkan,sobat bisa lihat di komentar salah satu blog milik saya di SINI

Untuk screenshotnya lihat gambar ini gan:

Lihat Gambar lebih Besar di SINI

Nah,gimana gan? tertarik ingin menciptakan 'show hide blogger comment' ini?

Langkah dan Cara Membuat Show Hide Komentar / Expand Collapse Blogger Comment Box

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,dan cari kode berikut (Gunakan Ctrl+F):

</head>

Jika sobat sudah menemukannya,tepat diATASnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

Setelah itu,cari kode berikut:

]]></b:skin>

Jika sudah sobat ketemukan,tepat diATASnya letakkan barisan kode ini:

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Setelah itu simpan template sobat.

Catatan:
Trik ini akan bekerja tentu jika sobat mengaktifkan komentar di blogger,baik dalam komentar posting maupun settingan secara universalnya.Selamat mencoba ya :D

Membuat / Menambahkan Sidebar Sendiri di Ujung Blog

Cara Menciptakan Gadget / Element Baru Sidebar di Sebelah Kanan Atas Blog

Bismillah - yang akan kita ciptakan ini sob,hanyalah sekedar kreasi bagi kamu yang kesulitan membuat sidebar sendiri disebelah kanan blogger template satu kolom.
Seperti posting beberapa minggu lalu gan,kami pernah share dan mereferensikan blogger template satu kolom,yang mana template ini tidak memiliki sidebar (namanya jg satu kolom beg* pent-)

Masih ingat ga sob saat beberapa waktu lalu di blog ini memposting tentang cara menambah element baru dan membuat sidebar berada dikanan dan kiri posting? Nah,teknik yang kita gunakan kali ini kira-kira akan mirip seperti itu.

Bingung? yuk ikuti saya (bawa obor....awas aada ular...pelan...hati-hati gan,tar kepleset...gelap soalnya..)

Langkah dan Cara Membuat Sidebar Blog Sendiri

Sebagai ilustrasi,sengaja kami share dengan media gambar,biar ga jlimet geto :D

Saat template satu kolom yang saya miliki dilihat dari view 'Rancangan / Design' maka akan tampil seperti ini:


Lihat Gambar Lebih Besar Klik disini

Sekarang,sobat klik 'EDIT HTML' seperti yang diyunjukkan pada gambar dibawah ini:


Lihat Gambar Lebih Besar Klik disini

Setelah itu,sobat cari kode / barisan css berikut (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)

#outer-wrapper {

Nah,nanti barisan kode css ditemplate sobat akan tampak seperti ini,yah meskipun ga persis (meskipun satu kolom khan beda template :D) :


Lihat Gambar Lebih Besar Klik disini

**dalam gambar ada 3 kode angka yang saya beri tanda lingkaran,dari ketiga angka tersebut harus sama,#header ,#outer-wrapper dan untuk #footer.

Nah,lanjut ya,tepat dibawah barisan kode #outer-wrapper { misal template milik saya barisan #outer-wrapper { tampil seperti ini:

#outer-wrapper {
margin: 0px auto;
width:500px;
background:white url() top left repeat-y;
}

letakkan kode barisan css sidebar baru kita berikut setelah barisan kode tadi:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nah,ingat meletakkannya juga harus benar ya gan,kurang lebih nanti akan tampil seperti ini:


Lihat Gambar Lebih Besar Klik disini

Setelah itu,cobat cari kode <body> (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)


Lihat Gambar Lebih Besar Klik disini

Setelah sobat menemukan kode <body> letakkan persis dibawahnya kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' maxwidget='2' showaddelement='yes' preferred='yes'/>
</div>

Jika sobat meletakkannya benar maka akan tampak seperti ini:


Lihat Gambar Lebih Besar Klik disini

Kode inilah yang akan tampil dimana saja kita inginkan keberadaannya,jika sobat ingin meletakkan widget ini difooter,header dan lain sebagainya,sobat cari sendiri tempatnya ya (Insya Allah kita akan bahas nanti)

Lanjut ya,setelah sobat terapkan langkah-langkah diatas,simpan template sobat dan lihat pada tab 'Rancangan / Design' dan TADA!!!!! maka nanti akan tampil seperti ini:

Lihat Gambar Lebih Besar Klik disini

Nah,widget di ujung sebelah kanan atas blog ini sangat tepat jika digunakan untuk fitur serach,profil,dll,untuk contoh fisiknya sobat lihat saja di SINI

Sekarang dari template sobat satu kolom,sobat sudah bisa ciptakan sidebar sendiri khan? Selamat berkreasi dan semoga berhasil ya gan! see you:D