New Popup Cbox Guestbook / Buku Tamu

Saat ini mungkin telah banyak kreasi-kreasi dari para bloger dengan memodifikasi tampilan guestbook / buku tamu. Selain bertujuan untuk mempercantik tampilan juga untuk memperhemat tempat pada halaman blog kita.

Pada kali ini saya coba berbagi sedikit kreasi yang mungkin adalah salah satu pengembangan dari sebuah code css pop up yang saya terapkan pada cbox untuk buku tamu / guestbook.

Caranya seperti biasa :

• Login dulu ke bloger
• Pilih Rancangan
• Tambah gadget
• Pilih HTML/Javascript
• Copy paste code berikut :

<style>
label {position: relative;}
.box{
position:absolute;
left:0;top:100%;
z-index:100;
-webkit-backface-visibility:hidden;
background-color:#eee;
background:-webkit-gradient(
linear,left top,left bottom,from(#eee),to(#4f697e));
-webkit-linear-gradient(top,#eee,#4f697e);
background:-moz-linear-gradient(top,#eee,#4f697e);
background:-ms-linear-gradient(top,#eee,#4f697e);
background:-o-linear-gradient(top,#eee,#4f697e);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
width:270px;
padding:3px;
margin:10px 0;
opacity:0;
-webkit-transform:scale(0) skew(50deg);
-moz-transform:scale(0) skew(50deg);
-ms-transform:scale(0) skew(50deg);
-o-transform:scale(0) skew(50deg);
-webkit-transform-origin:0 -30px;
-moz-transform-origin:0 -30px;
-ms-transform-origin:0 -30px;
-o-transform-origin:0 -30px;
-webkit-transition:-webkit-transform ease-out .35s,opacity ease-out .4s;
-moz-transition:-moz-transform ease-out .35s,opacity ease-out .4s;
-ms-transition:-ms-transform ease-out .35s,opacity ease-out .4s;
-o-transition:-o-transform ease-out .35s,opacity ease-out .4s}
.box:after{
position:absolute;
bottom:100%;
left:30px;
border-bottom:20px solid #eee;
border-left:14px solid transparent;
border-right:14px solid transparent;
width:0;height:0}
.popUpControl:checked ~ label>
.box{
opacity:1;
-webkit-transform:scale(1) skew(0deg);
-moz-transform:scale(1) skew(0deg);
-ms-transform:scale(1) skew(0deg);
-o-transform:scale(1) skew(0deg)}
.popUpControl{display:none}
.button{
font-size:20px;
font-weight:bold;
padding:3px;
border:1px solid #4f697e;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px}
.button:hover{
font-size:20px;
font-weight:bold;
color:#B11B40;
margin:0;
padding:3px;
text-align:center;
border:1px solid #4f697e;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all .6s ease-out;
-moz-transition:all .6s ease-out;
-o-transition:all .6s ease-out;transition:all .6s ease-out}
#cpbox:checked ~ label>span:first-child{display:none}
#cpbox:checked ~ label:before{content:"Terimakasih atas kunjungannya..!"}
</style>
<input type="checkbox" id="cpbox" class="popUpControl" />
<label for="cpbox" class="button">
<span>Guestbook!</span>
<span class="box">
<!-- BEGIN CBOX - www.cbox.ws -->
DI SINI KODE CBOX
<!-- END CBOX -->
</span></label>

Untuk code yang diblok, silakan disesuaikan.

Selamat mencoba, semoga bermanfaat..!

Read more..

Menambahkan Style Pada Widget Popular Posts

Pada kali ini kita coba oprek template di bagian sidebar pada widget "Popular Post", di mana kita hanya memanfaatkan widget yang telah di sediakan oleh blogger dengan menambahkan sedikit style agar tampak lebih keren ditambah sentuhan efek hover.

Langkahnya seperti berikut :
Login dulu ke bloger
Pilih Rancangan - > Edit HTML
Cari kode ]]></b:skin>
Tambahkan style di bawah ini di atasnya:

.item-title{
background:#123456;
text-align:left;
border-radius:3px;
font-weight: bold;
}
.item-snippet{
padding:3px;
border:3px solid #4F697E;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
.item-snippet:hover{
margin:0px;
padding:3px;
text-align:center;
border:3px solid #4F697E;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}

Save Template
Untuk warna background item-title bisa kita sesuaikan dengan template blog kita

Selamat mencoba, semoga bermanfaat..!

Read more..

Cara Pasang Page Scroller Back to Top / Down Onmouseover

Tombol yang biasa kita sebut tombol "back to top" sering kali kita jumpai di website / blog, yang fungsinya untuk memudahkan para pembaca artikel untuk melihat kembali bagian awal halaman / atas yang biasanya terletak di sudut kiri atau kanan bawah blog.

Pada kali ini saya akan mencoba berbagi tentang bagaimana cara memasang script "back to top" tersebut yang bukan hanya utuk scroll ke atas halaman saja, tetapi bisa secroll ke bawah juga dengan perlahan.

Script page scroller ini lumayan menarik juga, karena kita atau para pembaca cukup dengan menyentuh tombol ke atas / bawah yang terletak di sudut kanan bawah blog kita.

Untuk memasang script page scroller, seperti biasa kita Login dulu ke bloger - > Pilih Rancangan - > Edit HTML - > Copy script di bawah ini sebelum code </body>

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="UrlGambar" border="0"></a><br>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="Urlgambar" border="0"></a>
</div>
<script>
//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)
</script>

Silakan ganti UrlGambar dengan url gambar yang telah sobat siapkan.
Apabila menemui kesulitan dalam pemasangan script di atas, coba scriptnya di parse dulu di SINI .

Selamat mencoba, semoga bermanfaat..!

Read more..

Cara Mengatasi Tombol Reply Treadh Comment Tidak Berfungsi

View Source

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = feed;
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>

Read more..

Cara Membuat Halaman Untuk Followers

Pada postingan kali ini mungkin adalah cara atau hal yang tidak terlalu penting banget "kaya gak ada kerjaan saja..?!"

Mengingat demi kenyamanan para pengunjung yang datang ke blog kita, salah satu cara yang saya lakukan adalah dengan mengurangi beban pada loading blog.

Banyaknya gadget yang kita pasang, maka semakin berat beban loading blog kita dan salah satunya yang sering saya rasakan pada saat mengunjungi sahabat blog adalah gadget "Followers". Maka saya berkesimpulan dan mengambil tindakan untuk membuat sebuah halaman untuk gadget follower.

Sedikit kendala yang saya alami pada saat ingin mendapatkan code untuk gadget follower, karena pada saat mengunjungi google friendconnect sudah tidak ada "rupanya ketinggalan inforamsi" tentang layanan google friendconnect, padahal pada waktu itu (dulu..)saya sempat menggunakan beberapa gadget dari google friendconnect.

Mungpung masih sore ni..dan masih ada kopi sisa plus sebatang rokok, kita langsung saja ikuti caranya:

Klik kanan pada template blog kita
Pilih "View Page Source"

Kalau misalnya gadget follower yang ada pada blog kita beri nama "Followers", maka cari kode <h2 class='title'>Followers</h2> (gunakan F2 atau Ctrl+F untuk mempermudah pencarian)

Scroll terus ke bawah sampai menemukan kode seperti pada gambar :

Kode pada gambar di atas adalah script dari gadget follower blog kita yang akan kita pindahkan ke halaman
Yang digaris merah adalah ID follower blog kita, sebagai contoh yang saya dapatkan kode script gadget follower pada template blog ini adalah seperti di bawah :

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script>
<div id="div-7cugsvcv9pli" style="width: 100%;">
</div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";    
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";
skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "Arial";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-7cugsvcv9pli",
height: 260,         
site: "02061793851714173416",     
locale: 'en_GB' },
skin);
</script>

Buat sebuah halaman / page atau entri baru
Copy Paste kode di atas
Ganti kode ID dengan ID follower blog sobat yang telah sobat dapatkan tadi
Bila gadget follower kita pasang dengan cara menambahkan entri / posting baru, saya sarankan agar tanggal, bulan atau tahunnya di atur manual agar tidak tampil pada halaman depan.

"TERBITKAN ENTRI"
Lihat halaman, bagaimana hasilnya?

Selamat mencoba..!

Read more..

Cara Update Driver di DevID

Pada postingan kali ini saya akan mencoba berbagi sedikit pengalaman tentang meng-update driver Pc atau laptop dengan menggunakan jasa DevID, hampir sebagian besar update driver bisa kita temukan dan kita dapatkan di DevID dengan mudah.
Untuk mencari update driver menggunakan jasa dari DevID, tentunya kita harus tahu dulu ID driver yang ada di pc atau laptop kita dengan cara sebagai berikut :

Klik kanan pada menu "Start" pada pc / laptop
Plih My Computer -> Properties

Pilih menu Hadware
Klik Device Manager

Klik kanan pada driver yang mau kita update
Pilih Properties

Pilih menu Details untuk melihat ID driver
Di sini kita akan melihat ID dari driver yang akan kita update

Silakan copy ID driver (lingkaran merah) dengan menekan Ctrl+C
Kunjungi website DevID di sini
Paste ID driver tadi pada kotak Search
Klik Search untuk mencari driver

Hanya dalam hitungan detik saja kita akan menemukan beberapa update driver dari ID driver kita tadi
Silakan pilih / download driver untuk meng-updatenya.

Selamt mencoba, semoga bermanfaat!

Read more..