 |
| Logo Skylibkac |
Tampilkan postingan dengan label Tips & Trik Komputer. Tampilkan semua postingan
Tampilkan postingan dengan label Tips & Trik Komputer. Tampilkan semua postingan
Sabtu, 23 Mei 2015
Selasa, 19 Mei 2015
Cara Buat Fitur Slideshow di Blogspot Otomatis Publish Artikel Lebih Profesional
 |
| Slide Show Feature |
Skylibkac, Salah hangat untuk kita semua sahabat blogger. Kali ini kita akan membahas bagaimana cara membuat fitur slideshow untuk blog kita agar terlihat lebih menarik dan makin profesional. Tips ini sangat bermanfaat bagi mereka untuk para web developer agar web teman - teman tampil lebih menarik lagi sekaligus dapat meningkatkan interaksi bagi para penggunjung/ visitor. Kenapa demikian? karena fitur ini disediakan otomatis publish artikel yang telah kita atau teman - teman buat langsung tampil dislideshow. Berikut cara/ tips untuk membuat fitur slideshow diblog.
- CSS untuk Slider
Copy dan pastekan kode CSS ini tepat diatas ]]></b:skin> atau </style> pada templete kalian.
.easyslider-wrapper {
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 100%;
height: 350px;
background: #eee;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {
float: left;
width: 20%;
height: 350px;
}
.paging {
background: none;
position: absolute;
bottom: 15px;
right: 20px;
padding:4px 0 2px;
z-index: 100;
display: none;
}
.paging a {
margin: 3px;
background: #fff;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
}
.paging a.active {
background: #15E3FF;
border: 1px solid #15E3FF;
}
.paging a:hover { }
.easytitledes {
width:70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background: rgba(2, 0, 51, 0.6);
padding: 10px 15px;
}
.easytitledes a {
color: #15E3FF;
font: 14px sans-serif;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#29FF00
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}
- JQUERY
Berikutnya masukkan kode jquery ini tepat diatas </head> pada templete teman - teman.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
- JavaScript
Masih pada bagian yang sama pada templete teman - teman, masukkan kode JavaScript dibawah ini tepat diatas </head>
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".easytitledes").stop(true,true).slideUp('slow');
$(".easytitledes").eq(
$('.paging a.active').attr("rel") - 1 ).slideDown("slow");
$(".image_reel").animate({left: -image_reelPosition}, 400 );
};
rotateSwitch = function(){
$(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first'); } rotate(); }, 4000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
clearInterval(play); }, function() { rotateSwitch();
});
$(".paging a").click(function() { $active = $(this);
clearInterval(play); rotate(); rotateSwitch(); return false;
});
});
</script>
- Otomatis Publish Artikel Slideshow
Berikut kode inilah yang membuat postingan artikel kita bisa langsung tampil dislideshow yang telah kita/ teman - teman rancang barusan. Copy dan pastekan kode dibawah ini
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPYHxeFu93VSSfFhH4W-ip6ctxF1n-6H2F-bNPTaGM5WhmrM-gKh6qKi9GJaoM4FzRmFUzZj9VB4DIgBdqFxXNJHHcTC4YLam2DMXcJfSN7HPRjZYNLLouB9oASEFa84mL7YzfYYu1lU/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;}
function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }}
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>
- HTML dan JavaScript
Lalu tambahkan kode dibawah ini tepat diawah <div class ="main-wrapper"> atau yang serupa.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
<div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>
Kode yang diblock merupakan koding agar foto slideshow kita hanya tampil pada homepage saja.
kode diblock merupakan trik cara menyembunyikan atau menampilkan elemen pada halaman tertentu dynamic. Setelah itu save templete anda maka sudah jadilah cara membuat fitur slideshow agar tampilan lebih profesional. Untuk Demo bisa diklik saja.
Summary: Cara agar web tampil lebih profesional dengan kapasitas yang ringan sehingga tidak mengganggu performance loading dari blog dengan beberapa penambahan koding CSS, HTML, JQUERY dan JavaScript.
Minggu, 03 Mei 2015
Cara Buat Widget Contact Us Lebih Menarik
Skylib, Cara Buat Widget Contact Us Lebih Menarik - Kali ini saya akan membahas bagaimana cara membuat form "Contact Us" jauh lebih menarik bawaan widget blog untuk dicustom dan diletakkan dihalaman static. Kenapa menggunakan widget bawaan blog?? tentunya akan mempercepat loading blog itu sendiri baik secara teknis. Tentu sahabat pembaca ingin tetap menjaga performance blog anda bukan. Oke tidak perlu lama lagi, berikut cara pembuatannya.
Langkah Pertama:
Masuk ke Layout/ pilih add a Gadget/ cari Contact Form
 |
| Layout Form Contac Us Pic 1.0 |
Widget ini nanti akan kita sembunyikan atau hidden dan yang perlu diingat jangan dihapus widget ini karna bisa menyebabkan tidak berfungsi nantinya.
Langkah Kedua:
Buat halaman baru atau new page pastekan kode dibawah ini dihalaman baru tadi
<div id="contact_wrap">
<h3>
Hubungi Kami</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
Langkah Ketiga:
Untuk Mempercantik tampilan Contact Form pastekan kode CSS berikut ini di atas ]]></b:skin> teknik ini sekaligus akan menyembunyikan widget Contact Form maksudnya hanya tampil dihalaman static saja yang telah kita tentukan tadinya.
/* CSS Contact Form Light Theme */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXh6FwJPw0Qclg0Q8FVvFFxcPLnxhGgkuU8WqamHdxiAEFCnUlnCp-PuSrqnaES7a-YIQBy8JhHYVZy1aGzR6UZl7DbmRahyphenhypheniCL-HZcj-MAFZ5dhbkGj5E4u_lr3JAD92YmvpjPedCNsY/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDk9k_UuuOkyhsbT4XLEW7S1gPPL0cGx3fhh3pnnLyckpNE4D_OjugD5ng6WExkQObfn4MpTYjP3zZtQOKaAoLo3X1yQDy_HjJ740NfJJz_Y1PMdXCQkAxAJfheYh58VVTMfIwrKjGRo/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwtxmsG_z3P-w1YBYyJDZ7pAzxqkq03rtnNA7BY1lb_olLtZ_IbeizI05M0ib4dqorFEXeuf4VVOcvfiml0Sn70CMhsI0wmN-7aYzGhED1dia7AlRSKICCjLAjYT0ffqV_4Zv9eewleVY/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
Save templete anda dan selesai sudah pekerjaan hari ini. Itu cara mempercantik widget contact form agar terlihat jauh lebih menarik. Untuk Demo bisa dilihat di sini.
Rabu, 11 Maret 2015
Cara BackUp Restore Database PostgreSQL dengan Command Prompt
Skylib, Cara BackUp Database PostgreSQL Dengan Command Prompt - Membahas database tidak lepas dari yang namanya backup dan restore tujuannya untuk mengamankan data kita jika terjadi masalah dalam program database ataupun melakukan migrasi database lama ke baru khusunya bagi yang menggunakan Postgre. Kali ini penulis akan menjelaskan proses backup dan restore dengan menggunakan command prompt, just simply.
Proses Backup Pertama, panggil aplikasi command prompt (CMD) lalu masuk ke direcktori postgre tempat pada folder bin dengan menggunakan CMD. Lihat gambar dibawah ini
 |
| 1.1 Directory Postgre Folder Bin |
Lalu lalu untuk melakukan backup ketikkan perintah pg_dump -U NamaUser NamaDatabase > c:\ (lokasi penyimpanan file yang anda tentukan). Lihat gambar dibawah ini kalau dalam gambar penulis menyimpannya di directory c:\
 |
| 1.2 Printah BackUp |
Setelah itu tekan enter dan isikan yang menjadi password anda. File backup ada pada lokasi yang telah anda tentukan sebelumnya.
Untuk proses backup sangat mudah bukan?
Berikut proses Restore tetap di directory Postgre folder bin masukkan perintah psql -U postgres -d NamaDatabaseTujuan < c:\ (lokasi file backup)
 |
| 1.3 Restore File |
Lalu tekan enter dan masukkan yang menjadi password anda.
Itulah proses backup dan restore pada database postgreSQL. Terima kasih kunjungannya semoga bermanfaat buat anda.
[Sumber]
[Sumber]
Kamis, 20 Maret 2014
Implementasi Barcode Project di Adempiere
'Skylib, Barcode Project di Adempiere - Tutorial ini saya dapat dari blog seseorang yang telah menolong problem saya beberapa waktu lalu tentunya dia lebih berpengalaman dari saya. ok tidak perlu lama lagi kita masuk ke topik yang mana akhirnya dirumuskan bagian mana yang akan di masukkan sistem barcode. Yaitu bagian 1. Input barang produksi (Material Receipt), dan 2 Bagian cek/loading barang untuk pengangkutan (cek shipment).
Dengan base Adempeire 342 maka solusi-solusinya adalah:
1. Barcode untuk Material Receipt
Pada Adempiere 342 sudah support penggunaan barcode. Sejatinya barcode scanner hanya tools untuk membaca barcode dan mengetikkan pada cursor saat itu. Maka kita tinggal set UPC/EAN dengan string barcode.
 |
| UPC/EAN di input sesuai dengan kode barcode nya |
Lookup product menggunakan empat kolom untuk searching, yaitu: Value, Name, SKU, dan UPC.
 |
| Code lookup product. Terlihat menggunakan 4 field untuk searching |
Dengan mengeset UPC maka tinggal cursor kita arahkan pada field product ketika input material receipt line, kemudian kita tembakkan scanner ke barcode, maka product akan terinput. Hal ini juga berlaku pada form-form lain yang menggunakan lookup Product seperti Order, dan Invoice.
2. Cek Input Loading
Nah sekarang modul cek barang waktu loading. Jadi ceritanya saat menaikkan barang ke truck, di cek menggunakan barcode scanner. Banyak model yang bisa digunakan, misalnya digunakan seperti ship/receipt confirmation. Namun saya putus kan membuat form baru dengan mencontoh form create line form pada saat membuat Material Receipt dari Invoice.
 |
| Tampilan Form baru Input Loading |
Dalam form baru ini ada field Business Partner dan Locator. Proses input loading memang tidak berdasarkan nomor Shipment, namun berdasarkan Business Partner (Customer). Sedangkan locator hanya sebagai pelengkap karena secara default shipment hanya dilayani oleh satu gudang. Untuk keperluan ini diperlukan beberapa tambahan tabel yaitu: M_Loading dan M_LoadingLine. M_Loading akan berisi Business Partner, Locator, Nomor Loading digunakan sebagai nomor document transaksi loading, dan Tanggal Loading yaitu tanggal saat itu. Sedangkan M_LoadingLine berisi Qty loading, Product, dan ShpmentLine.
Kemudian pada tabel M_InOutLine ditambahkan field isBarcodeChecked untuk menyimpan status MInoutLine yang artinya line sudah terkirim semua dan BarcodeCheckedQty yang digunakan untuk menyimpan total qty yang telah terkirim.
Proses pada form ini pertama adalah mengisikan business partner kemudian locator dan nomor loading. Untuk semetara nomor loading diisikan sembarang. Kemudian masukkan qty barang yang akan di scan barcode dan enter, maka cursor akan aktif pada field barcode. Lakukan scan maka otomatis data masuk pada grid dibagian bawah. Setelah input pertama maka field business partner, locator, serta nomor loading akan readonly. Jadi maksudnya kita lakukan terus scan barcode sampai proses selesai. Setelah selesai tinggal tekan tombol dibawah yang akan menutup proses input pada nomor loading tersebut.
Selain itu diperlukan juga print format yang dapat menampilkan barcode dari produk-produk yang ada. Di adempiere 342 sudah support print barcode, namun ada "bug" nya, yaitu printnya terlalu besar. Tidak bisa dikecilkan via setting di printformat item. Setelah dicoba-coba akhirnya saya berhasil mengecilkan barcode yaitu dengan menset barwidth menjadi 1.
 |
| Update code agar ukuran barcode kecil. |
 |
| Contoh hasil cetak barcode tipe code-128 |
Untuk mendapatkan file-file class baru serta SQL perubahan data bisa didownload dibawah ini:
[ Sumber ]
Rabu, 05 Februari 2014
Cara Menjalankan Aplikasi Adempiere di Eclipse
'Skylib, Cara Menjalankan Aplikasi Adempiere di Eclipse- Selamat malam sobat kali ini saya akan sharing tentang menjalankan system integratis Adempiere di Eclipse seperti yang terlihat dijudul tidak perlu lama lagi berikut tutorialnya:
Pertama, jalankan program/ aplikasi eclipse anda
Kedua, pindah ke menu Run lalu pilih Run Configurations. Lebih jelas lihat gambar
Ketiga, Setelah itu pada tab main klik New Launch Configuration lalu isikan Name dengan nama Adempiere, Project adempiere_360 merupakan source code dari Adempiere dan Main Class dengan nama org.compiere.Adempiere terakhir klik Apply untuk lebih jelas lihat gambar.
Keempat, pindah ke tab Arguments lalu pada kolom VM arguments isikan dengan
-DPropertyFile="C:\Adempiere\Adempiere.properties"
-DADEMPIERE_HOME="C:\Adempiere"
kode diatas merupakan source folder Adempiere ditempat yang anda simpan lalu klik apply dilanjutkan dengan close terlebih dahulu. Lihat gambar untuk lebih jelas
Kelima, atau langkah terakhir kembali klik Run lalu klik Run Configurations pilih program yang kita buat tadi lali klik Run dengan sendirinya aplikasi adempiere akan berjalan dan biarkan beberapa saat. Itulah langkah dalam menjalankan aplikasi adempiere di Eclipse selamat mencoba.
Selasa, 21 Januari 2014
Cara Memperbaiki Tab Title Page
 |
| Tab Title Page |
'Skylib, Memperbaiki Tab Title Page - Salam sobat sekalian salam sejahtera untuk kita semua. Kali kita akan membahas bagaimana cara memperbaiki Tab Title Page seperti yang ada pada gambar diatas, dimana gambar Before tidak menunjukkan judul page yang sedang dibuka tetapi setelah diperbaiki akan menjadi gambar yang bertuliskan After. Barang kali ada sobat - sobat menghadapi hal yang sama berikut tutorial/ caranya;
- Pertama seperti biasa login ke blog sobat setelah itu masuk ke Template lalu masuk lagi ke Edit HTML.
- Kedua setelah itu akan banyak sekali script dan sobat tidak perlu pusing cari saja kode < Head > lalu pastekan kode dibawah ini tepat dibawah kode < Head > tersebut.
<title>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<data:blog.title/>
<b:else/>
<data:blog.pageName/>
</b:if>
</title>
- Ketiga atau langkah terakhir klik Save Template.
Sekian cara memperbaiki Tab Title Page yang tidak sesuai dengan judul page yang kita buka, semoga tutorial ini dapat membantu masalah sobat yang sedang menghadapi hal serupa. Salam sejahtera untuk kita semua.
[ Sumber ]
Kamis, 09 Januari 2014
Cara Buat Komentar Facebook Dan Blog Bersebelahan
 |
| Cara buat komentar facebook dan blog bersebelahan |
Login Blog anda lalu pilih Template >>> Edit HTML setelah itu mulai dari langkah pertama simak ya.
Pertama cari kode ]]></b:skin> lalu letakkan source berikut diatas kode ]]></b:skin>
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='egon.novsky' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
Ketiga atau langkah terakhir cari kode <div class='comments' id='comments'> lalu letakkan source berikut dibawah kode <div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfM1Wd1itcmIxkbYb47TMKmC9qH8HyK0fxk4f2CbBKOCO8dTFeWgqditlejm3Z9o3C2uMCuIrRpxaf-7htgRZcrI9K_5HTCMIKQ07LfZDUAofWv4AwWs056WlHZo7x5RFIogA7rPmvBk/s200/favicon.ico'/><data:post.numComments/>Comments</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
[ Sumber ]
Kamis, 02 Januari 2014
Cara Membuat Icon Blog Profesional
 |
| Membuat Icon Blog Profesional |
- Pertama masuk ke web www.tools.dynamicdrive.com tujuannya untuk mengconvert gambar kita menjadi ".ico" kemudian untuk mengconver lihat gambar dibawah ini
 |
| tools.dynamicdrive |
- Kedua klik "Download FavIcon" ( hasil dari convert gambar tadi )
- Ketiga upload gambar yang tadi didownload ".ico" ke hosting kemudian klik kanan gambar lalu klik "copy link address"
- Keempat copy script berikut: <link rel="shortcut icon" type="image/x-icon" href="paste copy link address tadi"></link> pastekan diatas <b:skin>
[ Sumber ]
Sabtu, 09 November 2013
Cara Menghilangkan Desktop.ini Pada Saat Start Up
Kasusnya:
LocalizedResourceName=@%SystemRoot%\system32\shell32.dll,-21787 ( Ini yang muncul pada saat start up windows )
Solusinya:
1. Setting semua file agar semua file yang tersembunyi dapat terihat semua caranya masuk ke my computer atau computer lalu pilih Tools >>> Folder Options >>> tab view hilangkan tanda centang pada Hide protected operating system files ( recomended ).
Cara diatas hanya untuk menampilkan file desktop.ini agar muncul difolder yang akan kita tuju agar kita delete permanen ( sikap bengis ), hehehehehe. Untuk menghapusnya perhatikan step berikut ini. Masuk ke folder C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup. Didalam folder tersebut kamu akan menemukan file desktop.ini ( dalam bentuk notepad ), tanpa ragu langsung delete saja file tersebut.
Setelah itu buka folder C:\Users\USERNAME (bisa saja User bisa juga nama dari laptop kalian) \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup. Didalam itu juga akan menemukan file desktop.ini langsung delete saja jangan ragu. Selesai deh file tersebut tidak akan muncul lagi pada saat windows melakukan booting. Restart komputer kamu dan tentu saja sudah pasti tidak akan muncul lagi karena saya sudah coba dan work 100%. Cara ini hanya untuk windows 7 dan windows XP.
Semoga tips ini dapat membantu buat temen - temen pembaca sekaliam. Salam sejahtera untuk kita semua.
Cara Melihat File Yang Disembunyikan Virus Dengan CMD
.jpg)
'Skylib, Cara Melihat File Yang Disembunyikan Virus Dengan CMD - Salam sejahtera sobat pembaca semua kali ini saya mau membagikan tips cara untuk melihat file yang disembunyikan oleh virus - virus nakal. Cara ini cukup efektif karena saya pernah membantu orang kantor di gereja saya karena terjadi masalah tersebut. Maksudnya si kalau bisa bantu kenapa tidak apalagi kita tahu cara mengatasinya. Hitung - hitung beramal buat sesama :). Ok tidak perlu lama lagi berikut caranya:
1. Open CMD; Start/ Run/ ketik CMD
 |
| Start |
 |
| Run |
 |
| CMD |
2. Bekerja dengan CMD; Setelah layar CMD tampil baru kita bersiap untuk menampilkan file kita yang disembunyikan oleh virus - virus nakal tersebut. Dengan cara mengetik attrib -r -h -s /s /d lalu Enter. Biarkan beberapa menit karena sedang melakukan proses. Boom Boom Boom akhirnya file yang disembunyikan terlihat sudah bahkan kalau dilakukan secara cermat virusnya pun bisa terlihat. hehehehe.
nanti file yang disembunyikan oleh virus terlihat agak transparan seperti gambar dibawah ini
 |
| Folder Tranparan |
Senin, 16 September 2013
Cara Membuat Read More Otomatis Artikel Di Homepage
'Skylib, Cara Membuat Read More Otomatis Artikel Di Homepage - Ada beberapa cara untuk membuat Read More otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah postingan artikel blog Di Homepage/Beranda.
Fungsi dari Read More Otomatis itu sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang diinginkan.
Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di Homepage (Beranda).
Perhatian: bagi yang sudah memasang auto read more yang ada sebelumnya harus dihapus terlebih dahulu.
- Login Ke Blogger.
- Klik Template, Backup template untuk jaga2 bila diperlukan, atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
- Klik Edit HTML.
- Klik Kiri 1 x Dimana saja dalam kotak template.
- Klik Ctrl+F (Supaya mempercepat pencarian kode), Dan cari kode berikut ]]></b:skin>. Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
- Masukan Kode berikut diatas ]]></b:skin>
/* Gambar autoread more
----------------------------------------------- */
.post-thumbnail { width:100px; height:70px; float:left; margin:0px 10px 0px 0px; }
- Kemudian Cari Kode <data:post.body/> Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web, biasanya yang kedua (ke-2), kalo tidak berhasil mungkin yang ke-3.
- Hapus Kode <data:post.body/> yang kedua/ketiga (salahsatu) dan Ganti dengan kode dibawah ini.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPYHxeFu93VSSfFhH4W-ip6ctxF1n-6H2F-bNPTaGM5WhmrM-gKh6qKi9GJaoM4FzRmFUzZj9VB4DIgBdqFxXNJHHcTC4YLam2DMXcJfSN7HPRjZYNLLouB9oASEFa84mL7YzfYYu1lU/s1600/no+image.jpg'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya »</a>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
- Untuk Merubah Ketinggian deskripsi artikel text, Cari Kode .post-body { atau .post {Masukan atau Ganti { line-height: 1.8; ...bisa juga ditulis line-height: 23px; atau disesuaikan ketinggiannya.
- Save Template, dan lihat hasilnya.
Itulah cara membuat Cara Membuat Read More Otomatis Artikel Di Homepage, semoga bermanfaat.
[ Sumber ]
Kamis, 05 September 2013
Mengganti Tampilan Scroll Bar Menjadi Keren di Blog
'Skylib, Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog - Bagi Anda yang ingin merubah scroll bar anda menjadi lebih menarik dengan menggunakan script CSS Anda bisa merubah scroll bar Blog anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!
Buka Blogger.com > Rancangan/Design > Edit HTML
Cari kata ]]></b:skin> untuk mempermudah pencarian dengan menekan tombol CTRL + F
Paste code berikut di atas ]]></b:skin>
::-webkit-scrollbar-thumb {background-color: #A52A2A;-moz-border-radius: 10px;border-radius: 10px;}
Paste diatas tinggal anda ganti saja beberapa code yang saya kasih warna merah, ini berguna untuk mengganti warnanya. Beberapa browser mungkin tidak support dengan kode ini tapi saya memakai Google Chrome code ini berfungsi kok!
~Semoga Bermanfaat~
[ Sumber ]
Senin, 02 September 2013
Cara Menghapus Pilihan Earlier Version Of Windows di Windows 7
'Skylib, Cara Menghapus Pilihan Earlier Version Of Windows di Windows 7 - Sudah puas dengan Tampilan Windows 7 (Seven), masih ada yang aneh gak mungkin saat booting. Untuk saya pribadi, masih ada yang janggal dengan Boot loader saya. Ya, benar .ada 2 Pilihan Booting. Booting pertama mengarah ke Windows 7. Booting kedua mengarah ke Windows XP. Saya merasa terlalu banyak pilihan ketika puas dengan OS Windows 7 yang sudah saya pakai, karena itu saya mau menghapus pilihan Booting di atas. Dengan kata lain, gak usah milih dan langsung mengarah ke OS (Operating System) Windows 7. Begini Cara yang saya pakai (tanpa Software ):
1. Masuk ke windows 7
Masuk ke Halaman "Command Prompt" ketik "bcdedit" (tanpa tanda kutip). Lihat gambar di bawah ini
%5B1%5D.png)
di situ akan muncul keterangan mengenai OS yang ada di komputer anda. Dan untuk Windows XP, akan ada "Windows Legacy OS Loader" dengan identifier (Ientifikasi/di kenali sebagai) {ntldr}. Namun sebelum ke langkah berikutnya, buat backup BCD dengan Command: bcdedit /export C:\BCDku
2. Untuk menghapus Pilihan “Earlier Version Of Windows” atau Windows XP gunakan perintah di bawah ini dengan mengetik di Command Prompt. bcdedit /delete {ntldr} /f. Setelah tekan "enter" akan ada pesan “The operation completed successfully”, berarti Windows XP Loader sudah berhasil di hapus. Setelah ini Restart komputer anda dan Pilihan “Earlier Version Of Windows” sudah tidak ada lagi. Kalo kurang jelas atau ada pertanyaan, mungkin perlu dengan gambar Tulis aja di comment. OK! Selamat mencoba.
[ Sumber ]
Langganan:
Postingan (Atom)
.jpg)
