expr:class='"loading" + data:blog.mobileClass'>

dotblogspot Cara Membuat Vertical Slide Menu / Trigger Hover (Update)

Cara Membuat Vertical Slide Menu / Trigger Hover (Update) Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery


Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.
Vertical Sliding Panel mengggunakan jQuery .


Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D


Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery.
(1)



javascript - Combine hover and click functions (jQuery) ?.
(2)



Membuat Vertical Sliding Info Panel With JQuery.
(3)


Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}


Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>


Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


googlecode.com/files/jquery-1.3.2.js.
(4)

javascript - Jquery 1.3.2 error on Internet Explorer.
(5)


Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="panel">

<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Bisnis Online</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
</ul>
</div>

<div class="colright">
<h3>Ngemis Dollar Internet</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Surf!</a>


Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery selesai.).
Good luck!
»»  READMORE...

dotblogspot Membuat Link Blogroll Animasi Gulung (Update)

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget Membuat Tab Vanilla Slick jQuery

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:
Membuat jQuery Slick Tab.


Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya Tab Vanilla Slick.

Langkah Cara Membuat jQuery Slick Tab pada Blogger


Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

Membuat Tab Slick Di Blogger Menggunakan Java Script Jquery.
(1)



Membuat Tab View Menggunakan Efek Jquery.
(2)



Cara Membuat Tab View Blogger dengan JQuery.
(3)


Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}


Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>


Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


Cara Membuat Tab View (with jQuery).
(4)

Cara Menambahkan Tab View Pada Blogspot Template.
(5)


Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>


Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat hore! widget tab view slick jquery vanilla berhasil!,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.
»»  READMORE...

dotblogspot Membuat Back To Top Berefek (Smooth)

Bagaimana Membuat Back To Top / Kembali ke Atas pada Blogger?

Membuat Back To Top Berefek (Smooth)
Setelah beberapa waktu lalu sharing seputar bagaimana membuat link anchor back to top dalam satu halaman posting blog,dengan konsep yang sama namun dengan sentuhan jQuery (bahasa javascript) dapat kita ciptakan sebuah tombol back to top yang berfungsi untuk mempermudah pengunjung dalam melihat semua konten blog dalam halaman tersebut.

Biasanya,back to top button ini sangat berguna sekali untuk blog atau situs yang memiliki konten sangat panjang hingga memaksa pengunjung harus menggulung scroll window dalam melihat konten yang ada.

Nah,seperti yang sudah Pelajaran Blog terapkan,scroll back to top ini sobat dapat lihat di sebelah kanan bagian bawah saat scroll window sobat gulung ke bawah:
Membuat Tombol Back To Top


Dan saat ada eksekusi klik pada tombol backtotop tersebut maka membawa kita pada halaman atas dengan sedikit efek smooth (cari aja dengan google translate apa itu arti 'smooth' ya hihihi)

Langkah dan Cara Membuat Back To Top Button jQuery

Pertama,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar:

Membuat Back To Top ( kembali keatas) Dengan Smoothscroll.

Membuat Tombol Back To Top Menggunakan JavaScript.


Kemudian letakkan kode berikut,lalu simpan.Selesai.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
»»  READMORE...

dotblogspot Parse Tool

Alat Pengubah Kode Agar Tampil di Postingan

Bismillah - berhubung waktu yang semakin malam (chie),langsung aja ya gan,kali ini hanya informasi kecil seputar parse kode html.
Sekali lagi untuk penjelasan lebih detil,sobat baca dulu ya di artikel saya sebelumnya:
klik di
http://dot-blogspot76.blogspot.com/2010/11/menampilkan-kode-html-parse-kode-html.html

Saya kira sudah sangat jelas ya sob,yuk kita cari tahu bagaimana sih contoh script parse html code ini.
Penjelasan singkatnya,kita mencoba menerapkan script dari http://www.donatofurlani.it/ideas,yang kurang lebih fungsi dari script ini seperti parse tool yang sudah banyak kita tahu di www.blogcrowds.com.

Caranya hanya letakkan kode berikut diposting blog sobat dan publikasikan.
<center><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=315&h=200&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"> </script></center>

Sekarang lihat hasilnya ya,kurang lebih akan seperti ini gan:


Post-Code: code converter



Gadgets powered by Google



Script ini saya ambil dari http://www.donatofurlani.it/ideas
»»  READMORE...

dotblogspot Membuat Efek Loading

Bagaimana Membuat Efek Loading / 'Memuat' dalam Blogspot Blogger?

Dari tetangga sebelah sob,sekalian mo promosi blog sahabat di AkuPunya.Com,script ini sengaja kami ambil untuk sekedar berbagi trik dan tips membuat efek loading di blog.

Bentuk fisiknya sobat dapat lihat di SINI,saat sobat membuka halaman atau mengklik link posting misalnya akan ada efek menunggu atau istilahnya dengan 'animation loading page widget'.

Jadi sambil sobat menunggu konten blog tampil sempurna,widget ini akan tampil dengan gambar animasi yang telah disediakan dalam script.
Seperti yang telah AkuPunya.Com ciptakan,berikut bahan yang dibutuhkan:

1.Script dengan ekstention *.js,silakan lihat di:

http://tc.comze.com/js/preloadpage.js

2.Gambar yang akan tampil,disini adalah yang berformat *.gif yang beralamat di:

http://lh3.googleusercontent.com/-kcn5J_HBL0k/TjwQzEsyEAI/AAAAAAAAAcw/fyuDdV9NDmU/ajax-loader.gif

Tampilan akan seperti ini (gambar ini akan tampil jika yang bersangkutan masih mengabadikannya pent-):

Membuat Efek Loading


3.Langkah dan caranya.

Langkah dan Cara Membuat Efek Loading Blog dari AkuPunya.Com

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).

Lihat Gambar ya :D

Membuat Loading Blog mengggunakan jQuery.
(1)


Efek Loading Blogger.
(2)


Cara Membuat Efek Loading Blogspot.
(3)


Nah,selanjutnya cari kode <head> (Gunakan Ctrl+F),setelah ketemu sob,tepat dibawahnya letakkan kode berikut:

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>


Setelah itu,cari lagi kode <body>,setelah ketemu hapus kode tersebut dan ganti dengan kode ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>


Simpan dan lihat hasilnya :D
»»  READMORE...

dotblogspot GAMES Versi 1.0


GAMEZ adalah sebuah software yang berfungsi untuk membantu manajemen dan pendataan sebuah rental PC games.Di dukung dengan user interface yang sangat user friendly.Dengan adanya fitur penambahan cover game akan mempermudah dalam pengorganisiran ataupun pengelompokan game berdasarkan genre tertentu.Dan tentunya akan mempermudah dalam pencarian game yang dimaksud


Fitur :

- Pendataan game yang disertai dengan cover
- Pendataan data anggota
- Laporan penyewaan dan penghasilan bulanan








Minimum Requirements :

- Windows XP/Vista/Windows 7
- Prosesor Intel Pentium 4 2.0 Ghz
- 256 MB RAM
- Video Adapter 128 MB
- 200 MB free harddisk

»»  READMORE...

dotblogspot SiMARDi Offline Versi 4.0


SiMARDi Offline adalah sustu program yang berfungsi untuk mengolah data Arsip Dinamis, menciptakan perekaman data surat masuk dan keluar, membuat DPA (Daftar Pertelaan Arsip), membuat Lembar Disposisi dan Kartu Kendali secara otomatis, Menetapkan Arsip Permanen, Arsip Musnah dan Arsip Dinilai Kembali, Merekam data akusisi arsip, mengatur Jadwal Retensi Arsip secara otomatis dan proses dijalankan secara periodik, Membantu proses manufer arsip, merekam data penyusutan arsip, memberikan pelayanan informasi arsip (penemuan kembali arsip).




Daftar Klien :
  1. Kantor Arsip dan Perpustakaan Daerah Surakarta
  2. Kantor Arsip dan Perpustakaan Daerah Klaten
  3. Kantor Arsip dan Perpustakaan Daerah Karimun
  4. Pemerintah Kota Surakarta
  5. Badan Arsip Dan Perpustakaan Daerah Jateng
  6. Rumah Sakit Ibu dan Anak Nanggroe Aceh Darussalam
  7. Rumah Sakit Jiwa Surakarta
  8. Pemerintah Provinsi Nanggroe Aceh Darussalam
  9. Pemerintah Kotamadya Banda AcePemerintah Kabupaten Jepara
  10. Pemerintah Provinsi Kepulauan Riau
  11. Pemerintah Kabupaten Tarakan







Minimum Requirements :
- Windows XP

- Prosesor Intel Pentium 4 2.0 Ghz
- 256 MB RAM
- Video Adapter 128 MB
- 200 MB free harddisk



JARINGAN INFORMASI KEARSIPAN DINAMIS


Para pengelola kearsipan di Indonesia, kami ingin memperkenalkan Aplikasi Kearsipan untuk membantu sistem pengelolaan arsip dinamis khususnya terhadap pengolahan arsip-arsip di lembaga Pemerintahan. Kita ketahui bahwa hampir di seluruh SKPD/Institusi Pemerintah mengalami kendala dalam pengelolaan kearsipan secara tertib dan baik. Hal ini dapat dimaklumi bahwa hal tersebut juga disebabkan keterbatasan dalam penyediaan SDM di bidang kearsipan, atau minimnya minat para pegawai yang ingin menjadi pengelola kearsipan, dari sisi lain juga bahwa adanya keterbatasan penyelenggaraaan bintek kearsipan bagi SDM yang diberikan tanggung jawab untuk mengolah kearsipan. 


Hal ini secara general akan berakibatkan terhadap kinerja di bidang kearsipan pada kegiatan penyerahan arsip-arsip SKPD ke Lembaga Kearsipan selalu dalam bentuk arsip kacau. Hasil analisa kami di lapangan bahwa arsip-arsip yang tercita dalam satu hari saja berjumlah ribuan arsip, sedangkan arsip-arsip tersebut tidak dikelola dengan baik sesuai dengan standar kearsipan...... JIKA arsip-arsip tersebut tidak diserahkan sesuai dengan retensinya sudah pasti seluruh arsip-arsip tersebut akan menjadi penuh, dan akan mengalami pengasingan lokasi penyimpanan. Atau jika semua SKPD secara serentak menyerahkan arsip-arsipnya ke Lembaga Kearsipan secara kacau maka tidak dapat kita bayangkan bahwa SDM pengelola kearsipan yang tersedia di LKD (Lembaga Kearsipan Daerah) akan mengalami stresssss...... 


Secara logika bahwa kesanggupan seseorang dalam mengolah arsip hanya mampu sebanyak 50 arsip dalam 1 harinya, di saat proses pengolahan dilaksanakan apakah kita tidak dapat mengira2-ngira bahwa arsip yang bakal tercipta akan mengalir cukup derasnya. Maka dengan demikian lambat laun para pengolah di LKD akan tertimbun dengan arsip-arsip tersebut. Pandangan yang sederhana ini kami ingin mengajak seluruh elemen yang terkait dalam pengelolaan kearsipan harus secara bijak untuk segera menerapkan tekonologi di dalam pengolahan arsip-arsipnya.




Untuk mendownload Klik Disini (28,35 MB)
»»  READMORE...

dotblogspot Cara Membuat Sendiri Browser Gecko / Mozilla 11 Dalam VB.NET

Software House Production - Dalam postingan saya sebelumnya di Foxware Browser - Browser Dengan Kemampuan Powerfull saya share sebuah brower Foxware buatan saya yang dibangun dengan engine Gecko / Mozilla 11. Program untuk membuatnya bisa memakai VB.NET maupun C#. Sebab engine gecko berjalan multi platform. Nah kali ini saya ingin membagi tutorial bagaimana cara membuat sendiri browser mozilla memakai VB.NET


Untuk membuat sendiri browser mozilla sobat harus mempunyai control bernama geckofx-11.dll dan file pendukung bernama xulrunner. Tanpa kedua file tersebut, tidak mungkin akan tercipta sebuah browser. Untuk file geckofx-11.dll bisa sobat download disini. Dan untuk file xulrunner 11 bisa sobat download disini. Setelah sobat mendownload kedua file tersebut silakan ikuti langkah - langkah mengintegrasikannya dengan VB.NET

1. Buat project baru di VB.NET sobat
2. Lalu drag toolbox / componen ToolStrip untuk membuat tombol navigasi. Silakan atur sesuka hati


3. Lalu tambahkan control geckofx-11 dengan memilih pada salah satu toolbox componen. Lalu klik kanan > Choose Items


4. Dalam Tab .NET Framework Componen silakan tekan Browse. Lalu cari file geckofx-11.dll yang sudah sobat download tadi. Maka componen GeckoWebBrowser akan ditambahkan. Akhiri dengan menekan tombol OK


5. Lalu drag componen GeckoWebBrowser yang sudah ditambahkan tadi ke dalam project sobat. Selanjutnya dalam Poperties GeckoWebBrowser, atur Dock menjadi Fill


6. Lalu pada Solution Explorer tekan double klik pada My Project. Lalu tekan tombol View Application Events


7. Lalu masukkan coding sebagai berikut :

Imports System.IO
Imports Gecko
Namespace My
    Partial Friend Class MyApplication

        Protected Overrides Function OnStartup(ByVal eventArgs As Microsoft.VisualBasic.ApplicationServices.StartupEventArgs) As Boolean

            Dim FoxwarePath As String = System.Reflection.Assembly.GetExecutingAssembly.Location
            Dim ProfileDirectory As String = FoxwarePath.Substring(0, FoxwarePath.LastIndexOf("\") + 1) & "\FoxwareCache\xulrunner\DefaultProfile"


            If Not Directory.Exists(ProfileDirectory) Then
                Directory.CreateDirectory(ProfileDirectory)
            End If
            Xpcom.ProfileDirectory = ProfileDirectory

            Dim xrPath As String = System.Reflection.Assembly.GetExecutingAssembly.Location
            xrPath = xrPath.Substring(0, xrPath.LastIndexOf("\") + 1) & "\xulrunner"
            Xpcom.Initialize(xrPath)

            Return True
        End Function
    End Class
End Namespace

Lalu lanjutkan dengan menyimpan project sobat

8. Lalu tinggal sobat explorer file xulrunner sdk yang sudah sobat download tadi. Ambil folder bin lalu ganti nama menjadi xulrunner. Lalu copykan satu folder xulrunner tadi ke bin\debug pada project sobat



Welldone...kini sobat sudah bisa mengintegrasikan browser Mozilla pada VB.NET. Selanjutnya tinggal tambahkan coding - coding yang diperlukan agar dapat menjadi suatu browser yang utuh. Next tutorial akan dibahas cara menambahkan coding - coding lainnya biar makin keren. OK, sob Selamat Belajar!!
»»  READMORE...

dotblogspot Trik Mempercepat Koneksi Internet Dengan Netscream

Software House Production - Ada banyak cara untuk mempercepat koneksi internet yang lelet. Dari yang memakai software maupun oprek hardware. Pada kesempatan kali ini saya ingin membagi tips bagaimana cara mempercepat koneksi internet dengan memakai tool Netscream.


Netscream mempunyai fungsi untuk mentweak koneksi internet sobat, baik yang memakai modem ataupun adsl. Seperti yang kita ketahui bersama, windows membatasi 20% pemakaian bandwith internet. Nah dengan memakai Netscream maka limitasi tadi akan dihilangkan. Tool ini juga mampu mentweak MTU,HTTP Caching dan seting lainnya di dalam registry. Saat menjalankan tool ini, Netscream akan mencari konfigurasi yang tepat untuk perangkat yang sobat pilih.


Setelah saya test dan saya coba, kecepatan koneksi lumayan cepat dan sudah tidak lemot lagi. Itupun saya padukan dengan seting OpenDNS dari 208.67.220.220 - 208.67.222.222. Sooo...lumayanlah kecepatan dibandingkan sebelum memakai Netscream

Penggunaannya pun sangat mudah. Pastikan sobat tidak terhubung internet saat menjalankan tool ini

1. Jalankan Netscream
2. Masukkan serial yang saya sertakan
3. Pilih seting sesuai dengan hardware dan koneksi sobat
4. Pada Speed Setting geser ke Fastest. Akhiri dengan menekan tombol GO

Maka Netscream akan mencari dan memilih konfigurasi yang tepat sesuai dengan hardware dan koneksi sobat. Setelah selesai, restart terlebih dahulu komputer agar seting disimpan. Silakan lihat perbedaannya sebelum dan sesudah memakai Netscream

Semoga tutorial ini sedikit membantu sobat yang mempunyai koneksi lemot. Dan semoga cara mempercepat koneksi internet ini berguna bagi sobat. Selamat mencoba

»»  READMORE...

dotblogspot Pembayaran Kedua Dari Ramabux

Software House Production - Setelah sebelumnya situs ramabux sempat down, kini situs ramabux sudah bangkit lagi. tepat hari ini saya dibayar untuk kedua kalinya dari ramabux. ramabux adalah situs yang memadukan segala jenis periklanan mulai dari PTC, PTSU dan lainnya.


Meskipun pembayarannya kecil, tapi ini sudah membuktikan bahwa ramabux selalu konsisten dalam membayar para membernya. Dan sebenarnya proses pembayarannya juga cukup cepat. Tapi karena kemaren sempat down, maka pembayarannya agak sedikit tertunda

Berikut screenshoot bukti pembayaran dari ramabux


Nah...dengan bukti screenshoot ini semoga sobat makin tertarik dalam mendalami bisnis periklanan. Ayoo...buruan DAFTAR DISINI. Mumpung situs ini masih terpercaya. Sukses selalu untuk anda
»»  READMORE...

dotblogspot Cara Membuat Sub Menu Navigasi Ber-Gambar

Navigasi Menu Box dengan Gambar


Sama seperti halnya membuat menu navigasi horizontal dengan sub menu vertikal pada posting beberapa waktu lalu,namun kali ini hanya merubahnya dalam bentuk sebuah sub menu bergambar dari menu navigasi pada blog dari www.blogger.com.
Pada dasarnya,kita hanya menyelipkan sebuah image / obyek gambar yang ingin ditampilkan sebagai pengganti tulisan dalam link-link yang ada dalam sub menu navigasi.
Hasilnya akan seperti ini (arahkan mouse pointer pada box menu dibawah ini:





Dengan demikian hal ini kita masuk dalam sesi menghias blog (tumben nih penulis pake bahasa formal,takut dibaca ma presiden RI ya,:p) hehe

Jika hanya mengombinasikannya dengan artikel 'membuat menu navigasi' yang lalu,hasil yang akan kita dapat tidak akan sesuai dengan apa yang kita inginkan,ini karena pengaturan jarak,background dan lebar serta tinggi dari box menu akan berbeda.

Berikut penjelasan lebih rincinya,dan dari cara ini nanti sobat dapat menenetukan dan memodifikasinya sendiri sesuai dengan selera masing-masing.

Langkah Membuat Sub Menu Navigasi dengan Bergambar


Pertama,sobat tentukan dahulu gambar yang akan ditampilkan dalam sub menu navigasinya,ini dapat dilakukan dengan dua cara dan sobat bisa pilih cara mana yang mudah bagi agan-agan,yakni:

1.Membuat gambar dengan software semacam dreamweaver,lalu upload gambar ke posting untuk mendapatkan url alamat dari gambar tersebut.

2.Bisa menggunakan gambar yang sudah ada yang sobat inginkan,misal dari hasil pencarian gambar di Google (tapi cara ini tidak efektif,karena saat situs yang kita ambil url obyek gambarnya sudah mengahapus obyek mereka(yang kita ambil url-nya) otomatis gambar di blog milik kita juga akan terhapus.

Dari dua langkah diatas,saya misal pilih no 1,dengan cara,saya punya gambar yang ada di komputer saya lalu saya upload ke posting setelah itu klik kanan pada gambar dan pilih 'view image' dan kita sudah dapat url gambar tersebut dan lakukan copy.

Kita sudah mendapatkan url dari alamat gambar (facebook button) yang ingin kita tempatkan pada submenu navigasi nantinya,yakni:

http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG

Nah setelah itu,jika sobat menginginkan lebih dari satu gambar lagi dalam submenu(yang kami pakai dalam artikel ini adalah dua gambar),sobat bisa lakukan dengan langkah seperti cara diatas,misal saya ingin menambahkan gambar url dari twitter button pent-),dan saya telah mendapatkannya yakni:

http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG

Dari langkah pertama ini kita sudah mendapatkan dua url gambar yang nantinya akan kita tempatkan pada submenu navigasi.

Kedua,seperti pada membuat menu navigasi horizontal dengan submenu vertikel di posting beberapa waktu lalu,kita akan menggunakannya dengan cara yang sama,ikuti langkah selanjutnya ya sob:



  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Menu Navigasi Sub Menu.
    Gb.1

  • Selanjutnya pilih tab Edit Html (Gb.2).

    Cara Membuat Menu Navigasi Horizontal dengan Sub Menu.
    Gb.2

  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Menu Navigasi Css SubMenu.
    Gb.3

  • Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.

    #NavbarMenu{background:#ffffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; text-transform:capitalize border-bottom:1px solid #666;}
    #NavbarMenu{width:700px; float:left; margin:0; padding:0;}
    #search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
    #nav{margin:0; padding:0;}
    #nav ul{float:left; list-style:none; margin:0; padding:0;}
    #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
    #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:capitalize; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
    #nav li a:hover, #nav li a:active{background:#ffffff; color:#fff; padding:9px 15px 9px; text-decoration:none;}
    #nav li li a, #nav li li a:link, #nav li li a:visited{background:#222222; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia,;}
    #nav li li a:hover, #nav li li a:active{background:#ffffff; color:black; padding:3px 10px;}
    #nav li{float:left; padding:0;}
    #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
    #nav li ul a{width:140px;}
    #nav li ul ul{margin:-24px 0 0 170px;}
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
    #nav li:hover, #nav li.sfhover{position:static;}

  • Setelah itu Simpan Templates.
  • Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
  • Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)

    Menu Navigasi Dengan Sub Menu Blogger.
    Gb.4

    Cara membuat menu navigasi horizontal dengan sub menu vertikel.
    Gb.5

  • Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.

    <ul id='nav'>
    <li><a href='http://nama_blog_anda.blogspot.com/' title='Home'>Home</a> </li>
    <li><a href='http://nama_blog_anda.blogspot.com/'>Join Us</a>
    <ul>
    <li><a href='http://id-id.facebook.com/pages/Pelajaran-Blog/289839067320' title='Facebook'><img alt='facebook' height='100%' src='http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG' title='facebook' width='100%'/></a> </li>
    <li><a href='http://twitter.com/mrpujiajadeh' title='Twitter'><img alt='twitter' height='100%' src='http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG' title='twitter' width='100%'/></a> </li>
    </ul> </li>
    <li><a href='#' title='Other'>Other</a> </li>
    </ul>

  • Lalu simpan,selesai dan lihat hasilnya :D
»»  READMORE...
Related Posts Plugin for WordPress, Blogger...