Archive For Juli 2012

Beranda » Archive for Juli 2012

Minggu, 29 Juli 2012

Cara Membuat Tombol Scroll To Top di blog

Kali Ini saya akan menjelaskan cara membuat Tombol Scroll To Top di blog, dan hasilnya bisa anda lihat di bawah ini ata lebih jelanya coba lihat saja di blogini

Tertarik membuatnya silahkan anda ikuti langka langka berikut ini Untuk Tombol Scroll To Top caranya adalah sebagai berikut :

Login ke Blogger
Rancangan
Edit HTML
Cari baris kode </body>
Copy Kode Di Bawah Ini Dan Paste di atas Kode tersebut :

<style type='text/css'>
#OW-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE'

,EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
$(function() {
    $("#OW-StoTop").scrollToTop();
});</script>
<a href='#' id='OW-StoTop' style='display:none;'>Scroll to Top </a>

4. Simpan template dan lihat hasilnya.

Jumat, 27 Juli 2012

Membuat garis pinggir pada kolom posting di blog

Muh Akram 15.29.00 Add Comment

Untuk membuatgaris pinggir pada kolom posting di blog caranya adalah sebagai berikut:

Cari baris kode .post

Untuk Lebi Lengkapnya anda bisa lihatdi bawah ini:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Ganti baris kode border-bottom:1px dotted $bordercolor;
Dengan Kode border:1px solid $bordercolor;

Keterangan Kode :

1px = nilai ketebalan garis pinggir (border)

solid = menunjukan garis pinggirnya berupa garis lurus; selain itu bisa juga berupa titik-titik (dotted) atau garis putus-putus (dashed)

$bordercolor = warna garis pinggir; jika ingin merubah warnanya, bisa mengganti kode tersebut dengan kode warna lain misal kode warna mera #ff0000

dan setelah itu baris kode padding-bottom:1.5em;
Di ganti menjadi padding:10px;

Keterangan Kode :

padding merupakan jarak antara teks atau gambar pada posting dengan garis pinggir kolom posting yang dibuat

dan hasilnya akan seperti gambra berikut ini

4. Simpan template dan lihat hasilnya.

Cara Membuat Link Facebook Tersembunyi Di Pinggiran Blog

Muh Akram 14.04.00 Add Comment

Kali Ini Saya Akan Berbagi Cara Membuat Link Facebook Tersembunyi Di Pinggiran Blog dan hasilnya bisa anda liat pada gambar berikut ini

Tertarik membuatnya caranya sangat mudah tingal ikuti langka-langka berikut ini :

Login ke blogger.com
Pilih Tata Letak
Pilih Tambahkan Gadget / Add gadget
Pilih HTML/JavaScript
Masukkan kode di bawah ini ke kolom di HTML/JavaScript tersebut

/*<![CDATA[*/

jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});

/*]]>*/

</script><style type="text/css">

.likebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}

.likebox div{border:none;position:relative;display:block;}

.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}

.likebox span a{color: gray;text-decoration:none;}

.likebox span a:hover{text-decoration:underline;}

</style><div class="likebox" style=""><div>

Keterangan : Kode Yang Berwarna Mera Ganti Genga Link Facebook Sobat
Lalu Save Template anda dan lihat hasilnya

Kamis, 26 Juli 2012

Cara Membuat Google Translate Di Blog

Muh Akram 16.18.00 Add Comment

Kali Ini Saya Akan Berbagi Cara Membuat Google Translate Di Blog dan hasilnya bisa anda liat pada gambar berikut ini

Tertarik membuatnya caranya sangat mudah tingal ikuti langka-langka berikut ini :

masuk ke blog anda
tambah gadget
tambah javascript
lalu copy paste kode ini

Lalu save template anda dan lihat hasilnya

Minggu, 22 Juli 2012

Cara Membuat Widget Daftar Isi Di Blog

Muh Akram 13.49.00 Add Comment

Kali Ini saya Akan Memberi Tahukan Cara Membuat Widget Daftar Isi Di Blog dan kalau ingin lihat hasilnya anda bisa liat sendiri hasilnya di bawah ini dan jika anda tertarik silahkan ikuti langka langka berikut

Buat Daftar Isi :

1. Login ke blogger.
2. Pilih Rancangan.
3. Tambah gadget pilih HTML/Java Script.
4. Copy Script di bawah ini:

</script><script>

var numposts = 1000;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

var shownumposts = true;

</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script></div></div>

Keterangan : warna merah ganti dengan kode gambar yang anda inginkan

dan terakhir simpat dan liat hasilnya

Kamis, 19 Juli 2012

Cara Membuat facebook like box dibawah posting

Muh Akram 18.03.00 Add Comment

Hy Sob Saya Akan Menjelaskan Cara Membuat facebook like box dibawah posting dan Hasilnya Bisa Anda Liat Di Bawah Ini Dan Jika Tertarik Membuatnya Silahkan Ikuti Langka - Langka Berikut Ini

Login ke Blogger
Masuk ke Rancangan -- Edit HTML
Centang Expand Template Widget
Cari kode <data:post.body/>
Letakkan kode dibawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fakrizzblog&width=590&colorscheme=light& show_faces=true&stream=false&header=false&height=107px' style='border:none; overflow:hidden; width:620px; height:107px; -box-shadow:0 2px 2px 2px #4eabff;-moz-box-shadow:0 2px 2px 2px #4eabff;-webkit-box-shadow:0 2px 2px 2px #4eabff;'/> </b:if>

Keterangan : Ubah kode berwarna merah dengan kode fan page anda

Setelah Itu Simpan Dan Liat Hasilnya

Sabtu, 14 Juli 2012

Kumpulan Background Bergerak

Muh Akram 05.39.00 1 Comment

Minggu, 08 Juli 2012

cara membuat Related Post Dengan Gambar

Muh Akram 22.06.00 Add Comment

kali ini saya akan menjelaskan cara membuat ara membuat Related Post Dengan Gambar , sama seperti artikel yang dulu yaitu Cara membuat Related Post Dengan Gambar Berjalan tetapi artikel yang dulu related post nya bergerak sedangkan ini tdk bergerak . Anda Bisa Lihat Hasinya Seperti Gambar Di Bawah Ini Jika Anda Tertarik Untuk Membuatnya Silahkan Ikuti Langka Langka Berikut Ini

Langsung saja simak baik" cara nya.!

Lalu masuk ke Rancangan

Lalu Edit HTML

Centang Expand Template Widget

Jika takut gagal mencoba, lebih baik download dulu template nya

Kemudian cari kode </head> (untuk mempermudah pencarian klik F3 atau CTRL + F pada keyboard)

Copy kode dibawah ini dan letakan tepat diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;}
#related-posts a{
color:#4eabff;}
#related-posts a:hover{
color:#4eabff;}
#related-posts a:hover {
background-color:#d4eaf2;-box-shadow:0 2px 2px 2px #4eabff;-moz-box-shadow:0 2px 2px 2px #4eabff;-webkit-box-shadow:0 2px 2px 2px #4eabff}
</style><script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/></b:if>

Keterangan: Kode yang berwarna Biru adalah kode warna, bisa kalian ganti dengan sesuka kalian.

cari kode yang mirip dengan ini. <data:post.body/>

Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Post:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Simpan template dan lihat hasil akhirnya.!

Keterangan: Tulisan yang berwarna merah bisa di ganti dengan sesuka kalian.

Tulisan Related Post: (Bisa kalian ganti dengan tulisan apa aja.)
Angka 6 (Jumlah Artikel yang di tampilkan.)